Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Waarom hebben foutbericht en links meer dan alleen een kleur nodig?
Foutbericht en links hebben meer dan een kleur nodig, omdat veel mensen kleuren maar beperkt onderscheiden - rood-groenkleurenblindheid is de meest voorkomende vorm. Een rood omrand verplicht veld zonder verklarende tekst blijft voor deze bezoekers onzichtbaar gemarkeerd. Informatie moet daarom dubbel worden gedragen: kleur plus tekst, symbool of onderlijning.
Kleur als toevoegsel, nooit als enige drager
Drie alledaagse gevallen tonen het probleem. Eerst formulieren: wordt een foutief ingevuld veld alleen rood omrand, vindt een bezoeker met rood-groenkleurenblindheid de fout niet - voeg een tekstbericht toe zoals Voer alstublieft een geldig e-mailadres in. Tweede links in vloeiende tekst: onderscheidt een link zich alleen door kleur van de omringende tekst, is hij voor velen niet als link herkenbaar - de onderlijning lost dit op. Derde diagrammen en statusindicatoren: Groen betekent beschikbaar, Rood betekent uitverkocht werkt alleen met extra labeling of verschillende symbolen. Kleur blijft uitdrukking toegestaan en zinvol - het mag alleen nooit de enige informatiegron zijn.
Zo controleert onze messkern het kleurgebruik
De automatische controle met axe-core herkent een typische deelzaak: links in vloeiende tekst die zich van omringende tekst alleen door kleur onderscheiden - zonder onderlijning of voldoende helderheidsverschil. Dergelijke gevallen stromen als bevinding in het rapport. Het grotere deel van het criterium ontsnapt de machine: of een diagram alleen via kleuren wordt verklaard of een foutbericht buiten rode omranding ook een tekst heeft, vereist inhoudstaan Begrip. Naar ons principe geldt een opvallend doorgaan daarom nooit automatisch als nadruk - bij de goud-standaard bekijkt een controleur formulieren, diagrammen en statusindicatoren en velt het oordeel.
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.
- Controleer uw formulieren: elke foutmarking heeft naast kleur een verklarende tekst in het betreffende veld nodig.
- Laat links in vloeiende tekst onderlijnen - de kleur alleen maakt ze voor veel bezoekers onzichtbaar.
- Voeg in diagrammen en statusindicatoren labels of symbolen toe naast kleurencodering.
- Bekijk uw pagina eens in grijstinten - elk beeldscherm en veel mobiele telefoons kunnen dat - en controleer of alle informatie behouden blijft.
- Markeer verplicht velden met het woord Verplicht of een verklaard sterretje, nooit met kleur alleen.