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 page 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 of content which designers typically indicate visually using alignment and spacing.
• Areas 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 landmarks

• If a specific landmark role requires a label or is used more than once on a page, provide each instance of that landmark with a unique and descriptive label. The label should be short and help people understand the content in the region.
• There is one rare circumstance where providing the same label to multiple instances of a landmark can be beneficial: the content and purpose of each instance is identical. For example, a large search results table has two sets of identical pagination controls -- one above and one below the table, so each set is in a navigation region labelled Search Results. In this case, adding extra information to the label that distinguishes the two instances may be more distracting than helpful.
• If a landmark is only used once on the page it may not require a label. See Landmark Roles section below.
• If an landmark region begins with a heading element (e.g. h1-h6) it can be used as the label for the region using aria-labelledby.
• If a landmark requires a label and does not have a heading element, provide a label using the aria-label attribute. Note: While the title attribute can also be used to provide a label, it is not considered a best practice and is discouraged.
• Do not use 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".