0

キーボードでアクセスできるようにするために必要なドロップダウンメニューがありますが、その方法がわかりません。私のCSSには、すべてのリンクにa：focusがあります。タブキーをjavascriptにハードコーディングする代わりに、javascript / jqueryでonfocusを使用するのが最善だと思いますよね？もしそうなら、フォーカスセレクターを使用するためにコードに何をしますか？メニューは、誰かがタブで移動したときにドロップする必要があります。次に、タブで移動したとき（または、40を超えるリンクがあるため、エスケープキーを押すことができます）、メニューを閉じる必要があります（マウスオーバー/マウスアウトの場合と同じようにする必要があります）。 ）。 メニュー例

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"; }
};


};

htmlは次のとおりです。

    <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>
4

2 に答える 2

1

リンクにtabIndexを使用してみてください。(しかし、steveaz が指摘しているように、それらは既にフォーカス可能になっているはずです)

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

メニューの場合は、イベントとtabIndex. $menuメニューのセレクターです。それが何であるかわかりません。必要に応じて調整してください。

$('#bar').attr('tabIndex', 0)
  .focus(function() { $menu.show(); })
  .keydown(function(e) { e.which == 27 && $menu.hide(); }) // ESC
  .blur(function() { $menu.hide(); });
于 2012-11-15T22:44:43.393 に答える
0

次のようなことを試してみます...ボタンバーにタブインデックスを付けてから、フォーカス/ぼかし機能をバインドしてボタンバーメニューを表示および非表示にします

$(document).load(function(){

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

});
于 2012-11-15T22:50:53.523 に答える