I am relatively new to Accessibility standards in my Front End code.
The question I have:
For accessibility, is it better to load all HTML content initially and show/hide it, via a "hidden" attribute?
Or can I dynamically load the content and fill it with the appropriate attributes?
And if so, what attributes do you recommend I add to the content to notify the user that the content has been updated and/or changed?
For example:
I have a navbar with some buttons/tabs that load the appropriate content. I can load all content and then show/hide is, similar to below:
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={show/hide associated content} -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={show/hide associated content} -->
>
Tab-2
</button>
</nav>
<div>
<!-- Content for Tab/Button #1, preloaded and hidden/shown from button click -->
<section
id="tab-content-1"
role="tab-content"
aria-labelledby="tab-1"
hidden
>
Tab Content-1
</section>
<!-- Content for Tab/Button #2, preloaded and hidden/shown from button click -->
<section
id="tab-content-2"
role="tab-content"
aria-labelledby="tab-2"
hidden
>
Tab Content-2
</section>
</div>
Or I can dynamically load the content via the tab/button click
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-2
</button>
</nav>
<div>
<!-- Dynamically load the associated Tab Content via Javascript Here
<section
id="" => dynamically set 'id'
role="" => dynamically set 'role'
aria-labelledby="=" => dynamically set 'arria-labelledby'
>
// Dynamically set Content
</section>
-->
</div>
First of all, you should use CSS display:none rather than aria-hidden to hide contents. The attribute aria-hidden should only be used in very specific situations.
I suggest to make a search on when you should and shouldn't use aria-hidden, and why it is so. Many questions already cover the topic well.
Back to your initial question, in terms of accessibility only, it doesn't change much if the content is just made visible or if it is loaded.
Use an aria-live region to tell that the content is loading, in case it may take a while to load.
However, don't use aria-live for the updated/new content itself, especially if it is long and/or contains focusable elements.
Deciding whether you should show/hide or dynamically load is mostly not a question of accessibility. It depends much more on initial and subsequent load times, as well as the level of responsiveness you expect at which moment.
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
I have made a navigational bar in Bootstrap.
It is in a file called header.html.
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li class="item active">Home</li>
<li>Courses</li>
<li>Projects</li>
<li>Publications</li>
<li>Patents</li>
</ul>
I use an include virtual on all 5 pages on the navbar to display my menu bar.
<!--#include virtual="/templates/header.html" -->
I am trying to figure out a way to apply the "item active" class to the page that the browser is viewing, all while using an included header file.
The only solution I thought of would be creating a CSS sheet per page, and only loading that specific CSS sheet depending on the page loaded.
That specific CSS sheet would style that specific li item.
I am open to using JavaScript if needed.
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-
<ul class="nav nav-tabs" role="tablist">
<li class="active">FX</li>
<li>US Bond Futures</li>
<li>US Short Term IR futures</li>
<li>Global Equity Indices</li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- FX TAB content -->
<div class="active tab-pane fade in" id="tabs-first">
</div>
</div>
The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.
What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:
$('[href="#tabs-second"]').click(function(){
$('#tabs-second').load('remoteUrl');
// or use callback/complete
$('#tabs-second').load('remoteUrl', function () {
// do something here
});
});
So, my question deals with why my drop down is not working for my navigation bar. It works when all the HTML is in one document but not when I'm using ng-include. I'm not using Bootstrap but MetroUI-CSS.
index.html
<div id="container">
<div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>
partial/header.html
<div id="site_nav_bar">
<nav class="navigation-bar dark fixed-top shadow">
<nav class="navigation-bar-content">
<item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> Home</item>
<item class="element-divider"></item>
<item class="element">About</item>
<item class="element">Contact</item>
<ul class="element-menu">
<li>
<a class="dropdown-toggle" href="#">Blogs</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>
Programming Blogs
...
</li>
So basically, when I click on Blogs it does not drop down the menu.
Bootstrap evaluates the DOM only when it's ready (ready event), therefore if your dropdown exists at this point, it would work, otherwise if it will be added to the DOM later on (using ng-include for instance) it won't.
Behind the scenes ng-include manipulates the DOM for you and performs an AJAX request to retrieve the HTML you want to include. bootstrap is not aware of that and won't wait for the DOM to be updated.
to avoid that use bootstrap-ui