Provide labels to distinguish two page regions of the same type, such as “main navigation” and “sub-navigation” menus using a
<nav> element on the same page. Labels are also used to change the default identification of page regions, for example, to identify a
<aside> region as “advertisement”. Regions that are unique, such as
<main>, do not need additional labels.
aria-labelledby to point to an existing element by its (unique)
id. The label of the region is the content of the referenced element. Every element can be a label this way. Labels should be short and descriptive. If a heading is present in the region, consider using it as the label:
Note: This approach using headings is also backward compatible for older web browsers and assistive technologies do not process HTML5 and WAI-ARIA.
Use the WAI-ARIA
aria-label attribute to label the region. Consider this approach if the label should not appear visually on the page.
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)