Botons accessibles

Què és un botó accessible?

Un botó accessible és aquell que té un nom accessible: un text que el lector de pantalla pot llegir per informar l’usuari de la seva funció. El nom accessible pot venir del text visible del botó, d’un atribut aria-label, d’un atribut title, o del text alternatiu d’una imatge dins el botó.

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 dels botons amb icones

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». L’usuari no sap si ha de fer clic, ni quina acció provocarà.

Solucions pràctiques

Botó amb text visible

La solució més simple i accessible: text descriptiu dins el botó.

<button>Enviar formulari</button>
<button>Cercar</button>

Botó amb icona i text ocult visualment

Pots tenir una icona visible i un text accessible que els lectors de pantalla llegeixen però que no es veu a la pantalla, usant la tècnica del text visualment ocult:

<button>
  <svg aria-hidden="true"><!-- icona lupa --></svg>
  <span class="sr-only">Cercar</span>
</button>

Botó amb aria-label

Per a botons on el text visible no és possible, usa aria-label:

<button aria-label="Cercar al web">
  <svg aria-hidden="true"><!-- icona --></svg>
</button>

Botó amb imatge

— MAL —
<button><img src="search.png"></button>

— BÉ —
<button><img src="search.png" alt="Cercar"></button>

Errors habituals en webs WordPress/Divi

Els errors de botons inaccessibles apareixen habitualment en: botons de menú hamburguesa en mòbil sense text accessible, botons de tancament de modals o popups, botons de les galeries d’imatges (anterior, següent), botons de reproducció de vídeos integrats, i botons de compartir a xarxes socials amb icones.

A Divi, el mòdul de botó genera codi accessible per defecte si té text. Els problemes apareixen en botons creats manualment via HTML o en funcionalitats de tercers com sliders o galeries.

Com detectar botons inaccessibles

L’eina d’autoevaluació de webaccessible.cat detecta automàticament botons sense nom accessible. A l’informe apareixeran marcats com a errors crítics, indicant la seva ubicació al codi HTML i una recomanació de correcció.

Una altra manera ràpida: obre les DevTools del navegador, ves a la pestanya Accessibility, i revisa l’arbre d’accessibilitat per comprovar si els botons tenen nom.