DEV Community

Cover image for HTML : Importance of role for better voice-overs & accessibility
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on • Edited on

HTML : Importance of role for better voice-overs & accessibility

#programming #html #webdev #a11y

What is role?

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

Usage Example:

<a href="#" role="button">Button CTA</a>
Enter fullscreen mode Exit fullscreen mode

Screen Readers will read this element as “button” instead of “link”.

Below are list of role attributes you can apply in your project-

role="presentation"

An element whose implicit native role semantics will not be mapped to the accessibility API.

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->
Enter fullscreen mode Exit fullscreen mode

role="alert"

A message with important, and usually time-sensitive, information.

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>
Enter fullscreen mode Exit fullscreen mode

Note that I've included both role="alert" and aria-live="assertive" at the same time. These are synonymous attributes, but some screen readers only support one or the other. By using both simultaneously we therefore maximize the chances that the live region will function as expected.

role="alertdialog"

A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.

<div role="alertdialog">
 <h1>Warning</h1>
 <div role="alert">Your session will expire in 60 seconds.</div>
</div>
Enter fullscreen mode Exit fullscreen mode

role="application"

A region declared as a web application, as opposed to a web document. In this example, the application is a simple calculator that might add two numbers together.

<div role="application">
 <h1>Calculator</h1>
 <input id="num1" type="text"> + <input id="num2" type="text"> =
 <span id="result"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

role="article"

A section of a page that consists of a composition that forms an independent part of a document, page, or site.

<article>
 <h1>My first article</h1>
 <p>Lorem ipsum...</p>
</article>
Enter fullscreen mode Exit fullscreen mode

You would use role=article on non-semantic elements (not recommended, invalid)

<div role="article">
 <h1>My first article</h1>
 <p>Lorem ipsum...</p>
</div>
Enter fullscreen mode Exit fullscreen mode

role="banner"

A region that contains mostly site-oriented content, rather than page-specific content.

<div role="banner">
 <h1>My Site</h1>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
 <li><a href="/contact">Contact</a></li>
 </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

role="button"

An input that allows for user-triggered actions when clicked or pressed.

<button role="button">Add</button>
Enter fullscreen mode Exit fullscreen mode

role="cell"

A cell in a tabular container.

<table>
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <td role="cell">95</td>
 <td role="cell">14</td>
 <td role="cell">25</td>
 </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

role="checkbox"

A checkable input that has three possible values: true, false, or mixed.

<p>
 <input type="checkbox" role="checkbox" aria-checked="false">
 I agree to the terms
</p>
Enter fullscreen mode Exit fullscreen mode

role="columnheader"

A cell containing header information for a column.

<table role="grid">
 <thead>
 <tr>
 <th role="columnheader">Day 1</th>
 <th role="columnheader">Day 2</th>
 <th role="columnheader">Day 3</th>
 </tr>
 </thead>
 <tbody>
 <!-- etc -->
 </tbody>
<table>
Enter fullscreen mode Exit fullscreen mode

role="combobox"

A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to
enter arbitrary text as a new item in the list.

<input type="text" role="combobox" aria-expanded="false">
Enter fullscreen mode Exit fullscreen mode

Typically, you would use JavaScript to build the rest of the typeahead or list select functionality.

role="complementary"

A supporting section of the document, designed to be complementary to the main content at a similar level in the
DOM hierarchy, but remains meaningful when separated from the main content.

<div role="complementary">
 <h2>More Articles</h2>
 <ul>
 <!-- etc -->
 </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

role="contentinfo"

A large perceivable region that contains information about the parent document.

<p role="contentinfo">
 Author: Albert Einstein<br>
 Published: August 15, 1940
</p>
Enter fullscreen mode Exit fullscreen mode

role="definition"

A definition of a term or concept.

<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>
Enter fullscreen mode Exit fullscreen mode

role="dialog"

A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.

<div role="dialog">
 <p>Are you sure?</p>
 <button role="button">Yes</button>
 <button role="button">No</button>
</div>
Enter fullscreen mode Exit fullscreen mode

role="directory"

