Accessibility Testing on Mac: Guide to Creating Inclusive Web Experiences
In this article, we'll focus on Mac users, offering an exploration of accessibility testing with a primary focus on utilizing the VoiceOver screen reader. To enhance the user experience, we'll also delve into the extensive accessibility features within the macOS system.
The guidelines, developed by the World Wide Web Consortium (W3C), are a set of standards designed to make website and mobile application content accessible to people with disabilities. Emphasizing principles of perceivability, operability, understandability, and robustness, WCAG is the compass guiding developers toward creating websites and applications that everyone can use, regardless of their abilities.
Mac Tools for Accessibility Testing
- VoiceOver: VoiceOver offers comprehensive spoken descriptions of on-screen elements. Designed for users with visual impairments, VoiceOver facilitates an immersive and accessible browsing experience. Activated with the user-friendly 'Cmd + F5' shortcut, it becomes a cornerstone for evaluating and enhancing the accessibility of web content.
- Accessibility Inspector: Once you’ve discovered accessibility bugs with VoiceOver, inspect your app with these tools to resolve the problems. Apple provides the Accessibility Inspector testing tool that can be launched by choosing Xcode > Open Developer Tool > Accessibility Inspector in the menu bar or Dock. The Accessibility Inspector presents a utility window that displays the information properties (and values), action methods, and position in the accessibility hierarchy of the object currently under the mouse pointer.
- Using Accessibility Verifier: Apple provides the Accessibility Verifier tool, which can be launched by choosing Accessibility Inspector > Window > Accessibility Verifier. Accessibility Verifier displays the accessibility hierarchy, comprising all currently instantiated objects in the selected app. To use Accessibility Verifier, be sure to enable it in Security & Privacy preferences. Use the Accessibility Verifier to perform any or all of the following tests:
- Parent/Child
- Window
- Missing AXDescription
- Role Verification
macOS Accessibility Features
The macOS system provides a rich set of accessibility features, categorized into five broad areas:
1. Vision: In the Vision category, users can seamlessly navigate and interact with their Mac devices. This includes the ability to zoom in on the screen, enlarge text or the pointer, and customize on-screen motion. A distinctive feature is Mac's speech functionality, which adds an auditory dimension to the user experience. By leveraging these tools, individuals with visual impairments or those who benefit from auditory cues can engage with digital content effortlessly.
2. Hearing: The hearing category caters to users with hearing-related needs. It facilitates the pairing of Made for iPhone hearing devices, ensuring a personalized audio experience. Users can customize captions, make real-time text (RTT) calls, and access live captions of audio. It's important to note that Live Captions (beta) is available on Mac computers with Apple silicon, with considerations for language and regional limitations.
3. Motor: For users with motor-related challenges, the Motor category offers a suite of tools for efficient interaction. These tools empower users to control their Mac using spoken commands, keyboard keys, onscreen keyboards, and alternative methods. Additionally, users can customize options for easier mouse and trackpad usage, enhancing the overall accessibility of the device.
4. Speech: The speech category focuses on enhancing accessibility through audio interaction. Users can have typed content spoken aloud, contributing to a more dynamic and inclusive digital experience. Furthermore, on Mac computers with Apple silicon, users can create a personalized synthesized voice. It's noteworthy that personal voice usage is restricted to live speech and approved third-party augmentative and alternative communication (AAC) apps.
VoiceOver Testing Steps:
-
Open Safari, navigate to or type in the testing URL.
-
Turn on VoiceOver, use the shortcut 'Cmd + F5.' or choose Apple menu > System Settings, then click Accessibility in the sidebar (you may need to scroll down). Click VoiceOver on the right, then click Open VoiceOver Utility.
-
Upon activation, VoiceOver provides an initial announcement; to interrupt, press 'Ctrl.' or click on the Use VoiceOver button.
-
When testing a component at the top of a page or in isolation, ensure you are right at the top of the page. To enter the web area, press 'Ctrl + Opt + Shift + down arrow'. You will hear the page title and the first element announced. Press 'Ctrl + Opt + left arrow' to ensure you are right at the top of the page; you will hear a 'dong'.
-
Press 'Ctrl + Opt + right arrow' to move to the next item; press 'Ctrl + Opt + left arrow' to move to the previous item.
-
If you need to hear what was announced again, press 'Ctrl + Opt + left arrow' to move to the previous item, then press 'Ctrl + Opt + right arrow' again.
Tips
- Adjusting Speaking Rate: If you are new to voiceover, you may find the rate at which announcements are made too quick to understand. To find a speaking rate that you are comfortable with:
- Select ‘Rate’ in the settings rotor menu. Press 'Ctrl + Opt + Cmd + Shift + right arrow' to cycle through the menu options until you hear 'Rate' announced.
- Press 'Ctrl + Opt + Cmd + Shift + down arrow' to decrease the speaking rate.
- Pressing 'Ctrl + Opt + Cmd + Shift + up arrow' increases the speaking rate.
- When you have adjusted the rate, release the keys.
- Additional Shortcuts:
- Pause: Control
- Start reading again. Control + Option + A
- Read one element at a time: Control + Option + Right Arrow
- Navigate through links and form controls: Tab
- Testing in a Foreign Language: When testing with assistive technology, it's important to test with content in a language that you can understand and with a language that is supported by the assistive technology. VoiceOver supports over 30 languages on Mac.
Conclusion
In the accessibility testing world, this will help you get started with the test, and there are more things you can explore while doing it. You can refer to Apple's official documentation for details. By diligently following the outlined steps, utilizing shortcuts, and exploring the wealth of accessibility features within macOS, you not only meet regulatory standards but also contribute to the creation of a more inclusive web environment for users of all abilities.
Happy Testing!
MagicPod is a no-code AI-driven test automation platform for testing mobile and web applications designed to speed up release cycles. Unlike traditional "record & playback" tools, MagicPod uses an AI self-healing mechanism. This means your test scripts are automatically updated when the application's UI changes, significantly reducing maintenance overhead and helping teams focus on development.