WORK IN PROGRESS
Note: 02 October 2024: The information for NVDA may be incorrect, incomplete and/or contradictory. Until noted otherwise, do not rely upon it!
How HTML elements are supported by screen readers
Typical support patterns of HTML elements by screen readers:
- Identification of an element by role as the user moves through the content.
- Announcement of the text content of an element.
- Announcement of the start and end of an element.
- Change in voice as the content of an element is announced.
- Announcement of an elements accessible name and/or description
- Announcement of states and properties.
- Emission of a beep or other sound when an element with a particular state or property receives virtua focus.
- Instructions on how to operate interactive elements such as form controls.
- Navigation of elements by keyboard and “quick access” lists of a particular elements, list items are linked to each instance of an element on the page.
Note: The combination of patterns supported varies from element to element and support for a particular element varies between screen reader software.
Support legend
- means we have found this feature to be implemented interoperably (across multiple browsers)
- means we have found that this feature is not implemented
- means the element has no expected semantics.
- means we are unsure whether this feature is supported, this may be due to lack of testing or lack of clarity around what 'support' of this feature is supposed to convey to the user.
| Element | Test Case | Represents | Aural UI | Interaction | Supported | Notes |
|---|---|---|---|---|---|---|
a
|
Hyperlink | Announces "Link" + link text | TAB to navigate, ENTER to activate |
NVDA reads link text and announces "link". Recognizes visited/unvisited state. | ||
<a> without href |
Anchor | Announces as plain text | No special navigation | Treated as regular text without any link functionality. | ||
<abbr> |
Abbreviation | Reads the element content; reads title if present |
No special interaction | Announces abbreviation expansion if the title attribute is present. |
||
<address> |
Contact information | Reads content as plain text | No special interaction | No special semantics conveyed. | ||
<article> |
Self-contained composition | Announces "article" | O to move to next article |
Announces the start and end of articles. | ||
<aside> |
Tangentially related content | Announces "complementary" | R to move to next region |
Recognized as a landmark region. | ||
<audio> |
Audio player | Announces "audio" if controls are present | Focusable via TAB |
Buttons in the audio player are accessible. | ||
<b> |
Keywords | Reads element content | No special interaction | No semantic emphasis conveyed. | ||
<bdi> |
Bi-directional isolation | Reads element content | No special interaction | No semantics conveyed. | ||
<bdo> |
Bi-directional override | Reads element content | No special interaction | No semantics conveyed. | ||
<blockquote> |
Quoted section | Announces "blockquote" start/end | CTRL+INSERT+Q to list blockquotes |
Clearly announces blockquote start and end. | ||
<body> |
Document body | Reads element content | No special interaction | No special semantics conveyed. | ||
<button> |
Button control | Announces "button" + label | TAB to focus, ENTER or SPACE to activate |
Fully functional, reads button state and label. | ||
<canvas> |
Scriptable bitmap canvas | Announces "graphic" if aria-label is present |
Focusable via TAB |
Accessible content in a fallback is read if provided. | ||
<caption> |
Table caption | Announces caption when table is navigated | T to navigate to tables |
Used as the table name. | ||
<cite> |
Reference to a creative work | Reads element content | No special interaction | No special semantics conveyed. | ||
<code> |
Code snippet | Reads element content | No special interaction | No specific indication that it's code. | ||
<col> |
Table column | No aural indication | No special interaction | No semantics expected. | ||
<colgroup> |
Group of columns in a table | No aural indication | No special interaction | No semantics expected. | ||
<data> |
Machine-readable equivalent | Reads element content | No special interaction | No semantics conveyed. | ||
<datalist> |
Combo box suggestions | Announces "combo box" | Accessible via C |
NVDA provides suggestions as the user types. | ||
<dd> |
Description definition | Reads element content | No special interaction | Included as part of the definition list. | ||
<del> |
Deleted text | Announces "deletion start/end" | No special interaction | Uses a different voice or tone for deleted text. | ||
<details> |
Disclosure widget | Announces "group start/end" | Can be expanded/collapsed via ENTER |
Recognizes expanded/collapsed state. | ||
<dfn> |
Defining instance of a term | Reads element content | No special interaction | No semantics conveyed by default. | ||
<dialog> |
Dialog box | Announces "dialog" | Focuses on opening, closes with ESC |
Provides modal focus containment. | ||
<div> |
Generic flow container | Reads element content | No special interaction | No semantics conveyed unless ARIA roles are added. | ||
<dl> |
Definition list | Announces "list with X items" | Accessible via L |
Recognizes start/end of the list. | ||
<dt> |
Definition term | Reads element content | Part of definition list navigation | Properly included in the dl context. |
||
<em> |
Emphasis | Reads with emphasis | No special interaction | Uses a different voice inflection. | ||
<embed> |
Embedded content | Announces "embedded object" | Focusable via TAB |
Support varies depending on content type. | ||
<fieldset> |
Group of form controls | Announces "group start/end" | No special interaction | Announces the legend as a label if present. | ||
<figcaption> |
Figure caption | Reads element content | No special interaction | Announces when navigating to a figure. | ||
<figure> |
Figure with optional caption | Announces "figure start/end" | No special interaction | Includes caption if present. | ||
<footer> |
Footer for page or section | Announces "content info" | R to navigate regions |
Recognized as a landmark region. | ||
<form> |
Form | Announces "form start/end" if labeled | F to move to next form |
Recognizes the form if it has an accessible name. | ||
<h1> to <h6> |
Section headings | Announces "heading level X" | Accessible via H or 1-6 |
Identifies heading level and text. | ||
<header> |
Header for page or section | Announces "banner" | R to navigate regions |
Recognized as a landmark region. | ||
<hr> |
Thematic break | Announces "separator" | Accessible via DASH |
Provides a clear aural indication. | ||
<html> |
Root element | No aural indication | No special interaction | No semantics expected. | ||
<i> |
Alternate voice or mood | Reads element content | No special interaction | No special semantics conveyed. | ||
<iframe> |
Nested browsing context | Announces "frame" with title | Focusable via TAB |
Recognizes the frame’s title if present. | ||
<img> with alt |
Image | Announces "graphic" + alt text | Accessible via G |
Reads alt attribute content if present. | ||
<input type="button"> |
Button control | Announces "button" | TAB to focus, ENTER or SPACE to activate |
Reads button label. | ||
<input type="checkbox"> |
Checkbox control | Announces "checkbox, checked/unchecked" | X to navigate checkboxes |
Recognizes checked/unchecked state. | ||
<input type="color"> |
Color picker control | Announces "button" | Focusable via TAB |
Identified as a color picker. | ||
<input type="date"> |
Date picker control | Announces "edit, date" | Focusable via TAB |
Reads selected date. | ||
<input type="email"> |
Email input control | Announces "edit" | Focusable via TAB |
Treated as a regular text input. | ||
<input type="file"> |
File chooser control | Announces "file upload" | Focusable via TAB |
Allows file selection. | ||
<input type="password"> |
Password input control | Announces "password edit" | Focusable via TAB |
Masks input characters. | ||
<input type="radio"> |
Radio button | Announces "radio button" + state | A to navigate radio buttons |
Announces the group and state. | ||
<input type="range"> |
Slider control | Announces "slider" + value | Navigable with arrow keys | Reads value changes. | ||
<input type="text"> |
Text input | Announces "edit" + label | Focusable via TAB |
Reads input content. | ||
<label> |
Label for input | Announces associated label | No special interaction | Reads associated control label. | ||
<legend> |
Label for <fieldset> |
Announces label when fieldset is focused | No special interaction | Acts as a label for grouped controls. | ||
<li> |
List item | Reads item content | Part of list navigation | Announces position in the list. | ||
<link> |
Link to external resources | No aural indication | No special interaction | Not announced unless used as part of a web component. | ||
<main> |
Main content | Announces "main landmark" | D to move to landmarks |
Recognized as a landmark region. | ||
<mark> |
Highlighted text | Reads element content | No special interaction | No special emphasis conveyed. | ||
<meter> |
Scalar measurement | Announces "meter" + value | Focusable via TAB |
Reads current value and range. | ||
<nav> |
Navigation links | Announces "navigation landmark" | D to move to landmarks |
Recognized as a landmark region. | ||
<noscript> |
Content for non-script browsers | Reads content if scripts are disabled | No special interaction | Ignored when JavaScript is enabled. | ||
<object> |
Embedded object | Announces "object" | Focusable via TAB |
Support varies depending on object type. | ||
<ol> |
Ordered list | Announces "list with X items" | L to navigate lists |
Announces each list item with position. | ||
<optgroup> |
Group of options | Announces "group" label | No special interaction | Recognized within select elements. | ||
<option> |
Option in a select | Announces "option" + label | Navigable with UP/DOWN arrows |
Recognized within combo boxes and selects. | ||
<output> |
Result of a calculation | Reads output value | No special interaction | Announces updates if value changes. | ||
<p> |
Paragraph | Reads element content | No special interaction | Reads text as part of document flow. | ||
<picture> |
Responsive image container | Announces selected image | Focusable via TAB |
Reads selected img alternative. |
||
<pre> |
Preformatted text | Reads element content | No special interaction | Maintains spacing and line breaks. | ||
<progress> |
Progress indicator | Announces "progress bar" + value | Focusable via TAB |
Reads progress percentage. | ||
<q> |
Inline quotation | Announces quotation marks | No special interaction | Recognizes start and end of quote. | ||
<rp> |
Ruby fallback text | Reads element content | No special interaction | No special handling expected. | ||
<rt> |
Ruby text annotation | Reads element content | No special interaction | Ruby text is read inline with base text. | ||
<ruby> |
Ruby annotation container | Reads base and ruby text | No special interaction | Properly reads ruby annotations. | ||
<s> |
Strikethrough text | Reads element content | No special interaction | No specific indication for strikethrough. | ||
<samp> |
Sample output | Reads element content | No special interaction | No special semantics conveyed. | ||
<script> |
Embedded script | No aural indication | No interaction | Ignored by screen readers. | ||
<section> |
Thematic grouping of content | Announces "region" if labeled | R to navigate regions |
Acts as a landmark if labeled. | ||
<select> |
Combo box | Announces "combo box" | Focusable via TAB |
Provides list of options, recognizes optgroup. |
||
<small> |
Fine print | Reads element content | No special interaction | No specific emphasis. | ||
<source> |
Media source | No aural indication | No interaction | Ignored unless selected by a media element. | ||
<span> |
Generic inline container | Reads element content | No special interaction | No semantics conveyed unless ARIA roles are added. | ||
<strong> |
Strong importance | Reads with emphasis | No special interaction | Uses a different voice inflection. | ||
<style> |
Embedded stylesheet | No aural indication | No interaction | Ignored by screen readers. | ||
<sub> |
Subscript text | Reads element content | No special interaction | Recognizes subscript placement. | ||
<summary> |
Summary for <details> |
Announces "summary" | Focusable via TAB |
Acts as a trigger for expanding/collapsing <details>. |
||
<sup> |
Superscript text | Reads element content | No special interaction | Recognizes superscript placement. | ||
<svg> |
Scalable vector graphic | Announces "graphic" if labeled | Focusable via TAB |
Recognizes alternative content if present. | ||
<table> |
Data table | Announces "table with X rows and Y columns" | T to navigate to tables |
Reads headers and cell content. | ||
<tbody> |
Table body | Reads cell content | Part of table navigation | Recognized as part of table structure. | ||
<td> |
Table cell | Reads cell content | Part of table navigation | Announces header association if present. | ||
<template> |
Client-side template | No aural indication | No interaction | Ignored by screen readers. | ||
<textarea> |
Multiline text input | Announces "edit" + label | Focusable via TAB |
Reads entered text and updates. | ||
<tfoot> |
Table footer | Reads cell content | Part of table navigation | Included in table reading order. | ||
<th> |
Table header cell | Announces "column/row header" | Part of table navigation | Recognized as a header. | ||
<thead> |
Table header | Reads cell content | Part of table navigation | Included in table reading order. | ||
<time> |
Date or time | Reads element content | No special interaction | Recognizes time if formatted correctly. | ||
<title> |
Document title | Announces when the page loads | No interaction | Read when the document loads or ALT+TAB switching. |
||
<tr> |
Table row | Reads row content | Part of table navigation | Recognized as part of the table structure. | ||
<track> |
Text track for media | No aural indication | No interaction | Ignored unless used for captions/subtitles. | ||
<u> |
Underlined text | Reads element content | No special interaction | No specific indication for underline. | ||
<ul> |
Unordered list | Announces "list with X items" | Accessible via L |
Recognizes list structure. | ||
<var> |
Variable | Reads element content | No special interaction | No specific semantics. | ||
<video> |
Video player | Announces "video" if controls are present | Focusable via TAB |
Recognizes controls and captions. | ||
<wbr> |
Word break opportunity | Reads content uninterrupted | No special interaction | Ignored by screen readers. |