引导程序导航栏按钮上的可访问性错误

Question

The hamburger menu on a Boostrap menu is showing up in the Web Accessibility Tool, at wave.webaim.org, as an error: A button is empty or has no value text.

Any suggestions on how to fix this?

 <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

Make use of the .sr-only class. Under Conveying the icon's meaning to assistive technologies (you'll have to scroll down some):

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>