cristinafsanz
10/2/2019 - 8:31 AM

Accessibility for Hamburger Menu

hamburger-menu-accessibility.md
content_copyfile_download
  • Rendered
  • Source

  • https://medium.com/@linlinghao/accessibility-for-hamburger-menu-a37fa9617a89

    <a="#menu" id="menu-toggle" class="menu-toggle" aria-label="Open the menu">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
    • 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
hamburger-menu-accessible-other-way.html
content_copyfile_download
<!-- https://codepen.io/jonraedeke/pen/WRwJQX -->

<div class="nav__bar">
  <input type="checkbox" id="toggle" aria-hidden="true" />
  <label for="toggle" class="nav__icon" aria-hidden="true">
    Expand the menu
    <span class="nav__icon-line"></span>
    <span class="nav__icon-line"></span>
    <span class="nav__icon-line"></span>
  </label>
  <nav role="navigation" class="nav">
    <ul class="nav__items">
      <li class="nav__item"><a href="#">Item 1</a></li>
      <li class="nav__item"><a href="#">Item 2</a></li>
      <li class="nav__item"><a href="#">Item 3</a></li>
    </ul>
  </nav>
</div>