Introduction

Why Test with Screen Readers?

Testing with screen readers is the only way to know if you've actually achieved screen reader compatibility, especially when it comes to dynamic content and custom widgets. Automated tools and checklists are important, but they have inherent limitations.

Learning a screen reader can seem intimidating at first, but by learning a few keystrokes and understanding how people use screen readers, you'll be able to test web content accessibility accurately and completely.

Summary

Screen readers have revolutionized the way people with disabilities can access computers and the internet, but screen readers can't magically make web pages accessible if they weren't designed to be accessible in the first place. Dynamic content, in particular, can be tricky to make accessible to screen readers. Testing with screen readers is essential.

Learning a screen reader can be a bit intimidating at first, but with a few basic keystrokes (see the Desktop Screen Readers Basic Keyboard Commands handout), you can know enough to do basic accessibility testing. With practice, you can have a deep understanding of the challenges and solutions relevant to people who use screen readers.

Testing reasons for Screen Readers

  • To ensure content is accessible with today's technology
  • Especially with dynamic content, JavaScript, and ARIA
  • You can't just implement the ARIA specs without testing for garanties
  • Add creative alternative methods when needed
  • Helps identify problems with alt text, reading order, table markup, form elements
  • Finds mistakes that you won't detect by automatic testing alone
  • Compatible with screen readers also often work well for people with physical disabilities
  • Not using a mouse, use a single-switch device instead of a keyboard, navigate in similar ways

Jump to:

Guidelines

Resources

Deque University

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Screen Reader Basics

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

What are Screen Readers?

  • Convert digital text into speech or Braille output
  • Reads operating systems, software, web sites, and other digital assets
  • Blind people use computers independently, no help from anyone!!!
  • Means blind person can get jobs that require computer use
  • Send emails, read about current events on the internet, play games, and anything else
  • Help make the digital world an equal opportunity
  • Can read many languages
  • Can also output to refreshable Braille devices

Who Uses Screen Readers?

  • Blind individuals
  • Individuals who are deaf and blind
  • People with reading disabilities
  • Persons who are illiterate
  • People with dyslexia
  • People sitting in a car
  • Persons who prefer the text to be read to them
  • Web accessibility testers

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Characteristics of Screen Readers

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

Can Web Sites Detect Screen Readers?

  • Yes, You can Sort of Detect Some Screen Readers, But... No, Not Really
  • Concerns is it will result in entirely separate and unequal designs
  • Fear is it will result in a worse experience for screen reader users
  • Objection is that people don't want the web site to know they use them

No Visual Interface

  • No graphical user interface
  • For blind, low vision and cognitive disabilities
  • Memorize quite a few keyboard shortcuts
  • Keyboard shortcuts

Screen (may also!) Readers Read the DOM

  • Figure 1: The contract model with accessibility APIs
  • User agent conveys relevant information to OS accessibility API
  • Accessibility information found in the accessibility API
  • Name, role, state, selection, event notification, relationship information, and descriptions
  • Some screen readers may also look at the DOM

(Often) No Mouse, Just Keyboard

  • All elements and controls must be available to keyboard
  • Mouse may also be used for speech output
  • You must learn keyboard shortcuts for browsers
  • You must learn shortcuts specific for different screen readers

No Visual Styles

  • Screen readers ignore pretty much everything about visual styles via CSS.
  • Effect in place for: display: block/none; visibility: visible/hidden; pseudo classes :before:after + content: property

Linear Content

  • Screen reader users cannot glance at a web page, and cannot intuitively understand the page's layout quickly.
  • Read through the entire page, it will start at the first element in the DOM and proceed until the last element in the DOM
  • This is often NOT the way they create a mental map of the web site
  • Screen Readers Require a Logical Linear Reading Order in the DOM

Non-Linear Navigation

  • Linear experience by reading complete page will take a long time
  • For yourself you also don't read complete pages
  • Blind users want to skip parts of web pages too
  • Navigate through the structural and semantic elements is common
  • Landmark regions, headings, links, tables, form elements, frames, lists, and other items

