Introduction to VoiceOver Shortcuts and Web Accessibility

Shawn Sandy (Ally.Cafe) ~ June 16, 2024

VoiceOver is Apple’s built-in screen reader, available on macOS and iOS devices, designed to assist visually impaired users in navigating their devices. To efficiently use VoiceOver, it’s crucial to understand and utilize its keyboard shortcuts. These shortcuts help users quickly access and interact with web content, ensuring a seamless browsing experience.

Why VoiceOver Shortcuts Matter

Efficiency: Shortcuts allow users to navigate and interact with web content more quickly and efficiently.
Accessibility: Understanding and using these shortcuts can significantly enhance the accessibility of web content for visually impaired users.
Improved User Experience: Providing information about these shortcuts can improve the overall user experience for VoiceOver users.

Common VoiceOver Shortcuts

macOS VoiceOver Shortcuts

Activate VoiceOver: Command + F5 or Fn + Command + F5
VoiceOver Help Menu: VO + H (VO = Control + Option)
Move to Next Item: VO + Right Arrow
Move to Previous Item: VO + Left Arrow
Activate Item: VO + Space
Read All: VO + A
Stop Reading: Control
Open Rotor: VO + U
Next Heading: VO + Command + H
Previous Heading: VO + Command + Shift + H
Next Link: VO + Command + L
Previous Link: VO + Command + Shift + L
Toggle Verbosity: VO + V

iOS VoiceOver Shortcuts

Activate VoiceOver: Triple-click the Home button (or Side button on devices without a Home button)
VoiceOver Help: Triple-tap with three fingers
Move to Next Item: Swipe Right
Move to Previous Item: Swipe Left
Activate Item: Double-tap
Read All from Current Position: Two-finger swipe down
Stop Reading: Two-finger tap
Open Rotor: Rotate two fingers on the screen (like turning a dial)
Next Heading: Swipe up with one finger (Rotor set to Headings)
Previous Heading: Swipe down with one finger (Rotor set to Headings)
Next Link: Swipe up with one finger (Rotor set to Links)
Previous Link: Swipe down with one finger (Rotor set to Links)

Best Practices for Web Developers

Ensure Semantic HTML: Use appropriate HTML elements (e.g., <header>, <nav>, <main>, <article>, <footer>) to help VoiceOver users navigate content efficiently.
Provide ARIA Landmarks: Use ARIA roles (e.g., role="banner", role="navigation", role="main", role="contentinfo") to define regions of the page.
Use Skip Links: Implement skip links to allow users to bypass repetitive content.

Example:

<a href="#maincontent" class="skip-link">Skip to main content</a>
<main id="maincontent">
  <!-- Main content here -->
</main>

Provide Descriptive Link Text: Ensure link text is descriptive and provides context about the link’s destination.

Example:

<a href="about.html">Learn more about us</a>

Test with VoiceOver: Regularly test your website with VoiceOver to ensure it is accessible and user-friendly.

Resources for Further Learning

Here are some valuable resources to help you understand and implement VoiceOver accessibility:

Apple VoiceOver User Guide (opens in a new window)
Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new window)
Introduction to ARIA (opens in a new window)
Accessible Rich Internet Applications (WAI-ARIA) 1.2 (opens in a new window)
WebAIM: Web Accessibility In Mind (opens in a new window)
The A11Y Project (opens in a new window)

Utilizing these VoiceOver shortcuts and implementing best practices can significantly enhance the accessibility and usability of your website for visually impaired users.

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

Edit on Github Open an issue