Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
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.
Beispiele
Fehler nur rot markiert
<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>Rot allein sehen Menschen mit Farbfehlsichtigkeit und Vorleseprogramme nicht. Der Text nennt den Fehler.
Link im Fließtext nur durch Farbe erkennbar
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Der Unterstrich macht den Link auch ohne Farbwahrnehmung erkennbar.
- 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.