2.26 Multiple navigation landmarks that do not use unique labelling (M)

FIGURE 2.58: Landmarks highlighted on the Monitoring page

FIGURE 2.59: Main landmarks highlighted on the Monitoring page

2.26.1 WCAG 1.3.1 (A), 4.1.1 (A) - Desktop

There are multiple landmarks on the Monitoring page that do not have a unique label. On the Overview Monitoring page, there are different Navigation landmarks with the same name. Similarly, on the Individual Patient’s page of the Monitoring journey, there are multiple Main landmarks.

This would pose problems to assistive technology users who use landmarks to quickly identify the structure of a page. Screen reader users, for instance, use landmarks to quickly skim through a page and navigate to the desired content.

With multiple regions using the same landmark, users wouldn’t be able to identify the purpose of each one. This would make it harder for them to navigate quickly to the desired content.

2.26.2 Code Snippet

<nav _ngcontent-wem-c192="" class="navPagination navPagination--mt26"> </nav>

2.26.3 Recommendation

Documents should have only one main landmark.

Provide unique labels for the different <nav> elements so that assistive technology users can quickly understand the purpose of each landmark. For instance: <nav _ngcontent-wem-c192="" class="navPagination navPagination--mt26" aria-label="Page Navigation"> </nav>

2.26.4 Resources

• BingO Bakery: Fun animated video on importance of using headings, landmarks, and tabs.
• MDN Web Docs on multiple navigation landmarks.

2.26.5 Spot check: December 2022

This issue is unresolved. Please refer to the recommendation above to fix the issue.

---