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 | Recognizes visited/unvisited state of 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 | No special interaction | No additional semantics conveyed. article does support aria-describedby and announces "Description..." after visible text. |
|
<aside> |
aside | Tangentially related content | Announces "complementary" | Rotor to 'landmarks' | Recognized as complementary region. | |
<audio> |
Audio player | Audio content with controls | Announces "audio" | Double-tap to play/pause | Accessible buttons available in the player. | |
<b> |
Bold text | Important or emphasized text | Reads content as normal text | No special interaction | No specific emphasis conveyed. | |
<base> |
Document base URL | Base URL for relative links | No aural feedback | Not interactive | Typically ignored by VoiceOver. | |
<bdi> |
Bi-directional isolation | Isolates a span of text | Reads content as normal text | No special interaction | No aural impact; structure-only element. | |
<bdo> |
Bi-directional override | Overrides the current text direction | Reads content as normal text | No special interaction | No special semantics conveyed. | |
<blockquote> |
Block quote | Quoted block content | Announces "blockquote" | Swipe left/right to navigate | Announces the start and end of blockquotes. | |
<body> |
Document body | Main content of the page | Reads content | No special interaction | No unique aural feedback; body is implicit. | |
<br> |
Line break | Line break within text | Announces "line break" | No special interaction | Treated as a separator in the text flow. | |
<button> |
Button | Clickable button control | Announces "button" + label | Double-tap to activate | Reads label and state (pressed/unpressed). | |
<canvas> |
Drawing canvas | Scriptable bitmap canvas | Announces "graphic" if aria-label is provided |
Focusable via swipe gestures | Fallback content read if available. | |
<caption> |
Table caption | Title for a table | Announces as part of the table | Rotor navigation to tables | Properly linked to the table it describes. | |
<cite> |
Citation | Reference to a creative work | Reads content as normal text | No special interaction | No specific aural emphasis. | |
<code> |
Code snippet | Inline code or programming syntax | Reads element content | No special interaction | No unique treatment; read as normal text. | |
<col> |
Table column | Defines column properties | No aural indication | Not directly interactive | Impact conveyed through table structure only. | |
<colgroup> |
Group of columns | Groups multiple columns in a table | No aural indication | Not directly interactive | Structure-enhancing, with no direct aural output. | |
<data> |
Machine-readable data | Data and its human-readable equivalent | Reads element content | No special interaction | Treated as regular text. | |
<datalist> |
Combo box suggestions | Provides options for an input field | Announces "combo box" | Double-tap to select | Accessible list of suggestions. | |
<dd> |
Definition description | Content of a term's description | Reads element content | Part of list navigation | Properly grouped with its dt. |
|
<del> |
Deleted text | Marked as deleted | Announces "deletion" | No special interaction | Uses a different tone to indicate deletion. | |
<details> |
Disclosure widget | Expandable/collapsible content | Announces "disclosure" | Double-tap to expand/collapse | Recognizes expanded/collapsed state. | |
<dfn> |
Defining term | Indicates a defining instance of a term | Reads element content | No special interaction | No unique treatment beyond reading. | |
<dialog> |
Dialog box | Modal dialog | Announces "dialog" | Focus moves to dialog on open | Recognizes and traps focus within dialog. | |
<div> |
Generic container | Generic block container | Reads element content | No special interaction | Role is determined by ARIA attributes. | |
<dl> |
Definition list | List of term-definition pairs | Announces "list with X items" | Swipe to navigate | Properly treated as a grouped list. | |
<dt> |
Definition term | Term in a definition list | Reads element content | Part of list navigation | Associated with the following dd. |
|
<em> |
Emphasis | Emphasized text | Reads with emphasis | No special interaction | Uses different intonation for emphasis. | |
<embed> |
Embedded content | Embeds external resources | Announces "embedded object" | Swipe to interact | Behavior depends on embedded content. | |
<fieldset> |
Form controls grouping | Groups related form controls | Announces "group start/end" | Swipe to navigate form controls | Recognizes fieldset and legend association. | |
<figcaption> |
Figure caption | 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> |
Section headings | Headings with different levels | Announces "heading level X" | Rotor to 'headings', swipe to navigate | Properly identifies heading level and content. | |
<header> |
Header | Header section | Announces "banner" | Rotor to 'landmarks' | Identified as a landmark region. | |
<hr> |
Thematic break | Horizontal rule or separator | Announces "separator" | Swipe left/right to navigate | Properly indicates a thematic break. | |
<html> |
Root element | Main HTML element | No aural indication | No special interaction | No direct aural impact. | |
<iframe> |
Inline frame | Nested browsing context | Announces "frame" | Swipe left/right to navigate | Recognizes frame's title if available. | |
<img> |
Image | Embedded image | Announces "image" + alt text |
Double-tap to interact | Reads alt or "image" if missing. |
|
<input type="button"> |
Button | Clickable button | Announces "button" + label | Double-tap to activate | Reads the label and responds to activation. | |
<input type="checkbox"> |
Checkbox | Check/uncheck control | Announces "checkbox, checked/unchecked" | Double-tap to toggle state | Recognizes label and state (checked/unchecked). | |
<input type="color"> |
Color picker | Color selection control | Announces "color picker" | Double-tap to open color picker | Allows selection of colors from the palette. | |
<input type="date"> |
Date input | Date selection control | Announces "date edit" | Swipe to navigate values, double-tap | Provides date-specific input options. | |
<input type="datetime-local"> |
Local date and time | Date and time picker | Announces "date-time edit" | Swipe to adjust values, double-tap | Combines date and time entry fields. | |
<input type="email"> |
Email input | Email address entry | Announces "email edit" | Normal text entry interaction | Provides email-specific keyboard. | |
<input type="file"> |
File upload | File selection/upload control | Announces "file upload" | Double-tap to choose files | Allows file browsing and selection. | |
<input type="hidden"> |
Hidden input | Non-visible input | No aural feedback | Not interactive | Used for form data; ignored by VoiceOver. | |
<input type="image"> |
Image button | 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"> |
Month input | Month and year input | Announces "month edit" | Swipe to navigate, double-tap | Provides a month/year picker interface. | |
<input type="number"> |
Number input | Numeric entry | Announces "number edit" | Swipe to increase/decrease value | Provides numeric keypad for input. | |
<input type="password"> |
Password input | Password entry field | Announces "secure text field" | Normal text entry interaction | Characters are masked as entered. | |
<input type="radio"> |
Radio button | Radio button option | Announces "radio button" + checked/unchecked | Double-tap to select | Recognizes grouping with other radio buttons. | |
<input type="range"> |
Range slider | Range input using a slider | Announces "slider" + current value | Swipe to adjust value | Allows setting a value within a defined range. | |
<input type="reset"> |
Reset button | Resets form fields | Announces "reset button" | Double-tap to activate | Resets all form inputs to their default values. | |
<input type="search"> |
Search input | Search query entry | Announces "search edit" | Normal text entry interaction | Provides search-specific keyboard. | |
<input type="submit"> |
Submit button | Form submission button | Announces "submit button" | Double-tap to submit | Submits the form data to the server. | |
<input type="tel"> |
Telephone input | Telephone number entry | Announces "phone edit" | Normal text entry interaction | Provides a phone-specific keypad. | |
<input type="text"> |
Text input | Single-line text entry | Announces "text field" | Normal text entry interaction | Standard text input field. | |
<input type="time"> |
Time input | Time picker control | Announces "time edit" | Swipe to adjust values, double-tap | Provides an hour/minute input interface. | |
<input type="url"> |
URL input | URL entry field | Announces "URL edit" | Normal text entry interaction | Provides URL-specific keyboard. | |
<input type="week"> |
Week input | Week number input | Announces "week edit" | Swipe to adjust values, double-tap | Allows selection of a week within a year. | |
<ins> |
Inserted text | Recently added text | Announces "insertion" | No special interaction | Uses a distinct tone for inserted content. | |
<kbd> |
Keyboard input | User keyboard input representation | Reads element content | No special interaction | No special treatment beyond normal text. | |
<label> |
Label for form input | Descriptive label for input | Announces label when focusing on input | Swipe to focus on associated input | Provides context for form controls. | |
<legend> |
Fieldset legend | Caption for a fieldset | Announces as part of fieldset | No special interaction | Provides context to grouped form controls. | |
<li> |
List item | Item in an ordered/unordered list | Announces position in list | Swipe to navigate | Recognizes item count and position. | |
<link> |
External resource link | Link to external resources (CSS, icons) | No aural feedback | Not interactive | Generally ignored by screen readers. | |
<main> |
Main content | Main content area | Announces "main" | Rotor to 'landmarks', swipe to navigate | Recognized as a landmark region. | |
<map> |
Image map | Collection of areas within an image | No direct aural indication | Interaction via associated <area> elements |
VoiceOver recognizes linked areas in the map. | |
<mark> |
Highlighted text | Highlighted or relevant text | Reads content as normal text | No special interaction | No unique emphasis conveyed. | |
<meta> |
Metadata | Metadata about the HTML document | No aural feedback | Not interactive | Used for SEO and browser processing. | |
<meter> |
Scalar measurement | Visual gauge or meter | Announces "meter" + value | Swipe to interact | Announces the current value. | |
<nav> |
Navigation section | 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. |