ARIA Landmarks

Using appropriate headings to identify the structure of a web page is essential for people who use assistive technologies, like screen readers; however, heading structure can become cumbersome when applied to complex pages with multiple regions, each with their own nested headings. ARIA landmarks help by adding additional markup to identify region level-structure, which allows headings to be reserved for providing structure within a region. Screen reader users can navigate by landmark, providing a way to jump from region to region.

Remember: ARIA landmarks add additional region-level markup. They do not replace headers!

Using Landmark Roles

ARIA landmarks are applied to html container elements (<div>, <nav>, etc.) by defining an additional attribute for the container. For example:

<div role="main">

Most page content should be contained within an ARIA landmark role. There are eight roles:

  1. banner
  2. main
  3. navigation
  4. complementary
  5. search
  6. form
  7. contentinfo
  8. application

The first five roles should be used on most websites. form and contentinfo should be used when it seems useful to do so. The application landmark role should only be used for custom ARIA widgets.

ARIA Landmark Roles and HTML 5

HTML 5 adds additional container types to enhance the semantic markup of a page; however, there is no even support for these additional elements across differing web browsers. Browsers that do not support HTML 5 will treat the additional containers as <div> elements. Until uniform HTML 5 support, and in order to provide backward compatibility, ARIA landmarks should be used along with the new container tags. Below is a table with the five most commonly used ARIA landmarks and their HTML 5 equivalents.

banner none Once per page on an appropriate <header> or <div>
navigation <nav> Label if more than one
main none Once per page on main content container
complementary <aside> May be appropriate to put on other containers
search none Attach to <form> used for site search

For More Information

For more information about ARIA landmarks, refer to the Landmark Roles section of the ARIA specification.