Screen reader
Can you use a screen reader to access the page content?
Why it’s important: Aisha 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 content in the appropriate order and context (i.e. labels before form fields, headers before content, etc.).
- 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
Resources
Video tutorial: Screen Reader Basics: VoiceOver
Video tutorial: How I do an accessibility check (screen reader)