VoiceOver Screen Reader Guide
VoiceOver is Apple's built-in screen reader, available on every Mac, iPhone, iPad, and Apple Watch. Unlike third-party screen readers such as JAWS or NVDA, VoiceOver requires no installation, no license, and no additional software. It is already on your device, ready to use. This makes it one of the most accessible tools for both users who rely on assistive technology and developers who need to test their websites and applications.
This guide covers everything you need to get started with VoiceOver on macOS and iOS, from basic navigation to advanced testing workflows. Whether you are a developer testing your first accessible component or someone learning to use VoiceOver for daily browsing, this guide will give you the practical knowledge you need.
What is VoiceOver?
VoiceOver is a gesture-based (on iOS) and keyboard-based (on macOS) screen reader that speaks aloud what appears on your screen. It describes buttons, headings, links, images, form fields, and other elements, allowing users to navigate and interact with content without seeing the display.
VoiceOver is deeply integrated into Apple's operating systems. It works with native apps, web browsers, system dialogs, notifications, and third-party applications. On macOS, VoiceOver works best with Safari, which has the most complete accessibility API integration among browsers on the platform.
Key characteristics of VoiceOver:
- Built into macOS, iOS, iPadOS, watchOS, and tvOS at no extra cost
- Supports multiple languages and voices, including Siri voices
- Works with refreshable braille displays
- Provides auditory descriptions plus an optional on-screen caption panel
- Includes a training mode (VoiceOver Help) for learning keyboard commands
- Supports custom activities and verbosity settings per app
Getting Started on Mac
To turn VoiceOver on or off, press Cmd + F5. On newer MacBooks with a Touch Bar or Touch ID, you can also press and hold the Command key while triple-pressing Touch ID. A dialog will appear confirming activation. Once enabled, you will hear VoiceOver announce the currently focused element.
When VoiceOver is active, a dark rectangular outline called the VoiceOver cursor highlights the current element on screen. Everything VoiceOver speaks corresponds to this cursor position.
To configure VoiceOver, open VoiceOver Utility by pressing VO + F8 (that is, Control + Option + F8). Here you can adjust:
- Speech: voice, rate, pitch, volume, and intonation
- Verbosity: how much detail VoiceOver announces for each element type
- Navigation: how the cursor moves through content
- Web: how VoiceOver handles web page navigation
- Sound: audio cues and positional audio settings
- Commanders: custom keyboard, trackpad, and numpad shortcuts
- Braille: braille display configuration
- Activities: context-specific settings profiles
The VoiceOver Modifier Key (VO)
Nearly every VoiceOver command uses a modifier key combination referred to as VO. By default, the VO keys are Control + Option pressed simultaneously. Throughout this guide and all VoiceOver documentation, when you see VO, it means hold down Control + Option together, then press the additional key.
For example, VO + Right Arrow means press Control + Option + Right Arrow together.
If you find pressing three keys awkward, you can change the VoiceOver modifier in VoiceOver Utility. Some users remap it to the Caps Lock key for easier one-handed use. To do this, go to VoiceOver Utility, select General, and check "Use Caps Lock as VoiceOver Modifier."
Essential Mac Keyboard Shortcuts
These are the commands you will use most frequently. Practice them until they become second nature.
Basic Navigation
VO + Right Arrow— Move to the next itemVO + Left Arrow— Move to the previous itemVO + Space— Activate (click) the current itemVO + Shift + Down Arrow— Interact with (enter) the current element (e.g., enter a group, table, or web area)VO + Shift + Up Arrow— Stop interacting with (exit) the current elementTab— Move to the next form control (links, buttons, inputs)Shift + Tab— Move to the previous form control
Reading Content
VO + A— Read everything from the current cursor position to the endVO + B— Read from the beginning to the current cursor positionControl— Pause or resume speechVO + W— Read the current wordVO + L— Read the current lineVO + S— Read the current sentence
Quick Navigation by Element Type
VO + Command + H— Move to the next headingVO + Command + Shift + H— Move to the previous headingVO + Command + L— Move to the next linkVO + Command + Shift + L— Move to the previous linkVO + Command + J— Move to the next form controlVO + Command + Shift + J— Move to the previous form controlVO + Command + T— Move to the next tableVO + Command + X— Move to the next listVO + Command + G— Move to the next image
Help and Orientation
VO + H— Open VoiceOver Help menu (searchable command list)VO + K— Enter keyboard help mode (press any key to hear its function, press Escape to exit)VO + F1— Application summaryVO + F2— Window summaryVO + F3— Describe the item in the VoiceOver cursor
The Rotor
The Rotor is one of VoiceOver's most powerful features. Press VO + U to open it. The Rotor presents organized lists of page elements, allowing you to jump directly to any heading, link, landmark, form control, or table on the page.
When the Rotor is open:
Left Arrow / Right Arrow— Switch between element categories (headings, links, landmarks, form controls, tables, etc.)Up Arrow / Down Arrow— Move through items in the current categoryReturn— Jump to the selected item and close the RotorEscape— Close the Rotor without navigating- Start typing to filter the list by text content
The Rotor categories for web content typically include:
- Headings: All headings on the page, organized by level (h1 through h6). This is the fastest way to understand a page's structure.
- Links: Every link on the page. Visited links are noted.
- Landmarks: ARIA landmarks and HTML5 structural elements (banner, navigation, main, complementary, contentinfo, search, form, region).
- Form Controls: Buttons, text fields, checkboxes, radio buttons, selects, and other interactive elements.
- Tables: All data tables on the page.
- Web Spots: VoiceOver-generated bookmarks for frequently visited sections.
For accessibility testing, the Rotor is invaluable. If your headings list looks jumbled or your landmarks are missing, you know there are structural problems with the page.
Web Navigation with Safari
Safari is the recommended browser for VoiceOver on macOS. Apple optimizes VoiceOver's web experience specifically for Safari, and you will encounter fewer bugs and inconsistencies compared to other browsers.
When you first navigate to a web page with VoiceOver active, VoiceOver loads the page content into its buffer. You will hear "web content" announced. At this point, you need to interact with the web area by pressing VO + Shift + Down Arrow to start navigating the page elements.
VoiceOver supports two web navigation modes:
- DOM order navigation: VoiceOver moves through elements in the order they appear in the HTML source. Use
VO + Right/Left Arrow. - Quick Nav: Press the
Left Arrow + Right Arrowtogether to toggle Quick Nav. When enabled, you can use arrow keys alone (without the VO modifier) to navigate. Single-letter keys jump by element type: H for headings, L for links, T for tables, and so on.
Quick Nav single-letter shortcuts (when Quick Nav is enabled):
H— Next headingShift + H— Previous heading1through6— Next heading at that levelL— Next linkT— Next tableX— Next listG— Next imageJ— Next form controlW— Next ARIA landmark
VoiceOver on iOS
On iPhone and iPad, VoiceOver is gesture-based. To enable it, go to Settings, then Accessibility, then VoiceOver, and toggle it on. You can also ask Siri: "Turn on VoiceOver." For quick access, you can set up the Accessibility Shortcut (triple-click the side button) under Settings, then Accessibility, then Accessibility Shortcut.
When VoiceOver is active on iOS, the touch interface changes completely. A single tap selects an item (VoiceOver describes it), and a double-tap activates it. This is fundamentally different from standard touch interaction, so take a moment to learn the gestures.
Essential iOS Gestures
- Single tap: Select and hear the item under your finger
- Double-tap: Activate the selected item
- Swipe right (one finger): Move to the next item
- Swipe left (one finger): Move to the previous item
- Two-finger swipe up: Read all from the top of the page
- Two-finger swipe down: Read all from the current position
- Two-finger tap: Pause or resume speech
- Three-finger swipe up or down: Scroll the page
- Three-finger swipe left or right: Navigate between pages or screens
- Three-finger double-tap: Toggle mute on/off
- Two-finger scrub (Z shape): Go back or dismiss
The iOS Rotor
On iOS, the Rotor is accessed with a two-finger rotation gesture, as if you are turning a physical dial on the screen. Rotate clockwise or counter-clockwise to switch between categories (headings, links, form controls, etc.), then swipe up or down with one finger to move through items in the selected category.
You can customize which categories appear in the Rotor under Settings, then Accessibility, then VoiceOver, then Rotor.
Testing Workflows with VoiceOver
When testing a website or application with VoiceOver, follow a structured approach. Do not just turn it on and randomly explore. Use this checklist to ensure thorough coverage:
1. Page Structure and Headings
- Open the Rotor (
VO + U) and check the Headings list. Are headings present? Do they follow a logical hierarchy (h1, then h2, then h3)? - Is there exactly one h1 that describes the page purpose?
- Can you understand the page structure from headings alone, without seeing the visual layout?
- Are any decorative or stylistic elements incorrectly marked as headings?
2. Landmarks
- Switch to the Landmarks category in the Rotor. Are the expected landmarks present: banner, navigation, main, contentinfo?
- Does the main content area have a main landmark?
- Are navigation regions labeled distinctly if there are multiple (e.g., "Primary navigation" and "Footer navigation")?
- Can you quickly jump to the main content area?
3. Links and Buttons
- Check the Links list in the Rotor. Do link texts make sense out of context? Avoid vague text like "click here" or "read more."
- Are buttons labeled with their action? A button labeled "Submit" is better than an unlabeled icon button.
- Do links and buttons announce their role correctly ("link" or "button")?
4. Images
- Navigate to images using
VO + Command + G. Do informative images have descriptive alt text? - Are decorative images hidden from VoiceOver (using an empty alt attribute or
role="presentation")? - Do complex images (charts, graphs) have adequate long descriptions?
5. Forms
- Tab through form controls. Does every input have a label that VoiceOver announces?
- Are required fields indicated? Does VoiceOver announce "required" for mandatory inputs?
- Do error messages get announced when validation fails? Are they associated with the correct input?
- Can you complete and submit the form using only the keyboard?
- Are grouped fields (like a set of radio buttons) wrapped in a fieldset with a legend?
6. Dynamic Content and Live Regions
- When content updates dynamically (notifications, loading states, live counters), does VoiceOver announce the change?
- Are ARIA live regions (
aria-live="polite"oraria-live="assertive") used appropriately? - Do toast notifications get announced without interrupting the user's workflow?
- When loading completes, is focus managed correctly?
7. Modals and Dialogs
- When a modal opens, does focus move into it?
- Is focus trapped within the modal (Tab does not escape to content behind it)?
- Can you close the modal with Escape?
- When the modal closes, does focus return to the element that triggered it?
- Does the dialog have an accessible name (
aria-labeloraria-labelledby)?
Common Issues Found with VoiceOver Testing
These are the problems that surface most frequently when testing with VoiceOver:
- Missing or generic link text: Links that say "click here," "learn more," or "read more" without context are confusing when listed in the Rotor.
- Missing form labels: Input fields without associated labels are announced as "text field" with no description of what to enter.
- Heading level skips: Jumping from h1 to h4 breaks the logical document outline. Screen reader users rely on heading hierarchy to understand content structure.
- Focus not managed in SPAs: When a single-page application changes views without a full page load, focus may stay on a now-invisible element. Move focus to the new content or the page heading.
- Custom controls without ARIA: A div styled as a button but lacking
role="button"and keyboard handling will be announced as "group" or not be focusable at all. - Images without alt text: VoiceOver reads the file name (e.g., "DSC_0482.jpg") for images without alt attributes, which is meaningless.
- Inaccessible dropdown menus: Custom dropdown menus that lack proper ARIA attributes, keyboard support, and focus management are one of the most common accessibility failures.
- Auto-playing media: Audio or video that plays automatically interferes with VoiceOver speech, making the page unusable.
- Missing skip navigation link: Without a "skip to content" link, keyboard and screen reader users must Tab through the entire header and navigation on every page.
- Invisible focus indicators: When
outline: noneis applied without a replacement, keyboard users (including VoiceOver users in some scenarios) lose track of their position.
VoiceOver Verbosity Settings
VoiceOver's verbosity controls how much information is spoken for each element. You can adjust these in VoiceOver Utility (VO + F8) under the Verbosity tab.
Verbosity levels typically include:
- High: VoiceOver announces every detail, including element type, state, position in group, help text, and any associated descriptions. Useful for thorough testing.
- Medium: A balanced amount of information. Suitable for everyday use.
- Low: Minimal announcements. Only the element content and essential role information. Preferred by experienced users who know the interface.
You can set verbosity per element type. For example, you might want high verbosity for form controls (to hear labels, states, and help text) but low verbosity for static text (to speed up reading). Key verbosity categories include:
- Text: Whether to announce font changes, text attributes, misspellings
- Controls: Whether to speak help tags, control descriptions
- Web: Whether to announce element types when navigating web content
- Punctuation: Options for none, some, most, or all punctuation spoken aloud
- Hints: Whether to speak usage hints (e.g., "Press VO + Space to activate")
For testing, set verbosity to High. This ensures you hear everything that VoiceOver communicates, helping you catch missing labels, states, and descriptions that users will depend on.
Practice Exercises for Beginners
The best way to learn VoiceOver is through hands-on practice. Work through these exercises in order, each building on the skills from the previous one.
Exercise 1: Turn VoiceOver On and Navigate the Desktop
- Press
Cmd + F5to activate VoiceOver. - Use
VO + Right ArrowandVO + Left Arrowto move through items on the desktop and in the menu bar. - Press
VO + Spaceto open an application from the Dock. - Press
VO + Hto explore the Help menu and discover commands. - Turn VoiceOver off with
Cmd + F5when done.
Exercise 2: Navigate a Simple Web Page
- Open Safari and navigate to a content-heavy site like Wikipedia.
- Turn on VoiceOver with
Cmd + F5. - Press
VO + Shift + Down Arrowto enter the web content area. - Use
VO + Right Arrowto move through the page element by element. - Open the Rotor with
VO + U, browse the headings list, and jump to one. - Try Quick Nav: press
Left + Right Arrowtogether to toggle it, then useHto jump between headings.
Exercise 3: Explore the Rotor in Depth
- On a web page, press
VO + Uto open the Rotor. - Use
Left/Right Arrowto cycle through all categories: headings, links, landmarks, form controls, tables. - In the headings category, note the heading levels. Are they well structured?
- In the links category, read through the link texts. Do they make sense out of context?
- In the landmarks category, identify the page's semantic structure.
Exercise 4: Fill Out a Form
- Navigate to a site with a login or contact form.
- Use
Tabto move between form controls. - Listen for whether each field has a clear label announced.
- Fill in the fields by typing normally while VoiceOver is active.
- Try selecting an option from a dropdown using
VO + Spaceto open it, then arrow keys to select. - Submit the form and listen for any validation errors or confirmation messages.
Exercise 5: Close Your Eyes
- Once you are comfortable with the basics, try navigating a page you have never visited before with your eyes closed (or your monitor off).
- Can you determine what the page is about from the h1 heading?
- Can you find the main content quickly using landmarks or headings?
- Can you complete a task (like finding a phone number or submitting a form)?
- This exercise reveals the real experience of screen reader users and builds empathy for accessibility work.
VoiceOver in Chrome vs. Safari
While VoiceOver works with Chrome, Firefox, and other browsers on macOS, Safari remains the recommended choice for testing. Here are the key differences:
- Safari has the deepest integration with the macOS accessibility APIs. Apple develops VoiceOver and Safari together, so they are tested as a pair. ARIA attributes, live regions, and custom elements generally work most reliably in Safari.
- Chrome uses its own accessibility tree implementation. Some ARIA roles and properties behave differently. For example,
aria-descriptionsupport, table navigation, and certain live region behaviors may differ between browsers. - Chrome sometimes exposes extra elements that Safari does not, or groups elements differently. This can change navigation order and the number of stops as you press
VO + Right Arrow. - Form controls may announce differently. Chrome might provide more verbose descriptions for native form elements, while Safari may be more concise.
- Focus management in single-page applications can behave differently. Test your focus management code in both browsers if your users access your site with both.
Best practice: do your primary VoiceOver testing in Safari, then verify critical flows in Chrome. If something works in Safari but not Chrome, the issue is often a browser-level accessibility bug rather than a code problem. Report it, but do not compromise your standards for the Safari experience.
Tips for Developers Hearing VoiceOver for the First Time
Turning on VoiceOver for the first time can be disorienting. The constant speech, the changed keyboard behavior, and the VoiceOver cursor overlay all take getting used to. Here are practical tips to make the learning curve gentler:
- Start with VoiceOver Training: Apple includes a built-in tutorial. When VoiceOver is active, press
VO + Command + F8to open it, or find it under System Settings, then Accessibility, then VoiceOver, then "Open VoiceOver Training." Work through the entire tutorial. - Slow down the speech rate: Press
VO + Command + Left Arrowto decrease the speech rate. Many developers find VoiceOver overwhelming at the default speed. Slow it down until you can comfortably understand every word. - Use the Caption Panel: Enable the Caption Panel in VoiceOver Utility under the Visuals tab. This displays a text version of what VoiceOver is saying, which helps when you miss something or cannot understand the speech.
- Learn one shortcut at a time: Do not try to memorize all shortcuts at once. Start with
VO + Right/Left Arrowfor navigation andVO + Spacefor activation. Add more shortcuts as you become comfortable. - Do not panic: If VoiceOver gets into a state you do not understand, press
Escapea few times, or pressVO + Shift + Up Arrowto stop interacting with the current element. If all else fails, pressCmd + F5to turn VoiceOver off. - Use headphones: If you work in an open office, use headphones so VoiceOver output does not disturb colleagues. This also helps you focus on what is being announced.
- Keep VoiceOver Utility open: Having VoiceOver Utility (
VO + F8) open while testing lets you quickly adjust settings when something is too verbose or too quiet. - Test your own work first: Start by testing pages or components you built yourself. You know the expected behavior, so you can focus on what VoiceOver announces rather than trying to understand unfamiliar content.
- Do not rely solely on VoiceOver: VoiceOver is one screen reader on one platform. Real-world screen reader usage is split across JAWS, NVDA, VoiceOver, and others. Use VoiceOver for development testing, but do not assume that something working in VoiceOver means it works everywhere.
- Listen to what is not said: The most critical testing insight is noticing what VoiceOver does not announce. Missing labels, missing landmarks, missing alt text, missing error messages — the absence of information is what makes experiences inaccessible.
Este site-ul tău accesibil?
Scanează-ți site-ul gratuit și obține scorul WCAG în câteva minute.
Scanează-ți site-ul gratuit