Screen readers, which convert digital text into speech, are vital for millions of visually impaired people worldwide. To truly understand their online experience, we need to put ourselves in their shoes.
Apple’s VoiceOver, a built-in screen reader on macOS, lets us do exactly that. With no extra installation needed, we can use VoiceOver to hear how our website is experienced by those who rely on screen readers. If we have trouble using or understanding our website when we test it, it means we need to make it more accessible.
Keyboard shortcuts for VoiceOver
| VoiceOver commands | Shortcut keys |
|---|---|
| Turn VoiceOver on or off | Command + F5 |
| Move forward through links and form controls | Tab |
| Navigate backward through links and form controls | Shift + Tab |
| Pause VoiceOver | Control |
| Start reading again | Control + Option + A |
| Read one element at a time | Control + Option + Right Arrow |
| Show the ‘Rotor’ | Control + Option + U (Then use right/left arrow keys to toggle categories, and down/up arrow keys to select an option) |
Key accessibility elements to listen for
Semantic meaning
Headings, links, lists, and other HTML tags provide structure to your content. VoiceOver should convey this structure so users understand the content hierarchy. Listen for an announcement of a single H1 on the page and ensure that headings are identified and follow a logical order, for example, ‘Heading level 1’ followed by ‘Heading level 2’, and so on. Avoid skipping heading levels, as it can be confusing for users who rely on screen readers.
Revealed content announced
When content such as dropdown menus, modals, or accordions becomes visible, VoiceOver should announce it. Silence may indicate inaccessible content.
Descriptive Alt text for images
Images relevant to users should have descriptive alt text. Ensure that VoiceOver reads meaningful descriptions rather than just filenames. If an image duplicates text information, such as a burger icon next to the word ‘menu’, you can use aria-hidden="true" for SVG elements, and alt="" for traditional image formats like JPG or PNG, to prevent unnecessary repetition by the screen reader.’
Forms and their feedback
Form fields should be announced with their associated labels. When submitting forms, listen for clear announcements of error or success messages.
State changes
VoiceOver should announce changes in the state of elements like checkboxes (checked/unchecked), expandable sections (expanded/collapsed), and tabs (active/inactive).
Hidden content
Hidden content, like off-canvas menus or tooltips, should remain silent until activated or revealed. If VoiceOver announces hidden content, it can confuse users.
Links and their purpose
Links should be read in a way that users can understand their purpose even out of context. “Read more about VoiceOver” is clearer than just “Read more.” When using the rotor function to list links, hearing multiple “Read more” entries can be confusing for screen reader users.
Final thoughts
Web accessibility hinges on understanding visually impaired users’ experiences. Learning to use a screen reader you’ll be able to spot problems with your website. For example overusing ARIA (Accessible Rich Internet Applications) roles can be problematic. It’s crucial to use them thoughtfully. Well-structured HTML elements often offer a more intuitive and accessible experience. Remember, no ARIA is better than bad ARIA.
