WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Implementing aria-hidden via JavaScript

for

From: Chris Rockwell
Date: Mar 22, 2014 3:51PM

Hi Sarah,

I'm not sure if your question is WebAIM or JavaScript related. I'm not
qualified to answer any accessibility questions, but you can use JavaScript
(jQuery) to toggle the attribute.

I've put together a demo here with some cleaned up JS:
http://jsfiddle.net/nGP4q/

Hope it helps!

Chris


On Sat, Mar 22, 2014 at 1:24 PM, Sarah Prince < <EMAIL REMOVED> > wrote:

> 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
> > > >



--
Chris Rockwell