`<main>` with `aria-labelledby`

← Return to main list

This test case is designed to determine how the <main> element and an associated aria-labelledby element are announced by various screen readers.

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

VoiceOver: Announce next item: VO + Right Arrow
NVDA and JAWS: Announce next line: DOWN ARROW

Example

Test content

Code

<main aria-labelledby="one">
  <h4 id="one">Test content</h4>
</main>

Assistive technologies

VoiceOver

Chrome: Test content. Main. [Stop] Heading level 4. Test content. [Stop] End of Test content. Main.
Firefox: Test content. Main. [Stop] Heading level 4. Test content. [Stop] End of Test content. Main.
Safari: Test content. Main. [Stop] Heading level 4. Test content. [Stop] End of Test content. Main.

NVDA

Chrome: Main landmark. Heading level 4. Test content. [Label not announced]
Firefox: Main landmark. Heading level 4. Test content. [Label not announced]
Edge: Main landmark. Heading level 4. Test content. [Label not announced]

JAWS

Chrome: Test content. Main region. [Stop] Heading level 4. Test content. [Stop] Test content. Main region ends.
Firefox: Test content. Main region. [Stop] Heading level 4. Test content. [Stop] Test content. Main region ends.
Edge: Test content. Main region. [Stop] Heading level 4. Test content. [Stop] Test content. Main region ends.

← Return to main list