Role Attribute in HTML

1. Introduction to role Attribute in HTML
2. Use the role Attribute for Accessibility in HTML

In this article, we will introduce the HTML role attribute along with its purpose.

Introduction to role Attribute in HTML

The role attribute in HTML comes under the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) specification. The main purpose of WAI-ARIA is to increase the accessibility of the web interface to support people with disabilities.

It lets the screen reader uses the information we provided to read the content of an HTML document. The role attribute defines the role of an HTML element describing the semantics.

Firstly, let’s understand the difference between the semantic and non-semantic HTML elements. The elements like <p>, <table> and <li> are the semantic element that represents the meanings.

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, the <p> tag creates paragraphs.

On the other hand, non-semantic HTML elements are those elements that do not have a clear explanation of their content. Examples are the tags like <div> and <span>.

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

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

Here, role_type are the roles specified in the ARIA. In the sections below, we will see the different use cases of the role attribute.

Use the role Attribute for Accessibility in HTML

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

Let’s consider a scenario where the web application user is visually impaired. We need to create a button that logins the user.

However, the framework does not allow us to use the <button> element. Despite the framework’s inability, we can still make it possible using the <a> tag.

But, there is no way we can tell the visually impaired person that there’s a button to log in unless we use the role attribute.

We can use the role attribute to define the link as a button in such a situation. We can do it by writing the role attribute’s value as a "button".

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

We can add the Screen Reader extension from the chrome web store for the Chrome browser. When the user navigates the <a> tag through the keyboard, the screen reader will read Login as a button.

Example Code:

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