Contrasto dei controlli dei moduli
Silktide controlla che i campi dei moduli, come caselle di testo e menu a elenco, siano visivamente distinguibili dall'area circostante. Un campo che si confonde con la pagina è difficile da trovare e utilizzare per le persone con una vista ridotta.
Perché è importante
Per compilare un modulo, bisogna prima riuscire a vedere dove si trovano i campi. Un campo di input bianco senza bordo su una pagina bianca è invisibile a molte persone ipovedenti: non riescono a capire dove fare clic o dove digitare. I moduli sono solitamente la parte più importante di un sito web (contatti, acquisti, registrazioni), quindi i campi che non possono essere trovati si traducono direttamente in richieste e vendite perse. Questo è anche un requisito di .
Come risolvere il problema
- Assegna al controllo un bordo o un contorno visibile con un di almeno 3:1 rispetto allo sfondo circostante. Di solito è sufficiente una modifica di una riga nel foglio di stile.
/* Campo invisibile su una pagina bianca */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Corretto: il bordo ha un contrasto di almeno 3:1 con lo sfondo */
input { background: #fff; border: 1px solid #767676; }
- In alternativa, riempi il controllo con un colore che abbia un contrasto di almeno 3:1 rispetto a ciò che lo circonda.
Come Silktide esegue il controllo
- Trova ogni campo di testo, area di testo e menu a elenco visibile (
<input>,<textarea>e<select>) nella pagina, ignorando gli elementi esclusi dal controllo. - Ignora i tipi di input il cui aspetto viene disegnato dal browser o dal sistema operativo: caselle di controllo, pulsanti di opzione, pulsanti di invio/reimpostazione/immagine, selettori di file e input nascosti.
- Determina il colore di sfondo effettivo del controllo e il colore di sfondo dell'area che lo circonda, tenendo conto della trasparenza e degli elementi genitori.
- Il controllo supera il controllo se il suo riempimento ha un contrasto di almeno 3:1 con lo sfondo circostante. In caso contrario, verifica ciascun colore del bordo e del contorno del controllo rispetto allo sfondo circostante e lo considera superato se uno di essi raggiunge 3:1.
- Segnala i controlli per i quali nulla raggiunge 3:1, mostrando il contrasto migliore rilevato.
Risoluzione dei problemi
Effetti che non possiamo misurare
Ombre, aloni, sfumature e immagini di sfondo non hanno un singolo colore da
misurare, quindi il contrasto fornito esclusivamente da questi effetti non
viene considerato. Analogamente, un controllo posizionato su più sfondi diversi
(ad esempio con position: absolute) potrebbe non essere misurabile. Se un
controllo segnalato è effettivamente distinguibile, il
rilevamento.
I pulsanti, le caselle di controllo e i pulsanti di opzione non vengono controllati
I pulsanti non hanno bisogno di un bordo visibile purché la loro etichetta sia leggibile, mentre le caselle di controllo e i pulsanti di opzione vengono solitamente disegnati dal browser; per questo il controllo li esclude intenzionalmente.
Menu a elenco personalizzati
Alcune librerie di componenti nascondono il controllo nativo e ne disegnano una sostituzione personalizzata. Silktide ignora il controllo nativo nascosto e, ove possibile, valuta la sostituzione visibile come qualsiasi altro elemento.