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 HTML sectioning elements and ARIA landmark roles.

Due to the complexity of today's web content, if using landmarks, all perceivable 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.
• Note that wrapping the content of a modal dialog in a landmark region is unnecessary. A landmark that wraps modal content cannot provide any benefit to users because it is not perceivable unless the modal is open. In addition, when a modal is open, a landmark containing its content is superfluous because the modal itself is a container that provides both a name and boundaries.

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 an 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 an 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".