Regions are a part of page markup that help screen reader users navigate sections of a page.
Regions make content accessible by identifying major page sections to assistive technologies and tools for reading on the web.
Using regions to identify page areas is required by digital accessibility standards, as described in Success Criterion 1.3.1 Info and Relationships.
Best Practices
There are two methods for labeling regions: HTML5 elements and WAI-ARIA landmark roles. It is best to use both methods for broad compatibility with web browsers and assistive technologies. This practice is recommended by the W3C, the organization that maintains web standards and accessibility standards.
Both methods can be combined as in the examples below. The ellipses represent the entire code for the section you're identifying:
<header role="banner">…</header><main role="main">…</main><nav role="navigation">…</nav><section aria-label="More Information"><footer role="contentinfo">…</footer>Regions to Identify
| HTML5 | WAI-ARIA role | When to use, notes |
|---|---|---|
| <header> | role="banner" | Banner, branding |
| <aside> | role="complementary" | Any content that is complementary, or an aside |
| <main> | role="main" | The main content of the page |
| <nav> | role="navigation" | Any navigational block. If there are multiple nav blocks on a page, each needs to have a unique name for disambiguation, labeled by: aria-label=”name of the navigation” |
| <section> | aria-label=”name of the section” | Any subsection of the main content. |
| <footer> | role="contentinfo" | The page footer |
Check Regions
When reviewing content, use an accessibility checker to determine if regions are used correctly.
Examples
For more information and examples:
- Page Regions (W3C)
- ARIA: Region Role (Mozilla Developer Network)
- ARIA: Landmark Role (Mozilla Developer Network)