VoiceOver test with ARIA roles

← Return to main list

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

Example

Orange

Blue

Code

<header role="banner">
  <h4>Red</h4>
</header>
<main role="main">
  <h4>Orange</h4>
</main>
<aside role="complementary">
  <h4>Yellow</h4>
</aside>
<nav role="navigation">
  <h4>Green</h4>
</nav>
<article>
  <h4>Blue</h4>
</article>
<footer role="contentinfo">
  <h4>Violet</h4>
</footer>

Results

Chome Rotor Landmarks View

Firefox Rotor Landmarks View

Safari Rotor Landmarks View

VoiceOver Rotor support chart

← Return to main list