HTML elements Screen reader compatibility
HTML
Dec 12, 2023
Shows how different HTML elements 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 )
a
abbr
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (0% average) | 0% | 0% | 0% | 0% | 0% | 0% | 0% | 0% |
abbr with title |
acronym
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
acronym with title |
applet
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (76% average) | 100% | 91% | 100% | 100% | 66% | 90% | 58% | 100% |
applet inside figure with figcaption element | ||||||||
applet with aria-label attribute | ||||||||
applet with aria-labelledby attribute | ||||||||
applet with title attribute | ||||||||
applet with fallback content | ||||||||
applet with alt attribute | ||||||||
applet with no description |
area
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (71% average) | 100% | 64% | 100% | 100% | 52% | 100% | 75% | 13% |
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 | ||||||||
Image map with no name attribute | ||||||||
area with no alt | ||||||||
area with null alt |
audio
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (1% average) | 0% | 0% | 0% | 0% | 0% | 0% | 0% | 0% |
audio with aria-label attribute | ||||||||
audio with aria-labelledby attribute | ||||||||
audio with title attribute | ||||||||
audio with fallback content | ||||||||
audio with no description |
button
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (90% average) | 100% | 100% | 100% | 100% | 83% | 100% | 83% | 83% |
button containing img with alt | ||||||||
button containing img with aria-label | ||||||||
button containing img with aria-labelledby | ||||||||
button containing img with title attribute | ||||||||
button with aria-label containing img with null alt | ||||||||
button with title containing img with null alt | ||||||||
button containing img with no alt | ||||||||
button containing img with null alt | ||||||||
button with aria-label containing img with no alt | ||||||||
button with title containing img with no alt |
caption
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (92% average) | 100% | 100% | 100% | 100% | 91% | 100% | 100% | 56% |
Data table with caption and th | ||||||||
Data table with caption but no th |
dd
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Definition lists with images as bullets |
div
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (94% average) | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
ARIA role=heading | ||||||||
CSS content: property on div | ||||||||
Nested ARIA headings |
embed
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (45% average) | 25% | 81% | 25% | 25% | 28% | 50% | 58% | 42% |
embed inside figure with figcaption | ||||||||
embed with aria-label attribute | ||||||||
embed with aria-labelledby attribute | ||||||||
embed with title attribute | ||||||||
embed with alt attribute | ||||||||
embed with no description |
fieldset
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (88% average) | 100% | 93% | 100% | 100% | 96% | 100% | 93% | 55% |
Yes/No radio buttons inside fieldset element | ||||||||
fieldset containing links | ||||||||
Yes/No radio buttons without fieldset | ||||||||
fieldset containing no controls | ||||||||
fieldset used to put border round text | ||||||||
fieldset with blank legend | ||||||||
fieldset with no legend |
figcaption
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (84% average) | 100% | 100% | 100% | 100% | 72% | 67% | 64% | 64% |
applet inside figure with figcaption element | ||||||||
embed inside figure with figcaption | ||||||||
img with figcaption |
figure
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (84% average) | 100% | 100% | 100% | 100% | 72% | 67% | 64% | 64% |
applet inside figure with figcaption element | ||||||||
embed inside figure with figcaption | ||||||||
img with figcaption |
h1-h6
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% |
Heading is img with alt | ||||||||
Empty heading | ||||||||
Heading is img alt=filename | ||||||||
Heading is img with `alt= | ||||||||
Heading is img with no alt | ||||||||
Heading non-breaking spaces | ||||||||
Heading only punctuation | ||||||||
Heading only spaces | ||||||||
Nested headings |
html
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (57% average) | 50% | 44% | 61% | 64% | 56% | 72% | 56% | 56% |
Match lang subtags | ||||||||
Page with lang set on the html and p elements | ||||||||
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 | ||||||||
text/html page with mismatching lang and xml:lang on the html element |
iframe
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (85% average) | 93% | 62% | 94% | 79% | 93% | 83% | 77% | 100% |
Interactive iframe with role=presentation and aria-label attribute | ||||||||
Interactive iframe with role=presentation and title attribute | ||||||||
Interactive iframe with role=presentation and negative tabindex and no accessible name | ||||||||
Interactive iframe with role=presentation and no accessible name | ||||||||
iframe with title attribute | ||||||||
iframe with fallback content | ||||||||
Interactive iframe with negative tabindex and no accessible name | ||||||||
iframe where src is a PNG image | ||||||||
iframe with title matching frame filename | ||||||||
iframe with blank title | ||||||||
iframe with no fallback content and no title |
img
input type=image
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (97% average) | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
input type=image with alt | ||||||||
input type=image with aria-label attribute | ||||||||
input type=image with aria-labelledby attribute | ||||||||
input type=image with title attribute | ||||||||
input type=image with no alt | ||||||||
input type=image with null alt |
input type=radio
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (94% average) | 100% | 100% | 100% | 100% | 92% | 100% | 90% | 80% |
Yes/No radio buttons inside fieldset element | ||||||||
Yes/No radio buttons without fieldset |
input type=text
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (96% average) | 100% | 94% | 100% | 100% | 99% | 98% | 92% | 100% |
input type=text inside label with text after control | ||||||||
input type=text inside label with text before and after control | ||||||||
input type=text inside label with text before control | ||||||||
input type=text with aria-describedby attribute | ||||||||
input type=text with aria-label attribute | ||||||||
input type=text with aria-labelledby attribute | ||||||||
input type=text with label for | ||||||||
input type=text with title attribute | ||||||||
input type=text inside blank label | ||||||||
input type=text with blank label for | ||||||||
input with aria-labelledby pointing to role=presentation element | ||||||||
label elements reference controls with duplicate ids |
label
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (98% average) | 100% | 100% | 100% | 100% | 100% | 96% | 90% | 100% |
input type=text inside label with text after control | ||||||||
input type=text inside label with text before and after control | ||||||||
input type=text inside label with text before control | ||||||||
input type=text with label for | ||||||||
input type=text inside blank label | ||||||||
input type=text with blank label for | ||||||||
label elements reference controls with duplicate ids |
legend
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (88% average) | 100% | 93% | 100% | 100% | 96% | 100% | 93% | 55% |
Yes/No radio buttons inside fieldset element | ||||||||
fieldset containing links | ||||||||
fieldset containing no controls | ||||||||
fieldset used to put border round text | ||||||||
fieldset with blank legend | ||||||||
fieldset with no legend |
link
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
CSS stylesheet link with media=aural | ||||||||
CSS stylesheet link with media=speech |
map
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (71% average) | 100% | 64% | 100% | 100% | 52% | 100% | 75% | 13% |
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 | ||||||||
Image map with no name attribute | ||||||||
area with no alt | ||||||||
area with null alt |
object
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (50% average) | 100% | 44% | 100% | 75% | 47% | 75% | 56% | 42% |
object with aria-label attribute | ||||||||
object with aria-labelledby attribute | ||||||||
object with title attribute | ||||||||
object with fallback content | ||||||||
object with alt attribute | ||||||||
object with no description |
p
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (57% average) | 50% | 44% | 61% | 64% | 56% | 72% | 56% | 56% |
Match lang subtags | ||||||||
Page with lang set on the html and p elements | ||||||||
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 | ||||||||
text/html page with mismatching lang and xml:lang on the html element |
pre
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Space separated tables |
span
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 aria-labelledby attribute | ||||||||
Space separated words | ||||||||
input with aria-labelledby pointing to role=presentation element |
table
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (77% average) | 89% | 82% | 89% | 95% | 85% | 96% | 67% | 35% |
Data table with caption and th | ||||||||
Data table with role=columnheader headers but no th | ||||||||
Data table with role=grid | ||||||||
Data table with role=table | ||||||||
Data table with summary and th | ||||||||
Data table with td headers attribute | ||||||||
Data table with th scope on cell headers | ||||||||
Data table with th cell headers | ||||||||
Layout table with role=presentation | ||||||||
Layout table with single cell | ||||||||
Data table th cell headers with no scope | ||||||||
Data table with caption but no th | ||||||||
Data table with role=note | ||||||||
Data table with role=presentation | ||||||||
Data table with summary but no th | ||||||||
Data table with thead , tfoot but no th | ||||||||
Data table with no th elements | ||||||||
Data table with null summary and no th |
tbody
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (30% average) | 0% | 0% | 0% | 50% | 75% | 67% | 0% | 0% |
Data table with role=columnheader headers but no th |
td
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (69% average) | 75% | 73% | 75% | 88% | 77% | 92% | 50% | 44% |
Data table with role=columnheader headers but no th | ||||||||
Data table with td headers attribute | ||||||||
Layout table with role=presentation | ||||||||
Layout table with single cell |
tfoot
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Data table with thead , tfoot but no th |
th
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (79% average) | 100% | 91% | 100% | 100% | 83% | 100% | 68% | 24% |
Data table with caption and th | ||||||||
Data table with role=grid | ||||||||
Data table with role=table | ||||||||
Data table with summary and th | ||||||||
Data table with td headers attribute | ||||||||
Data table with th scope on cell headers | ||||||||
Data table with th cell headers | ||||||||
Data table th cell headers with no scope | ||||||||
Data table with caption but no th | ||||||||
Data table with role=note | ||||||||
Data table with role=presentation | ||||||||
Data table with summary but no th | ||||||||
Data table with no th elements | ||||||||
Data table with null summary and no th |
thead
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Data table with thead , tfoot but no th |
tr
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (30% average) | 0% | 0% | 0% | 50% | 75% | 67% | 0% | 0% |
Data table with role=columnheader headers but no th |
video
Screen Reader | NVDA | JAWS | VoiceOver | |||||
---|---|---|---|---|---|---|---|---|
Browser | Edge | FF | Cr | Edge | FF | Cr | Mac | iOS |
Reliability when used correctly (27% average) | 0% | 41% | 0% | 0% | 6% | 0% | 67% | 67% |
video with aria-label attribute | ||||||||
video with aria-labelledby attribute | ||||||||
video with title attribute | ||||||||
video with fallback content | ||||||||
video with no description |
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