WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Implementing aria-hidden via JavaScript

for

From: Karl Groves
Date: Mar 23, 2014 4:01PM

IMO, aria-hidden is a bit unnecessary here. jQuery's toggle element
modifies the node's display property to do its showing and hiding.

So if an item is visible, it changes to 'display:none' and if it is not
visible it changes to 'display:block'.

When an item is 'display:none' it is going to also be unavailable to any
aria-enabled assistive technology anyway.

If for some reason you're dead set to have aria-hidden on there, you can
simply modify this using jQuery's attr() method.


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



--

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829