VoiceOver test with aria-labelledby

← Return to main list

This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.

Example

Code

<header aria-labelledby="red">
  <h4 id="red">Red</h4>
</header>
<main aria-labelledby="orange">
  <h4 id="orange">Orange</h4>
</main>
<aside aria-labelledby="yellow">
  <h4 id="yellow">Yellow</h4>
</aside>
<nav aria-labelledby="green">
  <h4 id="green">Green</h4>
</nav>
<article aria-labelledby="blue">
  <h4 id="blue">Blue</h4>
</article>
<footer aria-labelledby="violet">
  <h4 id="violet">Violet</h4>
</footer>

Results

VoiceOver Rotor support chart

← Return to main list