10/2/2019 - 8:31 AM

Accessibility for Hamburger Menu


    <a="#menu" id="menu-toggle" class="menu-toggle" aria-label="Open the menu">
      <i class="fa fa-bars" aria-hidden="true"></i>
    • aria-label is a text label that is not visible on the screen, but will still let screen reader know that this link here is for opening/triggering the menu
    • aria-hidden=”true” is for hiding the hamburger icon for screen reader, so the browser will skip this icon