How to test a main landmark

Gherkin Condensed

Given that I am on a page with a main landmark

1 Keyboard for mobile & desktop

WHEN I use the arrow keys to browse the main content I SEE the screen scroll through the page

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow keys to browse the main content
- I HEAR It is discoverable with screenreader shortcuts as main landmark
- I HEAR It contains the content portion of the page starting with the H1

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to elements in the header
- I HEAR It is discoverable with screenreader shortcuts as main landmark
- I HEAR It contains the content portion of the page starting with the H1

1 Keyboard & screen reader actions

When I use	I see/hear
Skip-links	Focus moves directly to the main content area
Tab	Links and buttons within the main area are focusable

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within main area

3 Screenreader output for all devices

Reads	I hear
Role	It is discoverable with screenreader shortcuts as main landmark
Group	It contains the content portion of the page starting with the H1

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<a href="#example-main">Skip to main content</a>
<a href="#">Not main content</a>
<main tabindex="-1" id="example-main">
  <h1>About main content</h1>
  <p>The main content of the page belongs here.</p>
  <p><a href="#">Focus moves here next</a></p>
</main>

Skip to main content Not main content

About main content

The main content of the page belongs here.

Focus moves here next

When you can’t use semantic HTML

This custom main element requires extra attributes.

<div role="main" tabindex="-1" id="example-main"> 
  <h1>About our company</h1>
  <p>The main content of the page belongs here.</p>
</div>

Developer notes

Name

Typically doesn’t have a name other than its role.
If a page has multiple <main> landmarks, then each should have a unique programmatic label.
- Use aria-label="Content name" when there is not a visible content label.
- aria-labelledby="content-id" can be used when the content label is a visible heading or existing page text.

Role

Identifies itself as a main landmark
If a non-semantic element must be used (like a <div>) use role="main".

Group

must contain the main content of the page.
Ideally appears only once per Web page.

Focus

Can be targeted with a skip link, but isn’t focusable with the tab key
Use tabindex="-1" to make the main targetable with a skip link.

Main landmark