A list of references to members of a group, such as a static table of contents.

<ul role="directory">
 <li><a href="/chapter-1">Chapter 1</a></li>
 <li><a href="/chapter-2">Chapter 2</a></li>
 <li><a href="/chapter-3">Chapter 3</a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

role="document"

A region containing related information that is declared as document content, as opposed to a web application.

<div role="document">
 <h1>The Life of Albert Einstein</h1>
 <p>Lorem ipsum...</p>
</div>
Enter fullscreen mode Exit fullscreen mode

role="form"

A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Using the semantically correct HTML element

implies default ARIA semantics, meaning role=form is not required as you should not apply a contrasting role to an element that is already semantic, as adding a role overrides the native semantics of an element.
<form action="">
 <fieldset>
 <legend>Login form</legend>
 <div>
 <label for="username">Your username</label>
 <input type="text" id="username" aria-describedby="username-tip" required />
 <div role="tooltip" id="username-tip">Your username is your email address</div>
 </div>
 <div>
 <label for="password">Your password</label>
 <input type="text" id="password" aria-describedby="password-tip" required />
div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
 </div>
 </fieldset>
</form>

You would use role=form on non-semantic elements (not recommended, invalid)

<div role=form>
 <input type="email" placeholder="Your email address">
 <button>Sign up</button>
</div>

role="grid"

A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.

<table role="grid">
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <!-- etc -->
 </tbody>
</table>

role="gridcell"

A cell in a grid or treegrid.

<table role="grid">
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <tr>
 <td role="gridcell">17</td>
 <td role="gridcell">64</td>
 <td role="gridcell">18</td>
 </tr>
 </tbody>
<table>

role="group"

A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.

<div role="group">
 <button role"button">Previous</button>
 <button role"button">Next</button>
</div>

role="heading"

A heading for a section of the page.

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

role="img"

A container for a collection of elements that form an image.

<figure role="img">
 <img alt="A cute cat." src="albert.jpg">
 <figcaption>This is my cat, Albert.</figcaption>
<figure>

role="link"

An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.

role="list"

A group of non-interactive list items.

<ul role="list">
 <li role="listitem">One</li>
 <li role="listitem">Two</li>
 <li role="listitem">Three</li>
</ul>

role="listbox"

A widget that allows the user to select one or more items from a list of choices.

<ul role="listbox">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>

Typically, you would use JavaScript to build the multiple-selection functionality.

role="listitem"

A single item in a list or directory.

<ul role="list">
 <li role="listitem">One</li>
 <li role="listitem">Two</li>
 <li role="listitem">Three</li>
</ul>

role="log"

A type of live region where new information is added in meaningful order and old information may disappear.

<ul role="log">
 <li>User 1 logged in.</li>
 <li>User 2 logged in.</li>
 <li>User 1 logged out.</li>
</ul>

role="main"

The main content of a document.

<!-- header & nav here -->
<div role="main">
 <p>Lorem ipsum...</p>
</div>
<!-- footer here -->

role="marquee"

A type of live region where non-essential information changes frequently.

<ul role="marquee">
 <li>Dow +0.26%</li>
 <li>Nasdaq +0.54%</li>
 <li>S&amp;P +0.44%</li>
</ul>

role="math"

Content that represents a mathematical expression.

<img role="math" alt="y=mx+b" src="slope.png">

role="menu"

A type of widget that offers a list of choices to the user.

<ul role="menu">
 <li role="menuitem">New</li>
 <li role="menuitem">Open</li>
 <li role="menuitem">Save</li>
 <li role="menuitem">Close</li>
</ul>

role="menubar"

A presentation of menu that usually remains visible and is usually presented horizontally.

<ul role="menubar">
 <li role="menuitem">File</li>
 <li role="menuitem">Edit</li>
 <li role="menuitem">View</li>
<li role="menuitem">Help</li>
</ul>

role="menuitem"

An option in a group of choices contained by a menu or menubar.

<ul role="menubar">
 <li role="menuitem">File</li>
 <li role="menuitem">Edit</li>
 <li role="menuitem">View</li>
 <li role="menuitem">Help</li>
