Etiquetas aria para accesibilodad a personas con dificultades

Las etiquetas ARIA (Accessible Rich Internet Applications) son atributos especiales en HTML que mejoran la accesibilidad de las páginas web para personas con discapacidades, especialmente aquellas que usan lectores de pantalla.

¿Para qué sirve ARIA?

ARIA ayuda a mejorar la comprensión de los elementos de una página cuando el HTML estándar no es suficiente. Sirve para:

Indicar el propósito de un elemento (por ejemplo, si es un botón interactivo).

Mejorar la navegación y la experiencia para usuarios con discapacidad visual o motriz.

Complementar etiquetas HTML semánticas cuando no son suficientes para transmitir información.

Casos en los que se usa ARIA

1. Elementos personalizados sin semántica clara:

Si creas un botón con <div> o <span>, necesitas role="button" para que los lectores de pantalla lo reconozcan.

<div role="button" tabindex="0">Clic aquí</div>

2. Componentes dinámicos:

Para indicar cambios en elementos dinámicos como modales, alertas o menús desplegables.

<div role="alert">¡Error! Faltan datos.</div>

3. Estados y propiedades interactivas:

Para marcar elementos expandibles o seleccionables.

<button aria-expanded="false">Mostrar más</button>

4. Mejorar la navegación:

Agregar aria-label a enlaces o botones con iconos sin texto.

<button aria-label="Cerrar">✖</button>

5. Mejorar formularios:

Para asociar mensajes de error o instrucciones a campos de entrada.

<input id="email" aria-describedby="email-help">

<small id="email-help">Introduce un email válido.</small>

Cuándo NO usar ARIA

Si un elemento HTML ya tiene semántica nativa (como <button>, <input> o <nav>), evita añadir ARIA innecesario.

No reemplaces etiquetas semánticas por role sin motivo. Es mejor usar <button> que <div role="button">.

En resumen, ARIA es útil cuando HTML por sí solo no comunica suficiente información a los usuarios con tecnologías de asistencia.