Wcag uitgelegd

Actieve pagina in het menu: alleen een andere kleur

Actieve pagina in het menu: alleen een andere kleur — WCAG 1.4.1 Gebruik van kleur (post 4/8)

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:

  1. Onderstreping of border-bottom
  2. Vetgedrukt lettertype
  3. 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>

Related Posts

Afbeelding als link zonder beschrijvend alt

Afbeelding als link zonder beschrijvend alt

Een winkelwagen-icoon. Klik erop en je gaat naar je winkelwagen. Logisch.

Groene rij = goedgekeurd, rode rij = afgewezen

Groene rij = goedgekeurd, rode rij = afgewezen

Een tabel met aanvragen. Groen: goedgekeurd. Rood: afgewezen. Oranje: in behandeling.

Fieldset legend

Fieldset legend

“Hoe wil je benaderd worden?” Met daaronder drie radiobuttons: telefoon, e-mail, brief. Je begrijpt direct dat die opties bij die vraag horen.