WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible accordion menus

for

From: Angela French
Date: Mar 9, 2009 10:00AM

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>