Hay algo que muchas webs hacen bien: se ven bonitas.
Y algo que muchas siguen haciendo mal: no son accesibles.
Aquí es donde entran en juego dos atributos clave: aria-label y aria-labelledby. Dos pequeños detalles que pueden cambiar por completo la experiencia de navegación de muchas personas.
¿Qué son aria-label y aria-labelledby?
Ambos atributos forman parte de WAI-ARIA, una especificación que ayuda a mejorar la accesibilidad en interfaces web, especialmente para personas que utilizan tecnologías asistivas como lectores de pantalla.
aria-label
Se utiliza para proporcionar una etiqueta directa a un elemento cuando no existe texto visible que lo describa.
Por ejemplo, un botón con un icono sin texto. Visualmente se entiende, pero un lector de pantalla necesita contexto.
aria-labelledby
En este caso, el atributo hace referencia a otro elemento del DOM que ya contiene el texto descriptivo.
Es decir, reutiliza contenido existente para dar significado.
¿Por qué es importante usar aria-label y aria-labelledby?
Porque no todo el mundo navega como tú.
Una web accesible no es solo una web ética. Es una web mejor diseñada.
- Mejora la experiencia de usuario
- Aumenta el alcance de tu sitio
- Refuerza tu posicionamiento SEO
- Demuestra compromiso con la inclusión
Y sí, Google también valora estos aspectos.
Cómo aplicar aria-label y aria-labelledby correctamente
Cuándo usar aria-label
Cuando el elemento no tiene texto visible o este no es suficiente.
Cuándo usar aria-labelledby
Cuando ya existe un texto en la página que puede servir como referencia.
La clave está en no duplicar información innecesariamente y mantener coherencia.
Accesibilidad y diseño: un mismo camino
En Zigor Design entendemos el diseño como algo más que estética.
Diseñar también es hacer que las cosas funcionen. Que se entiendan. Que lleguen a todo el mundo.
Por eso, integrar accesibilidad desde el inicio no es un extra. Es parte del proceso.
Conclusión
aria-label y aria-labelledby no son solo atributos técnicos. Son herramientas para crear experiencias más humanas.
Y si tu web no es accesible, no está terminada.
Si quieres profundizar más, puedes consultar la documentación oficial del W3C sobre accesibilidad web:
Porque diseñar bien no es solo cuestión de cómo se ve. Sino de quién puede usarlo.
Diseñador gráfico desde 2012. Especializado en branding y diseño visual para pequeños negocios que quieren destacar con imagen propia (y funcional). En este blog comparto ideas, procesos y proyectos con alma gráfica y los pies en la calle.
Desde Balmaseda, hablando de lo que se ve… y lo que no se ve del diseño.
A veces diseño, a veces escribo… siempre con intención.