Dimensione del target (minima)

Cosa richiede

Ogni controllo interattivo della pagina deve occupare un’area cliccabile di almeno 24×24 pixel CSS — oppure avere attorno a sé una spaziatura sufficiente affinché un cerchio di 24×24 centrato sul target non intersechi nessun altro target. L’obiettivo è evitare che gli utenti con limitato controllo motorio fine, tremore o con un touchscreen usato in movimento manchino il target e attivino l’azione sbagliata.

WCAG 2.2 fissa il minimo a 24×24; il criterio di successo di livello AAA 2.5.5 mantiene il target più ambizioso di 44×44.

Come soddisfarlo

• Impostare un min-width / min-height di 24px su pulsanti solo icona, pulsanti di chiusura e qualsiasi target di tocco più piccolo di un pulsante tipico.
• Per i link inline all’interno di paragrafi si è esenti — il criterio di successo consente esplicitamente i target «all’interno di una frase».
• Per righe di icone (pulsanti in barra degli strumenti, azioni su riga di tabella), usare il padding per portare l’area cliccabile a 24×24 anche quando il glifo icona è più piccolo.
• Per i controlli che devono restare visivamente piccoli (una piccola «x» su un chip), aggiungere un margine o una spaziatura buffer in modo che i target adiacenti distino almeno 24px centro-centro.
• Controllare per primi la paginazione, i breadcrumb, le azioni sulle righe delle tabelle e le icone delle barre degli strumenti — sono qui che si concentrano le non conformità.

Errori comuni

• Pulsanti icona 16×16 (chiudi, modifica, elimina) privi di padding, specialmente in tabelle e barre degli strumenti.
• Righe di paginazione strette in cui Precedente / 1 / 2 / 3 / Successivo si trovano in box da 18px a contatto l’uno con l’altro.
• Checkbox e radio button personalizzati ridimensionati al di sotto del controllo nativo per ragioni «minimaliste».
• Pulsanti di azione flottanti su mobile che superano 24×24 ma si trovano troppo vicini ad altri target di tocco.
• Pulsanti «×» per rimuovere tag, ridimensionati a 10–14 pixel — estremamente comuni nelle interfacce di filtro basate su chip.

Esenzioni da conoscere

Il criterio di successo prevede cinque eccezioni: equivalente (nella stessa pagina esiste un target più grande che svolge la stessa funzione), inline (all’interno di una frase), controllo dello user agent (default del browser, ad es. <select> nativo), essenziale (la dimensione ridotta è necessaria per veicolare l’informazione, ad es. un pin su una mappa), e conforme (una regola più generale impone la dimensione — raro).

Perché è importante

Le non conformità relative alla dimensione del target emergono in modo sproporzionato nei test su mobile e per gli utenti con Parkinson, tremore essenziale, sclerosi multipla, o chiunque usi un touchscreen con una mano sola sul treno. Il passaggio da «nessun minimo» in WCAG 2.1 a un pavimento di 24×24 in WCAG 2.2 ha colto di sorpresa la maggior parte dei siti in produzione — ci si aspetta che questo sia il criterio di successo di nuova introduzione più citato negli audit del 2026.