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
<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>
N/A 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>
N/A 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>
N/A Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting.
bdo
Test
<bdo dir="">Test</bdo>
N/A 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>.
cide
Test
<cide>Test</cide>
N/A Represents a citation or reference to another source.
code
Test
<code>Test</code>
N/A 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>
N/A Links a piece of content with a machine-readable translation.
datalist
<datalist></datalist>
N/A 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>
N/A 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>
N/A 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>
N/A 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>
N/A 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>
N/A 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>
N/A 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>
N/A 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>
N/A Represents contents that are no longer accurate or no longer relevant.
samp
Test
<samp></samp>
N/A 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>
N/A 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>
N/A Represents an inline styleless section in a document.
strong
Test
<strong>Test</strong>
N/A 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>
N/A 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
N/A 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>
N/A 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
N/A Represents a line break opportunity.