Home. Over ons. Diensten. Contact.
Je bent op “Diensten.” Hoe weet je dat? De tekst is blauw in plaats van zwart.
Alleen blauw. Geen onderstreping. Geen vetgedrukt. Geen achtergrondkleur. Geen border-bottom.
Voor iemand met kleurenblindheid zijn alle vier de menulinks identiek.
/* Niet doen: alleen kleur */
.nav-link--actief { color: #0066CC; }
/* Wel doen: kleur + visueel kenmerk */
.nav-link--actief {
color: #0066CC;
border-bottom: 3px solid currentColor;
font-weight: bold;
}
Drie opties om de actieve pagina aan te geven zonder alleen kleur:
- Onderstreping of border-bottom
- Vetgedrukt lettertype
- Achtergrondkleur (met voldoende contrast)
Combineer er twee voor het beste resultaat.
Vergeet ook niet: aria-current="page" op de actieve link. Dat vertelt schermlezers welke pagina actief is.
<a href="/diensten" aria-current="page">Diensten</a>
