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.

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:
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

For more information, see: