Skip to main content

Screen Readers and Rotor Navigation

Rotors are essential for improving web accessibility because they provide an efficient way for users with visual impairments to access information.

Screen Readers and Rotor Navigation

Shawn Sandy (Ally.Cafe) ~

Introduction to Rotors

In the context of screen readers, a rotor is a navigational tool primarily used in VoiceOver, the screen reader built into Apple’s macOS and iOS. The rotor allows users to quickly navigate and interact with various elements on a webpage or within an app. It is designed to enhance the browsing experience for users who rely on screen readers, making it easier to find and use different types of content.

Why Rotors Matter

Rotors are essential for improving web accessibility because they provide an efficient way for users with visual impairments to access information. By using the rotor, users can jump directly to headings, links, form controls, and other elements without having to navigate through every item on a page sequentially. This functionality saves time and reduces frustration, leading to a more inclusive digital experience.

How Rotors Apply

Rotors work by allowing users to choose different navigation options and then move through those options using simple gestures. For example, on iOS devices, users can activate the rotor by twisting two fingers on the screen as if turning a dial. Once activated, the rotor can be set to navigate by headings, links, form elements, and other types of content.

Purpose of Rotors

The primary purpose of rotors is to provide quick and efficient navigation for screen reader users. This is especially important on complex webpages with lots of content. By using the rotor, users can quickly find the information they need without having to listen to or interact with irrelevant content.

Screen Reader Support and Compatibility

The rotor is a feature specific to VoiceOver on Apple’s devices. However, other screen readers, such as NVDA and JAWS for Windows, offer similar navigational features but may use different terminologies and interfaces. Understanding the rotor concept helps web developers and designers ensure their content is accessible across various screen readers.

Best Practices for Supporting Rotors

  1. Use Proper HTML5 Semantic Elements: Ensure that your webpage uses semantic HTML5 elements like <header>, <nav>, <main>, <article>, and <footer>. This helps screen readers recognize different sections of the page.

  2. Headings Structure: Use proper heading levels (e.g., <h1>, <h2>, <h3>) to create a clear and logical structure. This enables users to navigate by headings efficiently.

  3. ARIA Landmarks: Use ARIA landmark roles (e.g., role="banner", role="navigation", role="main", role="contentinfo") to define regions of the page. This assists screen readers in recognizing the structure of the page.

  4. Accessible Forms: Ensure all form elements are correctly labeled and use ARIA roles and properties where necessary to provide additional context.

  5. Link Descriptions: Use descriptive text for links so that users know where each link will take them.

Conformance Levels and Success Criteria

The Web Content Accessibility Guidelines (WCAG) 2.2 provide success criteria that help ensure content is accessible to all users. Relevant criteria for rotor support include:

  • 1.3.1 Info and Relationships: Information and relationships conveyed through presentation can be programmatically determined or are available in text.
  • 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple web pages.
  • 2.4.6 Headings and Labels: Headings and labels describe the topic or purpose.
  • 4.1.2 Name, Role, Value: For all user interface components, the name and role can be programmatically determined.

Sufficient Techniques and Failures

Techniques

  • H42: Using h1-h6 to identify headings.
  • G1: Adding a link at the top of each page that goes directly to the main content area.
  • G57: Ordering the content in a meaningful sequence.

Failures

  • F43: Using scripts to scroll content, which may not be conveyed to screen reader users.
  • F87: Using CSS to display an image of text instead of using actual text.

Simple Code Examples

Headings

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

ARIA Landmarks

<nav role="navigation">
  <!-- Navigation links -->
</nav>
<main role="main">
  <!-- Main content -->
</main>
<footer role="contentinfo">
  <!-- Footer content -->
</footer>

Conclusion

Understanding and implementing rotor support is crucial for creating an accessible web experience for users relying on screen readers like VoiceOver. By following best practices and adhering to WCAG 2.2 guidelines, web developers can ensure their content is navigable, usable, and accessible to everyone.

References

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue