Dimensione dell'area di tocco

La dimensione dell’area di tocco è la dimensione operativa di qualsiasi elemento che un utente può toccare o cliccare. WCAG stabilisce due soglie: un minimo AAA di 44×44 pixel CSS (introdotto in WCAG 2.1) e un minimo AA di 24×24 pixel CSS (nuovo in WCAG 2.2). Il criterio esiste perché le disabilità motorie — e persino la normale imprecisione su uno schermo piccolo — rendono inutilizzabili le aree di tocco ridotte.

I due criteri WCAG

• 2.5.5 Target Size (Enhanced) — Livello AAA — le aree di input a puntatore devono essere di almeno 44×44 pixel CSS. Regola esistente da tempo; difficile da rispettare sull’intero sito.
• 2.5.8 Target Size (Minimum) — Livello AA, nuovo in WCAG 2.2 — le aree di input a puntatore devono essere di almeno 24×24 pixel CSS. Il livello minimo pratico di conformità.

Un’area di tocco che soddisfa la soglia AAA di 44×44 soddisfa automaticamente anche la soglia AA di 24×24.

Cosa richiede effettivamente la regola

I valori si riferiscono all’area di tocco, non soltanto all’icona visibile. Le Human Interface Guidelines di Apple e Material Design di Google prevedono entrambi dimensioni target di 44pt / 48dp per la stessa ragione — esistono dati ergonomici reali a supporto.

Un pattern comune: un pulsante con sola icona disegnata come SVG 16×16, ma con padding che porta l’area cliccabile a 44×44. Questo soddisfa la regola. L’icona visibile è piccola; l’area di tocco è l’icona visibile più l’area con padding attorno.

Eccezioni

Il criterio 2.5.8 (criterio AA) prevede eccezioni esplicite:

• Eccezione basata sulla spaziatura. Se un’area di tocco è di almeno 24×24 oppure è circondata da spazio bianco sufficiente affinché nessun altro elemento si trovi entro 24 pixel CSS, il criterio è soddisfatto. Questo protegge i layout inline densi (come i link nel testo del corpo) che hanno aree di tocco ridotte ma sono abbastanza distanziati da non rischiare di toccare accidentalmente un elemento adiacente.
• Controllo equivalente disponibile altrove. Un’area di tocco ridotta è accettabile se la stessa funzione è accessibile tramite un controllo più grande nella stessa pagina.
• Elementi inline. I link all’interno di testo continuo sono esenti — il corpo del testo non deve essere riformattato attorno a una regola di 24 pixel per link.
• Controllo del browser. I controlli predefiniti del browser sono esenti.
• Essenziali. Quando la dimensione è essenziale alla funzione (ad esempio, una griglia CAPTCHA).

Cosa comporta in pratica

Tre tipici errori in produzione:

• Pulsanti di navigazione con sola icona dimensionati a 28×28. Non supera il criterio 2.5.8, salvo che siano circondati da spazio bianco sufficiente, condizione che la maggior parte delle barre di navigazione dense non soddisfa.
• Liste di checkbox ravvicinate. Checkbox disegnati 16×16 senza padding, allineati verticalmente senza spaziatura. Sia l’area di tocco sia la distanza sono inferiori ai requisiti.
• Frecce «precedente/successivo» dei carousel su mobile. Spesso disegnate come chevron da 32 pixel con 4 pixel di padding. Non supera il criterio 2.5.8.

L’audit manuale più rapido

Aprire DevTools su qualsiasi viewport emulato per mobile. Ispezionare ogni elemento interattivo. Annotare il bounding box. Qualsiasi elemento al di sotto di 24 pixel CSS in una delle due dimensioni, con aree di tocco adiacenti entro 24 pixel CSS, non supera il criterio 2.5.8.

La maggior parte dei team adotta un design token per la dimensione target applicato a tutti i componenti — ogni elemento interattivo riceve almeno un’area di tocco di 44×44, indipendentemente dalla dimensione visibile. È il modo più economico per rendere la regola irrilevante nella pratica quotidiana.