Resumen
La accesibilidad web comienza con HTML semántico y se potencia con atributos ARIA. Aprender a describir acciones, roles y mensajes para lectores de pantalla transforma la experiencia de usuarios y hace tu interfaz más clara. Aquí verás cómo usar aria-label, aria-describedby y role tal como se muestra en ejemplos prácticos.
¿Qué es ARIA y por qué importa en accesibilidad web?
ARIA proviene de Accessibility Rich Internet Application y añade atributos a las etiquetas para dar contexto adicional que HTML por sí solo no ofrece. Un lector de pantalla entiende mejor qué es cada elemento y qué acción o descripción comunicar al usuario.
- HTML semántico primero. Proporciona una base sólida para la lectura y estructura.
- ARIA como capa extra. Aporta descripciones, propósitos y roles cuando la semántica no alcanza.
- Mejora la comprensión. Indica qué hacer y dónde moverse en la interfaz.
¿Cómo aplicar aria-label, aria-describedby y role en casos reales?
A partir de ejemplos sencillos, se muestran patrones útiles que puedes replicar tal cual. La habilidad clave: elegir el atributo adecuado según si necesitas propósito, descripción o rol.
¿Cómo clarificar acciones en botones y navegación?
Cuando el icono o texto no explican la acción, usa aria-label para explicitar el propósito.
- Botón de cierre con “X”. La X no dice “cerrar”, el atributo sí.
<button aria-label="cerrar ventana">X</button>
- Navegación sin título visible. Si hay varias barras de menú, nómbralas.
<nav aria-label="Menú principal">
<a href="/">Inicio</a>
<a href="/productos">Productos</a>
</nav>
Claves prácticas: - Usa aria-label cuando necesites una descripción breve del propósito. - Mantén los textos claros y específicos.
¿Cómo describir formularios y campos de búsqueda?
En inputs, aria-label y aria-describedby orientan acción e instrucciones.
- Buscador con propósito explícito.
<input type="search" aria-label="Buscador de productos" />
- Contraseña con reglas de formato. El texto de ayuda se asocia mediante aria-describedby.
<label for="password">Contraseña</label>
<input id="password" type="password" aria-describedby="password-help" />
<small id="password-help">Mínimo ocho caracteres, incluyen números y letras.</small>
Claves prácticas: - aria-label: describe qué hace el campo. - aria-describedby: enlaza instrucciones o ayudas ya visibles en el DOM.
¿Cómo enriquecer imágenes y contenedores sin semántica?
Cuando el alt se queda corto, complementa con aria-describedby. Y si usas contenedores genéricos, define roles.
- Imagen con descripción extendida.
<img src="grafica.png" alt="Ventas 2024" aria-describedby="grafica-descripcion" />
<p id="grafica-descripcion">Las ventas aumentaron un 40 % en el Q1.</p>
- Contenedor comodín con roles semánticos.
<div role="main">
<h3>Sección principal</h3>
<p>Contenido del área principal.</p>
</div>
<div role="alert">
<p>Este es un mensaje de alerta.</p>
</div>
Claves prácticas: - alt: breve y directo; aria-describedby: detalle adicional cuando hace falta. - role: aporta semántica a divs cuando no puedes usar etiquetas como header o nav.
¿Qué buenas prácticas y próximos pasos se recomiendan?
La prioridad es que todas las personas comprendan la interfaz y sus acciones. ARIA es amplio y hay más atributos que pueden ser útiles según el caso.
- Construye con HTML semántico y añade ARIA solo para cubrir vacíos.
- Emplea aria-label para propósito corto y aria-describedby para instrucciones existentes.
- Usa role para definir el contexto en contenedores genéricos.
- Consulta recursos para profundizar en otros atributos de ARIA.
- Recuerda: accesibilidad es para todos y es una buena práctica esencial.
- Próximo tema: buenas prácticas y SEO.
¿Te quedó alguna duda o quieres compartir cómo aplicarías estos atributos en tu proyecto? Escribe en los comentarios y continuemos la conversación.