HTML elements: roles and possible accessible names

Github page

The chart below shows a list of HTML elements along with their roles and possible accessible names available via the Chrome and Firefox accessibility trees.

Element Example Role and accessible name options Description
a with href
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.
a without href
Test 
<a href="#">Test<a>
Role:
Chrome: Accessibility node not exposed
Firefox: generic
 N/A
abbr
Test 
<abbr title="">Test</abbr>
Role:
Chrome: abbr
Firefox: generic
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 with href
Android logo Go to Max Design site 
<img
  usemap="#image-map"
  src="#"
  alt="Android"
>
<map name="image-map">
  <area
    shape="rect"
    coords="0,0,60,60"
    alt="Go to site"
    href="#"
    target="_blank"
  >
</map>
Role:
link
Possible accessible names:
aria-labelledby
aria-label
alt
title
 Represents a specific area within an image map.
area without href
MDN infographic Android logo 
<img
  usemap="#image-map"
  src="#"
  alt="Android"
>
<map name="image-map">
  <area
    shape="rect"
    coords="0,0,60,60"
  >
</map>
Role:
Chrome: Accessibility node not exposed
Firefox: generic
 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:
Chrome audio
Firefox: group
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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting.
bdo
Test 
<bdo dir="">Test</bdo>
Role:
Chrome: Accessibility node not exposed
Firefox: text leaf
 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:
Chrome: linebreak
Firefox: 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
This is some fallback text. 
<canvas
  id=""
  width=""
  height=""
>
  This is some fallback text.
</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
Test 
<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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 Represents a citation or reference to another source.
code
Test 
<code>Test</code>
Role:
Chrome: Accessibility node not exposed
Firefox: code
 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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 Links a piece of content with a machine-readable translation.
datalist 
<datalist></datalist>
Parent role:
Combobox
Role:
Accessibility node not exposed
 Represents a set of pre-defined options for an <input> element.
dd
Definition term:
Definition description
<dd>Description</dd>
Role:
definition
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:
group
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:
term
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
Definition term:
Definition description
<dl></dl>
Role:
Chrome: DescriptionList
Firefox: definitionlist
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a description list.
dt
Definition term:
Definition description
<dt>Term</dt>
Role:
term
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a term (an item) in a description list.
em
Test 
<em>Test</em>
Role:
emphasis
 Represents emphasized text.
embed 
<embed
  type=""
  src=""
  width=""
  height=""
>
Role:
Chrome: EmbeddedObject
Firefox: internal frame
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:
Chrome: figcaption
Firefox: caption
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
N/A 
<footer>
  Test
</footer>
Role:
Primary: contentinfo
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the footer of a document or a section.
footer inside other landmark
N/A 
<footer>
  Test
</footer>
Role:
Non-primary: generic
 N/A
form 
<form action="#"></form>
Role:
Chrome: generic
Firefox: 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
N/A 
<header>
  <h3>Test</h3>
</header>
Role:
Primary: banner
Possible accessible names:
aria-labelledby
aria-label
title
 Represents the header of a document or a section.
header inside other landmark
N/A 
<header>
  <h3>Test</h3>
</header>
Role:
Non-primary: generic
 N/A
hgroup

Test

<hgroup>
  <h3>Test</h3>
</hgroup>
Role:
group
Possible accessible names:
aria-labelledby
aria-label
title
 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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 Displays text in an italic style.
iframe 
<iframe></iframe>
Role:
Chrome: iframe
Firefox: internal frame
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:
Chrome: Accessibility node not exposed
Firefox: text leaf
 Specifies text as keyboard input.
label 
<label>Test</label>
Role:
Chrome: LabelText
Firefox: label
Possible accessible names:
aria-labelledby
aria-label
title
 Represents a label for an <input> control.
legend
Test 
<legend>Test</legend>
Role:
Chrome: legend
Firefox: label
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 
    • <menu>
  <li><button>Inject Hello</button></li>
  <li><button>Inject Goodbye</button></li>
  <li><button>Clear</button></li>
</menu>
    Role:
    list
    Possible accessible names:
    aria-labelledby
    aria-label
    title
    		 An alternative to the UL, intended for interactive items.
    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:
    Chrome: PluginObject
    Firefox: Document
    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
    + = 0
    The total value is 0 
    <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.
    picture
    Socce ball 
    <picture>
  <source srcset="">
</picture>
    Role:
    Accessibility node not exposed
    		 Represents a container for multiple image sources.
    pre
    N/A 
    <pre></pre>
    Role:
    Chrome: pre
    Firefox: text leaf
    Possible accessible names:
    aria-labelledby
    aria-label
    title
    		 Represents a block of preformatted text.
    progress
    0%
    0%
    <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:
    Chrome: Accessibility node not exposed
    Fierefox: generic
    		 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:
    deletion
    Possible accessible names:
    aria-labelledby
    aria-label
    title
    		 Represents contents that are no longer accurate or no longer relevant.
    samp
    Test 
    <samp></samp>
    Role:
    Chrome: Accessibility node not exposed
    Firefox: text leaf
    		 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.
    search
    N/A 
    <search>
  <form action="#">
    This is a form
  </form>
</search>
    Role:
    search
    Possible accessible names:
    aria-labelledby
    aria-label
    title
    		 Represents a function for searching aspects of the site.
    section

    Test

    <section>
  <h3>Test</h3>
</section>
    Role:
    generic
    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.
    slot 
    <slot name="content">
  <p>Test</p>
</slot>
    Chrome: Accessibility node not exposed
    Firefox: generic
    		 Represents a placeholder inside a web component that you can fill with your own markup.
    small
    Test 
    <small>Test</small>
    Role:
    Chrome: Accessibility node not exposed
    Firefox: text leaf

    Represents side comments such as small print.

    Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
    source
    N/A 
    <source>
    		 N/A Represents alternative media resources for the media elements like <audio> or <video>.
    span
    Test 
    <span>Test</span>
    Role:
    Chrome: Accessibility node not exposed
    Firefox: generic
    		 Represents an inline styleless section in a document.
    strong
    Test 
    <strong>Test</strong>
    Role:
    strong
    		 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:
    Chrome: DisclosureTriangle
    Firefox: summary
    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:
    Chrome: image
    Firefox: graphics-document
    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>
    Role:
    Chrome: Accessibility node not exposed
    Firefox: text leaf
    		 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:
    Chrome: Accessibility node not exposed
    Firefox: text leaf
    		 Represents a variable.
    video 
    <video></video>
    Role:
    Chrome: video
    Firefox: group
    Possible accessible names:
    aria-labelledby
    aria-label
    title
    		 Embeds video content in an HTML document.
    wbr
    TestTest 
    Test<wbr>Test
    Role:
    Chrome: Accessibility node not exposed
    		 Represents a line break opportunity.