Labeling Regions

in Page Structure Tutorial

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.

Using `aria-labelledby`

Use 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:

Explore other WAI-ARIA resources:

Note: This approach using headings is also backward compatible for older web browsers and assistive technologies do not process HTML5 and WAI-ARIA.

Using `aria-label`

Use the WAI-ARIA aria-label attribute to label the region. Consider this approach if the label should not appear visually on the page.

View a complete code example with regions and labels.

Using aria-labelledby

Using aria-label

Using `aria-labelledby`

Using `aria-label`