Question

根据WAI，无法访问Bootstrap 3选项卡吗？

我找到了标签键盘行为的WAI-ARIA规范：

基本上说：

当焦点位于水平选项卡列表中的选项卡元素时：向左箭头：将焦点移至上一个选项卡。如果焦点位于第一个选项卡上，则将焦点移至最后一个选项卡。（可选）激活新聚焦的选项卡（请参阅下面的注释）。右箭头：将焦点移动到下一个选项卡。如果焦点位于最后一个选项卡元素上，则将焦点移至第一个选项卡。（可选）激活新聚焦的选项卡（请参阅下面的注释）。

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

由于在Bootstrap 3中没有WAI-ARAI的官方支持。正如@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选项卡 - 可访问性

1 个答案: