如何使下拉菜单键盘可访问？

Question

I have a drop down menu that I need i to be keyboard accessible, but don't know how to do it. In my css I have the a:focus on all the links. I'm assuming using onfocus in the javascript/jquery would be the best instead of hard coding the tab key into the javascript, correct? If so, what would I do to the code to use the focus selector? The menu needs to drop when someone tabs into it, then when they tab off of it (or maybe they could press the escape key since there are over 40 links) it needs to shut (needs to be just like it does when mousingover/mousingout). Example Menu

if (ie === "1") {
if ($(window).width() > 949) {

$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
  {$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $("#buttonbar li").bind('touchstart', function(){
        console.log("touch started");
    });
$("#buttonbar li").bind('touchend', function(){
        console.log("touch ended");
    });
}
else {
 $("#accordion").accordion({active:false});
}
}

function showElement(d){
  var s=document.getElementById(d).style;
  if ($(window).width() < 950) {
    if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
  if ($(window).width() > 949) {
    if (s.display != "block" ) { s.display = "block"; } 
  }
}
}
function showHide() {
  var s=document.getElementById("buttonbar").style;
  if ($(window).width() > 949) {
    s.display = "block";
    document.getElementById("prospective-links").style.display = "block";
    document.getElementById("current-links").style.display = "block";
    document.getElementById("academic-links").style.display = "block";
    document.getElementById("facstaff-links").style.display = "block";
    document.getElementById("parent-links").style.display = "block";
    document.getElementById("alumni-links").style.display = "block";
    document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
    $("#buttonbar").unbind('mouseenter');
    $("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
  {$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $("#buttonbar li").bind('touchstart', function(){
        console.log("touch started");
    });
$("#buttonbar li").bind('touchend', function(){
        console.log("touch ended");
    });
}

  }
  else {
    /*$("#accordion").accordion({active:false});*/
    $("#accordion").accordion('destroy');
    $("#buttonbar").unbind('mouseenter');
    $("#buttonbar").unbind('mouseleave');
    $("#buttonbar li").unbind('touchstart');
    $("#buttonbar li").unbind('touchend');

    s.display = "none";
    document.getElementById("prospective-links").style.display = "none";
    document.getElementById("current-links").style.display = "none";
    document.getElementById("academic-links").style.display = "none";
    document.getElementById("facstaff-links").style.display = "none";
    document.getElementById("parent-links").style.display = "none";
    document.getElementById("alumni-links").style.display = "none";
    document.getElementById("visitor-links").style.display = "none";
    /*$("#buttonbar").accordion('destroy');*/

  }

}
$(window).resize(showHide); //Run when resized

jQuery(function($) {
  var path = location.pathname.substring(1);
  $('#nav a[href$="' + path + '"]').addClass('active');
});

// This section makes the skip to anchor links such as the skip to content link work in webkit browsers like Chrome and Safari
(function(linkList,i,URI) {
   if (!!(URI = document.documentURI)) {
        URI = URI.split('#')[0];
      document.addEventListener("DOMContentLoaded", function() {
         document.removeEventListener("DOMContentLoaded", arguments.callee, false);
         linkList = document.links;
         for (i in linkList) {
            if (!!linkList[i].hash) {
               if (linkList[i].hash.match(/^#./)) {
                  if ((URI+linkList[i].hash)==linkList[i].href){
                     linkList[i].addEventListener("click", function(e,f,g) {
                        f = document.getElementById(this.hash.slice(1));
                        if (!(g = f.getAttribute('tabIndex'))) f.setAttribute('tabIndex',-1);
                        f.focus();
                        if (!g) f.removeAttribute('tabIndex');
                     }, false);
                  }
               }
            }
         }
      }, false);
   }
   return true;
})();
}
else {
function showElement(d){
  var s=document.getElementById(d).style;
  if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
};


};

The html is as follows:

    <div id="buttonbar">
    <ul id="bar">
  <li id="prospective" class="rightborder"><a>Future Students</a>
    <ul id="prospective-links">
      <li><a href="/admissions">Undergraduate Admissions</a></li>
      <li><a href="/graduate">Graduate Admissions</a></li>
      <li><a href="/admissions/international">International Admissions</a></li>
      <li><a href="/transfer">Transfer Admissions</a></li>
      <li><a href="/advising-center">Academic Advising Center</a></li>
      <li><a href="/financial_aid">Financial Assistance</a></li>
      <li><a href="/info/schedules/tuition">Tuition and Fees</a></li>
      <li><a href="#">Test Item 8</a></li>
      <li class="last-item"><a href="/prospective">Go to Future Students</a></li>
    </ul></li>
      <li id="students" class="rightborder"><a href="/current">Current Students</a>
         <ul id="current-links">
            <li><a href="/info/calendars/academic">Academic Calendar</a></li>
            <li><a href="/info/schedules">Enrollment Schedule</a></li>
            <li><a href="/studentservices">Student Life</a></li>
            <li><a href="/housing">Housing</a></li>
            <li><a href="/financial_aid/workstudy.html">On-Campus Jobs</a></li>
            <li><a href="#">Bookstore</a></li>
            <li><a href="#">Athletics</A></li>
            <li class="fill"><a name="hold">&nbsp;</a></li>
            <li class="last-item"><a href="/current">Go to Current Students</a></li>
         </ul></li>
    </ul>
    </div>

Answer 1

Try using tabIndex for the links. (but as steveaz points out they should be already focusable)

$('#buttonbar a').attr('tabIndex', 0);

For the menu you'd have to add an event as well as the tabIndex . $menu is the selector for your menu(s), I'm not sure what that is, adjust to your needs:

$('#bar').attr('tabIndex', 0)
  .focus(function() { $menu.show(); })
  .keydown(function(e) { e.which == 27 && $menu.hide(); }) // ESC
  .blur(function() { $menu.hide(); });

Answer 2

I would try something like...Give your buttonbar a tab index then bind focus/blur functions to show and hide the buttonbar menu

$(document).load(function(){

    $('#buttonbar').attr('tabIndex', 0).on({
       focus: function(){
          $("#buttonbar").triggerHandler("mouseenter");
       },
       blur: function(){
          $("#buttonbar").triggerHandler("mouseleave");
       }
    });

});