</ul>

role="menuitemcheckbox"

A checkable menuitem that has three possible values: true, false, or mixed.

<ul role="menu">
 <li role="menuitem">Console</li>
 <li role="menuitem">Layout</li>
 <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>

role="menuitemradio"

A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.

<ul role="menu">
 <li role="menuitemradio" aria-checked="true">Left</li>
 <li role="menuitemradio" aria-checked="false">Center</li>
 <li role="menuitemradio" aria-checked="false">Right</li>
</ul>

role="navigation"

A collection of navigational elements (usually links) for navigating the document or related documents.

<ul role="navigation">
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
 <li><a href="/contact">Contact</a></li>
</ul>

role="note"

A section whose content is parenthetic or ancillary to the main content of the resource.

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>

role="option"

A selectable item in a select list.

<ul role="listbox">
 <li role="option">Option 1</li>
 <li role="option">Option 2</li>
 <li role="option">Option 3</li>
</ul>

role="progressbar"

An element that displays the progress status for tasks that take a long time.

<progress role="progressbar" value="25" max="100">25%</progress>

role="radio"

A checkable input in a group of radio roles, only one of which can be checked at a time.

<div role="radiogroup">
 <input role="radio" type="radio" aria-checked="true"> One<br>
 <input role="radio" type="radio" aria-checked="false"> Two<br>
 <input role="radio" type="radio" aria-checked="false"> Three
</div>

role="region"

A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics.

<div role="region">
 Home team: 4<br>
 Away team: 2
</div>

role="radiogroup"

A group of radio buttons.

<div role="radiogroup">
 <input role="radio" type="radio" aria-checked="true"> One<br>
 <input role="radio" type="radio" aria-checked="false"> Two<br>
 <input role="radio" type="radio" aria-checked="false"> Three
</div>

role="row"

A row of cells in a tabular container.

<table>
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <tr role="row">
 <!-- etc -->
 </tr>
 </tbody>
</table>

role="rowgroup"

A group containing one or more row elements in a grid.

<table>
 <thead role="rowgroup">
 <!-- etc -->
 </thead>
 <tbody role="rowgroup">
 <!-- etc -->
 </tbody>
</table>

role="rowheader"

A cell containing header information for a row in a grid.

<table role="grid">
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <tr>
 <th role="rowheader">Day 1</th>
 <td>65</td>
 </tr>
 <tr>
 <th role="rowheader">Day 2</th>
 <td>74</td>
 </tr>
 </tbody>
</table>

role="scrollbar"

A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.

<div id="content1">Lorem ipsum...</div>
<div
 role="scrollbar"
 aria-controls="content1"
 aria-orientation="vertical"
 aria-valuemax="100"
 aria-valuemin="0"
 aria-valuenow="25">
 <div class="scrollhandle"></div>
</div>

role="search"

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

<div role="search">
 <input role="searchbox" type="text">
 <button role="button">Search</button>
</div>

role="searchbox"

A type of textbox intended for specifying search criteria.

<div role="search">
 <input role="searchbox" type="text">
 <button role="button">Search</button>
</div>

role="separator"

A divider that separates and distinguishes sections of content or groups of menuitems.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

role="slider"

A user input where the user selects a value from within a given range.

<div
 role="slider"
 aria-valuemax="100"
 aria-valuemin="0"
 aria-valuenow="25">
 <div class="sliderhandle"></div>
</div>

role="spinbutton"

A form of range that expects the user to select from among discrete choices.

<input
 role="spinbutton"
 aria-valuemax="100"
 aria-valuemin="0"
 aria-valuenow="25"
 type="number"
 value="25">

role="status"

A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.

<div role="status">Online</div>

role="switch"

A type of checkbox that represents on/off values, as opposed to checked/unchecked values.

<select role="switch" aria-checked="false">
 <option>On</option>
 <option selected>Off</option>
</select>

role="tab"

A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.

<ul role="tablist">
 <li role="tab">Introduction</li>
 <li role="tab">Chapter 1</li>
 <li role="tab">Chapter 2</li>
