3.4 Region landmarks do not use unique labelling (M)
3.4.1 WCAG 1.3.1 (A), 4.1.1 (A) - Desktop
On the Case Summary Overview page, there are multiple regions that are referenced by the same label (‘Important’).
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 information they wish to see.
FIGURE 3.4: Duplicate region landmarks highlighted on Case Summary Overview page
3.4.2 Code Snippet
(shortened for improved readability)
<div role="region" aria-labelledby="govuk-notification-banner-title">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
</div>3.4.3 Recommendation
It is good practice to avoid using ARIA when the same function can be achieved using native HTML. We recommend making use of the <section> element to specification instead of using ARIA roles. Each section should be identified by a unique heading element.
If using ARIA roles, provide unique labels for the different region elements so that assistive technology users can quickly understand the purpose of each landmark.
For a positive example, see Navigation landmarks have unique labels (P)