WORK IN PROGRESS
Note: 02 October 2024: The information for VoiceOver on iOS 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 | Test Case | Represents | AURAL UI | Interaction | Supported | Notes |
|---|---|---|---|---|---|---|
<a href> |
a with href | Link with an href |
Announces "link" + link text | Swipe left/right, double-tap to activate Rotor navigation to links, announces number of links single finger swipe up/down to navigate when selected in rotor |
Recognizes visited/unvisited state of links. Link number anounced 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. |
|
<abbr> |
abbr | Abbreviated term | Reads text only, not title | No special interaction | No additional semantics conveyed if title is present. |
|
<address> |
address | Contact information | Reads text only | No special interaction | No additional semantics conveyed. | |
<area> |
area | Interactive area within an image map | Announces alt text + "link" |
Swipe left/right to navigate | Requires alt for accessibility. |
|
<article> |
article | Self-contained composition | Reads text only, 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 naviagte back through articles, but does not appear to work. article does support aria-describedby and announces "Description..." after visible text. |
|
<aside> |
aside | Tangentially related content | Announces "complementary" | Rotor to 'landmarks' announces number of landmarks. | Recognized as complementary region. | |
<audio> |
audio | 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> |
Bold | text bolded for utilitarian purposes | Reads content as normal text | No special interaction | No specific emphasis exoected. | |
<base> |
no test | Base URL for relative links | No aural feedback | Not interactive | Typically ignored by VoiceOver. | |
<bdi> |
bdi | Isolates a span of text | Reads content as normal text | No special interaction | No aural impact; structure-only element. | |
<bdo> |
bdo | Overrides the current text direction | Reads content as normal text | No special interaction | No special semantics conveyed. Reads text correctly regardless of direction. | |
<blockquote> |
Block quote | Quoted block content | Reads content as normal text | No special interaction | No additional semantics conveyed. | |
<body> |
no test | Document body | Reads content | No special interaction | No unique aural feedback; body is implicit. | |
<br> |
br | Line break within text | Announces nothing | No special interaction | No additional semantics conveyed.Treated as one new line, regardless of number of <br> elements |
|
<button> |
Button | Operable button control | Announces "button" + label | Double-tap to activate Rotor navigation to buttons or form controls, announces number of buttons/controls single finger swipe up/down to navigate when selected in rotor |
Announced as "toggle button" label and state (pressed/unpressed) when button has aria-pressed. |
|
<canvas> |
canvas | 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. |
Sub DOM content announced if available. Canvas not idenified without explicit role |
|
<caption> |
Table caption | Title for a table | Announces as part of the table. Role not announced | Rotor navigation to tables, announces number of tables | Properly linked to the table it describes. When rotor set to Tables, single finger swipe up or down, moves to next/previous table,table caption is announced, the "start of table" the row and column number. |
|
<cite> |
cite | Reference to a creative work | Reads content as normal text | No special interaction | No specific aural emphasis. | |
<code> |
code | Inline code or programming syntax | Reads 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 | Groups multiple columns in a table | No aural indication | Not directly interactive | Structure-enhancing, with no direct aural output. | |
<data> |
data | Data and its human-readable equivalent | Reads element content | No special interaction | Treated as regular text. | |
<datalist> |
datalist | Provides options for an input field | Announces "text field, listbox popup" | Double-tap to select | List of suggestions appear in browser suggestions rather than as a listbox. With VO enabled cannot display listbox. | |
<dd> |
dd | Content of a term's description | announces start of "description list" Reads element content suffixed with "Description" announces "description list end" | Properly grouped with its dt. |
||
<del> |
del | Marked as deleted | Announces "deletion" then text | No special interaction | ||
<details> |
details | 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 | Indicates a defining instance of a term | Reads element content not role | No special interaction | No unique treatment beyond reading. | |
<dialog> |
dialog | Modal dialog | On button that invokes a dialog: announces button text, pop up button, popup dialog On dialog: anounces "web dialog", accessible name reads auto focused control on 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 | Generic block container | Reads element content | No special interaction | ||
<dl> |
dl | List of term-definition pairs | announces start of "description list" | Not recognised as a list in rotor navigation | ||
<dt> |
dt | Term in a definition list | Reads element content suffixed with "term" | Part of list navigation | Associated with the following dd. |
|
<em> |
em | Emphasized text | Reads with emphasis | No special interaction | Uses different intonation for emphasis. | |
<embed> |
embed | Embeds external resources | Announces "embedded object" | Swipe to interact | Behavior depends on embedded content. | |
<fieldset> |
fieldset | Groups related form controls | Announces "group start/end" | Swipe to navigate form controls | Recognizes fieldset and legend association. | |
<figcaption> |
FigureCaption | Caption for a figure element | Reads caption text | No special interaction | Recognized as part of the figure. | |
<figure> |
figure | Self-contained content | Announces "figure" | Swipe to navigate | Properly reads as a grouped item. | |
<footer> |
footer | Page or section footer | Announces "content info" | Rotor to 'landmarks' | Recognized as a landmark region. | |
<form> |
form | Collects user input | Announces "form" | Swipe to navigate form controls | Recognizes form controls and fieldsets. | |
<h1> to <h6> |
headings | Headings with different levels | Announces "heading level X" | Rotor to 'headings', swipe to navigate | Properly identifies heading level and content. | |
<head> |
head [no test] | No aural indication | No special interaction | No direct aural impact. | ||
<header> |
header | Header section | Announces "banner" | Rotor to 'landmarks' | Identified as a landmark region. | |
<hgroup> |
||||||
<hr> |
hr | Horizontal rule or separator | Announces "separator" | Swipe left/right to navigate | Properly indicates a thematic break. | |
<html> |
html [no test] | Main HTML element | No aural indication | No special interaction | No direct aural impact. | |
<i> |
i | |||||
<iframe> |
iframe | Nested browsing context | Announces "frame" | Swipe left/right to navigate | Recognizes frame's title if available. | |
<img> |
img | Embedded image | Announces "image" + alt text |
Double-tap to interact | Reads alt or "image" if missing. |
|
<input type="button"> |
input [button] | Clickable button | Announces "button" + label | Double-tap to activate | Reads the label and responds to activation. | |
<input type="checkbox"> |
input [checkbox] | Check/uncheck control | Announces "checkbox, checked/unchecked" | Double-tap to toggle state | Recognizes label and state (checked/unchecked). | |
<input type="color"> |
input [color] | Color selection control | Announces "color picker" | Double-tap to open color picker | Allows selection of colors from the palette. | |
<input type="date"> |
input [date] | Date selection control | Announces "date edit" | Swipe to navigate values, double-tap | Provides date-specific input options. | |
<input type="datetime-local"> |
input [datetime-local] | Date selection control | Announces "date edit" | Swipe to navigate values, double-tap | Provides date-specific input options. | |
<input type="email"> |
input [email] | Email address entry | Announces "email edit" | Normal text entry interaction | Provides email-specific keyboard. | |
<input type="file"> |
input [file] | File selection/upload control | Announces "file upload" | Double-tap to choose files | Allows file browsing and selection. | |
<input type="hidden"> |
input [hidden] [no test] | Non-visible input | No aural feedback | Not interactive | Used for form data; ignored by VoiceOver. | |
<input type="image"> |
input [image] | Submit button with an image | Announces "image button" + alt text if present | Double-tap to activate | Acts like a regular button, but with an image. | |
<input type="month"> |
input [month] | Month and year input | Announces "month edit" | Swipe to navigate, double-tap | Provides a month/year picker interface. | |
<input type="number"> |
input [number] | Numeric entry | Announces "number edit" | Swipe to increase/decrease value | Provides numeric keypad for input. | |
<input type="password"> |
input [password] | Password entry field | Announces "secure text field" | Normal text entry interaction | Characters are masked as entered. | |
<input type="radio"> |
input [radio] | Radio button option | Announces "radio button" + checked/unchecked | Double-tap to select | Recognizes grouping with other radio buttons. | |
<input type="range"> |
input [range] | Range input using a slider | Announces "slider" + current value | Swipe to adjust value | Allows setting a value within a defined range. | |
<input type="reset"> |
input [reset] | Resets form fields | Announces "reset button" | Double-tap to activate | Resets all form inputs to their default values. | |
<input type="search"> |
input [search] | Search query entry | Announces "search edit" | Normal text entry interaction | Provides search-specific keyboard. | |
<input type="submit"> |
input [submit] | Form submission button | Announces "submit button" | Double-tap to submit | Submits the form data to the server. | |
<input type="tel"> |
input [tel] | Telephone number entry | Announces "phone edit" | Normal text entry interaction | Provides a phone-specific keypad. | |
<input type="text"> |
input [text] | Single-line text entry | Announces "text field" | Normal text entry interaction | Standard text input field. | |
<input type="time"> |
input [time] | Time picker control | Announces "time edit" | Swipe to adjust values, double-tap | Provides an hour/minute input interface. | |
<input type="url"> |
input [url] | URL entry field | Announces "URL edit" | Normal text entry interaction | Provides URL-specific keyboard. | |
<input type="week"> |
input [week] | Week number input | Announces "week edit" | Swipe to adjust values, double-tap | Allows selection of a week within a year. | |
<ins> |
ins | Recently added text | Announces "insertion" before inserted text | No special interaction | ||
<kbd> |
kbd | User keyboard input representation | Reads element content | No special interaction | No special treatment beyond normal text. | |
<label> |
label | Descriptive label for input | Announces label when focusing on input | Swipe to focus on associated input | Provides context for form controls. | |
<legend> |
legend | Caption for a fieldset | Announces as part of fieldset | No special interaction | Provides context to grouped form controls. | |
<li> |
li | Item in an ordered/unordered list | Announces position in list | Swipe to navigate | Recognizes item count and position. | |
<link> |
link [no test] | Link to external resources (CSS, icons) | No aural feedback | Not interactive | Generally ignored by screen readers. | |
<main> |
main | Main content area | Announces "main" | Rotor to 'landmarks', swipe to navigate | Recognized as a landmark region. | |
<map> |
map | Collection of areas within an image | No direct aural indication | Interaction via associated <area> elements |
VoiceOver recognizes linked areas in the map. | |
<mark> |
mark | Highlighted or relevant text | Reads content as normal text | No special interaction | No unique emphasis conveyed. | |
<meta> |
meta [no test] | Metadata about the HTML document | No aural feedback | Not interactive | Used for SEO and browser processing. | |
<meter> |
meter | Visual gauge or meter | Announces "meter" + value | Swipe to interact | Announces the current value. | |
<nav> |
nav | Navigation links | Announces "navigation" | Rotor to 'landmarks' | Identified as a navigation landmark. | |
<noscript> |
Alternative content for JS | Content for non-JS enabled browsers | Reads element content | No special interaction | Displayed if JavaScript is disabled. | |
<object> |
Embedded object | Generic embedded object | Announces "object" | Swipe to interact | Behavior depends on embedded object type. | |
<ol> |
Ordered list | Numbered list of items | Announces "ordered list" | Swipe to navigate | Recognizes list structure and item count. | |
<optgroup> |
Option group | Grouping of options in a dropdown | Announces "group" label | Swipe within dropdown | Provides context in select menus. | |
<option> |
Select option | Selectable option in a dropdown | Announces option text | Swipe to select | Recognizes the selected state. | |
<output> |
Calculation result | Result of a calculation | Reads output value | No special interaction | Announces changes dynamically. | |
<p> |
Paragraph | Block of text | Reads content as normal text | No special interaction | Standard reading behavior. | |
<picture> |
Responsive image container | Responsive image element | Announces selected image | Swipe to navigate | Reads the most appropriate image source. | |
<pre> |
Preformatted text | Text with preserved whitespace | Reads content with preserved spaces | No special interaction | Retains formatting, including line breaks. | |
<progress> |
Progress bar | Progress indicator | Announces "progress bar" + value | Swipe to interact | Announces the current progress value. | |
<q> |
Inline quotation | Short inline quotation | Announces quotation marks | No special interaction | Properly indicates start/end of quotes. | |
<rp> |
Ruby fallback parentheses | Ruby text fallback for non-ruby-enabled browsers | Reads content as normal text | No special interaction | Displayed only if ruby text not supported. |
|
<rt> |
Ruby annotation text | Ruby text for pronunciation guides | Reads content as normal text | No special interaction | Read inline with the main text. | |
<ruby> |
Ruby annotation container | Container for ruby text annotations | Reads main and rt text together |
No special interaction | Provides pronunciation guidance inline. | |
<s> |
Strikethrough text | Strikethrough text styling | Reads content as normal text | No special interaction | No indication of strikethrough. | |
<samp> |
Sample output | Sample output from a program | Reads content as normal text | No special interaction | No unique aural distinction. | |
<script> |
JavaScript | Embedded or external JavaScript | No aural feedback | Not interactive | Executes without screen reader feedback. | |
<section> |
Section | Thematic grouping of content | Announces "region" if labeled | Rotor to 'landmarks' | Acts as a landmark region when labeled. | |
<select> |
Select dropdown | Drop-down menu for multiple options | Announces "popup button" | Double-tap to open, swipe to select | Reads all available options. | |
<small> |
Fine print | Less important text | Reads content as normal text | No special interaction | No specific aural change. | |
<source> |
Media source | Source for media elements | No direct aural feedback | Not interactive | Used within <audio> and <video>. |
|
<span> |
Inline container | Generic inline container | Reads content as normal text | No special interaction | Treated as part of text flow. | |
<strong> |
Strong emphasis | Important text | Reads with emphasis | No special interaction | Uses a stronger voice inflection. | |
<style> |
CSS styles | Embedded stylesheets | No aural feedback | Not interactive | Applies CSS styles; ignored by screen reader. | |
<sub> |
Subscript text | Subscript text | Reads content as normal text | No special interaction | No indication of subscript. | |
<summary> |
Disclosure summary | Summary for <details> |
Announces "summary" | Double-tap to expand/collapse | Acts as a trigger for the <details> element. |
|
<sup> |
Superscript text | Superscript text | Reads content as normal text | No special interaction | No indication of superscript. | |
<svg> |
Scalable Vector Graphics | Vector graphics in XML format | Announces "graphic" if labeled | Swipe to navigate | Reads accessible labels, if provided. | |
<table> |
Data table | Tabular data | Announces "table with X rows and Y columns" | Swipe to navigate cells | Provides structured navigation through rows/columns. | |
<tbody> |
Table body | Table content container | Included in table navigation | No special interaction | Part of overall table structure. | |
<td> |
Table data cell | Cell within a table row | Reads content | Part of table navigation | Properly linked with headers. | |
<template> |
Template container | Client-side template content | No aural feedback | Not interactive | Hidden unless instantiated by JavaScript. | |
<textarea> |
Multi-line text input | Editable multi-line text area | Announces "text area" | Normal text entry interaction | Allows multiple lines of input. | |
<tfoot> |
Table footer | Footer section of a table | Included in table navigation | No special interaction | Part of the overall table structure. | |
<th> |
Table header cell | Header cell within a table | Announces "column header" or "row header" | Part of table navigation | Recognizes association with td cells. |
|
<thead> |
Table header | Header section of a table | Included in table navigation | No special interaction | Part of the overall table structure. | |
<time> |
Time | Date/time representation | Reads content | No special interaction | Displays human-readable time/date. | |
<title> |
Document title | Title of the document | Announces when page loads | No direct interaction | Read out when the page/tab gains focus. | |
<tr> |
Table row | Row within a table | Included in table navigation | No special interaction | Properly reads cell content within rows. | |
<track> |
Media track | Subtitles, captions, or descriptions | Announces track type when enabled | Swipe to activate/deactivate | Used with <audio> and <video> elements. |
|
<u> |
Underlined text | Text with underline styling | Reads content as normal text | No special interaction | No unique aural distinction for underline. | |
<ul> |
Unordered list | Bullet list | Announces "list with X items" | Swipe to navigate list items | Properly recognizes and reads list structure. | |
<var> |
Variable | Variable or argument in text/code | Reads element content | No special interaction | No unique treatment beyond normal text. | |
<video> |
Video player | Embedded video with controls | Announces "video" | Double-tap to play/pause | Provides full media controls. | |
<wbr> |
Word break opportunity | Suggests a line break opportunity | No direct aural feedback | No special interaction | Breaks handled visually via CSS/layout. |