How to test a main landmark

Gherkin Condensed

Given that I am on a screen with a main landmark

1 Keyboard only

Then when I use the tab key to move focus to a control in the main I SEE focus moves to the control (but the landmark itself does not receive focus)

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use landmark shortcuts
- I HEAR it is discoverable as a main landmark
- I HEAR it has no name, only a role because there should be only one
Then when I use the tab key to move focus to a control in the main I HEAR focus moves to the control (but the landmark itself does not receive focus)

3 Mobile screenreader

WHEN I use a screenreader AND I use screen reader shortcuts
- I HEAR it is discoverable as a main landmark
- I HEAR it has no name, only a role because there should be only one
Or when I swipe to move focus to a control in the landmark I HEAR focus moves to the control (but the landmark itself does not receive focus)

1 Keyboard & screen reader actions

When I use	I see/hear
Landmark shortcuts	It can be discovered, understood and skipped to
Tab	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)

2 Mobile screenreader gestures

When I use	I hear
Landmark shortcuts	It can be discovered, understood and skipped to
Swipe	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)

3 Screenreader output

Reads	I hear
Role	It is discoverable as a main landmark
Name	It has no name, only a role because there should be only one

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.

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.

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.

Web Main landmark