What was the purpose of adding the roll attribute…

The role attribute is used in ARIA (Accessible Rich Internet Applications) to explicitly define the type of a user interface element. It helps assistive technologies, such as screen readers, understand the purpose of an element and convey this information to users with disabilities. It complements HTML semantics, especially for elements that lack native semantics or when the native semantics are insufficient.

For example:

An <div> with role="button" will be perceived by screen readers as a button, even if it does not have the default button behavior and semantics.

<div role="button" tabindex="0" aria-pressed="false">
  Click me
</div>

The navigation role on a <nav> element (although nav already has native navigation semantics) can further improve its interpretation in some cases.

<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Some complex widgets created from non-semantic elements are given roles for correct representation:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Content of tab 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Content of tab 2.
</div>

The role attribute classifies elements by their function and purpose, providing more accurate and useful interaction for users using assistive technologies. It is important to use it together with other ARIA attributes (e.g., aria-label, aria-expanded, aria-hidden) that convey the state and properties of elements.

What was the purpose of adding the roll attribute?