ブートストラップ3タブ - アクセシビリティ

Question

WAIに従ってブートストラップ3のタブにアクセスできませんか？

私はタブキーボードの動作のためのWAI-ARIA仕様が見つかりました：

• https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs.html
• https://www.w3.org/TR/wai-aria-practices/#tabpanel

基本的に言っている：

フォーカスがタブ要素上にある場合水平タブリスト： 左矢印：フォーカスを移動します。前のタブ。フォーカスが最初のタブにある場合は、最後のタブにフォーカスを移動します。オプションで、新しくフォーカスされたタブをアクティブにします（下記の注を参照）。 右矢印：次のタブにフォーカスを移動します。フォーカスが最後のタブ要素にある場合は、フォーカスを最初のタブに移動します。オプションで、新しくフォーカスされたタブをアクティブにします（下記の注を参照）。

と思われるBootstrap 3 tabs documentation samplesこれらの要件を満たしていない。 左矢印キーと右矢印キーを押すと、それほど効果がありません。

<ul class="nav nav-tabs"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 

私はこの動作を自分で実装する必要がありますか？または私のためのすべてのハードワークを行う魔法の属性\クラスが不足していますか？

Answer 1

属性role="tablist", role="tab"を使用してJSと@ZimSystem that it could be done using role="tablist", role="tab" etc..

ソリューションで述べたように、ブートストラップ3のWAI-新井の公式サポートがないので、このお試しください：

チェックデモHere

HTML：

を

<div class="container"> 

    <h2>Bootstrap 3 Tabs - Accessability</h2></div> 

<div id="exTab2" class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"> 
     <a href="#1" data-toggle="tab">Overview</a> 
    </li> 
    <li><a href="#2" data-toggle="tab">Without clearfix</a> 
    </li> 
    <li><a href="#3" data-toggle="tab">Solution</a> 
    </li> 
    </ul> 

    <div class="tab-content "> 
    <div class="tab-pane active" id="1"> 
     <h3>Standard tab panel created on bootstrap using nav-tabs</h3> 
    </div> 
    <div class="tab-pane" id="2"> 
     <h3>Notice the gap between the content and tab after applying a background color</h3> 
    </div> 
    <div class="tab-pane" id="3"> 
     <h3>add clearfix to tab-content (see the css)</h3> 
    </div> 
    </div> 
</div> 

JS：

$(function() { 
    var tabs = $("#exTab2"); 

    // For each individual tab DIV, set class and aria role attributes, and hide it 
    $(tabs).find(".tab-content > div.tab-pane").attr({ 
    "class": "tabPanel", 
    "role": "tabpanel", 
    "aria-hidden": "true" 
    }).hide(); 

    // Get the list of tab links 
    var tabsList = tabs.find("ul:first").attr({  
    "role": "tablist" 
    }); 

    // For each item in the tabs list... 
    $(tabsList).find("li > a").each(
    function(a) { 
     var tab = $(this); 

     // Create a unique id using the tab link's href 
     var tabId = "tab-" + tab.attr("href").slice(1); 

     // Assign tab id, aria and tabindex attributes to the tab control, but do not remove the href 
     tab.attr({ 
     "id": tabId, 
     "role": "tab", 
     "aria-selected": "false", 
     "tabindex": "-1" 
     }).parent().attr("role", "presentation"); 

     // Assign aria attribute to the relevant tab panel 
     $(tabs).find(".tabPanel").eq(a).attr("aria-labelledby", tabId); 

     // Set the click event for each tab link 
     tab.click(
     function(e) { 
      // Prevent default click event 
      e.preventDefault(); 

      // Change state of previously selected tabList item 
      $(tabsList).find("> li.active").removeClass("active").find("> a").attr({ 
      "aria-selected": "false", 
      "tabindex": "-1" 
      }); 

      // Hide previously selected tabPanel 
      $(tabs).find(".tabPanel:visible").attr("aria-hidden", "true").hide(); 

      // Show newly selected tabPanel 
      $(tabs).find(".tabPanel").eq(tab.parent().index()).attr("aria-hidden", "false").show(); 

      // Set state of newly selected tab list item 
      tab.attr({ 
      "aria-selected": "true", 
      "tabindex": "0" 
      }).parent().addClass("active"); 
      tab.focus(); 
     } 
    ); 
    } 
); 

    // Set keydown events on tabList item for navigating tabs 
    $(tabsList).delegate("a", "keydown", 
    function(e) { 
     var tab = $(this); 
     switch (e.which) { 
     case 37: 
      //case 38: 
      if (tab.parent().prev().length != 0) { 
      tab.parent().prev().find("> a").click(); 
      } else { 
      $(tabsList).find("li:last > a").click(); 
      } 
      break; 
     case 39: 
      //case 40: 
      if (tab.parent().next().length != 0) { 
      tab.parent().next().find("> a").click(); 
      } else { 
      $(tabsList).find("li:first > a").click(); 
      } 
      break; 
     } 
    } 
); 

    // Show the first tabPanel 
    $(tabs).find(".tabPanel:first").attr("aria-hidden", "false").show(); 

    // Set state for the first tabsList li 
    $(tabsList).find("li:first").addClass("active").find(" > a").attr({ 
    "aria-selected": "true", 
    "tabindex": "0" 
    }); 
});