`<header>` descendant of `role="complementary"`

← Return to main list

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of an element with role="complementary".

In this case, the element should be announced as a banner landmark.

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

Code

<div role="complementary">
  <h4>Other content</h4>
  <header>
    <h4>Test content</h4>
  </header>
</div>

Assistive technologies

VoiceOver

Chrome: Banner. [Stop] Test content. [Stop]. End of banner.
Firefox: Banner. [Stop] Test content. [Stop]. End of banner.
Safari: Banner. [Stop] Test content. [Stop]. End of banner.

NVDA

Chrome: Banner landmark. Test content.
Firefox: Banner landmark. Test content.
Edge: Banner landmark. Test content.

JAWS

Chrome: Test content. [Banner not announced]
Firefox: Test content. [Banner not announced]
Edge: Test content. [Banner not announced]