Page Regions

Mark up different regions of web pages and applications, so that they can be identified by web browsers and assistive technologies.

Most websites have a region at the top of every page that contains site-wide information, such as the website logo, search function, and navigation options. HTML5 provides the <header> element, which can be used to define such a region.

Note: If the <header> element is used inside <article> and <section> elements, it is not associated with the whole page, but only with that specific <article> or <section>.

Code snippet:
<header><img src="/images/logo.png" alt="SpaceBear Inc."></header>

Similar to the page header, most websites also have a region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. HTML5 provides the <footer> element, which can be used to define such a region.

Note: If the <footer> element is used inside <article> and <section> elements, it is not identified as the footer for the whole page but only relates to that specific <article> or <section>.

Code snippet:
<footer><p>&copy; 2014 SpaceBears Inc.</p></footer>

The HTML5 <nav> element can be used to identify a navigation menu. A web page can have any number of navigation menus. Use labels to identify each navigation menu.

Code snippet:
<nav aria-label="Main Navigation"></nav><nav aria-labelledby="quicknav-heading">
  <h5 id="quicknav-heading">Quick Navigation</h5></nav>

Main content

Use the HTML5 <main> element to identify the main content region of a web page or application.

Code snippet:
<main>
  <h1>Stellar launch weekend for the SpaceBear 7!</h1></main>

Complementary content

Use the HTML5 <aside> element to identify regions that support the main content, yet are separate and meaningful sections on their own; For example, a side note explaining or annotating the main content.

Code snippet:
<aside>
  <h3>Related Articles</h3></aside>

Page Regions in HTML5 Using WAI-ARIA

Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, 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.

Code snippet: Examples in HTML5
<header role="banner"></header>
<main role="main"></main>
<nav role="navigation"></nav>
<footer role="contentinfo"></footer>

Page Regions in HTML4 Using WAI-ARIA

If HTML5 cannot be used or if an HTML4 page is retrofitted to improve accessibility, add WAI-ARIA code to div elements that function as their HTML5 counterparts, for example:

Code snippet: Examples in HTML4
<div class="header" role="banner"></div>
<div id="main" role="main"></div>
<div id="nav" role="navigation"></div>
<div id="footer" role="contentinfo"></div>

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

  • 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

  • 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

Techniques: