CSS and text content Screen reader compatibility

Accessibility
Sep 11, 2022

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 (marked with Expected to Fail)

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.

ComboVersionsReliabilityTest Changes
JAWS ChromeJAWS 2022.2207.25 with Chrome 105
JAWS EdgeJAWS 2022.2207.25 with Edge 105
JAWS FirefoxJAWS 2022.2207.25 with FF102
JAWS IEJAWS 2019.1912.1 with IE11
NVDA ChromeNVDA 2022.2 with Chrome 105
NVDA EdgeNVDA 2022.2 with Edge 105
NVDA FirefoxNVDA 2022.2 with FF102
NVDA IENVDA 2019.2 with IE11
VoiceOver MacVoiceOver macOS 12.5 with Safari 15.6
VoiceOver iOSVoiceOver iOS 15.6 with Safari iOS 15.6
WindowEyes IEWindowEyes 9.2 with IE11 
Dolphin IEDolphin SR 15.05 with IE11 
SaToGo IESaToGo 3.4.96.0 with IE11 
Average Including older versions

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

100%80%60%40%20%0%201520162017201864%201963%202075%202150%202253%

Works as expected

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

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should work. Works in 100% Page with lang set on the html and p elementsGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% text/html page with mismatching lang and xml:lang on the html elementGoodGoodGoodGoodGoodGoodGoodGood

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 ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should work. Fails in 26% - 50% Match lang subtagsBadBadBadGoodGoodGoodGoodGood
Should work. Fails in 76% - 100% Page with xml:lang set on the html and p elementsBadBadBadBadBadBadBadBad
Should work. Fails in 76% - 100% application/xhtml+xml page with mismatching lang and xml:lang on the html elementBadBadBadBadBadBadBadBad

Expected to fail

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

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 26% - 50% CSS content: propertyGoodGoodGoodGoodBetterGoodGoodGood
Should fail. Fails in 76% - 100% CSS media query with @media auralBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% CSS media query with @media speechBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% CSS stylesheet link with media=auralBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% CSS stylesheet link with media=speechBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Definition lists with images as bulletsBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Look alike unicode charsBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Space separated tablesBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Space separated wordsBadBadBadBadBadBadBadBad

Key

Tests expected to fail (due to authoring errors) are marked with Expected to Fail.

  • Works in all Works in 100% of tested screen readers
  • 75% to 99% Fails in 1% - 25% of tested screen readers
  • 50% to 74% Fails in 26% - 50% of tested screen readers
  • 25% to 49% Fails in 51% - 75% of tested screen readers
  • 0% to 24% Fails in 76% - 100% of tested screen readers
  • Stable Stable - works, or doesn't cause problems, in all versions of a specific combination of screen reader and browser
  • Better Better - works, or doesn't cause problems, in the most recent version of a specific combination of screen reader and browser (improvement)
  • Worse 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 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