</ul>

role="table"

A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive.

<table role="table">
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <!-- etc -->
 </tbody>
</table>

role="tablist"

A list of tab elements, which are references to tabpanel elements.

<ul role="tablist">
 <li role="tab">Introduction</li>
 <li role="tab">Chapter 1</li>
 <li role="tab">Chapter 2</li>
</ul>

role="tabpanel"

A container for the resources associated with a tab, where each tab is contained in a tablist.

<ul role="tablist">
 <li role="tab">Introduction</li>
 <li role="tab">Chapter 1</li>
 <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
 <!-- etc -->
</div>

role="textbox"

Input that allows free-form text as its value.

<textarea role="textbox"></textarea>

role="timer"

A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.

<p>
 <span role="timer">60</span> seconds remaining.
</p>

role="toolbar"

A collection of commonly used function buttons represented in compact visual form.

<ul role="toolbar">
 <li><img alt="New" src="new.png"></li>
 <li><img alt="Open" src="open.png"></li>
 <li><img alt="Save" src="save.png"></li>
 <li><img alt="Close" src="close.png"></li>
</ul>

role="tooltip"

A contextual popup that displays a description for an element.

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

Typically, the tooltip would be hidden. Using JavaScript, the tooltip would be displayed after a delay when the user hovers over the element that it describes.

role="tree"

A type of list that may contain sub-level nested groups that can be collapsed and expanded.

<ul role="tree">
 <li role="treeitem">
 Part 1
 <ul>
 <li role="treeitem">Chapter 1</li>
 <li role="treeitem">Chapter 2</li>
 <li role="treeitem">Chapter 3</li>
 </ul>
 </li>
 <li role="treeitem">
 Part 2
 <ul>
 <li role="treeitem">Chapter 4</li>
 <li role="treeitem">Chapter 5</li>
 <li role="treeitem">Chapter 6</li>
 </ul>
 </li>
 <li role="treeitem">
 Part 3
 <ul>
 <li role="treeitem">Chapter 7</li>
 <li role="treeitem">Chapter 8</li>
 <li role="treeitem">Chapter 9</li>
 </ul>
 </li>
</ul>

role="treegrid"

A grid whose rows can be expanded and collapsed in the same manner as for a tree.

role="treeitem"

An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sublevel group of treeitems.

<ul role="tree">
 <li role="treeitem">
 Part 1
 <ul>
 <li role="treeitem">Chapter 1</li>
 <li role="treeitem">Chapter 2</li>
 <li role="treeitem">Chapter 3</li>
 </ul>
 </li>
 <li role="treeitem">
 Part 2
 <ul>
 <li role="treeitem">Chapter 4</li>
 <li role="treeitem">Chapter 5</li>
 <li role="treeitem">Chapter 6</li>
 </ul>
 </li>
 <li role="treeitem">
 Part 3
 <ul>
 <li role="treeitem">Chapter 7</li>
 <li role="treeitem">Chapter 8</li>
 <li role="treeitem">Chapter 9</li>
 </ul>
 </li>
</ul>

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (4)

Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

preword: this isn't an attack on your article, just a very important warning as people may copy paste examples without knowledge or use role everywhere when it is not needed and could cause problems! I commend anyone drawing attention to accessibility ❤

Some examples, without relevant WAI-ARIA attributes would actually make accessibility worse.

And in some case in your examples they serve no purpose at all.

There are obviously a lot of examples here so I can't cover them all in a comment but I will cover a few just to draw people's attention to the fact that you can't just "set and forget" role attributes without understanding them and a lot of the time a simple HTML5 element will do the job better and with a lot more compatibility (more robust) with assitive technology.

role=button 

<a href="#" role="button">Button CTA</a>
Enter fullscreen mode Exit fullscreen mode

While not an incorrect usage, the problem is that this is an anti-pattern. Instead just use a <button> element, all the semantics are built in, doing this is no where near as robust as <button> and a bad practice, avoid at all costs! (there is a caveat here, if you have built a backup page that shows if JavaScript fails then this could be acceptable, but it is a very niche use case and requires a lot of nuance that is too long for a comment, so unless you really know what you are doing, avoid it!)

