Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.
In this article I will provide several tips on how to work with navigation between pages.
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.
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.
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,
Future: The aria-current attribute hopefully is official soon.
<a href="#hello" aria-label="Current page: Hello, World!"> Hello, World! </a>
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).