HTML elements and accessible names

Github page

The chart below shows a list of HTML elements and the roles and possible accessible names available via Chrome's accessibility tree.

Element Example Role and accessible name options Description
a
Test 
<a href="#">Test<a>
Role:
link
Possible accessible names:
aria-labelledby
aria-label
Contents
title
 Represents a hyperlink when the href attribute is present.
abbr
Test 
<abbr title="">Test</abbr>
Role:
abbr
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an abbreviation or acronym of a longer word or phrase. The optional title attribute can provide an expansion or description for the abbreviation.
address
Test
<address>
  Test
</address>
Role:
group
Possible accessible names:
aria-labelledby
aria-label
title
 Specifies the author's contact information.
area
N/A 
<area
  shape=""
  coords=""
  href=""
  alt=""
>
 N/A Represents a specific area within an image map.
article

Test

<article>
  <h3>Test</h3>
</article>
Role:
article
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an article.
aside 
<aside>
  <h3>Test</h3>
</aside>
Role:
complementary
Possible accessible names:
aria-labelledby
aria-label
title
 Represents some content loosely related to the page content.
audio 
<audio
  controls
  src=""
>
Role:
audio
Possible accessible names:
aria-labelledby
aria-label
title
 Embeds a sound, or an audio stream in an HTML document.
b
Test 
<b>Test</b>
Role:
Accessibility node not exposed
 Displays text in a bold style.
base
N/A 
<base>
 N/A Represents the base URL for all relative URLs in a document.
bdi
Test 
<bdi>Test</bdi>
Role:
Accessibility node not exposed
 Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting.
bdo
Test 
<bdo dir="">Test</bdo>
Role:
Accessibility node not exposed
 Overrides the current text direction.
blockquote
Test 
<blockquote>
  Test
</blockquote>
Role:
blockquote
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a section that is quoted from another source.
body
N/A 
<body></body>
 N/A Represents the document's body.
br
Test
Test 
Test<br>
Test
Role:
linebreak
 Produces a single line break.
button 
<button>Test</button>
Role:
button
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
Contents
title
 Creates a clickable button.
canvas
Test 
<canvas
  width=""
  height=""
>
  Test
</canvas>
Role:
canvas
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a region in the document, which can be used to present graphics via scripting (usually JavaScript).
caption
N/A 
<caption>Test</caption>
Role:
caption
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the caption or title of the <table>.
cite
Test 
<cite>Test</cite>
Role:
Accessibility node not exposed
 Represents a citation or reference to another source.
code
Test 
<code>Test</code>
Role:
Accessibility node not exposed
 Represents text as computer code.
col
N/A 
<col></col>
 N/A Represents attribute values for one or more columns in a <table>.
colgroup
N/A 
<colgroup></colgroup>
 N/A Specifies attributes for multiple columns in a <table>.
data
Test 
<data value="">Test</data>
Role:
Accessibility node not exposed
 Links a piece of content with a machine-readable translation.
datalist 
<datalist></datalist>
Role:
Accessibility node not exposed
 Represents a set of pre-defined options for an <input> element.
dd
DT:
Term
DD:
Description
<dd>Description</dd>
Role:
DescriptionListDetail
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a description, or value for the term (<dt>) in a description list (<dl>).
del
Test 
<del>Test</del>
Role:
deletion
Possible accessible names:
aria-labelledby
aria-label
title
 Represents text that has been deleted from the document.
details
Test Detailed information. 
<details></details>
Role:
details
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a widget from which the user can obtain additional information or controls on-demand.
dfn
Test 
<dfn id="">Test</dfn>
Role:
generic
Possible accessible names:
aria-labelledby
aria-label
title
 Specifies a definition.
dialog
Test 
<dialog open>
  Test
</dialog>
Role:
dialog
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a dialog box or subwindow.
div
Test
<div>
  Test
</div>
Role:
generic
Possible accessible names:
aria-labelledby
aria-label
title
 Specifies a division or a section in a document.
dl
DT:
Term
DD:
Description
<dl></dl>
Role:
DescriptionList
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a description list.
dt
DT:
Term
DD:
Description
<dt>Term</dt>
Role:
DescriptionListTerm
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a term (an item) in a description list.
em
Test 
<em>Test</em>
Role:
Accessibility node not exposed
 Represents emphasized text.
embed 
<embed
  type=""
  src=""
  width=""
  height=""
>
Role:
EmbeddedObject
Possible accessible names:
aria-labelledby
aria-label
title
 Embeds external application, typically multimedia content like audio or video into an HTML document.
