HTML attributes Screen reader compatibility

ARIA HTML
Sep 11, 2022

Shows how different HTML attributes behave in commonly used screen readers.

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)

alt

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (96% average)100% 97% 100% 100% 94% 100% 99% 90%
Should work. Works in 100% Heading is img with altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% Link containing img with altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% area and img with alt attributesGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 1% - 25% area with alt attribute and img with null altGoodGoodGoodGoodBetterGoodGoodGood
Should work. Fails in 1% - 25% button containing img with altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% button with aria-label containing img with null altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% button with title containing img with null altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% img with altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% img with null altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% input type=image with altGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% Definition lists with images as bulletsBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Heading is img alt=filenameBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Heading is img with `alt=BadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Heading is img with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 51% - 75% Image map with no name attributeBadBetterBadBadBetterBadBadBad
Should fail. Fails in 76% - 100% Link containing img with null altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Link containing img without altBadBadBadBadBadBadBadBad
Should fail. Fails in 1% - 25% Link with aria-label containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 1% - 25% Link with aria-labelledby containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 1% - 25% Link with title containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 26% - 50% applet with alt attributeGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 76% - 100% area with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% area with null altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% button containing img with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% button containing img with null altBadBadBadBadBadBadBadBad
Should fail. Fails in 1% - 25% button with aria-label containing img with no altGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 1% - 25% button with title containing img with no altGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% embed with alt attributeBadBadBadBadBadBadBetterBetter
Should fail. Fails in 51% - 75% img with alt set to ASCII art smileyBadBadBadBadBadBadGoodGood
Should fail. Fails in 76% - 100% img with alt set to src filenameBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% img with null alt and non-null title attributesBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% img with null alt and non-null aria-label attributesBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% img with null alt and non-null aria-labelledby attributesBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% img without altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% input type=image with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% input type=image with null altBadBadBadBadBadBadBadBad
Should fail. Fails in 51% - 75% object with alt attributeGoodBetterBetterBadBetterBadBetterBetter

aria-describedby

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (92% average)100% 100% 100% 100% 95% 100% 78% 100%
Should work. Fails in 1% - 25% Click Here link with aria-describedby attributeGoodGoodGoodGoodBetterGoodBetterGood
Should work. Fails in 1% - 25% input type=text with aria-describedby attributeGoodGoodGoodGoodBetterGoodBadGood
Should fail. Fails in 76% - 100% img with aria-describedbyBadBadBadBadBadBadGoodBad

aria-label

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (76% average)83% 80% 83% 83% 72% 86% 84% 69%
Should work. Fails in 1% - 25% Link text replaced by aria-label attributeGoodBetterGoodGoodBetterGoodGoodGood
Should work. Fails in 26% - 50% applet with aria-label attributeGoodBetterGoodGoodBetterGoodBetterGood
Should work. Fails in 26% - 50% area with aria-label attributeGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 76% - 100% audio with aria-label attributeBadBadBadBadBadBadBadBad
Should work. Fails in 1% - 25% button containing img with aria-labelGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% button with aria-label containing img with null altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 51% - 75% embed with aria-label attributeBadBetterBadBadBadBadBetterBetter
Should work. Fails in 1% - 25% img with aria-labelGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% input type=image with aria-label attributeGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% input type=text with aria-label attributeGoodBetterGoodGoodGoodGoodGoodGood
Should work. Fails in 26% - 50% object with aria-label attributeGoodBetterGoodGoodBetterGoodBetterBetter
Should work. Fails in 51% - 75% video with aria-label attributeBadBetterBadBadBadBadBetterBetter
Should fail. Fails in 1% - 25% Link with aria-label containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 1% - 25% button with aria-label containing img with no altGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% img with null alt and non-null aria-label attributesBadBadBadBadBadBadBadBad

aria-labelledby

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (68% average)81% 79% 81% 81% 58% 84% 70% 66%
Should work. Fails in 1% - 25% Link text replaced by aria-labelledby attributeGoodBetterGoodGoodGoodGoodGoodGood
Should work. Fails in 26% - 50% applet with aria-labelledby attributeGoodBetterGoodGoodBetterGoodBetterGood
Should work. Fails in 26% - 50% area with aria-labelledby attributeGoodBetterGoodGoodBetterGoodBadBad
Should work. Fails in 76% - 100% audio with aria-labelledby attributeBadBadBadBadBadBadBadBad
Should work. Fails in 1% - 25% button containing img with aria-labelledbyGoodGoodGoodGoodBadGoodGoodGood
Should work. Fails in 51% - 75% embed with aria-labelledby attributeBadBetterBadBadBadBadBetterBetter
Should work. Fails in 1% - 25% img with aria-labelledbyGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% input type=image with aria-labelledby attributeGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% input type=text with aria-labelledby attributeGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 51% - 75% object with aria-labelledby attributeGoodBetterGoodGoodBetterGoodBetterBetter
Should work. Fails in 76% - 100% video with aria-labelledby attributeBadBetterBadBadBadBadBetterBetter
Should fail. Fails in 1% - 25% Link with aria-labelledby containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 76% - 100% img with null alt and non-null aria-labelledby attributesBadBadBadBadBadBadBadBad
Should fail. Fails in 1% - 25% input with aria-labelledby pointing to role=presentation elementGoodGoodGoodGoodGoodGoodGoodGood

aria-level

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (93% average)100% 100% 100% 100% 100% 100% 100% 100%
Should work. Fails in 1% - 25% ARIA role=headingGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% Nested ARIA headingsBadBadBadBadBadBadBadBetter

for

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
Should work. Works in 100% input type=text with label forGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% input type=text with blank label forBadBadBadBadBadBadBadBad
Should fail. Fails in 51% - 75% label elements reference controls with duplicate idsBadBadBadBadBadBadBadBad

headers

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (54% average)100% 100% 100% 100% 40% 100% 0% 0%
Should work. Fails in 26% - 50% Data table with td headers attributeGoodGoodGoodGoodBadGoodBadBad

href

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 51% - 75% Link with onclick but no hrefBadBadBadBadBadBadBadBad

id

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (91% average)100% 100% 100% 100% 89% 100% 82% 69%
Should work. Fails in 26% - 50% Data table with td headers attributeGoodGoodGoodGoodBadGoodBadBad
Should work. Works in 100% input type=text with aria-labelledby attributeGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% input type=text with label forGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 76% - 100% input type=text with blank label forBadBadBadBadBadBadBadBad
Should fail. Fails in 1% - 25% input with aria-labelledby pointing to role=presentation elementGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 51% - 75% label elements reference controls with duplicate idsBadBadBadBadBadBadBadBad

ismap

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 76% - 100% img with server side image mapBadBadBadBadBadBadBadBad

lang

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
Should work. Works in 100% Page with lang set on the html and p elementsGoodGoodGoodGoodGoodGoodGoodGood

media

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 76% - 100% CSS stylesheet link with media=auralBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% CSS stylesheet link with media=speechBadBadBadBadBadBadBadBad

name

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (69% average)100% 62% 100% 100% 49% 100% 75% 13%
Should work. Fails in 1% - 25% area and img with alt attributesGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 1% - 25% area with alt attribute and img with null altGoodGoodGoodGoodBetterGoodGoodGood
Should work. Fails in 26% - 50% area with aria-label attributeGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 26% - 50% area with aria-labelledby attributeGoodBetterGoodGoodBetterGoodBadBad
Should work. Fails in 26% - 50% area with title attributeGoodBadGoodGoodBadGoodBetterBad
Should fail. Fails in 51% - 75% Image map with no name attributeBadBetterBadBadBetterBadBadBad
Should fail. Fails in 76% - 100% area with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% area with null altBadBadBadBadBadBadBadBad

role

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (74% average)77% 75% 76% 85% 91% 90% 74% 49%
Should work. Fails in 1% - 25% ARIA role=headingGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 51% - 75% Data table with role=columnheader headers but no thBadBadBadBadBadBadBadBad
Should work. Fails in 1% - 25% Data table with role=gridGoodGoodGoodGoodBetterGoodBetterBad
Should work. Works in 100% Data table with role=tableGoodGoodGoodGoodGoodGoodGoodGood
Should work. Works in 100% Interactive iframe with role=presentation and no accessible name GoodGood
Should work. Fails in 76% - 100% Interactive iframe with negative tabindex
Should work. Fails in 1% - 25% Layout table with role=presentationGoodGoodGoodGoodGoodGoodGoodBetter
Should work. Fails in 76% - 100% Scrolling iframe with negative tabindex
Should fail. Fails in 76% - 100% Data table with role=noteBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Data table with role=presentationBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Nested ARIA headingsBadBadBadBadBadBadBadBetter
Should fail. Fails in 1% - 25% input with aria-labelledby pointing to role=presentation elementGoodGoodGoodGoodGoodGoodGoodGood

scope

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (57% average)100% 33% 100% 100% 100% 100% 22% 0%
Should work. Fails in 26% - 50% Data table with th scope on cell headersGoodBetterGoodGoodGoodGoodBetterBad
Should fail. Fails in 26% - 50% Data table th cell headers with no scopeGoodBetterGoodGoodBetterGoodGoodBad

src

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 76% - 100% iframe where src is a PNG imageBadBadBadBadBadBadBetterBad

summary

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (81% average)100% 100% 100% 100% 80% 100% 89% 0%
Should work. Fails in 1% - 25% Data table with summary and thGoodGoodGoodGoodBetterGoodBetterBad
Should fail. Fails in 76% - 100% Data table with summary but no thBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% Data table with null summary and no thBadBadBadBadBadBadBadBad

tabindex

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (50% average) 25% 100%
Should work. Fails in 26% - 50% Interactive iframe with role=presentation and negative tabindex and no accessible name BadGood
Should work. Fails in 51% - 75% Interactive iframe with negative tabindex and no accessible name BadGood

target

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Should fail. Fails in 76% - 100% Link target opens in new windowBadBadBadBadBadBadBetterBetter

title

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (72% average)83% 70% 83% 83% 70% 84% 73% 61%
Should work. Fails in 1% - 25% Click Here link with title attributeGoodGoodGoodGoodBetterGoodBetterBetter
Should work. Works in 100% Link containing img with titleGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 76% - 100% abbr with titleBadBadBadBadBadBadBadBad
Should work. Fails in 26% - 50% applet with title attributeGoodBetterGoodGoodBetterGoodBetterGood
Should work. Fails in 26% - 50% area with title attributeGoodBadGoodGoodBadGoodBetterBad
Should work. Fails in 76% - 100% audio with title attributeBadBadBadBadBadBadBadBad
Should work. Fails in 26% - 50% button containing img with title attributeGoodGoodGoodGoodGoodGoodBadBad
Should work. Works in 100% button with title containing img with null altGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 76% - 100% embed with title attributeBadBetterBadBadBadBadBetterBetter
Should work. Fails in 1% - 25% iframe with title attributeGoodBadGoodGoodBetterGoodGoodGood
Should work. Works in 100% img with titleGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% input type=image with title attributeGoodGoodGoodGoodGoodGoodGoodGood
Should work. Fails in 1% - 25% input type=text with title attributeGoodBetterGoodGoodGoodGoodGoodGood
Should work. Fails in 51% - 75% object with title attributeGoodBetterGoodGoodBetterGoodBetterBetter
Should work. Fails in 51% - 75% video with title attributeBadBetterBadBadBadBadBetterBetter
Should fail. Fails in 1% - 25% Link with title containing img with no altGoodBetterGoodGoodBetterGoodBetterGood
Should fail. Fails in 76% - 100% acronym with titleBadBadBadBadBadBadBadBad
Should fail. Fails in 1% - 25% button with title containing img with no altGoodGoodGoodGoodGoodGoodGoodGood
Should fail. Fails in 51% - 75% iframe with title matching frame filenameBadBadBadBadBadBadBadGood
Should fail. Fails in 1% - 25% iframe with blank titleGoodBadGoodGoodBetterGoodBadGood
Should fail. Fails in 76% - 100% img with null alt and non-null title attributesBadBadBadBadBadBadBadBad

usemap

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (69% average)100% 62% 100% 100% 49% 100% 75% 13%
Should work. Fails in 1% - 25% area and img with alt attributesGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 1% - 25% area with alt attribute and img with null altGoodGoodGoodGoodBetterGoodGoodGood
Should work. Fails in 26% - 50% area with aria-label attributeGoodBetterGoodGoodBetterGoodBetterBad
Should work. Fails in 26% - 50% area with aria-labelledby attributeGoodBetterGoodGoodBetterGoodBadBad
Should work. Fails in 26% - 50% area with title attributeGoodBadGoodGoodBadGoodBetterBad
Should fail. Fails in 51% - 75% Image map with no name attributeBadBetterBadBadBetterBadBadBad
Should fail. Fails in 76% - 100% area with no altBadBadBadBadBadBadBadBad
Should fail. Fails in 76% - 100% area with null altBadBadBadBadBadBadBadBad

xml:lang

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (35% average)33% 13% 50% 50% 25% 63% 33% 33%
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
Should work. Works in 100% text/html page with mismatching lang and xml:lang on the html elementGoodGoodGoodGoodGoodGoodGoodGood

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