Labeling Regions

Using aria-labelledby

Use aria-labelledby to point to an existing element by our (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:

• WAI-ARIA Overview
• Notes on Using ARIA in HTML

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

View a complete code example with regions and labels.

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.