Accessible Navigation

Accessible Navigation

HTML + UX + Accessibility

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 like this...

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

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