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à – Una combinazione raggiunge matematicamente il valore minimo, mentre gli stati adiacenti sono praticamente indistinguibili l'uno dall'altro.
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.