This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Barrierefreiheit
Zašto poruke greške i veze trebaju više od samo jedne boje?
Poruke greške i veze trebaju više od jedne boje jer mnogi ljudi ograničeno vide boje — crveno-zelena sljepošća je najčešći oblik. Crveno okviru polje bez objašnjavajućeg teksta ostaje za te posjetitelje nevidljivo označeno. Informacija mora zato biti dvostruko nošena: boja plus tekst, simbol ili podvlačenje.
Boja kao dodatak, nikada kao jedini nositelj
Tri svakodnevna slučaja pokazuju problem. Prvo obrasci: ako je krivo popunjeno polje samo crveno okviru, posjetitelj s crveno-zelenom sljepošću ne pronalazi grešku — dodajte poruku teksta kao "Molimo unesite valjanu e-mail adresu". Drugo veze u tekućem tekstu: ako se veza razlikuje samo po boji od okružujućeg teksta, mnogim nije vidljiva kao veza — podvlačenje to rješava. Treće grafikoni i statusne oznake: "Zeleno znači dostupno, crveno znači rasprodano" funkcionira samo sa dodatnom oznakom ili različitim simbolima. Boja ostaje izričito dozvoljena i smislena — može biti samo nikada jedina informacijska izvora.
Kako naš mjerni sustav provjerava korištenje boje
Automatska provjera s axe-core prepoznaje tipičan dio slučaja: veze u tekućem tekstu koje se razlikuju od okružujućeg teksta samo po boji — bez podvlačenja ili dovoljnog kontrasta svjetline. Takvi slučajevi teku kao nalaz u izvješće. Veći dio kriterija je недостижan za stroj: hoće li se grafikon objasniti samo preko boja ili poruka greške pored crvenog okvira ima i tekst trebaju razumjevanje sadržaja. Prema našem principu mirna provjera nikada se automatski ne broji kao dokaz — pri zlatnom standardu provjera gleda obrasce, grafikone i statusne oznake te donosi odluku.
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.
- Provjerite svoje obrasce: svaku grešku znamenovanja trebaju pored boje objašnjavajući tekst na zahvaćenom polju.
- Pustite veze u tekućem tekstu podvučene — boja sama čini ih mnogim posjetiteljima nevidljivima.
- Dodajte oznakama ili simbolima u grafikonima i statusnim oznakama dodatno na boju kodiranje.
- Gledate vašu stranicu jednom u sivi skali — svaki zaslonor i mnogi mobiteli mogu to — i provjerite ostaju li sve informacije.
- Označite polja koja se trebaju sa riječima "Obavezno polje" ili objašnjena zvjezdica, nikad samo boja.