In web development, ensuring inclusivity is paramount. This blog post caters specifically to 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.
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
The macOS system provides a rich set of accessibility features, categorized into five broad areas:
1. Vision:
2. Hearing:
3. Motor:
4. Speech:
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.
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:
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!