Distanza tra componenti interattivi

Silktide misura le dimensioni e la spaziatura di pulsanti, link e controlli dei moduli nelle tue pagine. I controlli piccoli e ravvicinati sono facili da premere per errore, quindi ciascuno dovrebbe essere di almeno 24 × 24 pixel oppure avere abbastanza spazio libero intorno.

Perché è importante

Chiunque può non riuscire a premere un pulsante piccolo, ma per le persone con tremori, artrite o un controllo motorio fine limitato, i controlli troppo ravvicinati rendono una pagina davvero difficile da usare: si può toccare il link sbagliato, inviare il modulo sbagliato o rinunciare del tutto. Il problema è più grave sugli schermi touch, dove la punta di un dito è molto meno precisa del puntatore del mouse.

Questo è il criterio di successo 2.5.8 di (Dimensione minima del bersaglio), un requisito di in WCAG 2.2, quindi fa parte dell'obiettivo di conformità a cui mira la maggior parte delle organizzazioni.

Come risolvere il problema

Imposta ogni elemento interattivo su almeno 24 × 24 . Di solito è sufficiente impostare min-width e min-height oppure aggiungere del padding.
In alternativa, aggiungi spazio tra i controlli in modo che un'area di 24 × 24 pixel centrata su ciascun controllo non si sovrapponga a quelle dei controlli vicini: i bersagli più piccoli sono accettabili quando non c'è nient'altro nelle vicinanze.
Presta particolare attenzione ai pulsanti con icone, ai link per la paginazione e alle icone dei social media, che spesso sono troppo piccoli e raggruppati troppo strettamente.

/* Problema: pulsanti con icone da 16 px che si toccano */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Soluzione: amplia l'area cliccabile ad almeno 24 × 24 */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Come Silktide esegue il controllo

Esegui il controllo sia sulla versione mobile sia su quella desktop di ogni pagina; i risultati possono differire tra le due versioni.
Individua gli elementi interattivi: link, pulsanti, campi dei moduli e aree delle mappe immagine.
Ignora gli elementi che normalmente non sono visibili, come i contenuti posizionati fuori dallo schermo per gli , e tutti gli elementi che hai escluso dal controllo.
Considera superato il controllo per ogni elemento largo almeno 24 pixel e alto almeno 24 pixel.
Ignora i controlli inseriti all'interno di una frase o di un blocco di testo, che WCAG esenta da questa regola.
Per ogni elemento piccolo rimanente, misura la distanza da ogni altro elemento interattivo. La distanza richiesta è di 24 pixel meno la larghezza dell'elemento (in orizzontale) e di 24 pixel meno la sua altezza (in verticale).
Segnala l'elemento se un altro controllo rientra in quella distanza, a meno che entrambi non siano link alla stessa destinazione. Gli elementi fissati allo schermo, come le intestazioni adesive, vengono confrontati con altri elementi fissati anziché con i contenuti che scorrono sotto di essi.

Risoluzione dei problemi

Un controllo piccolo ha superato il controllo

Le dimensioni da sole non determinano un errore: un controllo piccolo supera il controllo quando ha abbastanza spazio libero intorno, è inserito nel testo o ha come vicini solo link che puntano allo stesso posto. Questo rispecchia le eccezioni consentite dallo stesso WCAG.

Vengono elencati solo alcuni errori

Silktide segnala fino ai 10 esempi più gravi per pagina. La correzione di uno stile condiviso spesso risolve molte segnalazioni in una volta sola.

Voglio lo standard più rigoroso

Questo controllo verifica il minimo di livello AA, pari a 24 × 24 pixel. Il controllo correlato Controlli sufficientemente grandi verifica la raccomandazione più rigorosa di livello AAA, pari a 44 × 44 pixel.