Cómo crear componentes accesibles con ARIA roles sin complicarte

La accesibilidad web no consiste solo en cumplir con normativas: es una forma de diseño responsable que garantiza que cualquier persona, sin importar sus capacidades, pueda usar una página o aplicación digital. Sin embargo, a medida que las interfaces se vuelven más interactivas, aparecen nuevos retos. Elementos dinámicos como menús desplegables, pestañas, sliders o modales no siempre son interpretados correctamente por lectores de pantalla. Aquí es donde entra en juego ARIA (Accessible Rich Internet Applications), un conjunto de atributos que ayudan a describir la estructura y el comportamiento de los componentes para tecnologías asistivas.

Aunque el término puede sonar técnico, implementar ARIA no tiene por qué ser complicado. En este artículo te explico cómo usar roles y atributos básicos para hacer tus componentes accesibles sin reinventar tu código ni añadir complejidad innecesaria.

Qué es ARIA y por qué es tan importante

ARIA es una especificación del W3C que complementa el HTML, proporcionando etiquetas adicionales para describir elementos interactivos. Su función no es reemplazar las etiquetas semánticas (como <button> o <nav>), sino reforzarlas cuando HTML por sí solo no comunica lo suficiente.

Por ejemplo, un botón creado con un <div> y un script JavaScript puede funcionar visualmente, pero un lector de pantalla no sabrá que se trata de un botón. Si le añadimos role="button" y manejamos eventos de teclado (Enter y Space), ya se convierte en un elemento accesible.

Usar ARIA correctamente mejora la experiencia de usuarios con discapacidades visuales, cognitivas o motoras. Además, Google y otros motores de búsqueda valoran las interfaces accesibles, lo que también beneficia al SEO.

La regla de oro: primero HTML, luego ARIA

Antes de aplicar cualquier atributo ARIA, asegúrate de que el componente esté construido con etiquetas semánticas adecuadas. El HTML moderno ya ofrece muchos roles implícitos: un <nav> se interpreta como área de navegación, un <h1> define una jerarquía, un <button> es reconocido como elemento interactivo.

Solo debes usar ARIA cuando:

• El comportamiento del componente no puede describirse con HTML nativo.
• Has creado una interacción personalizada (por ejemplo, un menú desplegable animado).
• Quieres reforzar la relación entre elementos (como en pestañas o listas interactivas).

Usar ARIA en exceso o de forma incorrecta puede romper la accesibilidad, así que el primer paso es aprovechar al máximo las etiquetas semánticas.

Roles ARIA más útiles y cómo aplicarlos

Los roles ARIA indican qué tipo de elemento es un componente. Aquí tienes algunos de los más prácticos para usar sin complicarte:

1. role=»button»
Ideal cuando creas botones personalizados con <div> o <span>. Recuerda también añadir soporte de teclado con tabindex="0" y eventos de keydown para Enter y Space.

<div role="button" tabindex="0" aria-pressed="false">Mostrar más</div>

2. role=»dialog»
Se usa en modales o ventanas emergentes. Debe acompañarse de aria-labelledby y aria-describedby para indicar al lector qué se está mostrando.

<div role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDesc">
  <h2 id="modalTitle">Términos y condiciones</h2>
  <p id="modalDesc">Por favor, revisa la siguiente información antes de continuar.</p>
</div>

3. role=»tablist», «tab», «tabpanel»
Estos roles trabajan en conjunto para crear sistemas de pestañas accesibles.

<div role="tablist">
  <button role="tab" aria-controls="panel1" aria-selected="true">Descripción</button>
  <button role="tab" aria-controls="panel2" aria-selected="false">Opiniones</button>
</div>
<div id="panel1" role="tabpanel">Contenido de la pestaña 1</div>
<div id="panel2" role="tabpanel" hidden>Contenido de la pestaña 2</div>

4. role=»alert» y role=»status»
Sirven para notificar mensajes importantes sin interrumpir al usuario. Los lectores de pantalla leen automáticamente el contenido cuando aparece.

<div role="alert">Tu sesión está a punto de expirar.</div>

5. role=»navigation» y role=»main»
Definen las regiones principales de la página. La mayoría de etiquetas HTML5 ya las incluyen, pero si usas estructuras personalizadas, pueden ser útiles para mantener la semántica.

Atributos ARIA que mejoran la comprensión

Los roles dicen qué es un elemento; los atributos ARIA explican cómo se comporta. Aquí tienes algunos que puedes aplicar fácilmente:

• aria-expanded: indica si un menú, acordeón o dropdown está abierto o cerrado. <button aria-expanded="false" aria-controls="menu">Menú</button> <ul id="menu" hidden>...</ul>
• aria-hidden: oculta un elemento de los lectores de pantalla (aunque siga visible en pantalla). Es útil para modales o menús que se abren dinámicamente.
• aria-live: hace que los lectores de pantalla anuncien cambios automáticos (por ejemplo, en alertas o resultados de búsqueda). <div aria-live="polite">Mostrando resultados...</div>
• aria-label y aria-labelledby: proporcionan nombres descriptivos a iconos o botones sin texto visible. <button aria-label="Cerrar ventana">×</button>
• aria-checked y aria-selected: ayudan a comunicar estados en checkboxes personalizados, listas o pestañas.

Usados correctamente, estos atributos permiten crear interfaces interactivas totalmente accesibles sin necesidad de modificar el diseño visual.

Cómo probar si tus componentes son accesibles

No necesitas herramientas sofisticadas para comprobar si tus roles ARIA funcionan. Prueba lo siguiente:

• Usa solo el teclado. Navega con Tab, Enter y Space. Si puedes interactuar con todos los elementos sin ratón, vas por buen camino.
• Activa un lector de pantalla. En macOS puedes usar VoiceOver; en Windows, NVDA o JAWS. Comprueba que se leen los elementos con su nombre y estado correcto.
• Utiliza herramientas automáticas. Extensiones como AXE, WAVE o Lighthouse detectan errores ARIA, roles mal definidos o atributos redundantes.

El objetivo es que cualquier persona pueda entender y controlar la interfaz sin depender de la vista ni del ratón.

Errores comunes al usar ARIA

Incluso los desarrolladores con experiencia cometen errores al implementar ARIA. Algunos de los más frecuentes son:

• Añadir roles redundantes (por ejemplo, role="button" en un <button>).
• Usar aria-hidden="true" en elementos importantes, como títulos o formularios.
• Olvidar sincronizar los estados (aria-expanded, aria-pressed) con la lógica real del componente.
• Aplicar roles interactivos a elementos que no lo son, como párrafos o encabezados.

Recuerda: ARIA mejora la accesibilidad, pero no la crea desde cero. Si el HTML base no es correcto, ningún atributo podrá solucionarlo.

Conclusión

Crear componentes accesibles con ARIA no tiene que ser un proceso complejo ni reservado a expertos. Basta con entender su propósito: describir la función y el estado de los elementos para que las tecnologías asistivas puedan interpretarlos.

Empieza por usar HTML semántico, añade roles solo cuando sea necesario y mantén actualizados los atributos de estado. Con estos pequeños pasos, harás que tus componentes sean más inclusivos, comprensibles y fáciles de usar para todos.

La accesibilidad no es un añadido, es parte del buen diseño. Y dominar ARIA —aunque sea en su forma más simple— es una herramienta poderosa para construir una web realmente universal.