fieldset
Test 
<fieldset>
  <legend>Test</legend>
</fieldset>
Role:
group
Possible accessible names:
aria-labelledby
aria-label
From <legend>
title
 Specifies a set of related form fields.
figcaption
Test
<figcaption>Test</figcaption>
Role:
figcaption
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a caption or legend for a figure.
figure
Test 
<figure>
  Test
</figure>
Role:
figure
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a figure illustrated as part of the document.
footer
Test 
<footer>
  Test
</footer>
Role:
Primary: contentinfo
Non-primary: FooterAsNonLandmark
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the footer of a document or a section.
form
Test
<form action="#"></form>
Role:
form
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an HTML form for user input.
h3

Test

<h3>Test</h3>
Role:
heading
Possible accessible names:
aria-labelledby
aria-label
Contents
title
 Represents HTML headings.
head
N/A 
<head></head>
 N/A Represents the head portion of the document that contains information about the document such as title.
header

Test

<header>
  <h3>Test</h3>
</header>
Role:
Primary: Banner
Non-primary: HeaderAsNonLandmark
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the header of a document or a section.
hgroup

Test

<hgroup>
  <h3>Test</h3>
</hgroup>
 N/A Represents a group of headings.
hr 
<hr>
Role:
separator
Possible accessible names:
aria-labelledby
aria-label
title
 Produce a horizontal line.
html
N/A 
<html></html>
 N/A Represents the root of an HTML document.
i
Test 
<i>Test</i>
Role:
Accessibility node not exposed
 Displays text in an italic style.
iframe 
<iframe></iframe>
Role:
iframe
Possible accessible names:
aria-labelledby
aria-label
title
 Displays a URL in an inline frame.
img
Test 
<img
  src=""
  alt=""
>
Role:
img
Possible accessible names:
aria-labelledby
aria-label
alt
title
 Represents an image.
input 
<input type="">
Role:
textbox
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
placeholder
aria-placeholder
title
 Represents an input control.
ins
Test 
<ins>Test</ins>
Role:
insertion
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a block of text that has been inserted into a document.
kbd
Test 
<kbd>Test</kbd>
Role:
Accessibility node not exposed
 Specifies text as keyboard input.
label 
<label>Test</label>
Role:
LabelText
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a label for an <input> control.
legend
Test 
<legend>Test</legend>
Role:
legend
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a caption for a <fieldset> element.
li
  • Test
<li>Test<.li>
Role:
listitem
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a list item.
link
N/A 
<link></link>
 N/A Represents the relationship between the current document and an external resource.
main
N/A 
<main>
  Test
</main>
Role:
main
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the main or dominant content of the document.
map
N/A 
<map></map>
 N/A Represents a client-side image-map.
mark
Test 
<mark>Test</mark>
Role:
mark
Possible accessible names:
aria-labelledby
aria-label
title
 Represents text highlighted for reference purposes.
menu
N/A 
<menu></menu>
 N/A Represents a list of commands.
menuitem
N/A 
<menuitem></menuitem>
 N/A Represents a list (or menuitem) of commands that a user can perform.
meta
N/A 
<meta>
 N/A Provides structured metadata about the document content.
meter
50/100 
<meter
  id=""
  min=""
  max=""
  low=""
  high=""
  optimum=""
  value=""
>
  50/100
</meter>
Role:
meter
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
title
 Represents a scalar measurement within a known range.
nav 
<nav>
  Test
</nav>
Role:
navigation
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a section of navigation links.
noscript
N/A 
<noscript></noscript>
 N/A Represents alternative content to display when the browser doesn't support scripting.
object 
<object
  data=""
  width=""
  height=""
  type=""
>
</object>
Role:
PluginObject
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an embedded object.
ol
  1. Test
<ol>
  <li>Test</li>
</ol>
Role:
list
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an ordered list.
optgroup
N/A 
<optgroup></optgroup>
 N/A Represents a group of related options in a selection list.
option 
<option>Test</option>
Role:
option
Possible accessible names:
aria-labelledby
aria-label
Contents
 Represents an option in a selection list.
output
60 
<output
  name=""
  for=""
>
  60
</output>
Role:
status
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
title
 Represents the result of a calculation.
p

Test

<p>Test</p>
Role:
paragraph
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a paragraph. A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
param
N/A 
<param>
 N/A Represents a parameter for an object or applet element.
picture 
<picture>
  <source srcset="">
</picture>
Role:
Accessibility node not exposed
 Represents a container for multiple image sources.
