Offerte audit
Typ iets om te zoeken...

Wcag uitgelegd

Links die alleen door kleur herkenbaar zijn

Links die alleen door kleur herkenbaar zijn: WCAG 1.4.1 Gebruik van kleur (post 1/8)

Een alinea tekst. Ergens staat een link. Blauw. Geen onderstreping.

Jij ziet het verschil. 300 miljoen mensen met kleurenblindheid niet.

Voor iemand met deuteranopie (de meest voorkomende vorm van kleurenblindheid) kan blauw en zwart er bijna identiek uitzien. De link verdwijnt in de tekst. Onzichtbaar. Onklikbaar. Want je weet niet dat die er is.

/* Niet doen: alleen kleur */
a { color: #2056A5; text-decoration: none; }

/* Wel doen: kleur + onderstreping */
a { color: #2056A5; text-decoration: underline; }

/* Of: kleur + vetgedrukt + border-bottom */
a {
  color: #2056A5;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid currentColor;
}

De regel: kleur mag niet het enige middel zijn om informatie over te brengen. Er moet altijd een tweede visueel kenmerk zijn.

De simpelste oplossing: onderstreep je links. Dat is niet ouderwets. Het is duidelijk. Iedereen begrijpt dat onderstreepte tekst klikbaar is.

De test: bekijk je pagina in grijstinten. Kun je nog zien welke tekst een link is?

Zelf verder met dit onderwerp

Related Posts

SC 1.4.1 - Wat betekent "Gebruik van kleur"?

Een invoerveld dat rood kleurt bij een fout. Een groene stip voor beschikbaar en een rode voor bezet. Links die alleen een ander kleurtje hebben dan de tekst eromheen. Voor wie kleuren niet of anders ziet, verdwijnt die informatie volledig. Daarom zegt WCAG: kleur mag nooit de enige visuele manier zijn om informatie over te brengen.

outline: none, de meest destructieve regel in CSS

outline: none, de meest destructieve regel in CSS

*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.

Negatieve outline-offset die de focus verbergt

Negatieve outline-offset die de focus verbergt

Een link met een donkere achtergrond. De focusindicator is er, een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.

WhatsApp ons (opent WhatsApp in een nieuw tabblad)