Dimensione del bersaglio (avanzata)

Cosa richiede

Ogni bersaglio interattivo deve occupare un’area di attivazione di almeno 44×44 pixel CSS. Si applicano le stesse eccezioni previste dal livello AA dal criterio 2.5.8: bersaglio equivalente disponibile, testo inline, controllo del programma utente, essenzialità e conformità.

44×44 è la misura su cui Apple, Google e Microsoft convergono nelle rispettive linee guida di design, pertanto il soddisfacimento di questo criterio di successo tende ad allinearsi con le convenzioni di interfaccia delle piattaforme piuttosto che a contrastarle.

Come soddisfarlo

• Impostare min-width: 44px; min-height: 44px su pulsanti, controlli con sola icona, campi del modulo e qualsiasi bersaglio di tocco.
• Usare il padding all’interno dei pulsanti con icona piccola per portare l’area di attivazione a 44×44 anche quando il glifo dell’icona misura 16-24 px.
• Controllare prioritariamente paginazione, breadcrumb, navigazione mobile, icone di azione nelle righe di tabella, pulsanti di rimozione chip e pulsanti di azione flottanti.
• Per i controlli che devono essere visivamente piccoli, garantire 44×44 pixel di spazio libero intorno ad essi (nessun altro bersaglio entro quel raggio).

Errori frequenti

• Pulsanti icona da 24×24 o 32×32 pixel nelle barre degli strumenti — superano il livello AA ma non raggiungono il livello AAA.
• Righe di paginazione con caselle da 30 pixel.
• Azioni dense nelle righe di tabella in cui Modifica, Duplica ed Elimina si trovano affiancati.
• Pulsanti di rimozione chip «×» con dimensioni comprese tra 12 e 20 px.

Perché è importante

La soglia di 44×44 è il valore al di sotto del quale i tocchi errati scendono quasi a zero per gli utenti con Parkinson, tremore essenziale, sclerosi multipla e altre condizioni motorie, e per chiunque utilizzi il telefono con una mano sola in movimento. I criteri di successo di livello AAA non sono normalmente richiesti per la conformità, ma molti settori regolamentati — bancario, governativo, sanitario — puntano al livello AAA nell’interfaccia mobile proprio per l’impatto sproporzionato che il mobile ha sugli utenti con disabilità motoria. Se il criterio 2.5.8 è già soddisfatto, passare da 24 a 44 pixel è di solito una modifica a una classe Tailwind.