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

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University