¿Para qué se añadió el atributo roll?

El atributo role se utiliza en ARIA (Aplicaciones Ricas de Internet Accesibles) para definir explícitamente el tipo de interfaz de usuario de un elemento. Esto ayuda a tecnologías asistivas, como los lectores de pantalla, a entender la función del elemento y transmitir esta información a usuarios con discapacidades. Complementa la semántica HTML, especialmente para elementos que no tienen semántica incorporada, o cuando la semántica estándar no es suficiente.

Por ejemplo:

• Un elemento div con el rol button será percibido por un lector de pantalla como un botón, incluso si no tiene comportamiento estándar ni semántica de botón HTML.

<div role="button" tabindex="0" aria-pressed="false">
  Haz clic en mí
</div>

• El rol navigation en un elemento nav (aunque nav ya tiene semántica de navegación incorporada) puede mejorar su interpretación en ciertos casos.

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

• Algunos widgets complejos creados a partir de elementos no semánticos obtienen sus roles para una representación correcta:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Pestaña 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Pestaña 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Contenido de la pestaña 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Contenido de la pestaña 2.
</div>

El atributo role clasifica los elementos según su función y propósito, proporcionando una interacción más precisa y útil para los usuarios que utilizan tecnologías asistivas. Es importante usarlo junto con otros atributos ARIA (por ejemplo, aria-label, aria-expanded, aria-hidden) que transmiten el estado y las propiedades de los elementos.

Debe recordarse:

• La prioridad siempre se da a la semántica nativa de HTML5. Si existe un elemento HTML adecuado, úselo en lugar de simular su comportamiento mediante role y otros atributos ARIA. Por ejemplo, use <button> en lugar de <div role="button">.
• Cambiar el rol de un elemento no cambia su comportamiento incorporado. Por ejemplo, role="button" en un div no lo hace enfocable ni activable con Space o Enter sin JavaScript adicional.