WORK IN PROGRESS
Note: 02 October 2024: The information for TalkBack on Android 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.
TalkBack on Android HTML Support Table
Element | Test Case | Represents | AURAL UI | Interaction | Supported | Notes |
---|---|---|---|---|---|---|
<a> |
Hyperlink | Link with an href |
Announces "link" + link text | Swipe left/right, double-tap to activate | Recognizes visited/unvisited state of links. | |
<abbr> |
Abbreviation | Abbreviated term | Reads abbreviation and title attribute | No special interaction | Expands abbreviation if title is present. |
|
<address> |
Address information | Contact information | Reads text as normal | No special interaction | Treated as regular text; no special emphasis. | |
<area> |
Image map area | Clickable area within an image map | Announces "link" + alt text |
Swipe left/right to navigate, double-tap | Recognizes alt text for accessibility. |
|
<article> |
Article | Self-contained composition | Announces "article" | Swipe left/right, or use local context menu | Recognized as a landmark. | |
<aside> |
Sidebar | Tangentially related content | Announces "complementary" | Swipe left/right, or use local context menu | Recognized as a complementary region. | |
<audio> |
Audio player | Audio content with controls | Announces "audio" or "play button" | Double-tap to play/pause | Accessible buttons available; reads controls. | |
<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 | Ignored by TalkBack; used for browser handling. | |
<bdi> |
Bi-directional isolation | Isolates a span of text | Reads content as normal text | No special interaction | No semantic effect conveyed by TalkBack. | |
<bdo> |
Bi-directional override | Overrides the current text direction | Reads content as normal text | No special interaction | No special aural feedback. | |
<blockquote> |
Block quote | Quoted block content | Announces "blockquote" | Swipe left/right to navigate | Recognizes the blockquote start and end. | |
<body> |
Document body | Main content of the page | Reads content | No special interaction | No unique aural feedback; treated as the main document. | |
<br> |
Line break | Line break within text | Announces "line break" | No special interaction | Treated as a natural pause or break in reading. | |
<button> |
Button | Clickable button control | Announces "button" + label | Double-tap to activate | Recognizes state (pressed/unpressed) and label. | |
<canvas> |
Drawing canvas | Scriptable bitmap canvas | Announces "graphic" if aria-label provided |
Swipe left/right to navigate | Accessible fallback content read if provided. | |
<caption> |
Table caption | Title for a table | Announces as part of the table | Swipe left/right to navigate table content | Recognized when navigating within a table. | |
<cite> |
Citation | Reference to a creative work | Reads content as normal text | No special interaction | No specific emphasis given. | |
<code> |
Code snippet | Inline code or programming syntax | Reads content as normal text | No special interaction | No unique inflection for code snippets. | |
<col> |
Table column | Defines column properties | No aural indication | Not directly interactive | Structure conveyed through table headers. | |
<colgroup> |
Group of columns | Groups multiple columns in a table | No aural indication | Not directly interactive | Contributes to table structure but not directly read. | |
<data> |
Machine-readable data | Data and its human-readable equivalent | Reads element content | No special interaction | Treated as normal text. | |
<datalist> |
Combo box suggestions | Provides options for an input field | Announces "combo box" | Double-tap to select | Offers accessible suggestions when typing. | |
<dd> |
Definition description | Content of a term's description | Reads element content | Swipe left/right to navigate | Properly linked to dt . |
|
<del> |
Deleted text | Marked as deleted | Announces "deleted" before reading content | No special interaction | Uses distinct tone for deleted content. | |
<details> |
Disclosure widget | Expandable/collapsible content | Announces "expandable" or "collapsed" | Double-tap to expand/collapse | Recognizes the expanded/collapsed state. | |
<dfn> |
Defining term | Indicates a defining instance of a term | Reads element content | No special interaction | No additional semantics conveyed by TalkBack. | |
<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 | Treated according to ARIA roles/attributes. | |
<dl> |
Definition list | List of term-definition pairs | Announces "list with X items" | Swipe left/right to navigate | Recognizes the list structure. | |
<dt> |
Definition term | Term in a definition list | Reads element content | Part of list navigation | Associated with following dd . |
|
<em> |
Emphasis | Emphasized text | Reads with slight emphasis | No special interaction | Uses intonation to convey emphasis. | |
<embed> |
Embedded content | Embeds external resources | Announces "embedded object" | Swipe left/right to navigate | Behavior depends on the type of embedded content. | |
<fieldset> |
Form controls grouping | Groups related form controls | Announces "group" and reads legend | Swipe left/right to navigate 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 left/right to navigate | Properly treated as a grouped item. | |
<footer> |
Footer | Page or section footer | Announces "footer" | Rotor to landmarks or swipe left/right | Recognized as a landmark region. | |
<form> |
Form | Collects user input | Announces "form" | Swipe left/right to navigate controls | Recognizes form controls and fieldsets. | |
<h1> to <h6> |
Section headings | Headings with levels 1 to 6 | Announces "heading level X" | Rotor to headings, swipe to navigate | Properly identifies heading level and content. | |
<header> |
Header | Header section | Announces "header" | Rotor to landmarks | Identified as a landmark region. | |
<hr> |
Thematic break | Horizontal rule or separator | Announces "separator" | Swipe left/right to navigate | Treated as a separator line. | |
<html> |
Root element | Main HTML element | No aural indication | No special interaction | Not directly read; root of the document. | |
<iframe> |
Inline frame | Nested browsing context | Announces "frame" | Swipe left/right to navigate | Recognizes the frame's title if available. | |
<img> |
Image | Embedded image | Announces "image" + alt text |
Double-tap to activate or swipe to navigate | Reads alt or "image" if missing. |
|
<input type="button"> |
Button | Clickable button | Announces "button" + label | Double-tap to activate | Recognizes the label of the button. | |
<input type="checkbox"> |
Checkbox | Check/uncheck control | Announces "checkbox, checked/unchecked" | Double-tap to toggle state | Identifies the label and checked/unchecked state. | |
<input type="color"> |
Color picker | Color selection control | Announces "color picker" | Double-tap to open the color picker | Allows selecting colors from the palette. | |
<input type="date"> |
Date input | Date selection control | Announces "date picker" | Double-tap to open and set values | Provides a date-specific input interface. | |
<input type="datetime-local"> |
Local date and time | Local date and time picker | Announces "date and time picker" | Double-tap to open, swipe to adjust values | Combines date and time selection. | |
<input type="email"> |
Email input | Email address entry | Announces "email field" | Text entry interaction | Provides an email-specific keyboard. | |
<input type="file"> |
File upload | File selection/upload control | Announces "file upload" | Double-tap to choose file | Allows file browsing and selection. | |
<input type="hidden"> |
Hidden input | Non-visible input | No aural feedback | Not interactive | Used for form data; ignored by TalkBack. | |
<input type="image"> |
Image button | Submit button with an image | Announces "image button" + alt text |
Double-tap to activate | Acts as a regular button but with an image. | |
<input type="month"> |
Month input | Month/year input | Announces "month picker" | Double-tap to adjust values | Provides a month/year selection interface. | |
<input type="number"> |
Number input | Numeric entry | Announces "number field" | Double-tap to enter/edit | Provides a numeric keyboard. | |
<input type="password"> |
Password input | Secure text entry | Announces "password field" | Text entry interaction | Input is masked as entered. | |
<input type="radio"> |
Radio button | Radio button option | Announces "radio button, checked/unchecked" | Double-tap to select | Recognizes the radio button's group. | |
<input type="range"> |
Range slider | Range input using a slider | Announces "slider" + current value | Swipe left/right to adjust | 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 default values. | |
<input type="search"> |
Search input | Search query entry | Announces "search field" | Text entry interaction | Provides a search-specific keyboard. | |
<input type="submit"> |
Submit button | Form submission button | Announces "submit button" | Double-tap to activate | Submits form data to the server. | |
<input type="tel"> |
Telephone input | Telephone number entry | Announces "phone number field" | Text entry interaction | Provides a telephone-specific keypad. | |
<input type="text"> |
Text input | Single-line text entry | Announces "text field" | Text entry interaction | Standard text input field. | |
<input type="time"> |
Time input | Time picker | Announces "time picker" | Double-tap to adjust | Allows selecting hours and minutes. | |
<input type="url"> |
URL input | URL entry field | Announces "URL field" | Text entry interaction | Provides a URL-specific keyboard. | |
<input type="week"> |
Week input | Week number input | Announces "week picker" | Double-tap to adjust values | Allows selecting a week within a year. | |
<ins> |
Inserted text | Recently added text | Announces "insertion" | No special interaction | Uses distinct tone for inserted content. | |
<kbd> |
Keyboard input | User keyboard input representation | Reads element content | No special interaction | No unique aural treatment. | |
<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 "list item" + position | Swipe to navigate | Recognizes item count and position. | |
<link> |
External resource link | Link to external resources | No aural feedback | Not interactive | Generally ignored by TalkBack. | |
<main> |
Main content | Main content area | Announces "main" | Rotor to 'landmarks' or 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 |
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 handling. | |
<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' or swipe to navigate | Recognized 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 left/right to interact | Behavior depends on the embedded content type. | |
<ol> |
Ordered list | Numbered list of items | Announces "ordered list" + number of items | Swipe to navigate | Recognizes list structure and item count. | |
<optgroup> |
Option group | Grouping of options in a dropdown | Announces "group" label | Swipe to navigate options | Recognizes option groups within a select menu. | |
<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 the output value | No special interaction | Announces dynamically updated content. | |
<p> |
Paragraph | Block of text | Reads content as normal text | No special interaction | Treated as regular paragraph text. | |
<picture> |
Responsive image container | Responsive image | Announces selected image | Swipe to navigate | Reads the most appropriate image source. | |
<pre> |
Preformatted text | Text with preserved whitespace | Reads content as normal text | 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 | Recognizes start/end of quotes. | |
<rp> |
Ruby fallback parentheses | Ruby text fallback | Reads content as normal text | No special interaction | Displayed if ruby text not supported. | |
<rt> |
Ruby annotation text | Ruby pronunciation guide | Reads content as normal text | No special interaction | Reads inline with the main text. | |
<ruby> |
Ruby annotation container | Container for ruby text annotations | Reads the ruby text annotations | No special interaction | Provides pronunciation guidance inline. | |
<s> |
Strikethrough text | Text with a line through it | Reads content as normal text | No special interaction | No unique indication for strikethrough. | |
<samp> |
Sample output | Sample output from a program | Reads content as normal text | No special interaction | No specific treatment beyond reading. | |
<script> |
JavaScript | Embedded or external JavaScript | No aural feedback | Not interactive | Executes without screen reader feedback. | |
<section> |
Section | Thematic grouping of content | Announces "region" | Rotor to 'landmarks' | Recognized as a landmark if labeled. | |
<select> |
Select dropdown | Dropdown menu | 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 special emphasis applied. | |
<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 the text flow. | |
<strong> |
Strong emphasis | Important text | Reads with strong emphasis | No special interaction | Uses a more assertive 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 unique 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 unique indication of superscript. | |
<svg> |
Scalable Vector Graphics | Vector graphics | 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 | Recognized as part of table structure. | |
<td> |
Table data cell | Cell within a table row | Reads cell content | Included in table navigation | Properly linked to headers where applicable. | |
<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" | Text entry interaction | Allows multiple lines of input. | |
<tfoot> |
Table footer | Footer section of a table | Included in table navigation | No special interaction | Recognized as part of table structure. | |
<th> |
Table header cell | Header cell within a table | Announces "column header" or "row header" | Included in table navigation | Recognizes association with data cells. | |
<thead> |
Table header | Header section of a table | Included in table navigation | No special interaction | Recognized as part of table structure. | |
<time> |
Time | Date/time representation | Reads element content | No special interaction | Displays human-readable time/date. | |
<title> |
Document title | Title of the document | Announces when the page loads | Not interactive | Read when the page/tab gains focus. | |
<tr> |
Table row | Row within a table | Included in table navigation | No special interaction | Reads content within each cell of the row. | |
<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 | 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 are handled visually via CSS/layout. |