HTML elements Screen reader compatibility

HTML

Nov 26, 2024

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

`a`

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
Reliability when used correctly (93% average)		100%	95%	100%	100%	97%	100%	91%	89%
	Click Here link with `aria-describedby` attribute
	Click Here link with `title` attribute
	Link containing `img` with `alt`
	Link containing `img` with `title`
	Link text replaced by `aria-label` attribute
	Link text replaced by `aria-labelledby` attribute
	`a` element placeholder link with no event handler or `href` attribute
	`fieldset` containing links
Issues when used incorrectly (54% average)		51%	48%	50%	53%	56%	53%	43%	43%
	A link with empty label
	A link with non-breaking space as label
	CSS `content:` property on link
	Link `target` opens in new window
	Link containing `img` with null `alt`
	Link containing `img` without `alt`
	Link with `aria-label` containing `img` with no `alt`
	Link with `aria-labelledby` containing `img` with no `alt`
	Link with `onclick` but no `href`
	Link with `title` containing `img` with no `alt`

`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
Issues when used incorrectly (100% average)		100%	100%	100%	100%	100%	100%	100%	100%
	`acronym` with `title`

`applet`

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
Reliability when used correctly (79% average)		100%	92%	100%	100%	69%	91%	62%	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
Issues when used incorrectly (34% average)		0%	15%	0%	0%	38%	0%	50%	0%
	`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 (72% average)		100%	65%	100%	100%	54%	100%	75%	14%
	`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
Issues when used incorrectly (84% average)		87%	71%	90%	87%	79%	90%	100%	100%
	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
Issues when used incorrectly (97% average)		100%	100%	100%	100%	100%	100%	75%	100%
	`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%	98%	100%	85%	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`
Issues when used incorrectly (52% average)		50%	50%	50%	50%	50%	50%	50%	50%
	`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 (93% average)		100%	100%	100%	100%	92%	100%	100%	60%
	Data table with `caption` and `th`
Issues when used incorrectly (97% average)		100%	100%	100%	100%	100%	100%	100%	100%
	Data table with `caption` but no `th`

`dd`

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
Issues when used incorrectly (98% average)		100%	91%	100%	100%	100%	100%	91%	100%
	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`
Issues when used incorrectly (84% average)		71%	86%	78%	71%	87%	78%	92%	67%
	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 (46% average)		35%	83%	25%	25%	27%	46%	63%	48%
	`embed` inside `figure` with `figcaption`
	`embed` with `aria-label` attribute
	`embed` with `aria-labelledby` attribute
	`embed` with `title` attribute
Issues when used incorrectly (92% average)		100%	100%	100%	100%	96%	100%	50%	85%
	`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
Issues when used incorrectly (52% average)		60%	49%	54%	58%	46%	60%	57%	53%
	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 (85% average)		100%	100%	100%	100%	74%	71%	65%	65%
	`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 (85% average)		100%	100%	100%	100%	74%	71%	65%	65%
	`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`
Issues when used incorrectly (65% average)		75%	64%	75%	63%	63%	63%	67%	59%
	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 (56% average)		47%	43%	57%	63%	57%	70%	57%	57%
	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 (88% average)		100%	69%	100%	79%	97%	83%	79%	100%
	Interactive `iframe` with `role=presentation` and `aria-label` attribute
	Interactive `iframe` with `role=presentation` and `title` attribute
	Interactive `iframe` with `role=presentation` and no accessible name
	`iframe` with `title` attribute
	`iframe` with fallback content
Issues when used incorrectly (36% average)		46%	56%	43%	35%	35%	32%	56%	8%
	Interactive `iframe` with `role=presentation` and negative `tabindex` and no accessible name
	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`

