Twitter bootstrap 引导3个选项卡-可访问性

根据WAI，是否无法访问引导3选项卡

我找到了用于选项卡键盘行为的WAI-ARIA规范：

基本上是说：

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

因为它似乎无法满足这些要求。 按左右箭头键，不会产生任何效果

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

---

我必须自己实施这种行为吗？还是我缺少了一个为我做所有艰苦工作的magic attribute\class？

因为Bootstrap 3中没有WAI-ARAI的官方支持。如

@ZimSystem所述，可以使用role=“tablist”、role=“tab”等来完成

使用属性的JS解决方案
role=“tablist”，role=“tab”
，请尝试以下操作：

检查演示

HTML:

这是一个观点问题。我不认为Bootstrap特别声称（“只需最少的额外努力”），我认为它可以使用role=“tablist”、role=“tab”等来完成。。如果我要在Vue.js中使用它，javascript部分是否会在挂载的钩子中？
<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>

$(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"
  });
});