Status: This is an in-progress, unapproved draft.
To help people navigate around the page, they need to be able to identify distinctive page sections such as navigation, main content, headers, and footers. More important parts of a page should be marked up on every website, for example navigation.
Both, HTML5 and WAI-ARIA, provide mechanisms to mark up such sections in a meaningful way: HTML5 defines distinctive elements for certain types of page sections, for example,
<nav>. WAI-ARIA utilizes the
role attribute to add such information. It is mainly used by assistive technologies. Sometimes the WAI-ARIA landmark roles map directly to HTML5 elements, but this is not always the case.
Some HTML elements are should also carry implicit landmark roles by default, but this is not broadly supported at the time of writing, so the role should be stated explicitly. If HTML4 is used,
<div> elements with ARIA landmark roles and/or headings are commonly used to identify page sections.
Common page sections
Main page header
Most websites have a logo and other information 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 they can be used in other situations. Usually there will only be one
banner role per page.
Sections of the page that provide navigation should be marked up using the HTML5
<nav> element which is supposed to carry an implicit
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.
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.
The term “page footer” refers to a section on the page that contains auxiliary information such as 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.
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.
search role marks the “search tool” of the website. This should include not only the actual input field, but also the search button and options. The form below contains a
<div> element with a
search role. There is no HTML5 equivalent for this role.
Other sections of the page can be marked up as
<section> elements which carry an implicit role of
region which 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
application declares a section as a web application, as opposed to a web document. The role of application should 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 provides additional information for assistive technology and helps clarify areas of the page. This is especially important if there are multiple sections with the same role.
If a heading or some other text is present that describes the content of a section then add an
id attribute in the heading and use this as a value for the
aria-labelledby in the landmark section.
If there is no descriptive text then the
aria-label attribute should be used to label the individual landmarks.
Related WCAG 2.0 resources
The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.