Page Sections

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

To help people navigate around the page, they need to be able to identify distinctive sections on the page. There are some more important parts of a page that should be marked up on every website, for example navigations. Both, HTML5 and WAI-ARIA, provide mechanisms to mark up such sections in a meaningful way. On this page, common sections on websites are identified and marked up using those mechanisms.

HTML5 provides distinctive elements for certain types of page sections while WAI-ARIA utilizes the role attribute to add such metadata, which is mainly aimed at assistive technologies. Sometimes the so called WAI-ARIA landmark roles map directly to HTML5 elements, but this is not always the case.

Some HTML elements are supposed to also carry implicit landmark roles, but this is not broadly supported at the time of writing, so the role should be stated explicitly. If HTML4 is used, <div> elements and/or headings are commonly used to identify page sections.

Common page sections

Main page header

Most websites have a logo and some other information about the page at the top of the page. Sometimes a search or navigation can be included. This main page header should be identified by an HTML5 <header> element and an explicit banner role. The banner role is not implicit for <header> elements as there could be several such elements but usually there will only be one banner role.

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

Sections of the page that provide navigation should be marked up using the HTML5 <nav> element which is supposed to carry an implicit role of navigation. It can contain the main navigation menu or other collections of links whose purpose is to navigate inside the page or the website as a whole. See the Navigation Menu tutorial for more information on menus. It can be used multiple times on a page.

Code snippet: 
<nav role="navigation">
  …
</nav>

Main content

Main content of a document should be wrapped in a <main> element that implicitly carries a main role. In almost all cases a page will have only one instance of this section.

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

Page footer

The term page footer refers to a section on the page that contains auxiliary information like (links to) copyright or privacy statements. In HTML5 it is usually marked up as a <footer> element. It does not carry an implicit role but it makes sense to add contentinfo to distinguish the page <footer> element from other uses of <footer> in the page, for example as the footer of an article.

Code snippet: 
<footer role="contentinfo">
  <p>&copy; 2014 SpaceBears Inc.</p>
</footer>

Content complementary to the main content

Any section of the document that supports the main content, yet is separate and meaningful on its own, should be marked up using an <aside> element, which does not carry an implicit role as it can be used in other circumstances as well. A role of complementary can be added to sidebars or links to related content to make the purpose of the section more explicit.

Code snippet: 
<aside role="complementary">
  <h3>Related Articles</h3>
  …
</aside>

Search section

The search role marks the “search tool” of the website, this means not only the actual input field, but also the search button and options, can be included in this section. The form below contains a <div> element with a search role. There is no HTML5 equivalent for this role.

Example:
Code snippet: 
<form action="…">
  <div role="search">
    <input type="search" aria-label="Search"> <button type="submit" style="float:none;">Search</button>
  </div>
</form>

Generic sections

Other sections of the page can be marked up as <section> elements which carry an implicit role of region which basically is a generic landmark. Be careful not to overuse it, as it adds a lot of additional “noise” when encountered using a screen reader. Use it to group items together. It should also always be labeled.

A note on the application role

The role application declares a section as a web application, as opposed to a web document. The role of application should only be used with caution, as it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.

Labeling sections

Especially if there are multiple sections with the same role, like multiple navigation sections or sidebars, it is important to label them by using one of the techniques shown below.

Using aria-labelledby

If a heading or some other text is present that can properly describe the content of a section, it can be referenced by adding an id attribute to the heading and using that id value as a value of the aria-labelledby of the landmark section.

Code snippet: 
<nav role="navigation" aria-labelledby="navheading">
  <h3 id="navheading">Main menu</h3>
  …
</nav>

Using aria-label

If no describing text is present, the aria-label attribute should be used to label the individual landmarks.

Code snippet: HTML4
<nav role="navigation" aria-label="Main menu">
  …
</nav>

Techniques: