辅助功能 - 如何使 bootstrap 导航栏折叠按钮键盘可访问

Question

我已经使用 bootstrap-ui 创建了一个可折叠的导航栏，并添加了一个自定义的 high-contrast-mode 开关，样式看起来像折叠开关：

<nav class="navbar navbar-default navbar-fixed-top dark" ng-controller="NavBarController">
  <header class="container container-fluid">
    <div class="navbar-header">
      <button tabindex="0" type="button" name="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controlls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <i role="img" class="fa fa-bars"></i>
      </button>
      <high-contrast-switch class="btn navbar-btn navbar-right navbar-toggle">
        <i role="img" class="fa text-white fa-adjust" aria-label="High Contrast Mode"></i>
      </high-contrast-switch>
      <a href="/"><h1 class="logo navbar-text">Kupat Givat HaMivtar</h1></a>
    </div>
    <div uib-collapse="isCollapsed" class="navbar-collapse collapse" aria-expanded="true">
      <ul class="nav navbar-nav navbar-right">
        <li du-scrollspy="donate"><a du-smooth-scroll="donate">Donate</a></li>
        <li du-scrollspy="about"><a du-smooth-scroll="about">About</a></li>
        <li du-scrollspy="stories"><a du-smooth-scroll="stories">Stories</a></li>
        <li du-scrollspy="contact"><a du-smooth-scroll="contact">Contact</a></li>
      </ul>
    </div>
  </header>
</nav>

如您所见，我已经为折叠控件提供了一个 tabindex，但该按钮在 screen-xs 分辨率下仍然不是 keyboard-accessible。此 gif 演示如何在页面中使用 Tab 键（按顺序）

high-c切换
页面标题
我的辅助导航中的第一个导航项。

我测试过禁用辅助导航，但似乎没有冲突

如何启用 keyboard-accessibility 导航栏切换按钮？

Answer 1

原来我的标记有错别字。而不是 aria-controlls="navbar" 应该是 aria-controls="navbar"

Answer 2

按钮元素默认是键盘可聚焦的，不需要添加 tabindex 或做任何其他事情。可能您在代码中做了其他干扰的事情？

辅助功能 - 如何使 bootstrap 导航栏折叠按钮键盘可访问

Accessibility - How to make bootstrap navbar collapse button keyboard accessible

html

accessibility

wai-aria

twitter-bootstrap