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
    		 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:
    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.