Buenas prácticas

Botones sin nombre accesible: el defecto número 1 de los escáneres

Los botones de icono sin nombre accesible (lupa, carrito, cruz, menú hamburguesa) son el defecto más detectado por los análisis de accesibilidad. Para un usuario de lector de pantalla, solo escucha «botón» sin contexto. Descubra las cuatro técnicas para corregirlos.

Cifras, metodología y condiciones de reutilización: ver los datos citables →

La respuesta corta

Un botón con icono SVG o imagen sin atributo aria-label, aria-labelledby o texto visible sigue siendo invisible para un lector de pantalla. El usuario solo escucha «botón». Para corregirlo: añada aria-label para una etiqueta corta, utilice texto visible si el espacio lo permite o aria-labelledby para vincularlo a un texto existente. Verifique con F12: la pestaña Accessibility debe mostrar el nombre del botón.

Por qué este defecto es crítico

Los botones sin nombre accesible se encuentran entre las violaciones de las WCAG más frecuentes en Estados Unidos, según los datos públicos de las firmas de cumplimiento. La regla del W3C dedicada («Image button has non-empty accessible name») se aplica en todas partes: una lupa de búsqueda, un carrito de compra, una cruz de cierre, un chevron de carrusel, un icono de red social, todos requieren un nombre audible.

Este artículo se basa en el estudio Inclaria 2026: entre los 55 sitios de comercio electrónico franceses analizados, el 94,5 % presenta al menos una no conformidad crítica o grave. Los botones con iconos mal nombrados figuran a la cabeza de las incidencias detectadas, a menudo en varias páginas del mismo sitio.

Lo que escucha un usuario de lector de pantalla

Póngase en el lugar de alguien que navega sin ver la pantalla. Cuando llega a un botón de lupa sin nombre accesible, su lector de pantalla anuncia simplemente «Botón», y se detiene. Ningún contexto, ninguna indicación de la acción. Debe salir del lector de pantalla, abrir el inspector del navegador o recurrir a documentación externa para entender de qué se trata.

Mismo escenario con un carrito de compra presentado como un icono SVG solo, una cruz de cierre de modal o flechas para navegar por un carrusel. Cada botón mudo crea una zona de incertidumbre para el usuario. En un sitio con 15 o 20 botones de icono mal nombrados, la fricción se acumula rápidamente: algunos usuarios abandonan.

Las cuatro técnicas para nombrar un botón

1. Texto visible con visibilidad oculta (sr-only)

Añada un elemento span de clase sr-only que contenga la etiqueta. Invisible en la pantalla, audible para los lectores de pantalla.

Código

Botón que contiene un icono SVG de lupa y un elemento span de clase « sr-only » con el texto « Buscar ».

Ventaja: el texto también está en el DOM, por lo que técnicamente es accesible para un motor de búsqueda. Inconveniente: supone que la clase CSS sr-only está definida en su hoja de estilos.

2. aria-label

Atributo directo en el botón: aria-label=« Buscar ». Corto, fácil y no afecta al DOM visual.

Ventaja: minimalista, rápido de añadir. Inconveniente: ausente del texto visible, por lo que es invisible para copiar y pegar y para el SEO textual.

3. aria-labelledby

Relaciona el botón con otro elemento textual del DOM mediante un identificador: aria-labelledby=« search-label ». Ideal cuando ya existe un texto pertinente en la página.

Ventaja: hace referencia a contenido real, rastreable. Inconveniente: requiere que el texto fuente exista y tenga un id único.

4. Atributo alt en input type=image

Si utiliza un input de tipo image con la fuente « search.png » y el texto alternativo « Buscar », el atributo alt sirve directamente como nombre accesible.

Ventaja: semántica nativa. Inconveniente: solución obsoleta en HTML moderno, raramente recomendada.

¿Cuándo utilizar cada una? Matriz de decisión

Trampas comunes

El atributo title no es suficiente

