WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible accordion menus

for

From: Seth Kane
Date: Mar 9, 2009 10:25AM

I can tell you right now it won't work because display: none omits
everything from jaws.
http://juicystudio.com/article/screen-readers-display-none.php

Try using off page positioning instead if you continue to go this route.


Seth Kane Sr. Presentation Layer Developer

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Monday, March 09, 2009 10:58 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Accessible accordion menus

It just so happens that I'm working on one myself that would be nice if
a JAWS user could test it. I would ge grateful if you would. Here is
the complete html test file.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Expanding menus</title>
<script type="text/javascript">
function expandItem(item) {
document.getElementById(item).style.display document.getElementById(item).style.display == ' ||
document.getElementById(item).style.display == 'none' ? 'block' :
'none';

if (document.getElementById(item).style.display == 'block') {
/*this is an attempt to assure accessibility - to make
the screen reader take focus on the news item
when a news title has been clicked. */
document.getElementById(item).focus();
}
}
</script>
<style type="text/css">

div.submenu {
display:none;
}
</style>
</head>
<body>
<ul id="navlist">
<li class="noimage" id="active"><a href="#" id="current">Home</a></li>

<li class="noimage" >
<img src="../images/b_About.jpg" alt="About WELA"/>

<a href="About" onclick="expandItem('About');return
false;">
<img src="../images/downarrow.jpg" alt="expand
submenu 1" /></a>
<div id="About" class="submenu">
<ul>
<li><a href="#">sub link #1</a></li>
<li><a href="#">sub link #2</a></li>
<li><a href="#">sub link #3</a></li>

</ul>


</div>

</li>

<li class="noimage">
<img src="../images/b_Apply.jpg" alt="About WELA"/>
<a href="Apply" onclick="expandItem('Apply');return false;">
<img src="../images/downarrow.jpg" alt="expand submenu 2" /></a>
<div id="Apply" class="submenu">stuff in submenu 2</div>
</li>
<li class="noimage"><a href="#">WELA Graduates</a></li>
<li class="noimage"><a href="#">For Current Members</a></li>
</ul>

</body>
</html>








-----Original Message-----
From: Ritz, Courtney L. (GSFC-7500) [mailto: <EMAIL REMOVED> ]
Sent: Thursday, March 05, 2009 1:27 PM
To: WebAIM Discussion List
Subject: [WebAIM] Accessible accordion menus

Hi all,



Can anyone point me to some examples of accessible accordion-style
menus? I hope I'm terming them correctly. I'm referring to menus where
there's a link or button that, when activated, expands into more links
or buttons on the current page.

A developer of one of our sites here has used some Javascript to create
one that is not accessible, and though I'm a JAWS user and knowledgeable
in Section 508 and accessibility, I am not skilled in coding much more
than basic HTML.



Unfortunately, I cannot provide a link to the current version of the
menu being used, because it is behind a firewall, which is why I'm
hoping to direct the developer to some examples of accordion menus that
are accessible.



Any help would be greatly appreciated. Thanks.



Courtney