Region section landmark - Web accessibility testing checklist

How to test a region section landmark

Gherkin Condensed

Given that I am on a screen with a region section landmark

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

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use landmark shortcuts
- I HEAR it is discoverable as a region landmark
- I HEAR its purpose is unique and clear
When I use the tab key to move focus to a control in the landmark I HEAR focus moves to the control (but the landmark itself does not receive focus)

WHEN I use a screenreader AND I use screen reader shortcuts
- I HEAR it is discoverable as a region landmark
- I HEAR its purpose is unique and clear
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)

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)

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)

Reads	I hear
Role	It is discoverable as a region landmark
Name	Its purpose is unique and clear

Code examples

This section uses an aria-label to name the region.

<section aria-label="Featured coffee">
  <h2>Featured coffee</h2>
  <!-- Content goes here -->
</section>

This section uses an aria-labelledby to name the region.

<section aria-labelledby="section-heading-alpha">
  <h2 id="section-heading-alpha">Featured coffee</h2>
  <!-- Content goes here -->
</section>

This custom region requires extra attributes.

<div role="region" aria-label="Featured coffeee">
  <h2>Featured coffee</h2>
  <!-- Content goes here -->
</div>