¿Qué es el aria-label?
El atributo aria-label es una propiedad del estándar WAI-ARIA que se utiliza en HTML para mejorar la accesibilidad de las aplicaciones web. Permite proporcionar una etiqueta personalizada para elementos que carecen de un texto visible, facilitando que los lectores de pantalla describan correctamente el propósito de esos elementos a los usuarios con discapacidad visual.
¿Cómo funciona el aria-label?
El atributo aria-label se añade a cualquier elemento HTML que necesite una descripción accesible, como botones, enlaces, o íconos sin texto visible. Cuando se usa, este atributo reemplaza cualquier texto visible con la etiqueta proporcionada solo para los lectores de pantalla, sin modificar lo que ven los usuarios visuales. De esta forma, mejora la experiencia para personas que dependen de tecnologías asistivas.
Ejemplo:
<button aria-label="Buscar en el sitio web">
<i class="icon-buscar"></i>
</button>
En este caso, el ícono de búsqueda no tiene un texto visible, pero el aria-label permite que los lectores de pantalla lo interpreten como un botón de "Buscar en el sitio web".
Algunos ejemplos de uso del aria-label
1. Íconos sin texto: Utilizado en botones o enlaces con íconos para describir su función.
2. Formularios: Etiquetar campos de formularios que no tengan un label visible.
3. Enlaces: Para dar más contexto a enlaces que solo contienen imágenes o texto ambiguo.
Referencia oficial
Para más información, puedes consultar la documentación oficial de WAI-ARIA.
Jorge García
Fullstack developer