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)
Inhoudsopgave
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?
Related Posts
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Lees meer over overflow: hidden knipt de focusindicator af
JavaScript dat de focus actief verwijdert
element.addEventListener("focus", function() { this.blur(); }); Een element krijgt focus. JavaScript verwijdert de focus direct. Het element heeft een fractie van een seconde focus gehad. De gebruiker merkt niets.
Lees meer over JavaScript dat de focus actief verwijdert
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
Lees meer over Focusindicator die opgaat in de achtergrond