Accessible Navigation

Accessible Navigation

HTML + UX + Accessibility

Play this article

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>

Instead, author your navigation like this...

<nav aria-labelledby="primaryMenu">
    <h2 id="primaryMenu" class="sr-only">Primary Menu</h2>
            <a href="foo.html">Link Label</a>

Using semantic markup exposes the navigation structure to a wider range of assistive tech.