Àrea tàctil insuficient

Què és l’àrea tàctil?

L’àrea tàctil és la zona de la pantalla que respon al toc d’un dit. No coincideix necessàriament amb la mida visual de l’element: un botó petit pot tenir una àrea tàctil gran si té prou padding, i un element gran pot tenir una àrea tàctil reduïda si el codi no ho gestiona correctament.

El criteri WCAG 2.5.8 (nou a la versió 2.2) exigeix que cada element interactiu tingui una àrea tàctil mínima de 24×24 píxels CSS, o bé que l’espai lliure al seu voltant compensi fins a cobrir aquesta mida. Axe-core ho comprova amb la regla target-size.

Per què causa problemes d’accessibilitat?

Un element interactiu massa petit obliga l’usuari a ser molt precís amb el dit, cosa que genera errors de toc accidentals i frustració. Els elements afectats acostumen a ser icones d’xarxes socials, botons tancament de modals, controls de carrusels o icones d’acció en llistats.

Els usuaris més afectats son persones amb tremolor o mobilitat reduïda a les mans, persones grans i qualsevol usuari en moviment. En la pràctica, afecta tothom que navega des d’un dispositiu mòbil.

Per què apareix aquest error?

L’error apareix habitualment quan els elements interactius es dissenyen pensant en l’aparença visual i no en la usabilitat tàctil. Icones petites sense padding, botons de text compactes o controls generats automàticament per plugins son les causes més freqüents.

A WordPress, els constructors de pàgines com Divi poden generar botons i icones que visualment semblen correctes però que no arriben al mínim tàctil requerit, especialment en versions mòbils.

Com detectar àrees tàctils insuficients

L’eina d’autoevaluació de webaccessible.cat detecta automàticament els elements interactius que no arriben al mínim de 24×24 píxels, indicant quins elements estan afectats i quina mida tenen.

També pots revisar-ho a les DevTools del navegador: activa la vista mòbil, selecciona un element interactiu i comprova les seves dimensions al panel d’inspecció. La mida rellevant és l’àrea total incloent el padding, no la mida del text o la icona.

Com corregir-ho

La solució més habitual és augmentar el padding de l’element, sense necessitat de canviar la seva mida visual:

/* Augmentar l'àrea tàctil sense canviar l'aparença */
.boto-petit {
  padding: 12px 16px;
  min-height: 24px;
  min-width: 24px;
}

Si el problema és en icones d’xarxes socials o botons d’acció generats per un plugin, cal revisar les opcions d’estil del plugin o sobreescriure el CSS. Si el problema és en elements de Divi, pots ajustar el padding des del constructor de pàgines sense tocar codi.

Excepcions

No tots els elements petits son un error. Queden exemples d’aquesta regla:

• Elements en línia dins d’un text, com un enllaç dins d’un paràgraf.
• Elements on la mida ve determinada pel navegador i no es pot modificar.
• Elements essencials que per la seva naturalesa requereixen una mida concreta.