Reading Page Content

  • When a page is loaded screen readers announce the page <title>element
  • Acronyms and Abbreviations may be pronounced
  • Reading letter by letter is possible with distinguishes between upper and lower case
  • Proper announcing for Typographic Symbols can't be relied on
  • Images always need proper alt attribute
  • If link destination is on same page, "same page link" often announced
  • Heading levels are announced and most important for navigating
  • Table headers, captions and relations need to be in place for proper understanding
  • Words that are spelled the same yet have different meanings are difficult for SR
  • Option to navigate forms in or out of form navigation mode
  • Screen readers can switch languages while reading
  • Ability to read all, none or just a bit of punctuation

Virtual Buffer VS Browsers VS A11Y APIs

  • Virtual buffer will disappear
  • Browsers must take over this role
  • APIs will be more and more important
  • Tabbing through all tab-navigable elements on the page, or
  • Jumping from heading to heading, or
  • Jumping from paragraph to paragraph to hear the first sentence or two,
  • By skipping repetitive navigation elements, and
  • By accessing a list of all of the forms, buttons, links, lists, tables and other content on a page

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Accessibility APIs

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Wayfinding and Reading Content with Screen Readers

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Screen Reader Modes

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

Document Mode

  • The default mode of screen readers
  • Document navigation keyboard shortcuts are available
  • Read the text, including reading each character individually, if necessarys
  • T key to navigate from one table to the next, or the G key to navigate from graphic to the next, and so on
  • Generally read from the virtual buffer, a copy of the original text

Document Mode

  • ARIA Widgets and Focus/Forms Mode Support in JAWS and NVDA
    • All keyboard shortcuts associated with letters and numbers disabled
    • To allow you to type the letters and numbers
    • Generally automatically switch to forms mode when focussed
    • So it won't land on paragraphs, spans, headings, divs, or anything else that is not focusable
    • Native form elements and aria-label, aria-labelledby and aria-describedby as well as tabindex="0" on elements will be read

Application Mode

  • If you use the WAI-ARIA role “application”, please do so wisely!
    • Allow to implement all keyboard functionality needed to make an application work
    • Disables nearly all regular keyboard shortcuts and gives a blank slate
    • Regular text is not readable
    • Similar to forms mode, only the focusable elements will be read
    • Wrap only a small portion of the page in an application region
    • A technique for text to be read is to add role="document" inside the application region

JAWS (Windows)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • From Freedom Scientific, now part of VFO
  • Works best with Internet Explorer
  • Expensive, around $1000,-, also updates pricey
  • 40-Minute Demo Version, forbidden for regular testing!

Practice

WCAG Annotations

None documented

Design Annotations

None documented

NVDA (Windows)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • Open-source screen reader
  • Works best with Firefox
  • Free

Resources

Specifications

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

VoiceOver (iOS)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • Pre-installed on all iOS devices (phones and tablets
  • Small differences from OSX version
  • iOS slightly better support
  • Third-party apps need to follow guidelines

Resources

Specifications

Examples

None documented

Miscellaneous

Practice

WCAG Annotations

None documented

Design Annotations

None documented

TalkBack (Android)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • Pre-installed or downloadable from Google Play
  • Works best on Google products
  • Third-party apps need to follow guidelines

Practice

WCAG Annotations

None documented

Design Annotations

None documented

VoiceOver (Mac OS X)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • Built-in screen reader called VoiceOver
  • Limited support for software like Word, PDF etc.
  • On-Screen Subtitles and Menus
  • Works best with Safari

Resources

Specifications

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Narrator (Windows)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

  • Free for all Window users
  • Mature version for Window 10

Resources

Specifications

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Window-Eyes (Windows)

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

ChromeVox

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Printable Resources

Checklist Deque

None documented

Download Summary & Checklist

None documented

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented