Can you use a screen reader to access the page content?
Why it’s important: Devonte is blind and uses a screen reader to navigate the web.
Steps to take
- Use a screen reader to make sure you can land on controls and that they’re announcing things as they should.
- Determine whether the HTML document has a language attribute so that screen readers will read it with the correct accent and pronunciation. For example:
- If forms are present, make sure the screen reader reads labels and instructions.
- Make sure that all links are properly descriptive. For example, the link text “Read More” provides no context about where the user will go if they click it, while “Read more about dinosaurs” describes what’s on the other side of the link.
- Turn VoiceOver on: command (⌘) + F5
- Go into web area: control + alt + shift + down arrow (⬇)
- Navigate right: control + alt + right arrow (➡️️)
- Navigate by headings: control + alt + command (⌘) + H
- Click: control + alt + spacebar
Use rotor to browse pages. The rotor lists common elements like headings, links, and images, and lets you navigate directly to the element of your choosing.
- Turn on rotor: control + alt + U
- Navigate rotor: left and right, up and down arrows
Note: While VoiceOver is most accessible to those of us using Macs, it’s not as good a screen reader as NVDA.
Video tutorial: Screen Reader Basics: VoiceOver
Video tutorial: How I do an accessibility check (screen reader)
WCAG 2.0 references
1.3.1 Info and Relationships