Qué es
Muchos botones en las webs modernas usan solo un icono sin texto visible — una lupa para buscar, un icono de hamburguesa para un menú, una X para cerrar una ventana emergente. Un visitante vidente reconoce estos iconos al instante por familiaridad y contexto, pero un lector de pantalla no tiene nada que leer en voz alta a menos que el botón también tenga texto accesible adjunto tras bambalinas, normalmente mediante un atributo aria-label (por ejemplo, aria-label="Buscar") que no se muestra visualmente pero sí se anuncia a un lector de pantalla.
Sin eso, un lector de pantalla simplemente anuncia la palabra genérica "botón" sin más información, sin dar ninguna indicación de lo que realmente haría al pulsarlo.
En qué afecta
Un icono que resulta obvio a simple vista para una persona vidente no aporta ninguna información por sí mismo a alguien que no puede verlo — el icono en sí no es intrínsecamente significativo sin la vista, solo lo es el concepto que representa, y ese concepto tiene que comunicarse de alguna otra forma para un usuario de lector de pantalla. Una página llena de botones de solo icono, cada uno anunciado únicamente como "botón, botón, botón", deja a un usuario de lector de pantalla sin forma de saber qué hace cualquiera de ellos sin adivinar y pulsarlos para averiguarlo.
Este es un problema muy extendido y fácil de pasar por alto precisamente porque los botones de solo icono son un patrón de diseño habitual y visualmente limpio — el hueco de accesibilidad solo se hace evidente al probar de verdad con un lector de pantalla, en lugar de simplemente mirar la página.
Cómo solucionarlo
- Identifica cada botón de tu web que use solo un icono sin ninguna etiqueta de texto visible.
- Añade un atributo
aria-labelque describa la acción del botón en pocas palabras, por ejemploaria-label="Cerrar menú"oaria-label="Buscar". - Cuando sea posible, considera añadir también una etiqueta de texto visible corta junto al icono — esto también ayuda a los visitantes videntes y reduce la dependencia de recordar el significado de los iconos.
- Si usas un creador de webs, comprueba si los botones de icono generados por la plataforma ya incluyen etiquetas accesibles por defecto — algunos sí, otros requieren que rellenes tú mismo un campo de "nombre accesible" o "texto para lector de pantalla".
- Prueba con un lector de pantalla gratuito (NVDA, VoiceOver) navegando con el tabulador hasta cada botón de icono y confirmando que anuncia una acción clara y específica en lugar de solo "botón".