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

Question

我已经使用bootstrap-ui创建了一个可折叠的导航栏，并添加了一个自定义的高对比度模式切换，样式看起来像折叠切换：

<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，但该按钮在屏幕xs分辨率下仍无法通过键盘访问。这个gif说明了页面的标签如何聚焦（按顺序）

1. high-c toggle
2. 页面标题
3. 我的辅助导航中的第一个导航项目。



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

如何启用导航栏切换按钮的键盘辅助功能？

Answer 1

原来我的标记中有一个拼写错误。而不是aria-controlls="navbar"它应该是aria-controls="navbar"

Answer 2

按钮元素默认情况下是键盘可对焦的，无需添加tabindex或执行任何其他操作。可能你在代码中做了其他干扰的事情吗？