W3C Logo

ARIA Landmarks Example

Visually outline the landmarks and/or headings on the page using the following buttons.

General Principles

Landmarks provide a powerful way to identify the organization and structure of a web page. The structural information conveyed visually to users should be represented programmatically in the markup using landmark roles. The use of landmarks roles support keyboard navigation to the structure of a web page for screen reader users, and can be used as targets for author supplied "skip links" and browser extensions for enhanced keyboard navigation.

This section is intended to assist designers, developers and quality assurance staff in defining and understanding the importance of logical, usable, and accessible layout for assistive technologies using HTML5 sectioning elements and ARIA landmark roles.

Due to the complexity of todays web content, if using landmarks, all content should reside in a semantically meaningful landmark in order that content is not missed by the user.

Step 1: Identify the logical structure

  • Break the page into perceivable areas called "areas".
  • Typically, designers indicate areas visually using alignment and spacing of content.
  • Regions can be further defined into logical sub-areas as needed.
  • An example of a sub-area is a portlet in a portal application.

Step 2: Assign landmark roles to each area

  • Assign landmark roles based on the type of content in the area.
  • banner, main, complementary and contentinfo landmarks should be top level landmarks.
  • Landmark roles can be nested to identify parent/child relationships of the information being presented.

Step 3: Label each area

  • If a specific landmark role is used more than once on a web page, it should have a unique label.
  • If a area begins with a heading element (e.g. h1-h6), it can be used as the label for the area using aria-labelledby attribute.
  • If a area does not have a heading element, provide a label using the aria-label attribute.
  • Avoid using the landmark role as part of the label. For example, a navigation landmark with a label "Site Navigation" will be announced by a screen reader as "Site Navigation Navigation". The label should simply be "Site".