Numerosos desarrolladores creen erróneamente que el atributo title=« Buscar » en un botón es suficiente para nombrarlo. En realidad, title es un atributo de consejo al pasar el cursor (tooltip), no un nombre accesible. Los lectores de pantalla lo ignoran, salvo en una excepción muy limitada. No confíen en él.

aria-label en idioma extranjero

Si su contenido mezcla idiomas, atención: aria-label siempre utiliza el idioma de la página. Un aria-label=« Search » en un sitio francés será leído en francés por el lector de pantalla. Prefieran texto visible o asegúrense de que aria-label respete el idioma local.

La trampa 2.5.3: « Label in Name »

Una trampa sutil: si un botón tiene texto visible (ej. « OK »), su aria-label debe comenzar con ese mismo texto o contenerlo. Un botón que muestra « OK » con aria-label=« Validar » crea una incoherencia que los usuarios de comando de voz (« haz clic en OK ») no pueden activar. Alineen el nombre accesible con el texto visible.

SVG sin role adecuado

Un SVG solo es una imagen. Incorpórenlo siempre en un elemento semántico (button, a) o añadan role=« button ». Sin esto, el lector de pantalla puede ignorarlo o anunciarlo como una imagen.

Cómo verificar en dos minutos

Abra su página en cualquier navegador moderno (Chrome, Firefox, Safari).

• Pulse F12 (o haga clic derecho y luego Inspeccionar).
• Localice el botón con icono en el HTML.
• Abra la pestaña Accessibility (Chrome, Edge, Firefox).
• Consulte el campo Accessible Name: debe mostrar un texto claro (ej. «Buscar», «Carrito»). Si está vacío o dice «button», falta un nombre.

Alternativamente: navegue con el teclado (Tab) hasta el botón, luego pruebe con un lector de pantalla gratuito.

Prueba con teclado y lector de pantalla

En Windows, NVDA (gratuito, código abierto) es fiable. En Mac, VoiceOver viene preinstalado (Cmd+F5). Recorra su sitio: cada botón con icono debe anunciar su nombre claramente. Si solo escucha «botón», corríjalo.

Casos concretos: lupa, carrito, cruz, chevrones

Loupe de recherche

Un botón con aria-label=«Buscar» que contiene un icono SVG es el enfoque estándar. Corto y claro. Si utiliza texto oculto: emplee un botón que contenga el icono SVG y un elemento span de clase «sr-only» con el texto «Buscar».

Panier d'achat

Prefiera aria-label=«Carrito» o aria-label=«Ver el carrito (2 artículos)». Un número de artículos puede enriquecer el contexto sin sobrecargar el anuncio.

Croix de fermeture

Un botón con aria-label=«Cerrar» que contiene un icono SVG de cruz es clásico. Un texto simple, sin jerga.

Chevrons de carrousel

Botones con aria-label=«Elemento siguiente» y aria-label=«Elemento anterior» guían al usuario. Evite los genéricos como «Siguiente» o «Anterior» solos; precise: «Diapositiva anterior del carrusel».

Icônes sociales

Un enlace con aria-label=«Síganos en X (Twitter)» o un botón con aria-label=«Compartir en LinkedIn» hace explícita la red objetivo.

Intégration dans votre démarche de conformité

Los botones sin nombre accesible son el defecto número uno detectado por los escaneos automatizados. Si realiza una auditoría de accesibilidad en su sitio, esta violación aparecerá casi con seguridad, a menudo con decenas de ocurrencias.

La buena noticia: es fácil y rápido de corregir. Una vez que comprende el patrón, puede auditar su base de código, arreglar los botones de icono en unas pocas horas y medir el impacto: una parte significativa de su puntuación de accesibilidad mejora inmediatamente.

Una estrategia eficaz: lance un escaneo automatizado (Inclaria, aXe, WAVE), ordene los resultados por gravedad y comience por los botones sin nombre accesible. Esto solo elimina una parte significativa de las no conformidades críticas en muchos sitios. Luego, avance hacia las pruebas manuales y los defectos estructurales (navegación con teclado, orden de tabulación, contrastes).