General Principles of Landmark Design
Including all content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs.
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,complementaryandcontentinfolandmarks should be top level landmarks.- Landmark roles can be nested to identify parent/child relationships of the information being presented.
Step 3: Label areas
- If a specific landmark role is used more than once on a web page, it should have a unique label.
- If a landmark is only used once on the page it may not require a label. See Landmark Roles section below.
- If an area begins with a heading element (e.g.
h1-h6) it can be used as the label for the area using thearia-labelledbyattribute. - If an area requires a label and does not have a heading element, provide a label using the
aria-labelattribute. - 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".