Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung
Accessibilità
Perché i messaggi di errore e i link hanno bisogno di più di un solo colore?
I messaggi di errore e i link hanno bisogno di più di un colore perché molte persone distinguono i colori solo in modo limitato — il daltonismo rosso-verde è la forma più comune. Un campo obbligatorio circondato di rosso senza testo esplicativo rimane invisibilmente contrassegnato per questi visitatori. L'informazione deve quindi essere portata il doppio: colore più testo, simbolo o sottolineatura.
Il colore come supplemento, mai come unico vettore
Tre casi quotidiani mostrano il problema. Primo: i moduli. Se un campo compilato erroneamente è solo circondato di rosso, un visitatore con daltonismo rosso-verde non troverà l'errore — aggiunga un messaggio di testo come "Per favore inserisca un indirizzo e-mail valido". Secondo: i link nel testo fluente. Se un link si distingue dal testo circostante solo per il colore, molti non lo riconoscono come link — la sottolineatura lo risolve. Terzo: i grafici e gli indicatori di stato. "Verde significa disponibile, rosso significa esaurito" funziona solo con didascalie aggiuntive o simboli diversi. Il colore rimane espressamente consentito e utile — non può mai essere l'unica fonte di informazione.
Come il nostro nucleo di misurazione verifica l'uso del colore
Il controllo automatico con axe-core riconosce un caso parziale tipico: link nel testo fluente che si distinguono dal testo circostante solo per il colore — senza sottolineatura o contrasto sufficiente. Tali casi vanno nel rapporto come rilievo. La parte più grande del criterio sfugge alla macchina: se un grafico è spiegato solo tramite il colore o se un messaggio di errore ha un testo oltre il bordo rosso richiede la comprensione dei contenuti. Per il nostro principio, un passaggio anonimo non è mai automaticamente prove — nello standard oro un verificatore esamina moduli, diagrammi e indicatori di stato e prende la decisione.
Esempi
Errore segnato solo rosso
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Il rosso da solo non vede persone con difetti di colore e programmi di lettura. Il testo menziona l'errore.
Link nel testo di flusso riconoscibile solo per colore
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Il underscore rende il collegamento riconoscibile anche senza percezione del colore.
- Verifichi i Suoi moduli: ogni marcatura di errore ha bisogno di un testo esplicativo accanto al colore nel campo interessato.
- Faccia sottolineare i link nel testo fluente — il colore da solo li rende invisibili per molti visitatori.
- Aggiunga didascalie o simboli ai diagrammi e agli indicatori di stato oltre alla codifica colore.
- Guardi la Sua pagina una volta in scala di grigi — ogni schermo e molti telefoni lo fanno — e verifichi se tutte le informazioni rimangono.
- Contrassegni i campi obbligatori con la parola "Obbligatorio" o un asterisco spiegato, mai solo con il colore.