Screen Reader		NVDA			JAWS			VoiceOver
Browser		Edge	FF	Cr	Edge	FF	Cr	Mac	iOS
Reliability when used correctly (87% average)		100%	90%	99%	100%	80%	99%	84%	69%
	Heading is `img` with `alt`
	Link containing `img` with `alt`
	Link containing `img` with `title`
	`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
	`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`
	`img` with `alt`
	`img` with `aria-label`
	`img` with `aria-labelledby`
	`img` with `figcaption`
	`img` with `title`
	`img` with null `alt`
Issues when used incorrectly (71% average)		70%	68%	71%	71%	70%	71%	69%	74%
	Definition lists with images as bullets
	Heading is `img` `alt=filename`
	Heading is `img` with `alt=
	Heading is `img` with no `alt`
	Image `map` with no `name` attribute
	Link containing `img` with null `alt`
	Link containing `img` without `alt`
	Link with `aria-label` containing `img` with no `alt`
	Link with `aria-labelledby` containing `img` with no `alt`
	Link with `title` containing `img` with no `alt`
	`area` with no `alt`
	`area` 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`
	`img` with `alt` set to ASCII art smiley
	`img` with `alt` set to `src` filename
	`img` with `aria-describedby`
	`img` with null `alt` and non-null `title` attributes
	`img` with null `alt` and non-null `aria-label` attributes
	`img` with null `alt` and non-null `aria-labelledby` attributes
	`img` with server side image map
	`img` without `alt`

`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
Issues when used incorrectly (100% average)		100%	100%	100%	100%	100%	100%	100%	100%
	`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 (95% average)		100%	100%	100%	100%	92%	100%	91%	82%
	Yes/No radio buttons inside `fieldset` element
Issues when used incorrectly (56% average)		50%	50%	50%	90%	50%	93%	55%	18%
	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%	95%	100%	100%	99%	98%	93%	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
Issues when used incorrectly (72% average)		63%	64%	63%	73%	73%	73%	77%	79%
	`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%	91%	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`
Issues when used incorrectly (92% average)		83%	83%	83%	97%	92%	98%	100%	100%
	`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
Issues when used incorrectly (50% average)		63%	49%	55%	50%	45%	52%	58%	61%
	`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
Issues when used incorrectly (100% average)		100%	100%	100%	100%	100%	100%	100%	100%
	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 (72% average)		100%	65%	100%	100%	54%	100%	75%	14%
	`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
Issues when used incorrectly (84% average)		87%	71%	90%	87%	79%	90%	100%	100%
	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 (55% average)		100%	50%	100%	80%	51%	79%	60%	48%
	`object` with `aria-label` attribute
	`object` with `aria-labelledby` attribute
	`object` with `title` attribute
	`object` with fallback content
Issues when used incorrectly (65% average)		0%	50%	29%	100%	54%	100%	50%	70%
	`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 (56% average)		47%	43%	57%	63%	57%	70%	57%	57%
	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
Issues when used incorrectly (100% average)		100%	100%	100%	100%	100%	100%	100%	100%
	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
Issues when used incorrectly (41% average)		33%	38%	33%	33%	39%	33%	35%	55%
	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 (78% average)		90%	83%	89%	94%	85%	95%	70%	40%
	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
Issues when used incorrectly (85% average)		88%	95%	88%	88%	88%	88%	76%	90%
	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%	40%	69%	57%	9%	9%
	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 (70% average)		75%	73%	75%	85%	75%	89%	52%	47%
	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
Issues when used incorrectly (73% average)		100%	100%	100%	100%	100%	100%	0%	18%
	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 (80% average)		100%	92%	100%	100%	83%	100%	70%	29%
	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
Issues when used incorrectly (87% average)		86%	94%	86%	86%	86%	86%	87%	100%
	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
Issues when used incorrectly (73% average)		100%	100%	100%	100%	100%	100%	0%	18%
	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%	40%	69%	57%	9%	9%
	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 (30% average)		20%	47%	5%	0%	5%	0%	70%	70%
	`video` with `aria-label` attribute
	`video` with `aria-labelledby` attribute
	`video` with `title` attribute
Issues when used incorrectly (98% average)		100%	100%	100%	100%	100%	100%	100%	100%
	`video` with fallback content
	`video` with no description

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