Bootstrap 3 个标签 - 辅助功能

Question

Bootstrap 3 个选项卡是否根据 WAI 无法访问？

我找到了制表符键盘行为的 WAI-ARIA 规范：

基本上说：

When focus is on a tab element in a horizontal tab list: Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below). Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).

似乎 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>

我必须自己实现这个行为吗？还是我错过了一个为我完成所有艰苦工作的魔法 attribute\class？

Answer 1

因为 Bootstrap 中没有官方支持 WAI-ARAI 3. 如 @ZimSystem that it could be done using role="tablist", role="tab" etc..

所述

使用属性 role="tablist", role="tab" 的 JS 解决方案，试试这个：

查看演示 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"
  });
});

Bootstrap 3 个标签 - 辅助功能

Bootstrap 3 Tabs - Accessability

wai-aria

twitter-bootstrap