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 virtual 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 |
a with href test |
Hyperlink with an href | Announces link text + "link" |
|
VoiceOver recognizes visited/unvisited state of links. |
|
a without href |
a with no href test |
An anchor | Announces as plain text | No special commands | Treated as regular text without any link functionality. | |
abbr
|
abbr
test |
An abbreviation | Element content; announces title as "group" if present before element content |
No special commands |
Expands abbreviation if |
|
address
|
address
test |
Contact information | Reads content as plain text | No special commands | No additional semantics conveyed | |
area
|
area
test |
Interactive area within an image map | Announces alt text if present + "image map" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Requires alt attribute for accessibility. |
|
aria-level |
h7-h10 (role="heading"+aria-level=7-10) | ? | ? |
|
? | |
article
|
article
test |
Self-contained syndicatable or reusable composition | Announces as "article" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Recognizes the start and end of articles. | |
aside |
aside test |
Sidebar for tangentially related content | Announces "complementary" |
|
Recognized as complementary region. | |
audio |
audio test |
Audio content with controls |
|
|
Accessible buttons available in the player. Announcements are inconsistent across browsers. | |
b |
b test |
Text bolded for utilitarian purposes | Reads content as normal text | No special commands | No specific emphasis expected. | |
base |
No test | Base URL for relative links | No aural interaction | Not interactive | No UI | |
bdi |
bdi test |
Isolates a span of text | Reads content as normal text | No special commands | No aural impact; structure-only element. | |
bdo |
bdo test |
Overrides the current text direction | Reads content as normal text | No special commands | No special semantics conveyed. Reads text correctly regardless of direction. | |
blockquote |
blockquote test |
Quoted block content | Reads content as normal text | No special commands | No additional semantics conveyed. | |
body |
body test |
Document body | Reads content | No special commands | No unique aural feedback; body is implicit. | |
br |
br test |
Line break, e.g. in poem or postal address | No aural interaction | No special commands | No additional semantics conveyed.Treated as one new line, regardless of number of line break elements | |
button |
button test |
Button control | Announces as label + "button" |
|
Recognizes the button label and, if provided, state (pressed/unpressed) when button has aria-pressed attribute. |
|
canvas |
canvas test |
Scriptable bitmap canvas | Announces as "image" if aria-label is present or as text if fallback content is provided. Otherwise, canvas is ignored |
Control + Option + Right/Left arrow to navigate, focusable via VO navigation |
|
|
caption |
caption test |
Title for a table |
|
|
The caption linked to the table it describes | |
cite |
cite test |
Reference to a creative work | Reads content as normal text | No special commands |
No specific aural emphasis. |
|
code |
code test |
Inline code or programming syntax | Element content | No special commands | No additional semantics conveyed; read as normal text. | |
col |
No test | Defines column properties | No aural indication | Not directly interactive | Impact conveyed through table structure only. | |
colgroup |
colgroup test |
Groups multiple columns in a table | No aural indication | Not directly interactive | Structure-enhancing, with no direct aural output. | |
data |
data test |
Data and its human-readable equivalent | Element content | No special commandss | Treated as regular text | |
datalist |
datalist test |
Provides options for an input field | Announces as "list box pop-up" on Safari or "list box pop-up, combobox" on Chrome |
|
Provides suggestion list as the user types. | |
dd |
dd test |
Content of a term's description |
Element content and number of list item within dl list
|
Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Linked with its associated dt , which is announced prior to the dd suffixed with "term" |
|
del |
del test |
Marked as deleted | Announces "deletion" before deleted text when included as part of a tag with plain text, otherwise no aural indication | No special commands | Support is inconsistent across browsers and "deletion" is only ever announced when part of a tag with plain text | |
details |
details test |
Expandable/collapsible content | Announces summary content as disclosure label + "summary" in Safari or "group" on additional browsers |
|
Recognizes expanded/collapsed state. | |
dfn |
dfn test |
Indicates a defining instance of a term | Element content | No special commands | No additional semantics conveyed | |
dialog |
dialog test | Modal dialog |
|
Focus moved to dialog when opened | Recognizes and traps focus within modal dialog | |
div |
div test |
Generic block container | Element content | No special commands | No semantics conveyed unless ARIA roles are provided | |
dl |
dl test |
List of term-definition pairs | Announces as "description list" in Safari or "definition list" in Chrome, "with X items" |
|
Identifies number of items within the dl list |
|
dt |
dt test |
Term in a definition list |
|
Part of list navigation | Associated with the following dd |
|
em |
em test |
Stress emphasis | Element content | No special commands | No semantics conveyed. Refer to: Screen Readers support for text level HTML semantics | |
embed |
embed test |
Plugins | Announces as "frame" |
|
|
|
fieldset |
fieldset test |
Group of form controls | Announced legend content + "group" |
|
Only when fieldset has an accessible name via legend or other method |
|
figcaption |
figcaption test |
Caption for figure | Element content | No special commands | Announces when associated with a figure. | |
figure |
figure test |
Figure with optional caption |
|
|
|
|
footer |
footer test |
Footer for a page or section | Announces as "content information" |
|
|
|
form |
form test |
User-submittable form |
|
|
No semantics conveyed | |
h1 - h6 |
h1 - h6 test |
Section heading | Announced as heading content + "heading, level X" (1 to 6) | Control + Option + Command + H to navigate to next heading | Identifies heading level and text | |
head |
No test | Container for document metadata | None expected | No special commands | No UI | |
header |
header test |
Introductory or navigational aids for a page or section | Announces as "banner" |
|
|
|
hr |
hr test |
Thematic break |
| No special commands | Properly indicates a thematic break | |
html |
No test | Root element | None expected | No special commands | No semantics expected. | |
i |
i test |
Alternate voice | Element content | No special commands | No semantics conveyed. | |
iframe |
Nested browsing context |
|
|
Recognizes frame title when present | ||
img |
img test |
Image |
|
|
Reads alt attribute content if present. | |
input [button] |
input [button] test |
Button control | Announces label, if present, + "button" | Control + Option + Space to activate | Recognizes button type and label | |
input [checkbox] |
input [checkbox] test |
Checkbox control | Announces as "unticked/ticked" + "tickbox" | Control + Option + Space to check/uncheck | Identifies the label and state | |
input [color] |
input [color] test |
Colour picker control | Announces as currently selected colour + "color well" | Control + Option + Space to open colour picker | Allows selection of colours from the palette | |
input [date] |
input [date] test |
date (day/month year) picker control | Announces as "current date/selected date" + "date area" | Control + Option + Shift + Down Arrow to edit date area, + Right/Left Arrows to navigate between date fields and Up/Down arrows to adjust stepper | ||
input [email] |
input [email] test |
Text control for inputting email address | Announces "edit text, email field" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Treated as a regular text field | |
input [file] |
input [file] test |
File chooser control | Announces as "No file selected/selected file name" + label, if present + "file upload button" | Control + Option + Space to open file selection control |
|
|
input [hidden] |
No test | hidden form control | None expected | No special commands | Used for form data; ignored by VoiceOver | |
input [image] |
input [image] test |
Button control |
|
Control + Option + Space to activate | In Chrome, announces "edit text" when input is focused | |
input [number] |
input [number] test |
Numeric entry | Announces as "incremental edit text number field" |
|
Editable text field when focused with VO or the incremental stepper can be interacted with by use of Up/Down arrow keys | |
input [password] |
input [password] test |
Text control for inputting a password | Announces as label, if present, + "secure edit text" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation |
|
|
input [radio] |
input [radio] , test |
Single choice selected from a set of options | Announces as "selected/unselected, radio button" + position of radio button out of total number in radio group, for example (1 of 3) | Control + Option + Space to select radio button | Recognizes position within radio group | |
input [range] |
input [range] test |
Range input using a slider | Announces as current value + "slider" |
|
Allows setting a value within a defined range. Slider value announced as it changes. |
|
input [reset] |
input [reset] test |
Button control for resetting a form | Announces "reset, button" or value content + "button" if value attribute is set |
Control + Option + Space to activate | Resets all form inputs to their default values | |
input [search]
|
input [search] test |
Text control for inputting search terms | Announces as "search text field" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | No special commands | |
input [submit] |
input [submit] test |
Button control for submitting a form | Announces "submit, button" or value content + "button" if value attribute is set |
Control + Option + Space to activate | Submits the form data to the server | |
input [tel] |
input [tel] test |
Text box control for inputting a phone number | Announces as "telephone number field" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Announces "edit text" when input is focused | |
input [text]
|
input [text] test |
Single-line text entry control |
|
Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Announces "edit text" when input is focused | |
input [time] |
input [time] test |
Control for setting a specific time. | Announces current time value + "time area" | Control + Option + Shift + Down Arrow to edit time values, Up/Down Arrow keys to increase/decrease stepper value/td> | Provides an hour/minute input interface. | |
input [url] |
input [url] test |
Text control for inputting a URL | Announces as "URL field" | Control + Option + Right/Left arrow to navigate, focusable via VO navigation | Announces "edit text" when input is focused | |
ins |
ins test |
An addition to the document | Announces "insertion" before inserted text when included as part of a tag with plain text, otherwise no aural indication | No special commands | Support was inconsistent across browsers and "insertion" is only ever announced when part of a tag with plain text | |
kbd |
kbd test |
Represents user input | Reads content as plain text | No special commands | No semantics conveyed | |
label |
label test |
Caption for a form control | Label content announced when the corresponding form control has focus |
|
No semantics beyond association with input conveyed | |
legend |
legend test |
Caption for fieldset
|
Legend content is announced as the group label for a group of related controls when one of the controls is first focused in the group. | No special commands | Serves as the group label for a group of form controls. Refer to the fieldset element | |
li |
List item |
|
Control + Option + Right Arrow to navigate | Announces total item count and position of list items within list | ||
link |
No test | Link metadata | None expected | No special commands | No UI | |
main |
main test |
Main content of a document | Announces "main" |
|
Identified as a main landmark region | |
map |
map test |
Image map | None expected | No special commands | No UI | |
mark |
mark test |
Highlight | Announces as "highlighted" | No special commands | If an aria-label is provided then VO recognises the start and end of highlighted content |
|
meta |
No test | Text metadata | None expected | No special commands | No UI | |
meter |
meter test |
Gauge | Announces as current value + fallback content/accessible name + "level indicator" | No special commands |
|
|
nav |
nav test |
Section with navigational links | Announces as "navigation" |
|
Identified as a navigation landmark | |
noscript |
No test | Fallback content for script | Content of <noscript> element read if JavaScript is not available/enabled |
No special commands | Ignored when JavaScript is enabled. | |
object |
object test |
Image, nested browsing context, or plugin | Announces as "frame" |
|
|
|
ol |
ol test |
Ordered list | Announces as "list, X items" |
|
Announces list structure and number of items | |
optgroup |
optgroup test |
Group of options in a list box | No aural indication | Control + Option + Space to expand/collapse options list box |
When optgroup element is labelled by an aria-label /aria-labelledby the label content is announced as "dimmed"
|
|
option |
option test |
Option in a list box or combo box control | Announced as option content + checkmark if currently selected | Up/Down arrow keys to navigate options | Use Control + Option + Space to expand/collapse options list | |
output |
output test |
Calculated output value |
|
No special commands | VO only recognises the element as "output/status" if the output element has an accessible name. Otherwise, the semantics are ignored and only the value is announced. |
|
p |
p test |
Paragraph | Element content | Control + Option + P to read paragraph | No aural semantics. | |
param (obsolete) |
No test | Parameter for object | None expected | No special commands | No UI | |
picture |
No test | Container to offer alternative versions of an image for different scenarios. | None expected | No special commands | No UI | |
pre |
pre test |
Block of preformatted text | Element content | No special commands | No semantics conveyed | |
progress |
progress test |
Progress bar | Announced as accessible name (if present) + current percentage value + "progress indicator" | No special commands |
VO does not announce the new value of the progress bar if the value attribute is updated
|
|
q |
q test |
Quotation | Element content | No special commands |
|
|
rb |
No test | Ruby base element | Element content | No special commands | No semantics conveyed | |
rp |
No test | Fallback parenthesis for browsers that don't support Ruby | Element content | No special commands | No semantics conveyed | |
rt |
No test | Represents an annotation | Element content | No special commands | No semantics conveyed | |
rtc |
No test | Ruby text container | Element content | No special commands | No semantics conveyed | |
ruby |
No test | Shows pronunciation | Element content | No special commands | No semantics conveyed | |
s |
s test |
Inaccurate text | Element content | No special commands | No semantics conveyed | |
samp |
samp test |
Computer output | Element content | No special commands |
|
|
script |
No test | Embedded script | None expected | No special commands | No UI | |
section
|
Generic document or application section | Announces as "region" if section is labelled by an accessible name |
If labelled, treated as a landmark:
|
No semantics conveyed unless the section has an accessible name, in which case VO treats the it as a landmark region. | ||
select |
select test |
Combo box |
|
|
Provides list of options | |
small |
small test |
Side comment | Element content | No special commands | No semantics conveyed | |
source |
No test | Media source for video or audio | None expected | No special commands | No UI | |
span |
span test |
Generic phrasing container | Element content | No special commands | No semantics conveyed | |
strong |
strong test |
Importance | Element content | No special commands |
|
|
style |
No test | Embedded styling information | None expected | No special commands | No UI | |
sub |
sub test |
Subscript | Element content | No special commands |
|
|
summary
|
summary test |
disclosure widget control/label |
|
|
Serves as a trigger for expanding/collapsing <details> section. |
|
sup |
sup test |
Superscript | Element content | No special commands |
|
|
svg |
svg test |
Scalable Vector Graphics | Accessible name "Graphic" if labelled
|
|
In Safari, the standard keyboard shortcut Control + Option + Command + G navigates to individual polygon elements within the <svg> |
|
table |
Data table | Announces "[caption content], table, X rows, Y columns" |
|
|
||
tbody |
tbody test |
Group of rows in a data table | Element content | No special commands | No semantics conveyed | |
td |
td test |
Data cell in a data table | Announces Cell content |
|
Announces corresponding header if programmatically associated. | |
template |
No test | Template | None expected | No special commands | No UI | |
textarea |
textarea test |
Multiline text field | Announced as accessible name (if present) + "edit text", followed by the value if there is any text in the edit field |
|
Announces "edit text" when input is focused | |
tfoot |
tfoot
test
|
Group of footer rows in a data table | Element content | No special commands | No semantics conveyed | |
th |
th test |
Header cell in a data table | Element content | No special command. Reachable using standard table cell reading keystrokes. | No semantics conveyed | |
thead |
thead test |
Group of header rows in a data table | Element content | No special commands | No semantics conveyed | |
time |
time test |
Machine-readable equivalent of date- or time-related data | Announced as element content, or in Safari, accessible name + element content + "group", if element has an accessible name through an aria-label/aria-labelledby attribute |
No special commands | In Safari, content in time element is repeated twice |
|
title |
No test | Document title | Element content |
| No semantics conveyed | |
tr |
tr test |
Data table row | Element content | Control + Option + R to read all cell content in current row | No semantics conveyed | |
track |
track test |
Timed text track | Caption display control | No special commands | No semantics conveyed | |
u |
u test |
Underlined text | Element content | No special commands | No semantics conveyed | |
ul |
ul test |
Unordered List | Announced as "list, X items |
|
Announces list structure and number of items | |
var |
var test |
Represents a variable | Announces as element content or accessible name + element content + "group", if element has an accessible name | No special commands | No semantics conveyed | |
video |
video test |
Video Player |
|
No special commands | The video element is ignored by VO unless an accessible name is provided
|
|
wbr |
No test | Line breaking opportunity | None expected | No special commands | No UI |
This table details how VoiceOver interacts with HTML elements, providing full information about each element's role, aural feedback, and interaction patterns.