This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

Labeling Regions

in Page Structure Tutorial

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:

Editor’s Note Figure out how to display links now that the sidebar is not available anymore.

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.

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.

Editor’s Note Figure out how to display links now that the sidebar is not available anymore.

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.