JIYIK CN >

In this article, we will introduce the HTML role attribute and its uses.

Introduction to the role attribute in HTML

The role attribute in HTML belongs to the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) specification. The main purpose of WAI-ARIA is to improve the accessibility of web interfaces to support people with disabilities.

It lets screen readers read the content of the HTML document using the information we provide. The role attribute defines the role of an HTML element describing the semantics.

First, let's understand the difference between semantic and non-semantic HTML elements. Elements such as <p>, , <table>and <li>are semantic elements that convey meaning.

It focuses more on its functionality rather than its appearance. The specific meaning of the element is presented to the browser and the developer.

For example, <p>tags create paragraphs.

On the other hand, non-semantic HTML elements are those that have no clear explanation of their content. For example, tags like and <div>.<span>

Such tags do not contain any information about the content. In other words, they have no semantics.

The role attribute provides semantics to non-semantic elements in HTML. We can write roles for elements using the format role="role_type".

Here, role_type is the role specified in ARIA. In the following sections, we will see different use cases for the role attribute.

Using the role attribute in HTML

One of the main purposes of the role attribute is to provide accessibility, especially for visually impaired users. Using a screen reader, the role attribute reads out the exact purpose or behavior of a particular element.

Let's consider a scenario where a user of a web application is visually impaired. We need to create a button to log the user in.

However, frameworks do not allow us to use <button>the <div> element. Although frameworks cannot do anything about this, we can still <a>make it possible using the <div> tag.

However, unless we use the role attribute, we have no way of telling the visually impaired that there is a login button.

In this case, we can use the role attribute to define the link as a button. We can do this by writing the value of the role attribute as "button".

As a result, the screen reader reads out to the user that Login is a button. Hence, he will be able to log into the system.

We can add a screen reader extension for the Chrome browser from the Chrome Web Store. When the user navigates the tab via keyboard, the screen reader will read Login as a button.

Sample code:

<a href="#" role="button"> Login </a>