What is the purpose of the " role " attribute in HTML?

The role attribute is an HTML attribute used for accessibility, primarily defining the role of an element and commonly employed with assistive technologies such as screen readers. It informs assistive technologies about the element's purpose or how it should be handled, enabling people with disabilities to better understand and navigate content.

For example, if you have a navigation list, elements are often marked as <div> or <ul>, which may be visually clear but not obvious to screen reader users. Adding a role="navigation" attribute helps screen readers recognize the purpose of these elements, improving the user experience.

html
<nav role="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

In this example, while the <nav> element inherently conveys navigation semantics, some older assistive technologies may not support it. Using role="navigation" ensures users recognize it as a navigation bar even in such cases.

The role attribute can also be applied to elements with no inherent semantic meaning, such as <div> and <span>, by assigning roles like button, dialog, or alert. This allows assistive technologies to correctly interpret their functionality.

html
<div role="button" onclick="...">
  Click me!
</div>

Here, a <div> is assigned the button role, signaling assistive technologies to treat it as a button. While this is a simplified example, real-world implementation typically requires additional ARIA attributes and keyboard event handling for proper button behavior.

In summary, the role attribute enhances accessibility by identifying element roles in HTML, ensuring assistive technologies can accurately interpret and interact with them.