Ensuring your website is fully accessible to visually impaired users is not just a best practice—it is often a legal requirement. While automated tools like Google Lighthouse can flag basic ARIA errors, nothing replaces manually testing your website with an actual screen reader. If you own a Mac, you do not need to purchase expensive third-party accessibility software. Apple includes a native, industry-standard screen reader called “VoiceOver” that you can use to audit your web projects directly in Safari.
Why Test with VoiceOver?
VoiceOver reads the structural elements of your web page out loud, exactly as a visually impaired user would experience them. By navigating your site using VoiceOver, you can quickly identify “focus traps” where users get stuck, discover unlabeled image tags, and verify that your drop-down menus are navigable using only the keyboard.
Step 1: Enable VoiceOver
VoiceOver can be toggled on and off instantly using a keyboard shortcut.
- Press Command + F5 on your Mac keyboard. (If you have a Touch Bar Mac, press and hold the Command key and quickly tap the Touch ID button three times).
- A welcome dialogue will appear. Click Use VoiceOver.
- You will immediately hear a synthetic voice begin reading the interface, and a dark caption panel will appear at the bottom of your screen displaying the text being spoken.
Step 2: Navigate a Web Page
When testing accessibility, you must stop using your mouse entirely. Screen reader users rely almost exclusively on keyboard commands.
- Open Safari and load the website you want to test.
- To move forward through the interactive elements of the page (links, buttons, form fields), press the Tab key.
- To move backward, press Shift + Tab.
- Listen carefully to how VoiceOver announces each element. If you tab to a “Submit” button but VoiceOver simply says “Button,” you are missing an essential aria-label.
Step 3: Use the VoiceOver Rotor
The “Rotor” is an advanced tool that allows users to quickly jump between specific structural elements, such as skipping from Heading 1 to Heading 2 without reading the paragraphs in between.
- Hold down the Control + Option keys (these are known as the “VoiceOver keys” or “VO keys”).
- While holding those keys, press U to open the Rotor menu.
- Use the Left and Right arrow keys to switch between different lists (e.g., Headings, Links, Form Controls).
- Use the Up and Down arrow keys to select a specific heading or link, then press Enter to jump directly to it.
Step 4: Disable VoiceOver
When you have finished auditing your website, you can easily disable the screen reader.
- Press Command + F5 again to instantly turn VoiceOver off.
By regularly auditing your web projects with the macOS VoiceOver utility, you can ensure your content remains universally accessible and compliant with modern web standards.