Navigation between pages

Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.

Best practices

In this article I will provide several tips on how to work with navigation between pages.

Semantic HTML and Role

When creating a navigation menu, the semantic HTML tag <nav> or its equivalent role role="navigation" should be used.

Also make sure to keep the number and order of the links in the navigation menu consistent throughout all pages.

Landmarks

It's possible to have several navigation menus on a site. That's when landmarks come in handy. Mark the main navigation as such, or a side navigation menu. This makes it possible for screen reader users to find the menus within the list of landmarks.

Refrain from making all set of links on a page a navigation landmark, only the most important ones.

Visibility

To make it easier for the user to know, no matter if visible or via screen reader, which page the current/active page is, you could add a special styling for that specific link or add ARIA (like, aria-label, aria-labelledby, or aria-describedby).

Future: The aria-current attribute hopefully is official soon.

Example

<a href="#hello" aria-label="Current page: Hello, World!">
    Hello, World!
</a>

When assigning aria-label to a focusable element, like the <a>tag here, the screen reader will announce the text in the aria-label instead of the link text (which is still visible for user not using a screen reader).

Follow me for more accessibility content on:

Website - accessibilityfirst.xyz
Instagram - accessibilityfirst
LinkedIn - accessibilityfirst