Landmarks

Landmarks, as defined in the ARIA specification, provide a mechanism to convey structural information about a web page in a non-visual way. A number of HTML sectioning elements by default define ARIA landmark roles, and should be used for this intention to avoid confusion.

Recommendations

Use elements with well supported landmark roles to group and structure page content, such as banner, navigation, main, contentinfo, region and complementary.

Include exactly one element with a main role in a document.

Why it matters

The landmark roles enable many keyboard users with assistive technologies such as screen readers to quickly understand a web page and skip directly to the content of a landmark, bypassing other content. This is particularly useful for skipping global navigation and banner elements to jump directly to the main page content, or for quickly jumping to the navigation from elsewhere in the page.

For example, the <main> element by default adds a landmark role of main. It should contain the primary content of a page, beginning with a <h1> heading.

The <header>, <nav>, <main>, <footer>, <section> and <aside> elements are well supported to use as top level page landmarks, except in Internet Explorer 11 and lower that require an explicit role="[default-aria-role]" attribute and styling of display:block;.

Examples

Recommended:

<style> main, nav {display:block;} </style>
<nav role="navigation"></nav>
<main role="main"></main>

Not recommended:

<div id="nav"></div>
<div id="main-content"></div>

Testing

Check that if the document contains a <main> element it includes a role="main" attribute, as per the example above.

Check that there is exactly one element with role="main" in the document.

Check that if the document contains any other HTML sectioning elements that they include a role attribute that explicitly defines the default role.