HTML attributes Screen reader compatibility

ARIA HTML
Nov 26, 2024

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

alt

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (96% average)100% 98% 98% 100% 95% 100% 99% 90%
100%Heading is img with alt
100%Link containing img with alt
80%area and img with alt attributes
97%area with alt attribute and img with null alt
95%button containing img with alt
95%button with aria-label containing img with null alt
100%button with title containing img with null alt
100%img with alt
100%img with null alt
100%input type=image with alt
Issues when used incorrectly (71% average)68% 68% 70% 71% 70% 72% 71% 72%
98%Definition lists with images as bullets
100%Heading is img alt=filename
100%Heading is img with `alt=
100%Heading is img with no alt
51%Image map with no name attribute
100%Link containing img with null alt
100%Link containing img without alt
8%Link with aria-label containing img with no alt
15%Link with aria-labelledby containing img with no alt
5%Link with title containing img with no alt
33%applet with alt attribute
100%area with no alt
100%area with null alt
100%button containing img with no alt
100%button containing img with null alt
1%button with aria-label containing img with no alt
8%button with title containing img with no alt
89%embed with alt attribute
68%img with alt set to ASCII art smiley
100%img with alt set to src filename
100%img with null alt and non-null title attributes
100%img with null alt and non-null aria-label attributes
100%img with null alt and non-null aria-labelledby attributes
100%img without alt
100%input type=image with no alt
100%input type=image with null alt
64%object with alt attribute

aria-describedby

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (93% average)100% 100% 100% 100% 94% 100% 82% 100%
93%Click Here link with aria-describedby attribute
94%input type=text with aria-describedby attribute
Issues when used incorrectly (87% average)100% 92% 100% 100% 100% 100% 9% 100%
87%img with aria-describedby

aria-label

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (78% average)86% 83% 85% 82% 74% 84% 85% 70%
85%Interactive iframe with role=presentation and aria-label attribute
92%Link text replaced by aria-label attribute
77%applet with aria-label attribute
76%area with aria-label attribute
1%audio with aria-label attribute
96%button containing img with aria-label
95%button with aria-label containing img with null alt
35%embed with aria-label attribute
96%img with aria-label
98%input type=image with aria-label attribute
92%input type=text with aria-label attribute
58%object with aria-label attribute
33%video with aria-label attribute
Issues when used incorrectly (22% average)20% 21% 20% 20% 21% 20% 22% 29%
8%Link with aria-label containing img with no alt
1%button with aria-label containing img with no alt
100%img with null alt and non-null aria-label attributes

aria-labelledby

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (70% average)84% 82% 81% 81% 61% 83% 71% 67%
95%Link text replaced by aria-labelledby attribute
74%applet with aria-labelledby attribute
59%area with aria-labelledby attribute
0%audio with aria-labelledby attribute
79%button containing img with aria-labelledby
28%embed with aria-labelledby attribute
89%img with aria-labelledby
92%input type=image with aria-labelledby attribute
100%input type=text with aria-labelledby attribute
52%object with aria-labelledby attribute
23%video with aria-labelledby attribute
Issues when used incorrectly (27% average)20% 22% 20% 20% 21% 20% 23% 31%
15%Link with aria-labelledby containing img with no alt
100%img with null alt and non-null aria-labelledby attributes
3%input with aria-labelledby pointing to role=presentation element

aria-level

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (94% average)100% 100% 100% 100% 100% 100% 100% 100%
94%ARIA role=heading
Issues when used incorrectly (97% average)100% 100% 100% 100% 100% 100% 100% 73%
97%Nested ARIA headings

for

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
100%input type=text with label for
Issues when used incorrectly (87% average)75% 75% 75% 95% 88% 96% 100% 100%
100%input type=text with blank label for
75%label elements reference controls with duplicate ids

headers

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (57% average)100% 100% 100% 100% 33% 100% 0% 0%
57%Data table with td headers attribute

href

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (39% average)25% 24% 25% 25% 35% 25% 24% 48%
26%CSS content: property on link
53%Link with onclick but no href

id

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (92% average)100% 100% 100% 100% 88% 100% 81% 69%
57%Data table with td headers attribute
100%input type=text with aria-labelledby attribute
100%input type=text with label for
Issues when used incorrectly (62% average)50% 52% 50% 63% 64% 64% 69% 71%
100%input type=text with blank label for
3%input with aria-labelledby pointing to role=presentation element
75%label elements reference controls with duplicate ids

ismap

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
100%img with server side image map

lang

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
100%Page with lang set on the html and p elements

media

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (100% average)100% 100% 100% 100% 100% 100% 100% 100%
100%CSS stylesheet link with media=aural
100%CSS stylesheet link with media=speech

name

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (72% average)100% 65% 100% 100% 54% 100% 75% 14%
80%area and img with alt attributes
97%area with alt attribute and img with null alt
76%area with aria-label attribute
59%area with aria-labelledby attribute
59%area with title attribute
Issues when used incorrectly (84% average)87% 71% 90% 87% 79% 90% 100% 100%
51%Image map with no name attribute
100%area with no alt
100%area with null alt

role

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (77% average)83% 79% 81% 79% 90% 84% 78% 53%
94%ARIA role=heading
30%Data table with role=columnheader headers but no th
81%Data table with role=grid
96%Data table with role=table
86%Interactive iframe with role=presentation and no accessible name
95%Layout table with role=presentation
Issues when used incorrectly (63% average)60% 64% 60% 60% 64% 60% 62% 71%
89%Data table with role=note
96%Data table with role=presentation
97%Nested ARIA headings
3%input with aria-labelledby pointing to role=presentation element

scope

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (63% average)100% 45% 100% 100% 100% 100% 30% 0%
63%Data table with th scope on cell headers
Issues when used incorrectly (30% average)0% 55% 0% 0% 8% 0% 0% 100%
30%Data table th cell headers with no scope

src

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (87% average)100% 100% 100% 100% 100% 100% 14% 100%
87%iframe where src is a PNG image

summary

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (84% average)100% 100% 100% 100% 83% 100% 90% 10%
84%Data table with summary and th
Issues when used incorrectly (97% average)100% 100% 100% 100% 100% 100% 100% 100%
97%Data table with summary but no th
97%Data table with null summary and no th

tabindex

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (50% average)50% 50% 50% 50% 50% 50% 75% 0%
48%Interactive iframe with role=presentation and negative tabindex and no accessible name
52%Interactive iframe with negative tabindex and no accessible name

target

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Issues when used incorrectly (85% average)100% 100% 100% 100% 100% 100% 45% 36%
85%Link target opens in new window

title

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (74% average)84% 73% 83% 82% 71% 83% 74% 62%
90%Click Here link with title attribute
85%Interactive iframe with role=presentation and title attribute
100%Link containing img with title
0%abbr with title
67%applet with title attribute
59%area with title attribute
1%audio with title attribute
77%button containing img with title attribute
100%button with title containing img with null alt
23%embed with title attribute
91%iframe with title attribute
100%img with title
99%input type=image with title attribute
92%input type=text with title attribute
54%object with title attribute
32%video with title attribute
Issues when used incorrectly (37% average)40% 44% 40% 30% 35% 30% 46% 31%
5%Link with title containing img with no alt
100%acronym with title
8%button with title containing img with no alt
58%iframe with title matching frame filename
13%iframe with blank title
100%img with null alt and non-null title attributes

usemap

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (72% average)100% 65% 100% 100% 54% 100% 75% 14%
80%area and img with alt attributes
97%area with alt attribute and img with null alt
76%area with aria-label attribute
59%area with aria-labelledby attribute
59%area with title attribute
Issues when used incorrectly (84% average)87% 71% 90% 87% 79% 90% 100% 100%
51%Image map with no name attribute
100%area with no alt
100%area with null alt

xml:lang

Screen ReaderNVDAJAWSVoiceOver
BrowserEdgeFFCrEdgeFFCrMaciOS
Reliability when used correctly (37% average)29% 19% 38% 50% 38% 56% 38% 38%
63%Match lang subtags
14%Page with xml:lang set on the html and p elements
0%application/xhtml+xml page with mismatching lang and xml:lang on the html element
100%text/html page with mismatching lang and xml:lang on the html element

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