VoiceOver — Built-in Screen Reader for macOS and iOS

In this tutorial, you will learn about VoiceOver. We cover key concepts, practical examples, and best practices to help you master this topic.

VoiceOver is the built-in screen reader on every Mac, iPhone, and iPad, providing a robust testing platform for Apple ecosystem Accessibility with gesture and keyboard navigation.

In this tutorial, you'll learn about VoiceOver on macOS and iOS.

What You'll Learn

By the end of this lesson, you'll understand VoiceOver navigation on Mac and iOS, the Rotor feature, essential keyboard shortcuts, and how to test with it.

Why It Matters

Apple users represent a significant portion of screen reader users. VoiceOver is built-in, so every Mac and iOS user has immediate access to it.

Real-World Use

DodaTech tests all web properties with VoiceOver on both macOS (Safari) and iOS (Safari) to ensure full Apple ecosystem compatibility.

VoiceOver Architecture

flowchart LR
  A[VoiceOver macOS] --> B[Keyboard Navigation]
  A --> C[Trackpad Gestures]
  D[VoiceOver iOS] --> E[Touch Gestures]
  D --> F[Rotor]
  B --> G[VO Keys]
  G --> H[VO+Arrow: Navigate]
  E --> I[Swipe: Navigate]
  F --> J[Headings, Links, Landmarks]

macOS VoiceOver Shortcuts

Note: VO = Ctrl+Option by default.

iOS VoiceOver Gestures

The Rotor

The Rotor is VoiceOver's most powerful navigation feature. Twist two fingers on iOS or press VO+U on macOS to open it:

<!-- Configure rotor options via HTML -->
<!-- Headings, links, landmarks all appear in the Rotor automatically -->
<h1>Title</h1>
<nav aria-label="Main">...</nav>
<main>...</main>

Rotor options include: Headings, Links, Landmarks, Form Controls, Tables, Buttons.

VoiceOver-Specific Quirks

<!-- VoiceOver on macOS Safari handles these differently -->
<button aria-label="Close">X</button>
<!-- VoiceOver announces "Close" on macOS -->

<div role="button" tabindex="0">Custom</div>
<!-- VoiceOver may not identify this as a button in some cases -->

Common Mistakes

• Not testing with Safari on macOS: VoiceOver on Safari is the most common Apple combination.
• Assuming keyboard and iOS gestures work identically: They have different navigation patterns.
• Not using the Rotor: The Rotor is the primary navigation method for VoiceOver users.
• Forgetting to test in both orientations: iOS accessibility can differ between portrait and landscape.

Practice and Challenge

1. How do you toggle VoiceOver on macOS? Cmd+F5.

2. What are the VO keys on macOS? Ctrl+Option.

3. How do you open the Rotor on iOS? Two-finger twist gesture.

4. What is the Rotor used for? Quick navigation by heading, link, landmark, form control, and more.

5. Challenge: Enable VoiceOver on your Mac and navigate a web page using only VO+Arrow keys. Then open the Rotor and navigate by headings.

FAQ

Mini Project

Enable VoiceOver on your Mac and iOS device. Navigate the same web page on both. Document the differences in navigation patterns and announcements between the two platforms.

What's Next

Continue to TalkBack to learn about the Android screen reader.