pre
N/A 
<pre></pre>
Role:
pre
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a block of preformatted text.
progress
70% 
<progress
  id=""
  max=""
  value=""
>
  70%
</progress>
Role:
progressbar
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
title
 Represents the completion progress of a task.
q
Test 
<q>Test</q>
Role:
Accessibility node not exposed
 Represents a short inline quotation.
rp
N/A 
<rp></rp>
 N/A Provides fall-back parenthesis for browsers that that don't support ruby annotations.
rt
N/A 
<rt></rt>
 N/A Represents the pronunciation of character presented in a ruby annotations.
ruby
N/A 
<ruby></ruby>
 N/A Represents a ruby annotation.
s
Test 
<s></s>
Role:
Accessibility node not exposed
 Represents contents that are no longer accurate or no longer relevant.
samp
Test 
<samp></samp>
Role:
Accessibility node not exposed
 Specifies text as sample output from a computer program.
script
N/A 
<script></script>
 N/A Places script in the document for client-side processing.
section

Test

<section>
  <h3>Test</h3>
</section>
Role:
section
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a section of a document, such as header, footer etc.
select 
<select>
  <option>Test</option>
</select>
Role:
combobox
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
title
 Represents a selection list within a form.
small
Test 
<small>Test</small>
Role:
Accessibility node not exposed
 Displays text in a smaller size.
source
N/A 
<source>
 N/A Represents alternative media resources for the media elements like <audio> or <video>.
span
Test 
<span>Test</span>
Role:
Accessibility node not exposed
 Represents an inline styleless section in a document.
strong
Test 
<strong>Test</strong>
Role:
Accessibility node not exposed
 Indicate strongly emphasized text.
style
N/A 
<style></style>
 N/A Inserts style information (commonly CSS) into the head of a document.
sub
Test 
<sub>Test</sub>
Role:
subscript
Possible accessible names:
aria-labelledby
aria-label
title
 Represents subscripted text.
summary
Test Detailed information. 
<summary>Test</summary>
Role:
DisclosureTriangle
Possible accessible names:
aria-labelledby
aria-label
Contents
title
 Represents a summary for the <details> element.
sup
Test
Role:
superscript
Possible accessible names:
aria-labelledby
aria-label
title
 Represents superscripted text.
svg 
<svg></svg>
Role:
svgRoot
Possible accessible names:
aria-labelledby
aria-label
From SVG <title> element
title
 Embed SVG (Scalable Vector Graphics) content in an HTML document.
table
Column header
Cell 
<table></table>
Role:
table
Possible accessible names:
aria-labelledby
aria-label
From <caption>
summary
title
 Represents a data table.
tbody
N/A 
<tbody></tbody>
 N/A Groups a set of rows defining the main body of the table data.
td
Column header
Cell 
<td></td>
Role:
gridcell
Possible accessible names:
aria-labelledby
aria-label
Contents
title
 Represents a cell in a table.
template
N/A 
<template></template>
 N/A Represents the fragments of HTML that should be hidden when the page is loaded, but can be cloned and inserted in the document by JavaScript.
textarea 
<textarea></textarea>
Role:
textbox
Possible accessible names:
aria-labelledby
aria-label
From <label> with for
placeholder
aria-placeholder
title
 Represents a multi-line text input control (text area).
tfoot
N/A 
<tfoot></tfoot>
 N/A Groups a set of rows summarizing the columns of the table.
th
Column header
Cell 
<th></th>
Role:
columnheader
Possible accessible names:
aria-labelledby
aria-label
Contents
title
 Represents a header cell in a table.
thead
Column header
Cell 
<thead></thead>
 N/A Groups a set of rows that describes the column labels of a table.
time 
<time></time>
Role:
time
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a time and/or date.
title
N/A 
<title></title>
 N/A Represents a title for the document.
tr
Column header
Cell 
<tr></tr>
Role:
row
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a row of cells in a table.
track
N/A 
<track
  default
  kind=""
  srclang=""
  src=""
>
 N/A Represents text tracks for the media elements like <audio> or <video>.
u
Test 
<u>Test</u>
 N/A Displays text with an underline.
ul
  • Test
<ul></ul>
Role:
list
Possible accessible names:
aria-labelledby
aria-label
title
 Represents an unordered list.
var
Test 
<var></var>
Role:
Accessibility node not exposed
 Represents a variable.
video 
<video></video>
Role:
video
Possible accessible names:
aria-labelledby
aria-label
title
 Embeds video content in an HTML document.
wbr
TestTest 
Test<wbr>Test
Role:
Accessibility node not exposed
 Represents a line break opportunity.