Accessibility 101:
Screen Readers
Accessibility
What are screen readers?
What are screen readers?
- "... a software application that enables people with severe visual impairments to use a computer." (Nomensa)
- "... software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display." (AFB)
- "... any application that tries to read what is on a computer monitor using sound or some other device.
... helpful to those who are visually impaired, blind, learning disabled, or unable to read." (Computer Hope)
Who do they help?
Who do they help?
-
Blind users
- text to speech
- text to braille
- Vision impaired users
-
Users who have difficulty reading
- dyslexic
- learning disabled
-
Users who benefit from multiple forms of input
- autistic
- distracted
What screen reader?
-
Difficult to detect if a visitor is using a screen reader
- except for some OS settings on mobile devices
-
Browser stats can indicate which screen readers may be used
- confluence - developer/Browser+support+guideline
- Surveys can indicate which screen readers are most used
What screen reader?
Desktop Systems
- Windows OS - Narrator, Jaws, NonVisual Desktop Access (NVDA), Zoomtext, Dolphin Supernova, Window Eyes
- Mac OS - VoiceOver
- Chrome OS - ChromeVox
- Linux OS - Speak-up, Orca
Mobile Systems
- iOS - VoiceOver
- Android - TalkBack, VoiceView
- Blackberry - Blackberry Screen Reader, Oratio
- Kindle - Voice
- Other - BrowseAloud, ReadSpeaker
* green indicates most used according to surveys
Try it out!
- Go to a favourite site and have a go at navigating with the OS screen reader.
- What works?
- What doesn't work?
* it doesn't have to be BBC
Try it out!
confluence - accessibility/Screen+Reader+Basics+and+Cheat+Sheet
| Basic actions | Windows Narrator | Mac VoiceOver | iOS VoiceOver | Android TalkBack |
|---|---|---|---|---|
| Set-up | Settings > Change PC Settings > Ease of Access | System Preferences > Accessibility | Settings > General > Accessibility | Settings > Accessibility |
| Toggle on/off | Windows logo key + Enter | ⌘ + F5 | (set up) triple tap home button | (set up) power button |
| Pause/resume | Caps lock + M, or Ctrl | Ctrl | 2-finger tap | (set up) volume key |
| Read from selected | Caps lock + H | Ctrl + ⌥ + a | 2-finger swipe down | (set up) shake |
| Next/previous | Caps lock + right/left arrow key | Ctrl + ⌥ + right/left arrow key | Swipe right or left | Swipe right or life |
| Activate item | Caps lock + Space bar | Ctrl + ⌥ + Space bar | Double tap | Double tap |
| Initiate rotor/menu | n/a | Ctrl + ⌥ + u | Hold and twist 2 fingers | Swipe down/up then right |
| Help | Caps locl + F1 | Ctrl + ⌥ + h | Pinch in | n/a |
set-up shortcuts, practice basics
Design
- Ensure there is a visible focus style, many screen reader users are not fully blind
-
Think about page structure and content order
- containers
- headings
- labels
- link text
- alt text - icons/images
Development
-
Use native HTML elements
- <h?>, <p>, <a>, <button>, etc.
- Use WAI-Aria roles and properties only when necessary
- Ensure a core experience works without CSS or Javascript, and progressively enhance as feature support permits
- Ensure keyboard navigation works
- Keep section being read visible
- Check with a screen reader as you work
Testing
- Try to do everything using only a keyboard
- Listen with the screen reader most common for the OS you are testing on
- Check headings outline
- Check links out of context
- Check alt text fits purpose
Accessibility