¿Qué es el atributo role y cómo se relaciona con ARIA?

El atributo role es una pieza fundamental de ARIA. Es un atributo global que puedes añadir a cualquier elemento HTML para definir explícitamente cuál es la función o el propósito de ese elemento en la interfaz de usuario.

Cuando usas un elemento HTML estándar con una semántica clara (como <button>, <nav>, o <input type="checkbox">), el navegador ya comunica su rol implícito a las tecnologías de asistencia. Sin embargo, si estás creando componentes de interfaz más complejos o personalizados (por ejemplo, usando elementos <div> y <span> con JavaScript para simular un menú desplegable, una pestaña, un control deslizante, etc.), estos elementos genéricos no tienen una semántica inherente que describa su función.

Aquí es donde entra el atributo role. Al añadir role="[nombre-del-rol]", le dices a la tecnología de asistencia: «este <div> no es solo un <div>, sino que actúa como un button» o «este grupo de elementos funciona como un tablist».

Ejemplos de roles comunes:

• Roles de widget: button, checkbox, dialog, slider, tab, tabpanel, tooltip, menu, menuitem.
• Roles de estructura (Landmarks): banner (similar a <header>), navigation (similar a <nav>), main (similar a <main>), complementary (similar a <aside>), contentinfo (similar a <footer>), form, search, region.
• Roles de documento: article, document, img, heading, list, listitem, table.

<div role="button" tabindex="0" onclick="hacerAlgo();" onkeypress="hacerAlgo();">
  Acción Personalizada
</div>

<ul role="menubar">
  <li role="menuitem"><a href="/">Inicio</a></li>
  <li role="menuitem"><a href="/productos">Productos</a></li>
</ul>

<div role="main">
  <p>Contenido principal de la página...</p>
</div>
Lenguaje del código: PHP (php)

Relación entre role y ARIA

El atributo role es el punto de partida. Una vez que un elemento tiene un role definido, a menudo necesitarás usar otros atributos ARIA (que comienzan con aria-, como aria-label, aria-labelledby, aria-describedby, aria-expanded, aria-hidden, aria-required, aria-checked, etc.) para describir sus estados y propiedades específicos. Por ejemplo, un elemento con role="tab" podría necesitar aria-selected para indicar si es la pestaña activa, y un role="checkbox" necesitaría aria-checked.

La Primera Regla de ARIA

Es crucial recordar la «primera regla de ARIA»: Si puedes usar un elemento HTML nativo que ya proporciona la semántica y el comportamiento que necesitas, úsalo en lugar de añadir un rol ARIA a un elemento genérico.

• Por ejemplo, usa <button> en lugar de <div role="button">.
• Usa <nav> en lugar de <div role="navigation">.
• Usa <input type="checkbox"> en lugar de <span role="checkbox" aria-checked="false">.

ARIA está para suplir las carencias de HTML, no para reemplazar su semántica nativa. Usar ARIA incorrectamente (por ejemplo, contradiciendo la semántica nativa de un elemento) puede empeorar la accesibilidad en lugar de mejorarla. También, si usas ARIA para crear controles interactivos, eres responsable de implementar el comportamiento de teclado esperado y la gestión del foco con JavaScript.

En resumen, el atributo role es una herramienta poderosa de ARIA para añadir semántica a tus elementos HTML, haciéndolos más comprensibles para las tecnologías de asistencia y, por ende, más accesibles, especialmente cuando se construyen interfaces de usuario personalizadas y dinámicas.