<button role="button">Add</button>
Enter fullscreen mode Exit fullscreen mode

Also in this example there is nothing to be gained, the semantics are already on the button and unless you are supporting xHTML or HTML4 then it is unnecessary clutter.

For clarity that would be supporting IE8 and below, IE9 supports HTML5 just fine and I would be surprised if you are building websites that support IE8. This applies to a lot of the examples / summary below where I suggest just using a semantic element.

role="presentation" 

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->
Enter fullscreen mode Exit fullscreen mode

There is nothing to be gained adding it to an empty <div>, yet again it already has no role (which is essentially what role="presentation" does).

This should be used instead for things like images that are purely for aesthetics, tables if used for layout (which if you are doing you should have stopped 10 years ago!) etc.

It is designed to remove semantic information from an element that already contains semantic information.

role="application" 

<div role="application">
 <h1>Calculator</h1>
 <input id="num1" type="text"> + <input id="num2" type="text"> =
 <span id="result"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

warning: this is a very dangerous role. The second you add it every single item inside that element loses all semantic meaning and in-built functionality as far as assistive technology is concerned.

Unless you have a very very very strong grasp of accessibility and expected functionality I would not use this role.

it is that dangerous that when I talk about role attributes I never even mention it!

role="banner" 

<div role="banner">
 <h1>My Site</h1>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
 <li><a href="/contact">Contact</a></li>
 </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Yet again, completely unnecessary for anything below IE8 - just use <header> - it has exactly the same meaning.

And because this comment is long, some quick summaries:

  • role=checkbox - not needed on an input functioning as a checkbox.
  • role="complementary" - just use <aside>
  • role="contentinfo" - just use <footer>
  • role="heading" - not needed (just use <h1> through to <h6>), unless for some reason you need heading level 7 in a very complex document. Also cannot be used without aria--level otherwise it breaks the accessibility tree.
  • role="link" - just use a <a href="", fake links are a terrible idea.
  • role="list" - don't use this on an <ul> or an <ol>, you are removing semantic information.
  • role="main" - just use <main>
  • role="menu" - needs a lot of extra ARIA attributes such as aria-expanded, aria-controls (or aria-owns) etc. to have any meaning. Without it it would cause confusion.
  • role="navigation" - just use <nav>
  • role="region" - use <section>, but you must also name it with either aria-label or aria-labelledby.

There are other warnings such as some of them having really poor support aria-role="switch" probably shouldn't be used for example and you should instead use something like a checkbox if appropriate.

Anyway, have a ❤ and a 🦄 as it is still great having a list of all the roles in oe place and draws attention to accessibility! 👍

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav •

Thank you for your time to explain this, I agree there are few scenarios where-in we can seek for alternatives as using semantic HTML tags. We also encounter the situations where-in we need to rely on more than one ARIA. My HTML articles are targeted to most of code newbies or beginners and it's good to know for them that role is so vast. Gradually with experience they will get to know when and how to avoid them based on situations and yes they can refer your comment note - :)

Thanks for your time, really appreciating :)

Collapse
 
grahamthedev profile image
GrahamTheDev •

Not an issue at all, as I said, the article is great as a reference for the roles.

The only reason I wrote the comment is as you said "code newbies" tend to copy paste (or at least that is how I started out learning) so just wanted to give people a heads up!

Great reference piece for people to go off and learn each of the roles (perhaps you could link to MDN or another resource for each so people can understand them further)!

I hope to see more accessibility stuff from you in the future. ❤

Thread Thread
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav •

Thank you, will try to accommodate the reference URLs in future.

Read next

fkhadra profile image

React-toastify v11 - finally easy to customize

Fadi Khadra -

evillord666 profile image

Override Go app configuration with Environment variable

Ushakov Michael -

chris_devto profile image

Apple Books and the disability tax

Chris -

pranta profile image

Why Rewriting Everything in Rust Won’t Solve All Your Problems

PRANTA Dutta -