Landmarks in the ARIA APG

This is a proposed draft of the landmarks information for the ARIA APG 1.1.

2. Landmark roles design patterns

A landmark is a recognizeable feature of a web page that can be used for navigation. Features like the header, footer, navigation and main content area of a page can be identified using ARIA landmark roles.

Assistive technologies like screen readers provide keyboard shortcuts for navigating between landmarks, and scripting can be used to provide keyboard navigation within the web page itself.

2.1. General design principles

It is helpful when all content resides within a landmark region, so users do not miss important features.

2.1.1. Identify content regions

Identify the top level regions of content within the document, like the header, main content, footer or navigation
Identify any child regions of content contained within top level regions, like a search form within a header or navigation blocks within the main content
Tip: Designers often use spacial orientation and visual alignment to indicate different regions within a document

The following screenshot has the X, Y and Z content regions indicated:

***Insert suitable screenshot***

2.1.2. Assign landmark roles

Use the role attribute to assign each region of content a landmark role
Tip: banner, main, complementary and contentinfo are all top level landmarks

The following code example demonstrates how the role attribute is used to assign the banner, main and contentinfo landmarks:

<body>
<div id="header" role="banner">
...
</div>

<div id="main" role="main">
...
</div>

<div id="footer" role="contentinfo">
...
</div>
</body>

2.1.3. Add labels

If a document contains multiple instances of the same landmark, assign each one a label to differentiate it from the rest.
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".
Tip: If the landmark region has a heading, use the aria-labelledby attribute to make the heading act as the label for the landmark region. For example:
```
<div id="weather" role="region" aria-labelledby="weatherLabel">
<h2 id="weatherLabel">Weather forecast</h2>
...
</div>
```
Tip: If the landmark region does not have a heading, use the aria-label attribute to provide an invisible label. For example:
```
<div id="weather" role="region" aria-label="Weather forecast">
...
</div>
```

2.2. Landmark roles

There are landmark roles that identify common content features.

ARIA landmark roles
Role	Description	Pattern
banner	A region containing site oriented content, like the logo, site sponsor or site search. A banner region usually appears at the top of the document, and spans its full width.	Each document should only have one banner landmark A document may contain child documents or application regions, each of which should only have one banner landmark If a document contains child documents or application regions, each banner landmark should have a label to differentiate it from the rest The banner landmark should represent a top level region of the document
complementary	a region containing content that is complementary to the main content, and which has equal importance in the content hierarchy.	A document may have multiple complementary landmarks If a document contains multiple complementary landmarks, each one should have a label to differentiate it from the rest
contentinfo	A region containing page specific content, like a copyright statement or links to privacy statements. A contentinfo region is usually found at the bottom of the document, and spans its full width.	A document should only have one contentinfo landmark A document may contain child documents or application regions, each of which should only have one contentinfo landmark If a document contains child documents or application regions, each contentinfo landmark should have a label to differentiate it from the rest The contentinfo landmark should represent a top level region of the document
form	A region containing a collection of items and objectives that combine to represent a form.	A document may have multiple form landmarks Tip: A form may contain a mixture of host language and custom controls, but the form landmark should not be used when the form contains only host language controls Tip: Use the search landmark instead of the form landmark, when the form is used soley for search functionality
main	A region containing the main content of the document.	A document must only have one main landmark A document may contain child documents or application regions, each of which must only have one main landmark If a document contains child documents or application regions, each main region should have a label to differentiate it from the rest The main landmark should represent a top level region of the document
navigation	A region containing objects (usually links) for navigating the document or related documents.	A document may have multiple navigation landmarks If a document contains multiple navigation landmarks, each one should have a label to differentiate it from the rest
region	A region containing content that does not fit logically into another landmark region, but which is important enough to be a recogniseable feature of the document.	A document may contain multiple region landmarks If a document contains multiple region landmarks, each one should have a label to differentiate it from the rest
search	A region containing a collection of items and objects that combine to create a search facility.	A document may contain multiple search landmarks If a document contains multiple search landmarks, each one should have a label to differentiate it from the rest

2.3. Landmarks in HTML5

Certain HTML elements directly correspond to ARIA landmarks. If these HTML elements are used, it is not nescessary to assign landmark roles explicitly because the browser does this automatically.

HTML and ARIA landmarks
Role	Element	Notes
banner	`<header>`	When the `<header> element is scoped to the <body> element`
complementary	`<aside>`
contentinfo	`<footer>`	When the `<footer>` element is scoped to the `<body>` element
form	`<form>`
main	`<main>`
navigation	`<nav>`
search	No equivalent

The HTML Accessibility API Mappings provide more information about the relationship between HTML elements and ARIA roles.