Un bot\u00f3n accesible es aquel que tiene un nombre accesible: un texto que el lector de pantalla puede leer para informar el usuario de su funci\u00f3n. El nombre accesible puede venir del texto visible del bot\u00f3n, de un atributo aria-labelo, de un atributo title, o del texto alternativo de una imagen dentro del bot\u00f3n.<\/p>\n
El criteri WCAG 4.1.2 exigeix que tots els components de la interf\u00edcie d’usuari (botons, links, camps de formulari) tinguin un nom, rol i valor accessible.<\/p>\n
Els botons amb icones son un dels errors d’accessibilitat m\u00e9s habituals. Un bot\u00f3 de cerca amb una lupa, un bot\u00f3 de men\u00fa hamburguesa, un bot\u00f3 de tancar amb una X, un bot\u00f3 de reproduir v\u00eddeo: tots ells son invisibles per als lectors de pantalla si no tenen text accessible.<\/p>\n
Quan un lector de pantalla troba un bot\u00f3 sense nom, diu simplement \u00abbot\u00f3\u00bb o \u00abelement sense nom\u00bb. El usuario no sabe si tiene que hacer clic, ni qu\u00e9 acci\u00f3n provocar\u00e1.<\/p>\n
La soluci\u00f3n m\u00e1s simple y accesible: texto descriptivo dentro del bot\u00f3n.<\/p>\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\u00e9cnica del texto visualmente oculto:<\/p>\n Para botones donde el texto visible no es posible, usa aria-label:<\/p>\n — MAL —<\/strong> — BIEN —<\/strong> Los errores de botones inaccesibles aparecen habitualmente en: botones de men\u00fa hamburguesa en m\u00f3vil sin texto accesible, botones de cierre de modales o popups, botones de las galer\u00edas de im\u00e1genes (anterior, siguiente), botones de reproducci\u00f3n de videos integrados, y botones de compartir en redes sociales con iconos.<\/p>\n A Divi, el m\u00f3dulo de bot\u00f3n genera c\u00f3digo accesible por defecto si tiene texto. Los problemas aparecen en botones creados manualmente v\u00eda HTML o en funcionalidades de terceros como sliders o galer\u00edas.<\/p>\n La herramienta de autoevaluaci\u00f3n de webaccessible.cat detecta autom\u00e1ticamente botones sin nombre accesible. Al informe aparecer\u00e1n marcados como errores cr\u00edticos, indicando su ubicaci\u00f3n al c\u00f3digo HTML y una recomendaci\u00f3n de correcci\u00f3n.<\/p>\n Otra manera r\u00e1pida: abre las DevTools del navegador, ve a la pesta\u00f1a Accessibility, y revisa el \u00e1rbol de accesibilidad para comprobar si los botones tienen nombre.<\/p>\n 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.<\/p>\n<\/div><\/div><\/div><button>Enviar formulari<\/button><\/code>
\n<button>Cercar<\/button><\/code><\/p>\nLa soluci\u00f3n m\u00e1s simple y accesible: texto descriptivo dentro del bot\u00f3n.<\/h3>\n
<button><\/code>
\n <svg aria-hidden=\"true\"><!-- icona lupa --><\/svg><\/code>
\n <span class=\"sr-only\">Cercar<\/span><\/code>
\n<\/button><\/code><\/p>\nBot\u00f3n con aria-label<\/h3>\n
<button aria-label=\"Cercar al web\"><\/code>
\n <svg aria-hidden=\"true\"><!-- icona --><\/svg><\/code>
\n<\/button><\/code><\/p>\nBot\u00f3n con imagen<\/h3>\n
\n<button><img src=\"search.png\"><\/button><\/code><\/p>\n
\n<button><img src=\"search.png\" alt=\"Cercar\"><\/button><\/code><\/p>\nErrores habituales en webs WordPress\/Divi<\/h2>\n
Como detectar botones inaccesibles<\/h2>\n