Accessible Navigation

Listen to this article

0:00

When building a nav, avoid using divs with aria attributes like this…

<div role="list">
 <a href="foo.html" role="list-item">Link Label</a>
</div>

Instead, author your navigation starting with this bare-bones solution. Using semantic markup exposes the navigation structure to a wider range of assistive tech.

<nav>
 <ul>
   <li>
     <a href="#">Nav item 1</a>
   </li>
 </ul>
</nav>

Using the correct aria attributes in conjunction with the semantic elements will provide a more robust and informed experience for assistive tech users.

<h2 id="primaryMenu" class="sr-only">Primary Menu</h2>
<nav aria-labelledby="primaryMenu">
 <ul role="menu">
   <li>
     <a href="foo.html" role="menuitem">Link Label</a>
  </li>
 </ul>
</nav>
<nav aria-label="Main navigation">
 <ul role="menu">
   <li>
     <a href="#" role="menuitem">Nav item 1</a>
   </li>
 </ul>
</nav>