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
)
alt
aria-describedby
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (92% average) | 100% | 100% | 100% | 100% | 95% | 100% | 78% | 100% |
![]() aria-describedby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with aria-describedby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() img with aria-describedby | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
aria-label
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (76% average) | 83% | 80% | 83% | 83% | 72% | 86% | 83% | 67% |
![]() aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() applet with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() audio with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() button containing img with aria-label | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() button with aria-label containing img with null alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() embed with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() img with aria-label | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=image with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() object with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() video with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() aria-label containing img with no alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() button with aria-label containing img with no alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() img with null alt and non-null aria-label attributes | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
aria-labelledby
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (67% average) | 81% | 79% | 81% | 81% | 58% | 84% | 68% | 64% |
![]() aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() applet with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() audio with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() button containing img with aria-labelledby | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() embed with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() img with aria-labelledby | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=image with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() object with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() video with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() aria-labelledby containing img with no alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() img with null alt and non-null aria-labelledby attributes | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input with aria-labelledby pointing to role=presentation element | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
aria-level
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (93% average) | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
![]() role=heading | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
for
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (100% average) | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
![]() input type=text with label for | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with blank label for | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() label elements reference controls with duplicate ids | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
headers
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (56% average) | 100% | 100% | 100% | 100% | 40% | 100% | 0% | 0% |
![]() td headers attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
href
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
![]() onclick but no href | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
id
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (92% average) | 100% | 100% | 100% | 100% | 89% | 100% | 82% | 69% |
![]() td headers attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with label for | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input type=text with blank label for | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input with aria-labelledby pointing to role=presentation element | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() label elements reference controls with duplicate ids | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
ismap
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
![]() img with server side image map | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
lang
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (100% average) | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
![]() lang set on the html and p elements | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
media
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
![]() media=aural | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() media=speech | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
name
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (69% average) | 100% | 62% | 100% | 100% | 49% | 100% | 74% | 12% |
![]() area and img with alt attributes | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with alt attribute and img with null alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with title attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() map with no name attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with no alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with null alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
role
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (74% average) | 75% | 74% | 75% | 83% | 91% | 90% | 71% | 44% |
![]() role=heading | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() role=columnheader headers but no th | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() role=grid | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() role=presentation | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() role=note | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() role=presentation | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() input with aria-labelledby pointing to role=presentation element | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
scope
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (58% average) | 100% | 33% | 100% | 100% | 100% | 100% | 13% | 0% |
![]() th scope on cell headers | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() th cell headers with no scope | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
src
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
![]() iframe where src is a PNG image | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
summary
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (82% average) | 100% | 100% | 100% | 100% | 80% | 100% | 88% | 0% |
![]() summary and th | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() summary but no th | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() summary and no th | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
target
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
![]() target opens in new window | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
title
usemap
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (69% average) | 100% | 62% | 100% | 100% | 49% | 100% | 74% | 12% |
![]() area and img with alt attributes | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with alt attribute and img with null alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-label attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with aria-labelledby attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with title attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() map with no name attribute | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with no alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() area with null alt | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
xml:lang
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (33% average) | 33% | 13% | 50% | 50% | 25% | 63% | 25% | 25% |
![]() lang subtags | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() xml:lang set on the html and p elements | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() application/xhtml+xml page with mismatching lang and xml:lang on the html element | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
![]() text/html page with mismatching lang and xml:lang on the html element | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
Key
Tests expected to fail (due to authoring errors) are marked with .
Works in 100% of tested screen readers
Fails in 1% - 25% of tested screen readers
Fails in 26% - 50% of tested screen readers
Fails in 51% - 75% of tested screen readers
Fails in 76% - 100% of tested screen readers
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