Labeling Regions

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:

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

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.

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

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:

Success Criteria:

Techniques: