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?

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!

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