Page Regions

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.


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



When to use, notes



Banner, branding



Any content that is complementary, or an aside



The main content of the page



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”


aria-label=”name of the section”

Any subsection of the main content.



The page footer

For more information, see: