Controlli di dimensioni sufficienti

Silktide misura i pulsanti, i link e i controlli dei moduli nelle tue pagine e segnala quelli più piccoli di 44 x 44 pixel. I controlli più grandi sono più facili da premere con precisione per tutti, soprattutto sugli schermi touch.

Perché è importante

Gli obiettivi piccoli richiedono una precisione che molte persone non hanno. I visitatori con tremori, destrezza limitata o dita più grandi sui dispositivi touch spesso non riescono a premere i controlli piccoli, attivano quello sbagliato o devono fare diversi tentativi. Dimensioni degli obiettivi generose rendono il tuo sito più veloce e meno frustrante per ogni visitatore, non solo per chi ha difficoltà motorie.

Questo è il criterio di successo 2.5.5 di WCAG (Dimensione del bersaglio (avanzata)), un requisito di Livello AAA. AAA è uno standard aspirazionale: la maggior parte dei siti non supera questo controllo per impostazione predefinita, perché 44 x 44 pixel è una dimensione maggiore rispetto a quella dei link e dei pulsanti tipici. Se stai lavorando al Livello AA, concentrati innanzitutto sul controllo correlato distanza tra componenti interattivi, che verifica il requisito AA di 24 x 24 pixel.

Come risolvere il problema

1. Ingrandisci i controlli principali portandoli ad almeno 44 x 44 pixel CSS, usando min-width, min-height o il padding. Dai priorità alle azioni principali, come la navigazione, la ricerca e i pulsanti dei moduli.
2. Quando ingrandire un controllo non è pratico, fornisci nella stessa pagina un link o un controllo equivalente che rispetti le dimensioni richieste: Silktide ignora automaticamente i link piccoli quando esiste un link sufficientemente grande che conduce alla stessa destinazione.
3. Se hai stabilito che un controllo è accettabile così com'è, ad esempio perché rientra in un'eccezione WCAG che questo controllo non è in grado di rilevare, puoi approvare il risultato o escludere l'elemento dal controllo.

/* Problema: un pulsante icona di 30 x 30 */
.search-button {
  width: 30px;
  height: 30px;
}

/* Soluzione: soddisfare la raccomandazione di 44 x 44 */
.search-button {
  min-width: 44px;
  min-height: 44px;
}

Come esegue i test Silktide

1. Testa sia la versione mobile sia quella desktop di ogni pagina; i risultati possono essere diversi tra le due versioni.
2. Individua gli elementi interattivi: link, pulsanti, campi dei moduli e aree delle mappe immagine.
3. Ignora gli elementi che normalmente non sono visibili, come i contenuti posizionati fuori dallo schermo per gli screen reader, e tutti gli elementi che hai escluso dal controllo.
4. Ignora i controlli posizionati direttamente accanto al testo, poiché WCAG esenta gli obiettivi che compaiono in una frase o in un blocco di testo.
5. Per i link, ignora quelli che hanno un equivalente: un altro link visibile nella stessa pagina, che punta alla stessa destinazione e misura almeno 44 x 44 pixel.
6. Segnala ogni elemento rimanente più piccolo di 44 pixel in larghezza o di 44 pixel in altezza. Le dimensioni vengono arrotondate a una cifra decimale prima del confronto, in linea con quanto visualizzato nei risultati.

Risoluzione dei problemi

Vengono elencati solo alcuni errori

Silktide segnala fino a 100 esempi per pagina. Poiché gli errori di questo controllo sono comuni, una pagina può averne di più; correggere gli stili condivisi risolve molti risultati contemporaneamente.

WCAG ammette eccezioni che questo controllo non è in grado di rilevare

WCAG esenta gli obiettivi le cui dimensioni sono essenziali, sono impostate dal browser anziché dai tuoi stili o sono duplicati da un controllo equivalente in un'altra parte della pagina. Silktide rileva automaticamente le eccezioni relative al testo in linea e ai link equivalenti; per le altre è necessaria la tua valutazione. Approva i risultati che rientrano nelle eccezioni.

Per saperne di più

• Comprendere la dimensione del bersaglio (avanzata) (WCAG 2.5.5)
• Distanza tra componenti interattivi