Testare in modo differenziato i problemi di contrasto invece di procedere ciecamente con i valori di soglia.
L'analisi del contrasto distingue testo, controlli, stati e aree decorative. Le combinazioni reali sono più importanti dei singoli valori di colore.
Per gli sviluppatori web e i team UX, gli aspetti più importanti del "controllo differenziato dei problemi di contrasto" sono "Colori effettivamente visualizzati" e "Categoria di contenuto appropriata". Il "Valore del token senza composizione" funge da controllo.
Pubblicato: 3 minuti di lettura · Autore: Sebastian Geier
Come si verificano i problemi di contrasto in modo differenziato invece di limitarsi a lavorare con valori di soglia?
Il contrasto viene misurato rispetto alla combinazione effettivamente renderizzata di primo piano, trasparenza, immagine o sfumatura in ogni stato rilevante. La valutazione considera anche se si tratta di testo, elemento di controllo o decorazione e se gli stati adiacenti rimangono praticamente distinguibili.
Matrice di stato completa
Segnale di controllo
Segnale 1
Proporzione di componenti prioritari con composizione cromatica effettiva verificata in tutti gli stati rilevanti per le informazioni e per l'utente.
Segnale di controllo
Segnale 2
Numero di anomalie di contrasto la cui causa risiede in un token centrale o in una sovrapposizione e che quindi interessano più componenti contemporaneamente.
Verifica incrociata: "Valore del token senza composizione"
Secondo il sistema di progettazione, un messaggio di testo utilizza un grigio consentito, ma nel prodotto è semitrasparente su una sfumatura. La misurazione viene effettuata nelle aree effettivamente più chiare e non rileva anomalie; invece di correggere ogni pagina, la regola di sovrapposizione viene modificata e quindi ritestata negli stati normale, di errore e disabilitato.
Categoria di contenuto appropriata
Acquisire componenti reali dagli stili del browser anziché solo token di progettazione e classificarli per testo, funzione e stato.
Misura il contrasto sulla composizione di sfondo effettiva e valuta inoltre le differenze di stato e le dipendenze informative.
Correggi la causa nello stile del token, della sovrapposizione o del componente e verifica la modifica su tutti gli sfondi e gli stati dipendenti.
Colori renderizzati effettivi.
Colori renderizzati effettivi. Misura i valori calcolati di primo piano e sfondo, inclusi trasparenza, gradiente, area dell'immagine e stato interattivo.
Categoria di contenuto appropriata Valuta testo normale, testo grande, bordi di controllo e grafica puramente decorativa in base ai rispettivi requisiti.
Matrice di stato completa Gli stati predefinito, al passaggio del mouse, a fuoco, attivo, disabilitato, di errore e selezionato devono rimanere distinguibili e comprensibili, non solo percepibili a livello computazionale.
Valore del token senza composizione
Valore del token senza composizione – I singoli colori del design esistono isolatamente, ma con l'opacità o sovrapposti a un'immagine, danno luogo a una combinazione reale diversa.
Disattivato come pass gratuito – Il testo visualizzato debolmente contiene comunque le informazioni necessarie, ma viene nascosto senza verifica a causa del suo stato.
Soglia senza rilevabilità Loading. . .
Quali decisioni sono integrate da un "esame differenziato dei problemi di contrasto"?
Come integrare efficacemente i link di salto e la navigazione principale Risponde alla successiva domanda pratica: in che modo i link di salto integrano la navigazione principale senza creare nuovi ostacoli all'orientamento?
Come gli errori di intestazione e piè di pagina influenzano simultaneamente migliaia di pagine Prosegue su questa linea di pensiero con un'altra domanda: perché gli errori nell'intestazione o nel piè di pagina possono influenzare simultaneamente migliaia di pagine?
Se si desidera implementare concretamente la "Verifica differenziata dei problemi di contrasto", è possibile fare riferimento a: Sistemi web robusti Questo documento si concentra su "Qualità dei componenti, test e contrasto" e "Colori effettivamente renderizzati".
Conclusione: Test differenziati dei problemi di contrasto
Il test del contrasto richiede la composizione e la funzione effettive dell'elemento renderizzato. Un valore token isolato o una soglia raggiunta in modo casuale descrivono solo parzialmente la percettibilità effettiva.
Fonti e ulteriori informazioni
Le fonti primarie definiscono il quadro tecnico per il "test differenziato dei problemi di contrasto".
Panoramica sulla valutazione dell'accessibilità web – W3C WAIDichiarazione ufficiale del W3C secondo cui nessun singolo strumento può determinare la conformità e che è necessaria una valutazione umana da parte di esperti.
Comprensione del contrasto (minimo) – W3C WAISpiegazione ufficiale del contrasto del testo, delle sue soglie, delle eccezioni e delle condizioni di test.
Comprensione del contrasto non testuale – W3C WAIDefinizione ufficiale dei requisiti di contrasto per i componenti dell'interfaccia utente, gli stati e la grafica significativa.
Tesi chiave
La combinazione effettiva di primo piano e sfondo renderizzati viene testata in ogni stato rilevante. I requisiti variano in base alla funzione, alle dimensioni e al contenuto informativo.
Cosa non riguarda
Un singolo test positivo non è sufficiente per il rilascio. "Valore token senza composizione", "Disattivato come passaggio gratuito" e "Soglia senza riconoscibilità" devono essere esclusi singolarmente.
Di cosa si tratta
Lo stato target ha tre caratteristiche: "Colori renderizzati effettivi", "Categoria di contenuto appropriata" e "Matrice di stato completa". Questi punti guidano l'implementazione e la verifica.
Ulteriori approfondimenti
HTML semantico e accessibilità
Scrivere un testo alternativo che descriva la funzione dell'immagine anziché il suo contenuto.
"Test differenziati dei problemi di contrasto" include, come fase di test separata, la domanda: In che modo il testo alternativo descrive la funzione di un'immagine anziché solo i dettagli visibili?
HTML semantico e accessibilità
Ridurre movimenti e animazioni per utenti sensibili
Integra "Test differenziati dei problemi di contrasto" con una decisione separata: Come si riducono in modo sicuro movimenti e animazioni per utenti sensibili?
Panoramica degli Insight
Tutti gli Insight di VELUNO in sintesi
Ulteriori analisi sui sistemi web, la visibilità digitale e modelli di lavoro robusti.
Completare la matrice di stato: primo compito
Una sonda di componenti basata sullo stato può combinare i valori misurati dal browser con la sua funzione informativa. I problemi centrali di colore e sovrapposizione vengono quindi risolti prima di apportare correzioni locali individuali.