CSS and text content Screen reader compatibility

Screen reader compatibility for CSS and text, showing how failures and techniques work in specific screen reader / browser combinations.

The results include two types of test:

• Expected to work - these tests show support when accessibility features are used correctly
• Expected to fail - these tests show what happens when accessibility features are used incorrectly

Reliability by user agent

The solid area in the graph shows percentage of tests that pass in all tested interaction modes. The cross hatched area shows partial passes that only work in some interaction modes.

An example of a partial pass is when form labels are read when tabbing, but ignored in browse mode.

The average includes all versions, but some browser/AT combinations have tests for multiple versions (NVDA / JAWS / VoiceOver), while others only have tests for a single version (SaToGo and Dolphin).

Reliability trend

Works as expected

These tests use conformant HTML or WCAG sufficient techniques, and work in all tested browser / screen reader combinations.

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
	Page with lang set on the html and p elements
	text/html page with mismatching lang and xml:lang on the html element

Expected to work

These tests use conformant HTML or WCAG sufficient techniques and might be expected to work in screen readers. This doesn't always happen.

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
	Match lang subtags
	Page with xml:lang set on the html and p elements
	application/xhtml+xml page with mismatching lang and xml:lang on the html element

Expected to fail

These tests use non-conformant HTML or WCAG failures and are expected to fail in screen readers.

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
	CSS content: property on div
	CSS content: property on link
	CSS media query with @media aural
	CSS media query with @media speech
	CSS stylesheet link with media=aural
	CSS stylesheet link with media=speech
	Definition lists with images as bullets
	Look alike unicode chars
	Space separated tables
	Space separated words

Key

• Stable - works, or doesn't cause problems, in all versions of a specific combination of screen reader and browser
• Better - works, or doesn't cause problems, in the most recent version of a specific combination of screen reader and browser (improvement)
• Worse - causes problems in the most recent version of a specific combination of screen reader and browser, but used to work in older versions (regression)
• Broken - causes problems in all versions of a specific combination of screen reader and browser

Test notes

All tests were carried out with screen reader factory settings. JAWS in particular has a wide variety of settings controlling exactly what gets spoken.

Screen readers allow users to interact in different modes, and can produce very different results in each mode. The modes used in these tests are:

• Reading Content read using the “read next” command in a screen reader
• Tabbing Content read using the “tab” key in a screen reader
• Heading Content read using the “next heading” key in a screen reader
• Touch Content read when touching an area of screen on a mobile device

In the “What the user hears” column:

• Commas represent short pauses in screen reader voicing
• Full Stops represent places where voicing stops, and the “read next” or “tab” or “next heading” command is pressed again
• Ellipsis … represent a long pause in voicing
• (Brackets) represent voicing that requires a keystroke to hear