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 |
A hyperlink | Element content + "link" |
|
Link role announced before link text when cursored to, after via tab. NVDA announces the type of link as follows:
|
|
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 |
No special commands |
No semantics conveyed by default Note that expansions are not announced by NVDA and that expansions provided using the |
|
address
|
address
test |
Contact information for a page or article element | Element content when no accessible name present. | No special commands |
no accessible name With accessible name |
With accessible name address is announced
as a group - accessible name grouping, followed by the content. |
area
|
area
test |
Hyperlink or dead area on an image map |
alt content, "graphic link" (when navigated using the arrow keys). alt content, "graphic" (when navigated using the TAB key or the link navigation keys). |
|
Although area elements are links, they are not conveyed as links aurally when navigated to using the TAB key. | |
aria-level |
h7-h10 (role="heading"+aria-level=7-10) | Hierarchical level of an element in a structure | Announced as "level" followed by the level number specified | No special interaction | Recognized as a hierarchical level | |
article
|
article
test |
Self-contained syndicatable or reusable composition | Element content | No special interaction | No semantics conveyed | |
aside |
aside test |
Sidebar for tangentially related content | "Complimentary information" element content "complimentary information end" |
|
Recognized as a landmark region | |
audio |
audio test |
Audio player | The accessible name is announced if provided. Does not announce audio. | If the audio element has a controls attribute the buttons in the UI are navigable using button commands. |
Buttons in the audio player are accessible. | |
b |
b test |
Keywords | Element content | No special commands | Refer to: Screen Readers support for text level HTML semantics | |
base |
No test | Base URL and default target browsing context for hyperlinks and forms | None expected | No special commands | No UI | |
bdi |
bdi test |
Text directionality isolation | Element content | No special commands | No semantics conveyed | |
bdo |
bdo test |
Text directionality formatting | Element content | No special commands | No semantics conveyed | |
blockquote |
blockquote test |
A section quoted from another source | "Blockquote" element content |
|
Semantics conveyed via navigation and element name announcement. | |
body |
body test |
Document body | Element content | No special commands | No special semantics conveyed. | |
br |
br test |
Line break, e.g. in poem or postal address | No special commands | Line break | ||
button |
button test |
Button control | text label "button" | Semantics conveyed via navigation and element name announcement | ||
canvas |
canvas test |
Scriptable bitmap canvas | "graphic" element content | No special commands |
The canvas is 'transparent' for screen reader users. HTML content included in the HTML5 canvas sub DOM
is announced and navigable by screen reader users and is navigable by keyboard users. Note: advised to add role=presentation to
<canvas> to avoid unnecessary repetition of graphic role information.
|
|
caption |
caption test |
Table caption | Element content | No special commands | Announced when a table is navigated to. | |
cite |
cite test |
Reference to a creative work | Element content | No special commands |
No semantics conveyed or expected as |
|
code |
code test |
Computer code | Element content | No special commands |
No semantics conveyed or expected as |
|
col |
No test | Table column | None expected | No special commands | No semantics conveyed | |
colgroup |
colgroup test |
Group of columns in a table | None expected | No special commands | ||
data |
data test |
Machine-readable equivalent | Element content | No special commands | No semantics conveyed or expected as <data> has a role="generic" |
|
datalist |
datalist test |
Container for options for combobox control | Element name "combobox, has autocomplete" |
|
||
dd |
dd test |
Content for corresponding dt element(s) | Element content | No special commands | Included as part of dt list item, user must use arrow down for content to be announced. If user navigates via list item navigation
(Next Item in a List I) only the dt elements will be announced. |
|
del |
del test |
A removal from the document | Announces, "Deleted" Element content | No special commands | Refer to: Screen Readers support for text level HTML semantics | |
details |
details test |
Disclosure widget container | Content name "button", followed by the state ("Expanded" or "Collapsed"). | No special commands | The updated state is announced when the user activates the button. Refer to summary element |
|
dfn |
dfn test |
Defining instance of a term | Element content | No special commands | No semantics conveyed. | |
dialog |
dialog test | The dialog element represents a transitory part of an application, in the form of a small window ("dialog box") | dialog, accessible name if provided, accessible description if provided. | When the dialog opens focus is moved to first focusable element. The dialog can be closed with the ESC key.
Upon closing focus moves back to the trigger control. While displayed focus is contained within the dialog . |
Note: Focus is contained within the dialog , but the browser address bar is included within the focus order.
This is a browser implemented behaviour. |
|
div |
div test |
Generic flow container | Element content | No special commands | No semantics conveyed | |
dl |
dl test |
Association list consisting of zero or more name-value groups |
Announced as "List with [n] items" followed by the first list item. The number of elements is the total <dt>
and <dd> elements combined.
|
|
Navigating using I and Shift+I in a description list moves between the <dt> elements.
Arrow keys are required to read the content in the <dd> element.
|
|
dt |
dt test |
Legend for corresponding dd element(s) | Element content |
|
Identified as a list item | |
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 |
If recognised as a frame, announced as "Frame" followed by the accessible name if provided using the title
attribute. No indication of the element if not recognised as a frame.
|
If recognised as a frame:
|
Firefox exposes the <embed> element as a frame. Chrome sometimes exposes the <embed>
element as a frame, depending on the content. Depending on the content type, embedding content using <img> ,
<video> , <audio> , or <iframe> elements is preferable over the
<embed> element.
|
|
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 commands, 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 | Announced as, "Figure caption" Element content | No special commands | ||
figure |
figure test |
Figure with optional caption | Announced as "Figure" if the element has an accessible name or contains a <figcaption> element. |
No special commands | "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 |
|
The <footer> element is not exposed if used in an <article> element. |
|
form |
form test |
User-submittable form | With accessible name announced as accessible name, form, element content |
Without accessible name: ignored. With accessible name:
|
No semantics conveyed unless form has an accessible name, then exposed as a landmark. |
|
h1 - h6 |
h1 - h6 test |
Section heading | Announced as, heading content "heading, level" 1 to 6 |
|
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 | "Banner landmark" element content |
|
The <header> element is not exposed if used in an <article> element. |
|
hr |
hr test |
Thematic break | Announced as, "Separator" | No special command | Provides a clear aural indication. | |
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 | Announced as title attribute value if provided, followed by "frame" |
|
|||
img |
img test |
Image |
|
|
Reads alt attribute content if present. | |
input [button] |
input [button] test |
Button control | Announced as Label content "button" |
|
||
input [checkbox] |
input [checkbox] test |
Checkbox control | Announced as, Label content "checkbox" followed by checked/unchecked state |
|
||
input [color] |
input [color] test |
Colour picker control | Announced as Label content "button" in Firefox. Announced as rgb colour values without an accessible name in Chrome. |
No special commands with Chrome. In Firefox:
|
The colour buttons in the colour dialog do not have an accessible name in Firefox. | |
input [date] |
input [date] test |
date (day/month year) picker control | Announced as Label content "edit", then "day spin button". |
|
The Chrome data picker dialog does not provide context for the dates. They are announced as numbers. Context is provided using Firefox, such as the day name and month when it changes. | |
input [email] |
input [email] test |
text control for inputting email address | Announced as Label content "edit" |
|
Treated as a regular text input. | |
input [file] |
input [file] test |
File chooser control | Announced as Label content file name if selected, otherwise no file chosen, "button" |
|
||
input [hidden] |
No test | hidden form control | None expected | No special commands | No UI | |
input [image] |
input [image] test |
Button control | Announced as Label content "button" |
|
||
input [number] |
input [number] test |
Spin box control | Label content "Edit, spin button" |
|
Note: value in edit box announced as changed increase/decreased using arrow keys. | |
input [password] |
input [password] test |
Text control for inputting a password | Label content "edit protected" |
|
Note: keyboard character input announced as "star". | |
input [range] |
input [range] test |
slider control | Label content "slider" current value |
No special commands to reach the range sliders.
|
Note: The slider cannot be adjusted using the HOME, END, PAGE UP, and PAGE DOWN keys when NVDA is running. Slider value announced as it changes. |
|
input [radio] |
input [radio] , test |
single choice from a set of options | label content "radio button checked/not checked" "x of y" where x = position in radio group, y = number of radio buttons in the group |
|
||
input [reset] |
input [reset] test |
Button control for resetting a form |
|
|||
input [search]
|
input [search] test |
Text control for inputting search terms | label content "edit" |
|
Treated as a regular text input. | |
input [submit] |
input [submit] test |
Button control for submitting a form | label content "button" |
|
||
input [tel] |
input [tel] test |
text box control for inputting a phone number | label content "edit" |
|
||
input [text]
|
input [text] test |
text box control | label content "edit" |
|
||
input [time] |
input [time] test |
Control for setting a specific time. | label content "grouping" followed by label content "hour spin button" current value |
Navigable using NVDA button keystrokes in Chrome:
|
Navigable using NVDA button keystrokes in Chrome and navigable using NVDA button keystrokes in Firefox | |
input [url] |
input [url] test |
Text control for inputting a URL | label content "edit" |
|
||
ins |
ins test |
An addition to the document | "Inserted" Element content | No special commands | Refer to: Screen Readers support for text level HTML semantics | |
kbd |
kbd test |
Represents user input | Element content | 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 special commands | ||
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 |
|
||||
link |
No test | Link metadata | None expected | No special commands | No UI | |
main |
main test |
Main content of a document |
|
|||
map |
map test |
Image map | None expected | No special commands | No UI | |
mark |
mark test |
Highlight | "Highlighted" Element content "out of highlighted" | No special commands | ||
meta |
No test | Text metadata | None expected | No special commands | No UI | |
meter |
meter test |
Gauge | Accessible name "progress bar" followed by the value | No special commands |
|
|
nav |
nav test |
Section with navigational links | Accessible name "landmark region" |
|
||
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 | Depends on embedded content |
|
Support varies depending on object type. | |
ol |
ol test |
Ordered list | "List with [n] items" followed by the first list item |
|
Announces the numerical or alphabetical value for each list item. | |
optgroup |
optgroup test |
Group of options in a list box | Label content "grouping" | No special commands | The list needs to be expanded in order for the grouping information to be announced. Use ALT followed by DOWN ARROW key to expand the list. | |
option |
option test |
Option in a list box or combo box control | Option content x of y; where x = position in list, y = number of items in the list | Navigable using UP/DOWN arrow keys | Use ALT followed by DOWN ARROW key to expand the list. | |
output |
output test |
Calculated output value | Reads output value | No special commands | No semantics conveyed | |
p |
p test |
Paragraph | Element content |
|
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 |
| No special commands |
Progress bars are not inherently focusable. But if a progress bar has tabindex="0" , then the accessible
name of the progress bar will be announced on focus.
|
|
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 | ||
s |
s test |
Inaccurate text | "Deleted" Element content | No special commands | ||
samp |
samp test |
Computer output | Element content | No special commands | No semantics conveyed | |
script |
No test | Embedded script | None expected | No special commands | No UI | |
section
|
Generic document or application section | Announces "region" if labelled |
If labelled, treated as a landmark:
|
No semantics conveyed unless the section has an accessible name. | ||
select |
select test |
Combo box | Accessible name "combo box" |
|
Provides list of options, recognizes optgroup . |
|
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 | No semantics conveyed | |
style |
No test | Embedded styling information | None expected | No special commands | No UI | |
sub |
sub test |
Subscript | Element content | No special commands | No semantics conveyed | |
summary
|
summary test |
disclosure widget control/label | Label text "button" expanded/collapsed |
|
Serves as a trigger for expanding/collapsing <details> section. |
|
sup |
sup test |
Superscript | Element content | No special commands | No semantics conveyed | |
svg |
svg test |
Scalable Vector Graphics | Accessible name "Graphic" if labelled |
In Chrome or Firefox with role="img" :
|
The <svg> element is ignored in Firefox, unless it has role="img" and labelled. |
|
table |
Data table | Announced as, "table with X rows and 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 | Accessible name "edit", followed by the value if there is any text in the edit field |
|
||
tfoot |
tfoot
test
|
Group of footer rows in a data table | 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. | ||
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 | Element content | No special commands | No semantics conveyed | |
title |
No test | Document title | Element content | Read Window Title INSERT+T | Semantics conveyed via navigation and announcement key stroke. | |
tr |
tr test |
Data table row | No special commands | |||
track |
track test |
Timed text track | Caption display control | No special commands | ||
u |
u test |
Underlined text | Element content | No special commands | No semantics conveyed | |
ul |
ul test |
Unordered List | List with n items |
|
||
var |
var test |
Represents a variable | Element content | No special commands | No semantics conveyed | |
video |
video test |
Video Player | Announces individual controls | No special commands | ||
wbr |
No test | Line breaking opportunity | None expected | No special commands | No UI |