Document structure roles

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Document structure roles

Document structure roles helps to organise content. There are 26 document structure roles. Most of them aren’t interactive.

Here’s the list of document structure roles.

1. application
2. article
3. cell
4. columnheader
5. definition
6. directory
7. document
8. feed
9. figure
10. group
11. heading
12. img
13. list
14. listitem
15. math
16. none
17. note
18. presentation
19. row
20. rowgroup
21. rowheader
22. separator (when not focusable)
23. table
24. term
25. toolbar
26. tooltip

Roles that are built into HTML

Of these 26 roles, 15 have been built into HTML.

Do you find most of these HTML elements familiar? If yes, good. That means you have a good grasp of HTML. It also means you already know the most important aria-roles!

The remaining roles

From the remaining 11 document structure roles, these are the relatively more important ones:

• Feed
• Group
• None/Presentation
• Tooltip

You’ll almost never use these roles:

• Application
• Directory
• Document
• Math
• Note
• Toolbar

Explanation of each document structure role

Application tells screen readers that element and its descendants should be treated like a desktop application (not a website). It causes screen readers to enter application mode. You won’t need application 99.9% of the time.

<div role="application"> ... </div>

Article is a group of elements that can form an independent part of a page. It’s usually used to contain article-like information like a blog post, form post, newspaper article, etc.

<article> ... </article>

Cell, columnheader, row, rowgroup, rowheader, and table are roles related to a table. These roles are built into <table>, <thead>, <tbody>, <tr>, <th> and <td> elements. Here’s a simple way to visualise these role mappings:

<table>                   <!-- table        -->
  <thead>                 <!-- rowgroup     -->
    <tr>                  <!-- row          -->
      <th> Column 1 </th> <!-- columnheader -->
      <th> Column 2 </th>
    </tr>
  </thead>
  <tbody>                 <!-- rowgroup     -->
    <tr>                  <!-- row          -->
      <th> Row 1 </th>    <!-- rowheader    -->
      <td> Item </td>     <!-- cell         -->
    </tr>
  </tbody>
</table>

Term refers to a word or phase you want to define. Definition is the definition of the term. They’re built into <dt> and <dd> elements respectively.

<dl>
  <dt> Apple </dt> <!-- term -->
  <dd> The round fruit of a tree of the rose family </dd> <!-- definition -->
</dl>

Directory is used for a static table of contents. This role is not well supported across screen readers.

Document tells screen readers to browse the content in Reading mode. It’s only useful if you use it in conjunction with the application role.

Feed contains a list of <article>s that are added to (or removed) as a user scrolls through a page. This is only useful if you create an infinite-scrolling page.

<section role="feed" aria-busy="false">
  ...
  <article> ... </article>
  <article> ... </article>
  <article> ... </article>
  ...
</section>

Figure contains content that may contain an image, code, etc. The <figure> element contains an implicit figure role. Make sure you add an accessible name or description to the <figure>. Read why on Scott O’Hara’s article related to figure.

<figure role="figure" aria-label="repeat figcaption content here">
  <!-- figure content. if an image, provide alt text -->
  <figcaption>
    Caption for the figure.
  </figcaption>
</figure>

Group denotes a group of content that’s not large enough to warrant a landmark role (and doesn’t fall into other document structure roles).

<div role="group"> ... </div>

Heading is the heading for a section of a page. They’re built into <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>

Img denotes an image. The <img> element contains an implicit img role.

<img src="..." alt="..." >

List denotes a list. The <ol> and <ul> elements have an implicit list role. Listitem denotes an item in a list. The <li> element has an implicit listitem role.

<ul>
  <li> ... </li>
</ul>

<ol>
  <li> ... </li>
</ol>

Math denotes content that represents a mathematical expression.

None and presentation roles mean the same thing. They denote elements that are presentational. When an element is marked as presentational, screen readers will NOT announce their roles.

<!-- Screen readers won't say 'button' here -->
<button role="none"> ... </button>
<button role="presentation"> ... </button>

Note is for content that supports the primary content.

<div role="note"> ... </div>

Separator is for separating elements. The <hr> element has an implicit separator role.

<hr>

Toolbar is a list of commonly used buttons displayed in a horizontal manner.

<div role="toolbar">
  <button> ... </button>
  <button> ... </button>
  <button> ... </button>
</div>

Tooltip denotes a popup that becomes visible when an element receives mouse hover (or keyboard focus). Tooltips are displayed only after a short delay (of 1-5 seconds).

<div role="tooltip"> ...</div>

What you should know

1. Go through the 15 elements with implicit aria-roles. Make sure you know them inside-out.
2. Go through the 5 relatively important roles that are not built into HTML. Have a sense of what they’re for. Don’t need to remember them.

That’s it!