WORK IN PROGRESS
Note: 02 October 2024: The information for VoiceOver on Mac 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 | Represents | Aural UI | Interaction | Supported | Notes |
|---|---|---|---|---|---|
<a> with href |
Hyperlink | Announces "link" + link text | VO + right/left arrow to navigate, VO + space to activate | VoiceOver recognizes visited/unvisited state of links. | |
<a> without href |
Anchor | Treated as plain text | No special interaction | Treated as regular text with no link functionality. | |
<abbr> |
Abbreviation | Reads element content; announces title if present | No special interaction | Expands abbreviation if title attribute is present. |
|
<address> |
Contact information | Reads content as plain text | No special interaction | No specific semantics beyond reading the text. | |
<article> |
Self-contained composition | Announces "article" | VO + Command + Option + Right Arrow to navigate | Recognizes start/end of articles. | |
<aside> |
Tangentially related content | Announces "complementary" | VO + Command + Option + Right Arrow to navigate | Recognized as a complementary region. | |
<audio> |
Audio player | Announces "audio" | Focusable via VO + space to play/pause | Buttons in the audio player are accessible. | |
<b> |
Bold text | Reads content as normal text | No special interaction | No specific 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" | Navigable via VO commands | Clearly announces the start and end of blockquotes. | |
<body> |
Document body | Reads content | No special interaction | No special semantics conveyed. | |
<button> |
Button control | Announces "button" + label | VO + space to activate | Recognizes the button state and label. | |
<canvas> |
Scriptable bitmap canvas | Announces "graphic" if aria-label is present |
Focusable via VO navigation | Accessible fallback content is read if provided. | |
<caption> |
Table caption | Announces caption when table is navigated | VO commands to navigate | Acts as the table's title. | |
<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 code indication given. | |
<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" | VO + space to open | Provides suggestions as the user types. | |
<dd> |
Description definition | Reads element content | Part of list navigation | Included as part of the definition list. | |
<del> |
Deleted text | Announces "deletion" | No special interaction | Uses a different tone to indicate deletion. | |
<details> |
Disclosure widget | Announces "group start/end" | VO + space to expand/collapse | Recognizes expanded/collapsed state. | |
<dfn> |
Defining instance of a term | Reads element content | No special interaction | No specific semantics conveyed. | |
<dialog> |
Dialog box | Announces "dialog" | Focus moved to dialog when opened | Recognizes when dialog opens and traps focus within. | |
<div> |
Generic flow container | Reads element content | No special interaction | No special semantics unless ARIA roles are provided. | |
<dl> |
Definition list | Announces "list with X items" | VO commands to navigate | Recognizes list structure. | |
<dt> |
Definition term | Reads element content | Part of definition list navigation | Properly identifies as part of the definition list. | |
<em> |
Emphasis | Reads with emphasis | No special interaction | Uses different intonation for emphasis. | |
<embed> |
Embedded content | Announces "embedded object" | Focusable via VO navigation | Varies depending on the embedded object type. | |
<fieldset> |
Group of form controls | Announces "group" | Navigates using VO commands | Recognizes fieldset and legend content. | |
<figcaption> |
Figure caption | Reads caption text | No special interaction | Announces when associated with a figure. | |
<figure> |
Figure with optional caption | Announces "figure" | Navigable via VO commands | Recognizes start and end of the figure. | |
<footer> |
Footer for page or section | Announces "content info" | VO + Command + Option + Right Arrow | Identified as a landmark region. | |
<form> |
User-submittable form | Announces "form" | VO + Command + Option + Right Arrow | Recognizes labeled forms and their controls. | |
<h1> to <h6> |
Section headings | Announces "heading level X" | VO + Command + Option + Right Arrow to navigate | Properly identifies heading level and text. | |
<header> |
Header for page or section | Announces "banner" | VO + Command + Option + Right Arrow | Identified as a landmark region. | |
<hr> |
Thematic break | Announces "separator" | Navigable via VO commands | Properly indicates a thematic break. | |
<html> |
Root element | No special aural indication | No special interaction | No semantics expected. | |
<iframe> |
Inline frame | Announces "frame" with title | Focusable via VO navigation | Recognizes frame title when present. | |
<img> |
Image | Announces "image" + alt text | VO + Command + Option + Right Arrow | Reads alt attribute content or "image" if none provided. |
|
<input type="button"> |
Button control | Announces "button" | VO + space to activate | Recognizes button type and label. | |
<input type="checkbox"> |
Checkbox control | Announces "checkbox, checked/unchecked" | VO + space to check/uncheck | Identifies the label and state. | |
<input type="radio"> |
Radio button | Announces "radio button" + checked state | VO + space to select | Recognizes position within radio group. | |
<label> |
Label for input | Reads associated label | No special interaction | Reads label when associated input gains focus. | |
<li> |
List item | Announces list position | VO + Command + Option + Right Arrow to navigate | Announces item count and position. | |
<main> |
Main content | Announces "main" | VO + Command + Option + Right Arrow | Recognized as a main landmark region. | |
<nav> |
Navigation links | Announces "navigation" | VO + Command + Option + Right Arrow | Identified as a navigation landmark. | |
<ol> |
Ordered list | Announces "ordered list" | VO + Command + Option + Right Arrow | Announces list structure and number of items. | |
<table> |
Data table | Announces "table with X rows and Y columns" | VO navigation commands | Recognizes row/column headers and cell content. | |
<ul> |
Unordered list | Announces "list with X items" | VO + Command + Option + Right Arrow | Recognizes the list structure. |
This table details how VoiceOver interacts with HTML elements, providing full information about each element's role, aural feedback, and interaction patterns, matching the complete and detailed format you requested.