To help screen reader users make sense of and navigate between the different sections of a web page, we need to add some identifying markup.
Markup
There are two methods for labeling regions: HTML5 elements and WAI-ARIA landmark roles. W3, the official group for the WCAG standards U-M follows says: "to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles."
Here are a few examples of what that would look like in practice. 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: |
<section> |
aria-label=”name of the section” |
Any subsection of the main content. |
<footer> |
role="contentinfo" |
The page footer |
For more information, see:
- Page Regions - W3
- ARIA: Region Role - Mozilla Developer Network
- ARIA: Landmark Role - Mozilla Developer Network