Screen reader

Screen readers are software applications that attempt to convey what is seen on a screen display in a non-visual way, usually as text to speech, but also into braille or sound icons. Screen readers are essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability. There are some browser extension screen readers, but most screen readers operate system-wide for all user applications, not just the browser.

In terms of web accessibility, most user agents provide an accessibility object model and screen readers interact with dedicated accessibility APIs, using various operating system features and employing hooking techniques.

VoiceOver

macOS comes with VoiceOver, a built-in screen reader. To access VoiceOver, go to System Preferences > Accessibility > VoiceOver. You can also toggle VoiceOver on and off with fn+command + F5. VoiceOver both reads aloud and displays content. The content read aloud is displayed in a dark grey box.

Desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. The best way to emulate use is to do the same.

Just like keyboard navigation without VoiceOver, you can navigate through interactive elements using the tab key and the arrow keys:

  • Next interactive element: Tab
  • Previous interactive element: Shift + Tab
  • Next radio button in a same named-group: right or down arrow
  • Previous radio button in a same named-group: left or up arrow

Navigating through the content of a page is done with the tab key and a series of other keys along with Control + Option keys

  • Next heading: Control + Option + H
  • Next list: Control + Option + X
  • Next graphic: Control + Option + G
  • Next table: Control + Option + T
  • Down an HTML hierarchical order Control + Option + right arrow
  • Previous heading: Shift + Control + Option + H
  • Previous list: Shift + Control + Option + X
  • Previous graphic: Shift + Control + Option + G
  • Previous table: Shift + Control + Option + T
  • Up an HTML hierarchical order: Control + Option + left arrow

See also