¿Qué es un botón accesible?
Un botón accesible es aquel que tiene un nombre accesible: un texto que el lector de pantalla puede leer para informar el usuario de su función. El nombre accesible puede venir del texto visible del botón, de un atributo aria-labelo, de un atributo title, o del texto alternativo de una imagen dentro del botón.
El criteri WCAG 4.1.2 exigeix que tots els components de la interfície d’usuari (botons, links, camps de formulari) tinguin un nom, rol i valor accessible.
El problema de los botones con iconos
Els botons amb icones son un dels errors d’accessibilitat més habituals. Un botó de cerca amb una lupa, un botó de menú hamburguesa, un botó de tancar amb una X, un botó de reproduir vídeo: tots ells son invisibles per als lectors de pantalla si no tenen text accessible.
Quan un lector de pantalla troba un botó sense nom, diu simplement «botó» o «element sense nom». El usuario no sabe si tiene que hacer clic, ni qué acción provocará.
Soluciones prácticas
Botón con texto visible
La solución más simple y accesible: texto descriptivo dentro del botón.
<button>Enviar formulari</button>
<button>Cercar</button>
La solución más simple y accesible: texto descriptivo dentro del botón.
Puedes tener un icono visible y un texto accesible que los lectores de pantalla leen pero que no se ve a la pantalla, usando la técnica del texto visualmente oculto:
<button>
<svg aria-hidden="true"><!-- icona lupa --></svg>
<span class="sr-only">Cercar</span>
</button>
Botón con aria-label
Para botones donde el texto visible no es posible, usa aria-label:
<button aria-label="Cercar al web">
<svg aria-hidden="true"><!-- icona --></svg>
</button>
Botón con imagen
— MAL —
<button><img src="search.png"></button>
— BIEN —
<button><img src="search.png" alt="Cercar"></button>
Errores habituales en webs WordPress/Divi
Los errores de botones inaccesibles aparecen habitualmente en: botones de menú hamburguesa en móvil sin texto accesible, botones de cierre de modales o popups, botones de las galerías de imágenes (anterior, siguiente), botones de reproducción de videos integrados, y botones de compartir en redes sociales con iconos.
A Divi, el módulo de botón genera código accesible por defecto si tiene texto. Los problemas aparecen en botones creados manualmente vía HTML o en funcionalidades de terceros como sliders o galerías.
Como detectar botones inaccesibles
La herramienta de autoevaluación de webaccessible.cat detecta automáticamente botones sin nombre accesible. Al informe aparecerán marcados como errores críticos, indicando su ubicación al código HTML y una recomendación de corrección.
Otra manera rápida: abre las DevTools del navegador, ve a la pestaña Accessibility, y revisa el árbol de accesibilidad para comprobar si los botones tienen nombre.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.