Labeling Regions

Most regions on a page need to be labeled. This is especially important when there are multiple regions of the same type on one page, such as multiple navigation options. WAI-ARIA provides simple mechanisms to label a region, enabling users to easily navigate around the page.

Sections should also be organized using headings.

Using `aria-label`

Use the WAI-ARIA aria-label attribute to label the region. This approach can be used if the label is not supposed to appear visually on the page.

Code snippet:

<nav aria-label="Main Navigation">
  …
</nav>

Using `aria-labelledby`

Use the WAI-ARIA aria-labelledby to reference an existing element – like a heading – by its (unique) id. The content of the referenced element is then used as the label. A heading allows users to find the region in multiple ways.

Code snippet:

<nav aria-labelledby="regionheading">
  <h3 id="regionheading">On this Page</h3>
    …
</nav>

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:

Success Criteria:

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)

Techniques:

Labeling Regions

Using aria-label

Using aria-labelledby

Related WCAG 2.0 resources

Using `aria-label`

Using `aria-labelledby`