如何通过以编程方式设置aria-expanded和aria-hidden属性来访问现有的展开/折叠JS菜单?

时间:2014-11-13 18:01:35

标签: javascript accessibility

我不熟悉JS,但我希望有人可以通过以编程方式将aria-expanded和aria-hidden属性设置为现有的JS来向我展示如何使现有的展开/折叠JS菜单可访问。注意:我无法编辑菜单的HTML。谢谢。

// JavaScript Document 
imgout=new Image(9,9);
imgin=new Image(9,9);

/////////////////BEGIN USER EDITABLE///////////////////////////////
    imgout.src="images/u.gif";
    imgin.src="images/d.gif";
///////////////END USER EDITABLE///////////////////////////////////
//this switches expand collapse icons
function filter(imagename,objectsrc){
    if (document.images){
        document.images[imagename].src=eval(objectsrc+".src");
    }
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 

    if (document.getElementById) { // DOM3 = IE5, NS6
        if (document.getElementById(id).style.display == "none"){
            document.getElementById(id).style.display = 'block';
            filter(("img"+id),'imgin');         
        } else {
            filter(("img"+id),'imgout');
            document.getElementById(id).style.display = 'none';         
        }   
    } else { 
        if (document.layers) {  
            if (document.id.display == "none"){
                document.id.display = 'block';
                filter(("img"+id),'imgin');
            } else {
                filter(("img"+id),'imgout');    
                document.id.display = 'none';
            }
        } else {
            if (document.all.id.style.visibility == "none"){
                document.all.id.style.display = 'block';
            } else {
                filter(("img"+id),'imgout');
                document.all.id.style.display = 'none';
            }
        }
    }
}

<!-- HTML Source -->
<div class="box" >
  <div class="boxHead">
    <h2><a href="index.php">First Responders</a></h2>
  </div>
  <ul class="sidebarNav">
    <li class="order"><a href="order.html">Order FREE Materials</a></li>
    <li class="safetyinfo"><a href="safety/index.html">Advanced Safety Info</a>
      <ul>
        <li><a href="safety/overhead.html" class="overhead">Overhead Line Safety</a></li>
        <li><a href="safety/downed.html" class="downed">Downed Power lines</a></li>
        <li><a href="safety/carpole.html" class="carpole">Car/Pole Accidents</a></li>
        <li><a href="safety/substation.html" class="substation">Substation Fires</a></li>
      </ul>
    </li>
    <li class="training"><a href="presentation/index.html">Presentation  Tools</a> </li>
  </ul>
</div>

0 个答案:

没有答案