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, 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 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 the aria-labelledby attribute.
• If an area requires a label and does not have a heading element, provide a label using the aria-label attribute.
• 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".

Taken from ARIA Authoring Practices Guide