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 were 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.
JAWS testing - In progress
Element | Test Case | Represents | AURAL UI | Interaction | Supported | Notes |
---|---|---|---|---|---|---|
a
|
With With no |
With With no |
With
With no |
With With no |
With Link role announced before link text when cursored to, after via tab.
JAWS announces the type of link as follows:
With no No semantics conveyed or expected as |
|
abbr
|
abbr
test |
An abbreviation | Element content |
No special commands JAWS can read |
By default Via preference |
No semantics conveyed by default Note that expansions are not announced by default 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 Group - accessible name,
start/end. |
area
|
area
test |
Hyperlink or dead area on an image map |
"graphic", alt content (when navigated using the arrow keys or the link navigation keys.) alt content, "image map" (when navigated using
the |
|
Although area elements are links they are not conveyed as links aurally. | |
aria-level |
heading level |
heading levels greater than 6 | not supported, all aria-level reported as
h2 |
|
Issue filed: JAWS does not support aria-level on h1-h6 | |
article
|
article
test |
Self-contained syndicatable or reusable composition | "article" element content "article end" |
|
Included as a navigable region < JAWS 2018 | |
aside
|
aside
test |
Sidebar for tangentially related content | "Complimentary information" element content "complimentary information end" |
|
Included as a navigable region | |
audio
|
audio
test |
Audio player | "audio" "group+accessible name" announces controls as navigated. | If the audio element has a controls
attribute the buttons in the UI are navigable using button commands. |
||
b
|
b
test |
Keywords | Element content | No special commands | Refer to: Scree 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 "blockquote end" |
|
Semantics conveyed via navigation and element name announcement. | |
body
|
body
test |
Document body | Element content | No special commands |
No semantics conveyed Is included in focus order in most browsers. |
|
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 unecssary repetition of graphic role information.
|
|
caption
|
caption
test |
Table caption | Element content | No special commands | Announced when a table is navigated to. Used as table title in the table list (List Tables CTRL+INSERT+T) dialog. | |
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 |
|
datalist
|
datalist
test |
Container for options for combo box control |
"combobox, to change the selection use the arrow keys or type the value" |
|
||
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) from dt
then dd content will not be announced. |
|
del
|
del
test |
A removal from the document | voice change, deletion Element content end deletion | No special commands | Refer to: Scree Readers support for text level HTML semantics | |
details
|
details
test |
Disclosure widget container | When the details element has an accessible name it is announced along with group start/end. | No special commands | Refer to summary
element |
|
dfn
|
dfn
test |
Defining instance of a term | Element content | No special commands | No semantics conveyed Refer to JAWS tracker Issue 821 | |
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. 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 semantics conveyed | |
dl
|
dl
test |
Association list consisting of zero or more name-value groups |
|
|||
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: Scree Readers support for text level HTML semantics | |
embed
|
embed
test |
Plugins | ||||
fieldset
|
fieldset
test |
Group of form controls | "Group start" legend content ... "Group end" | 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 | Element content | No special commands | ||
figure
|
figure
test |
Figure with optional caption | "Figure start" figcaption content, element content, figcaption content "Figure end" | No special commands | ||
footer
|
footer
test |
Footer for a page or section | "Content information" element content "content information end" |
|
||
form
|
form
test |
User-submittable form | With accessible name announced as accessible name, form, element content. accessible name, form end. | 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 |
|
|||
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" element content "banner end" |
|
||
hr
|
hr
test |
Thematic break | "separator" |
|
||
html
|
No test | Root element | None expected | No special commands | ||
i
|
i
test |
Alternate voice | Element content | No special commands | No semantics conveyed | |
iframe
|
Nested browsing context |
|
||||
img
|
img
test |
Image | "graphic" alt attribute content |
|
||
input
[button] |
input
[button] test |
Button control | ||||
input
[checkbox] |
input
[checkbox] test |
Checkbox control |
|
|||
input
[color] |
input
[color] test |
Colour picker control | no special commands? | Identified as button by JAWS but not navigable using button navigation keys. | ||
input
[date] |
input
[date] test |
date (day/month year) picker control | ||||
input
[email] |
input
[email] test |
text control for inputting email address |
|
|||
input
[file] |
input
[file] test |
File chooser control |
|
As it's a composite control, it can be navigated to using either button or edit commands. | ||
input
[hidden] |
No test | hidden form control | None expected | No special commands | No UI | |
input
[image] |
input
[image] test |
Button control |
|
|||
input
[number] |
input
[number] test |
Spin box control |
"Edit, spin box" label content
|
|
Note: value in edit box announced as changed increase/decreased using arrow keys. spin buttons included in button commands.
|
|
input
[password] |
input
[password] test |
Text control for inputting a password | Label content "password edit" |
|
Note: keyboard character input announced as "star" | |
input
[range] |
input
[range] test |
slider control | Label content "left, right slider to decrease or increase use the arrow keys" current value |
|
Note: When slider has no accessible name (label) or is disabled or readonly, it is identified (incorrectly) as an edit box. - also depended on how it is navigated to (arrow keys, tab key or edit/form control navigation keys). Slider value announced as it changes. |
|
input
[radio] |
input
[radio] , test |
single choice from a set of options | "radio button checked/not checked" label content "x of y" where x = position in radio group, y = number of radio buttons in group. |
|
||
input
[reset] |
input
[reset] test |
Button control for resetting a form |
|
|||
input
[search] |
input
[search] test |
Text control for inputting search terms |
|
|||
input
[submit] |
input
[submit] test |
Button control for submitting a form |
|
|||
input
[tel] |
input
[tel] test |
text box control for inputting a phone number |
|
|||
input
[text] |
input
[text] test |
text box control |
|
|||
input
[time] |
input
[time] test |
Control for setting a specific time. | ||||
input
[url] |
input
[url] test |
Text control for inputting a URL |
|
|||
ins |
ins
test |
An addition to the document |
voice change insertion/end insertion Element content |
No special commands | Refer to: Scree Readers support for text level HTML semantics | |
kbd
|
kbd
test |
User input | Element content | No special commands | No semantics conveyed | |
label
|
label
test |
Caption for a form control | ||||
legend
|
legend
test |
Caption for fieldset
|
Refer to fieldset element | |||
li
|
ul
> li test and ol
> li test |
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 | Element content | No special commands | No semantics conveyed | |
meta
|
No test | Text metadata | None expected | No special commands | No UI | |
meter
|
meter
test |
Gauge | No special commands | |||
nav
|
nav
test |
Section with navigational links |
|
|||
noscript
|
No test | Fallback content for script | None expected | |||
object
|
object
test |
Image, nested browsing context, or plugin |
|
|||
ol
|
ol
test |
Ordered list |
|
|||
optgroup
|
optgroup
test |
Group of options in a list box | No special commands | |||
option
|
option
test |
Option in a list box or combo box control | ||||
output
|
output
test |
Calculated output value | No semantics conveyed | |||
p
|
p
test |
Paragraph | Element content |
|
No aural semantics, conveyed via navigation and paragraph list. | |
param
(obsolete) |
No test | Parameter for object | None expected | No special commands | No UI | |
picture
|
No test | 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 a Progress bars can be navigated to via P quick key. The accessible name of the progress will be announced when focused in this manner. |
|
q
|
q
test |
Quotation | Element content | No special commands | ||
rb
|
No test | Element content | No special commands | No semantics conveyed | ||
rp
|
No test | Element content | No special commands | No semantics conveyed | ||
rt
|
No test | Element content | No special commands | No semantics conveyed | ||
rtc
|
No test | Element content | No special commands | No semantics conveyed | ||
ruby
|
No test | Element content | No special commands | |||
samp
|
samp
test |
Computer output | Element content | No special commands | No semantics conveyed | |
s
|
s
test |
Inaccurate text | Element content | |||
script
|
No test | Embedded script | None expected | No special commands | No UI | |
section
|
Generic document or application section | No semantics conveyed unless the section has an accessible name. | ||||
select
|
select
test |
List box control |
|
|||
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 | None expected | 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 | button label text expanded/collapsed |
|
Article How do you figure? includes JAWS support notes. | |
sup
|
sup
test |
Superscript | Element content | No special commands | No semantics conveyed | |
svg
|
svg
test |
No special commands | ||||
table |
Data table |
|
||||
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 |
|
|||
template
|
No test | Template | None expected | No special commands | No UI | |
textarea
|
textarea
test |
Multiline text field | label(if present), role, indication if it contains text. |
|
JAWS does not announce the content of a text area when
navigated to. If the textarea has text in
it; "Contains text" is announced. Refer to issue
42 |
|
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 | ||||
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 |
|
|||
track
|
track
test |
Timed text track | Caption display control | No special commands | ||
u
|
u
test |
Keywords | Element content | No special commands | No semantics conveyed | |
ul
|
ul
test |
Unordered List |
|
|||
var
|
var
test |
Variable | Element content | No special commands | No semantics conveyed | |
video
|
video
test |
Video Player | "video" "group+accessible name" announces controls as navigated. | |||
wbr
|
No test | Line breaking opportunity | None expected | No special commands | No UI | |
Element | Test Case | Represents | AURAL UI | Interaction | Semantics Conveyed | Notes |