Designing for the Completely Blind: Screen Readers

Popular Screen Readers

By the term ‘completely blind’ I am referring to users who do not use the internet as a visual medium at all. These are people who most often make the use of screen readers to convey the printed word into a spoken alternative.

Popular Screen Readers include:

Screen Reader Operating System Availability Website
JAWS Windows Commercially Available
Microsoft Narrator Windows Included with System
NVDA (NonVisual Desktop Access) Windows Freely Available
VoiceOver Mac Included with System
Ocra Unix Bundled with Gnome
BRLTTY Unix With most Unix systems
ChromeVox All OS’s Extension for Chrome by Google
FireVox All OS’s Extension for Firefox
WebAnywhere All OS’s Open Source web-based


What do screen readers do?

  1. Read Text on the Screen.
  2. Read alt tag content.
  3. Read out headers and links.

What is essential for designers?

  1. Ensure that the HTML is in a logical order – does it still make sense without any styling?
  2. Make sure that your alt tags are filled with relevant content.
  3. Use ‘Header’ tags and structure your page content under H1-H6 tags. For links, keep the text concise, try and reduce the number of links on a page to a minimum.


Where do screen readers struggle?

  1. With some CSS-based layout.
  2. With navigation.
  3. With image-based information.
  4. With multi-media content.

How can designers help?

  1. Hide & show text effectively with CSS.
  2. Have an option to skip the navigation. Use the ARIA Landmark role=”navigation” tag to assist screen readers.
  3. Never convey information by visual means alone. No writing in picture files and no using color solely to convey information.
  4. For images, provide a good descriptive alt tag. For video, provide audio description describing essential visual elements.

Leave a Reply