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 |
Link with an href | Announces "link" + link text |
|
Recognizes visited/unvisited state of links. Link number announced by rotor is incorrect as VO announces parts of a link text as seperate links. On the link test page there are 3 links, but VO reports as 9 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, not title |
No special interaction |
No additional semantics conveyed if |
|
address
|
address
test |
Contact information | Element content | No special interaction | No additional semantics conveyed | |
area
|
area
test |
Interactive area within an image map | Announces alt text + "link" | Swipe left/right to navigate | Requires alt for accessibility. |
|
aria-level |
h7-h10 (role="heading"+aria-level=7-10) | ? | ? |
|
? | |
article
|
article
test |
Self-contained syndicatable or reusable composition | Element content, does not announce article | Rotor to 'articles' Swipe down with one finger to navigate by article | No additional semantics conveyed. Documentation states that swipe one finger up should navigate back through article 's, but does not appear to work. article does support aria-describedby and announces "Description..." after visible text. |
|
aside |
aside test |
Sidebar for tangentially related content | Announces "complementary" |
|
|
|
audio |
audio test |
Audio content with controls | Announces "audio" | Double-tap to play/pause. Swipe up down with one finger to operate the time scrubber. | Accessible buttons available in the player. The time scrubber operation is flaky when VoiceOver is enabled. | |
b |
b test |
Text bolded for utilitarian purposes | Reads content as normal text | No special interaction | No specific emphasis expected. | |
base |
No test | Base URL for relative links | No aural feedback | Not interactive | No UI | |
bdi |
bdi test |
Isolates a span of text | Reads content as normal text | No special interaction | No aural impact; structure-only element. | |
bdo |
bdo test |
Overrides the current text direction | Reads content as normal text | No special interaction | No special semantics conveyed. Reads text correctly regardless of direction. | |
blockquote |
blockquote test |
Quoted block content | Reads content as normal text | No special interaction | No additional semantics conveyed. | |
body |
body test |
Document body | Reads content | No special interaction | No unique aural feedback; body is implicit. | |
br |
br test |
Line break, e.g. in poem or postal address | Announces nothing | No special interaction | No additional semantics conveyed.Treated as one new line, regardless of number of line break elements | |
button |
button test |
Button control | Announces "button" + label |
|
Announced as "toggle button" label and state (pressed/unpressed) when button has aria-pressed . |
|
canvas |
canvas test |
Scriptable bitmap canvas | Announces "graphic" if aria-label and Role="img" is provided, Other wise ignores canvas | Focusable via swipe gestures if role="img" present or sub DOM contains content. |
|
|
caption |
caption test |
Title for a table | Announces as part of the table, [caption content], "table start". Role not announced |
|
|
|
cite |
cite test |
Reference to a creative work | Reads content as normal text | No special interaction |
No semantics conveyed. |
|
code |
code test |
Inline code or programming syntax | Element content | No special interaction | No unique treatment; 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 | Announces as "column header, spans X columns", where X is the number of columns within the colgroup |
|
|
|
data |
data test |
Data and its human-readable equivalent | Element content | No special interactions | Treated as regular text | |
datalist |
datalist test |
Provides options for an input field | Announces "text field, listbox popup" | Swipe left/right to focus on input, double-tap to select | List of suggestions appear in browser suggestions rather than as a listbox. With VO enabled cannot display listbox. | |
dd |
dd test |
Content of a term's description | Announces start of "description list" Element content suffixed with "Description" announces "description list end" | No special interaction | Properly grouped with its dt /td>
| |
del |
del test |
Marked as deleted | Announces as "deletion" + element content | No special interaction | ||
details |
details test |
Expandable/collapsible content | Announces summary text, button, collapsed or expanded (when details content is visible) |
Double-tap to expand/collapse | Recognizes expanded/collapsed state. | |
dfn |
dfn test |
Indicates a defining instance of a term | Element content not role | No special interaction | No unique treatment beyond reading | |
dialog |
dialog test | Modal dialog |
|
Focus moves to dialog on open | Recognizes and traps focus within modal dialog. When dialog closed does not return focus to triggering control unless the dialog has an accessible name. | |
div |
div test |
Generic block container | Element content | No special interaction | No semantics conveyed | |
dl |
dl test |
List of term-definition pairs | Announces start of "description list" | Not recognised as a list in rotor navigation | ||
dt |
dt test |
Term in a definition list | Element content suffixed with "term" | Part of list navigation | Associated with the following dd |
|
em |
em test |
Stress emphasis | Element content | No special interaction | No semantics conveyed. Refer to: Screen Readers support for text level HTML semantics | |
embed |
embed test |
Plugins | Element content | No special interactions | ||
fieldset |
fieldset test |
Group of form controls | "Grouping" followed by legend content when using arrow keys to navigate to the element. Legend content followed by "grouping" when navigating into a form control in the fieldset. | No special interaction, fieldset presence and accessible name announced when first control child is navigated to using virtual keys navigation keys for the child control. | Only when fieldset has an accessible name via legend or other method. |
|
figcaption |
figcaption test |
Caption for figure | Element content | No special interaction | ||
figure |
figure test |
Figure with optional caption | VoiceOver announces the content of the figure element wraps around an image, VoiceOver will read the image along with its accessible name, typically provided via the alt attribute. |
No special interaction | "Figure" is not announced if the element does not have an accessible name or contain a <figcaption> element. |
|
footer |
footer test |
Footer for a page or section | "Content info landmark" element content |
|
|
|
form |
form test |
User-submittable form | form is not announced, only the first field and element content |
No special instructions | No semantics conveyed | |
h1 - h6 |
h1 - h6 test |
Section heading | Announced as, heading content "heading, level" 1 to 6 | No special interaction | Identifies heading level and text. | |
head |
No test | Container for document metadata | None expected | No special interaction | No UI | |
header |
header test |
Introductory or navigational aids for a page or section | Announced as element content, "Banner landmark" |
|
|
|
hr |
hr test |
Thematic break | Announced as, "Separator, dimmed" | No special command | If an accessible name is provided, the element is announced as "Seperator, accessible name, dimmer" | |
html |
No test | Root element | None expected | No special interaction | No semantics expected. | |
i |
i test |
Alternate voice | Element content | No special interaction | No semantics conveyed. | |
iframe |
Nested browsing context | frame container is not announced, VO focus lands on first interactive item within frame |
Swipe left/right to enter frame .
|
|
||
img |
img test |
Image |
|
|
|
|
input [button] |
input [button] test |
Button control | Announces label or value attribute, if present, + "button" |
|
Announces title attribute in addition to label or value if present |
|
input [checkbox] |
input [checkbox] test |
Checkbox control | Announced as "tickbox" followed by ticked/unticked state |
|
|
|
input [color] |
input [color] test |
Colour picker control | Announced as colour value |
|
Opens a colour selection grid when activated. "Double tap to activate" is not announced by VO. | |
input [date] |
input [date] test |
Date (day/month year) picker control | Announced if there is a date value, otherwise the input is not announced if empty |
|
Opens a date selection picker when activated. "Double tap to activate" is not announced by VO. | |
input [email] |
input [email] test |
Text control for inputting email address | Announced as label, if present + "text field" |
|
Treated as a regular text field, announces "Double tap to edit" | |
input [file] |
input [file] test |
File chooser control | Announced as the file name if a file has been selected, otherwise "choose file, no file selected, button" |
|
Opens a file selection picker when activated. | |
input [hidden] |
No test | Hidden form control | None expected | No special interaction | No UI | |
input [image] |
input [image] test |
Button control | Announced as "Submit button" or as alt text content + "button", if alt text is present |
|
VoiceOver on-device image recognition settings don't work on input type="image" as they are not recognised as images |
|
input [number] |
input [number] test |
Text control for inputting numbers | Announced as label content, if present + "text field" |
|
|
|
input [password] |
input [password] test |
Text control for inputting a password | Announced as label content, if present + "secure text field" |
|
|
|
input [range] |
input [range] test |
Slider control | Announced as label content, if present + step/value content (for example, "10") + current percentage value (for example, "55%") |
|
|
|
input [radio] |
input [radio] , test |
Single choice from a set of options | Announced as label content, if present + "radio button, unticked/ticked" "x of y" where x = position in radio group, y = number of radio buttons in the group |
|
Recognizes position within radio group | |
input [reset] |
input [reset] test |
Button control for resetting a form | Announced as "Reset, button", unless there is a label, in which case it is label content + "button" |
|
Resets all form inputs to their default value | |
input [search]
|
input [search] test |
Text control for inputting search terms | Announced as label, if present + "Search field" |
|
No special interaction | |
input [submit] |
input [submit] test |
Button control for submitting a form | Announced as "Submit, button", unless there is a label, in which case it is label content + "button" |
|
Submits the form data to the server | |
input [tel] |
input [tel] test |
Text box control for inputting a phone number | Announced as label, if present + "text field" |
|
|
|
input [text]
|
input [text] test |
Text box control | Announced as label, if present + "text field" |
|
Announces "Double tap to edit" | |
input [time] |
input [time] test |
Control for setting a specific time. | When the input does not contain a value, there is no VO announcement. When the input contains a value, it is announced as its value |
|
|
|
input [url] |
input [url] test |
Text control for inputting a URL | Announced as label, if present + "text field" |
|
|
|
ins |
ins test |
An addition to the document | Announces as "insertion" + "deletion" + element content | No special interaction | ||
kbd |
kbd test |
Represents user input | Element content | No special interaction | No semantics conveyed | |
label |
label test |
Caption for a form control | Label content announced when the corresponding form control has focus | No special interaction | No semantics beyond association with input conveyed | |
legend |
legend test |
Caption for fieldset
|
Announces as first item of fieldset | No special interaction | Serves as the group label for a group of form controls. Refer to the fieldset element | |
li |
List item |
|
|
|
||
link |
No test | Link metadata | None expected | No special interaction | No UI | |
main |
main test |
Main content of a document | Reads landmark content |
|
No semantic feedback. Landmarks need to be added to the iOS VO rotor menu items before it is accessible. This can be added in the VoiceOver Settings, under Rotor. | |
map |
map test |
Image map | None expected | No special interaction | No UI | |
mark |
mark test |
Highlight | Announces as element content + "highlighted" | No special interaction | Content provided via an aria-label or aria-labelledby is not announced. |
|
meta |
No test | Text metadata | None expected | No special interaction | No UI | |
meter |
meter test |
Gauge | Announces as label content, if present + the current percentage value (e.g. "83%") | No special interaction | If fallback content is provided within the <meter> element, the fallback content is announced
instead of the value.
|
|
nav |
nav test |
Section with navigational links | Announces first element in landmark + "navigation, landmark" |
|
Landmarks need to be added to the iOS VO rotor menu items before it is accessible. This can be added in the VoiceOver Settings, under Rotor. | |
noscript |
No test | Fallback content for script | Content of <noscript> element read if JavaScript is not available/enabled |
No special interaction | Ignored when JavaScript is enabled. | |
object |
object test |
Image, nested browsing context, or plugin | Depends on embedded content. Announces as "image" if source is a recognised image file type. | No special interaction | Support varies depending on object type. If fallback content is provided within the object element tags then this is announced instead if the data source is broken. |
|
ol |
ol test |
Ordered list | announces as "X, list start", X = the first item's list number |
|
|
|
optgroup |
optgroup test |
Group of options in a list box | Element content | Swipe left/right within dropdown to optgroup content |
No semantics conveyed | |
option |
option test |
Option in a list box or combo box control | Announced as "selected", if the option is currently selected + option content + "button" |
Swipe up/down within dropdown, double-tap to select | Double-tap on select element to expand the list of options. |
|
output |
output test |
Calculated output value | Reads output value | No special interaction | No semantics conveyed | |
p |
p test |
Paragraph | Element content | No special interaction | No semantics conveyed | |
param (obsolete) |
No test | Parameter for object | None expected | No special interaction | No UI | |
picture |
No test | Container to offer alternative versions of an image for different scenarios. | None expected | No special interaction | No UI | |
pre |
pre test |
Block of preformatted text | Element content | No special interaction | No semantics conveyed but announced with a change in intonation | |
progress |
progress test |
Progress bar | Announced as label, if present + current value as a percentage (e.g. "22%") | No special interaction | No semantics conveyed. | |
q |
q test |
Quotation | Element content | No special interaction | No semantics conveyed but announced in a different intonation. | |
rb |
No test | Ruby base element | Element content | No special interaction | No semantics conveyed | |
rp |
No test | Fallback parenthesis for browsers that don't support Ruby | Element content | No special interaction | No semantics conveyed | |
rt |
No test | Represents an annotation | Element content | No special interaction | No semantics conveyed | |
rtc |
No test | Ruby text container | Element content | No special interaction | No semantics conveyed | |
ruby |
No test | Shows pronunciation | Element content | No special interaction | No semantics conveyed | |
s |
s test |
Inaccurate text | Announced as "deletion" + element content | No special interaction | ||
samp |
samp test |
Computer output | Element content | No special interaction | No semantics conveyed | |
script |
No test | Embedded script | None expected | No special interaction | No UI | |
section
|
Generic document or application section |
|
No special interaction. |
|
||
select |
select test |
Combo box | Announces as label content, if present + current selection + "pop-up button" |
|
|
|
small |
small test |
Side comment | Element content | No special interaction | No semantics conveyed | |
source |
No test | Media source for video or audio | None expected | No special interaction | No UI | |
span |
span test |
Generic phrasing container | Element content | No special interaction | No semantics conveyed | |
strong |
strong test |
Importance | Element content | No special interaction | No semantics conveyed | |
style |
No test | Embedded styling information | None expected | No special interaction | No UI | |
sub |
sub test |
Subscript | Element content | No special interaction | No semantics conveyed | |
summary
|
summary test |
disclosure widget control/label | Announced as label content + "button, collapsed/expanded" |
|
Serves as a trigger for expanding/collapsing <details> section. |
|
sup |
sup test |
Superscript | Element content | No special interaction | No semantics conveyed | |
svg |
svg test |
Scalable Vector Graphics |
|
No special interaction |
|
|
table |
Data table | Announced as, caption content, if present + "table start, X rows and Y columns" |
|
|
||
tbody |
tbody test |
Group of rows in a data table | Element content | No special interaction | No semantics conveyed | |
td |
td test |
Data cell in a data table | Announces cell content, "row X, column Y" |
|
Announces row and column number of the cell | |
template |
No test | Template | None expected | No special interaction | No UI | |
textarea |
textarea test |
Multiline text field | Announces as label, if present + the value of any text in the edit field + "multiline text field" |
|
Announces "double-tap to edit" | |
tfoot |
tfoot
test
|
Group of footer rows in a data table | Element content> | No special interaction | No semantics conveyed | |
th |
th test |
Header cell in a data table | Announces as cell content + "column/row header" |
|
VO recognises row/column headers | |
thead |
thead test |
Group of header rows in a data table | Element content | No special interaction | No semantics conveyed | |
time |
time test |
Machine-readable equivalent of date- or time-related data | Element content | No special interaction | No semantics conveyed | |
title |
No test | Document title | Element content | In Safari, navigate to tab view from the toolbar. VO will announce page title content + "tab, X of Y", Y being the total number of pages and X the item number of the current page | ||
tr |
tr test |
Data table row | Element content | No special interaction | No semantics conveyed | |
track |
track test |
Timed text track | Caption display control | No special interaction | No semantics conveyed | |
u |
u test |
Underlined text | Element content | No special interaction | No semantics conveyed | |
ul |
ul test |
Unordered List | Announces as "Bullet, list start" |
|
|
|
var |
var test |
Represents a variable | Element content | No special interaction | No semantics conveyed | |
video |
video test |
Video Player | Announces as video duration (e.g. "37 seconds") "video playback, elapsed time X seconds", where X is the current timestamp | Swipe left/right to focus with VO, double-tap to play/pause | Announces "double-tap to play or pause" | |
wbr |
No test | Line breaking opportunity | None expected | No special interaction | No UI |