E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Implementing aria-hidden via JavaScript

Number of posts in this thread: 4 (In chronological order)

From: Sarah Prince
Date: Sat, Mar 22 2014 11:24AM
Subject: Implementing aria-hidden via JavaScript
No previous message | Next message →

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:


<div role="navigation" aria-label="Main">
<div class="mainNavTogBtn"><a href="#"><img src="/img/icon-menu.png"
alt="Navigation Menu"></a></div>




<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")*>

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

</div>
</div>
</nav>
</div>
</div>


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

From: Chris Rockwell
Date: Sat, Mar 22 2014 3:51PM
Subject: Re: Implementing aria-hidden via JavaScript
← Previous message | Next message →

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 ADDRESS 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:
>
> 
> <div role="navigation" aria-label="Main">
> <div class="mainNavTogBtn"><a href="#"><img src="/img/icon-menu.png"
> alt="Navigation Menu"></a></div>
> 
> 
>
> 
> <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")*>
> 
> <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>
> 
> </div>
> </div>
> </nav>
> </div>
> </div>
> 
>
> 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

From: Karl Groves
Date: Sun, Mar 23 2014 4:01PM
Subject: Re: Implementing aria-hidden via JavaScript
← Previous message | Next message →

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 ADDRESS 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:
>
> 
> <div role="navigation" aria-label="Main">
> <div class="mainNavTogBtn"><a href="#"><img src="/img/icon-menu.png"
> alt="Navigation Menu"></a></div>
> 
> 
>
> 
> <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")*>
> 
> <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>
> 
> </div>
> </div>
> </nav>
> </div>
> </div>
> 
>
> 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

From: Jared Smith
Date: Sun, Mar 23 2014 4:16PM
Subject: Re: Implementing aria-hidden via JavaScript
← Previous message | No next message

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

Or you can add
[aria-hidden=true] {display:none;}
to your CSS and just set the aria-hidden attribute to true/false with jQuery.

I tend to prefer this approach as it allows you to focus on setting
semantic attribute values in your scripting and let CSS handle the
visual presentation/hiding.

Jared