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 screen reader landmark shortcuts I SEE it is discoverable
Or when when I use the tab key to move focus to a control in the section I SEE focus moves to the control (but the section itself does not receive focus)

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

WHEN I use a screenreader AND I use screen reader shortcuts
- I HEAR it is discoverable as a region
- I HEAR its purpose is clear
Or when when I swipe to move focus to a control in the section I HEAR focus moves to the control (but the section itself does not receive focus)

When I use	I see/hear
Screen reader shortcuts	Sections are not focusable, only controls within the section are focusable

When I use	I hear
Screen reader shortcuts	It is discoverable by the screen reader

Reads	I hear
Role	It is discoverable as a region
Name	Its purpose is 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>