Wcag uitgelegd

1.3.3 - Wat betekent "Zintuiglijke kenmerken"?

WCAG 1.3.3 stelt dat instructies niet alleen mogen verwijzen naar kleur, vorm of locatie. Leer hoe je content begrijpelijk maakt voor iedereen.

Waar gaat het over?

Gebruik niet alleen zintuiglijke kenmerken zoals kleur, vorm of locatie om iets uit te leggen, maar vul het aan met andere informatie.

Officiële tekst van 1.3.3

Waarom is dit belangrijk?

Soms bevat een website instructies die verwijzen naar een kleur, vorm of locatie van een element op de pagina. Bijvoorbeeld ‘klik op de groene knop’ of ‘kies het vakje rechts’. Dit werkt prima voor mensen die goed zien, maar niet voor mensen met een visuele beperking. Het is ook niet duidelijk voor mensen die de site op een andere manier bezoeken, bijvoorbeeld met een schermlezer.

Wat moet je doen?

Zorg dat je website aan de volgende punten voldoet:

  • In de instructies en aanwijzingen op je website wordt niet alleen verwezen naar de kleur, vorm, grootte, visuele locatie of het geluid van een element.

  • De teksten zijn voor iedereen te begrijpen, niet alleen voor wie kan zien of horen.

Wat is niet verplicht?

Je hoeft niet alle zintuiglijke informatie weg te laten. Je mag dus wel een kleur, vorm of positie benoemen, als je daarnaast ook andere informatie geeft.

Veelgemaakte fouten

Bij onze audits zien we dat het bij dit succescriterium vaak fout gaat op een van de volgende punten:

  • Er staan instructies als ‘vul het rode veld in’, zonder dat erbij staat om welk veld het gaat.

  • Er zijn teksten als ‘klik op de cirkel’ zonder label of uitleg.

  • Er zijn teksten als ‘druk op de knop rechts’ zonder dat ook de naam van de knop is genoemd.

Zo ziet het er in echte onderzoeksrapporten uit

We doorzochten ruim 3.400 openbare onderzoeksrapporten op de vraag hoe vaak 1.3.3 misgaat, en waar het dan aan ligt. In verreweg de meeste rapporten staat 1.3.3 gewoon op “voldoet”. Maar in de gevallen waar het wél misgaat, komt het telkens op hetzelfde neer: een instructie die je alleen begrijpt als je vorm, kleur of positie kunt zien. Er zijn drie hoofdvormen.

Verwijzen naar een plek op de pagina

Dit komt veruit het vaakst voor, in ongeveer 80 van de afgekeurde gevallen. De instructie wijst naar een positie in plaats van naar een naam:

  • “de menuknop links bovenin”
  • “de navigatiebalk aan de linkerkant van de pagina”
  • “Ziet u op de webpagina een chatknop rechts onderaan de pagina?”
  • “klik rechtsbovenaan de tegel”

Wie met een schermlezer werkt, krijgt de pagina niet als plaatje voorgeschoteld. “Links bovenin” zegt dan niets. En wie inzoomt of een klein scherm heeft, ziet die knop misschien ergens heel anders staan.

Verwijzen naar een vorm of icoon

In ongeveer 45 rapporten wordt een element beschreven op zijn uiterlijk, niet op zijn naam of functie:

  • “drie puntjes, drie streepjes”
  • “klik op de paperclip of de ‘i’”
  • “klik op het blauwe potloodje aan de linkerkant”
  • “3 streepjes rechtsboven”

Een icoon zonder tekstlabel bestaat voor een schermlezer niet. En zelfs voor ziende bezoekers is “de paperclip” een gok als het icoon niet betekent wat zij verwachten.

Verwijzen naar een kleur

In ongeveer 30 rapporten leunt de uitleg op kleur:

  • “Klik op de blauwe informatieballonnetjes in de bovenste rij”
  • “de rode velden zijn verplicht”
  • “groene gebieden en rode gebieden op een kaart”
  • “blauw voor man, groen voor vrouw”

Voor iemand die kleurenblind is of een schermlezer gebruikt, is “de rode velden” geen aanwijzing. Zet er dus altijd tekst bij, bijvoorbeeld een sterretje of het woord “verplicht” achter het label.

De verraderlijke variant: de verwijzing klopt niet eens

Een aparte categorie die het vermelden waard is. Soms klopt de zintuiglijke verwijzing niet eens visueel:

  • “klik op onderstaande knop”, terwijl er helemaal geen knop staat
  • een verwijzing naar de knop “Opslaan”, terwijl die knop in werkelijkheid “Later hervatten” heet
  • “klik op het ‘volgende’ pijltje”, terwijl dat pijltje er niet is

Voor een ziende bezoeker is dit al verwarrend. Voor iemand die de pagina niet kan zien, is de instructie onmogelijk te volgen. Hetzelfde geldt voor “de onderstaande tabel” wanneer die tabel door de leesvolgorde of het herschalen niet direct onder de tekst staat.

Wat kun je doen als webredacteur of manager?

Ook als je geen programmeur bent, heb je invloed op het voldoen aan dit succescriterium. Dit kun je doen:

  • Controleer alle instructies die worden gegeven, bijvoorbeeld bij de formulieren. Zijn ze ook duidelijk voor mensen die de vorm, kleur of positie niet kunnen zien?

  • Label elementen goed: zorg dat knoppen en velden duidelijke tekstlabels hebben.

  • Vraag je webbouwer: ‘worden elementen zo benoemd dat ze zonder zintuiglijke waarneming te vinden zijn?’

  • Test zelf: lees de pagina zonder naar de vormgeving te kijken. Begrijp je dan nog steeds wat de bedoeling is?