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-only课程。在Conveying the icon's meaning to assistive technologies下（您需要向下滚动一些）：

为了确保辅助技术（如屏幕阅读器）正确传达图标的含义，只应在.sr类中包含其他隐藏文本...

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

引导程序导航栏按钮上的辅助功能错误

1 个答案: