bootstrap 导航栏按钮的辅助功能错误

Question

Boostrap 菜单上的汉堡包菜单在 Web 辅助工具中显示为错误：wave.webaim.org：按钮为空或没有值文本。

关于如何解决这个问题有什么建议吗？

 <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>
 </div>

Answer 1

利用.sr-onlyclass。在 Conveying the icon's meaning to assistive technologies 下（您必须向下滚动一些）：

To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class...

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="sr-only">Toggle Menu</span>
       </button>
</div>

bootstrap 导航栏按钮的辅助功能错误

Accessibility error on bootstrap navbar button

html

accessibility

twitter-bootstrap-3