WebAIM - Web Accessibility In Mind

E-mail List Archives

Implementing aria-hidden via JavaScript

for

From: Sarah Prince
Date: Mar 22, 2014 11:24AM

Hi,

I am trying to figure out how to make JAWS read my mobile-style menu
correctly by implementing a conditional aria-hidden feature.

The navigation list (or, menu items) is hidden by default and appears when
the hamburger icon is clicked.

The ideal output is aria-hidden would appear in the markup as true or
false, depending on whether the navigation list has been triggered or not.

Here is my current markup:

<!-- navigation button that only appears under a smaller screen
resolution -->
<div role="navigation" aria-label="Main">
<div class="mainNavTogBtn"><a href="#"><img src="/img/icon-menu.png"
alt="Navigation Menu"></a></div>
<!--To make search option available, uncomment this code (Part 1/2):
<div class="srchTogBtn"><a href="#"><img src="/img/icon-search.png"
alt="Search"></a></div>-->
<!-- //end of navigation button markup -->

<!-- site navigation -->
<div id="mainNavCtnr">
<div id="mainNavCtnd">
<nav id="nav">
<div id="mainNavTogCont"* (NOT included but would like
aria-hidden="true or false toappear here depending on click above")*>
<!-- navigation items that appear and disappear depending on click
-->
<ul>
<li><a href="#mainCont">Skip to Main Content</a></li>
<li><a href="/">Web Development</a></li>
<li><a href="web-writing.htm">Web Writing Styleguide</a></li>
</ul>
<!-- // navigation items -->
</div>
<!-- mobile menu(s) --></div>
</nav><!--end of #nav-->
</div><!--end of .mainNavCtnd-->
</div><!--end of .mainNavCtnr-->
<!-- // site navigation -->

And JS:

$('.mainNavTogBtn a').click(function(){
$('#mainNavTogCont').toggle();
return false;
});
$('.srchTogBtn a').click(function(){
$('#srchTogCont').toggle();
return false;
});

*Is there a simple way to add JS for conditional aria-hidden values as
bolded/described above?*

Thanks,
Sarah