Campus Design System

Appearance

1.3.3 Zintuiglijke Kenmerken (Sensory Characteristics) niveau A ​

Uitleg ​

Het WCAG-criterium 1.3.3 Zintuiglijke Kenmerken stelt dat instructies op een website niet uitsluitend mogen steunen op zintuiglijke eigenschappen zoals kleur, vorm, grootte, locatie op het scherm, oriëntatie, of geluid. In plaats daarvan moeten instructies duidelijk zijn zonder visuele of auditieve context, zodat iedereen deze kan volgen. Dit helpt gebruikers met beperkingen zoals kleurenblindheid, visuele of auditieve beperkingen en cognitieve problemen om de inhoud correct te interpreteren en te gebruiken.

Wat betekent dit in de praktijk? ​

Instructies voor gebruikers moeten helder en universeel begrijpelijk zijn, ongeacht hoe iemand zintuiglijke informatie interpreteert. Dit houdt bijvoorbeeld in dat:

  • Instructies die enkel zeggen "klik op de groene knop" ook beschrijven welke tekst op de knop staat.
  • Het gebruik van "de knop rechtsboven" wordt vermeden zonder verdere uitleg, zodat schermlezergebruikers en anderen met alternatieve navigatiemethodes niet verdwalen.

Enkele voorbeelden van vereiste aanpassingen:

  • Vermijd: “Selecteer het rode vakje.”
  • Gebruik in plaats daarvan: “Selecteer het vakje met de tekst ‘Start’.”

Waarom is dit belangrijk? ​

Instructies die enkel afhankelijk zijn van zintuiglijke kenmerken kunnen moeilijk te volgen zijn voor gebruikers met visuele, auditieve, of cognitieve beperkingen. Door duidelijke, toegankelijke instructies te geven, kunnen alle gebruikers begrijpen wat van hen verwacht wordt, ongeacht hun vermogen om kleuren, vormen, of locaties correct waar te nemen.

Voorbeeld van het probleem ​

Stel dat een website-instructie luidt: “Klik op de blauwe knop om verder te gaan.” Voor een kleurenblinde gebruiker of iemand die alleen via een schermlezer navigeert, kan deze aanwijzing verwarrend zijn en leiden tot navigatieproblemen.

Oplossing voor dit probleem ​

Beschrijf de functie of tekst van een element in plaats van alleen de visuele kenmerken. Bijvoorbeeld:

  • Slecht: “Klik op de groene knop om te bevestigen.”
  • Goed: “Klik op de knop met de tekst ‘Bevestigen’ om door te gaan.”

Voorbeeld van implementatie ​

In HTML en CSS kunnen visuele eigenschappen worden gecombineerd met duidelijk gedefinieerde tekstuele instructies:

html
<!-- Slecht voorbeeld -->
<p>Klik op de groene knop om de registratie te voltooien.</p>
<button style="background-color: green;">Verzenden</button>

<!-- Goed voorbeeld -->
<p>Klik op de knop met de tekst 'Verzenden' om de registratie te voltooien.</p>
<button style="background-color: green;">Verzenden</button>

In het goede voorbeeld wordt naast kleur ook de tekst van de knop genoemd, zodat alle gebruikers de actie kunnen begrijpen.

Belangrijke overwegingen ​

  • Gebruik van CSS voor visuele kenmerken: Kleur en locatie kunnen nog steeds worden gebruikt om de visuele structuur van de pagina te ondersteunen, maar dit mag niet de enige bron van betekenis zijn.
  • Schermlezervriendelijk ontwerp: Zorg ervoor dat instructies ook zonder visuele context duidelijk zijn, zodat hulpmiddelen zoals schermlezers de content correct kunnen doorgeven aan gebruikers.

Alternatieve benaderingen ​

  • Tooltips en aria-labels: Voor interactieve elementen kunnen tooltips of ARIA-labels gebruikt worden om de functie van een element te beschrijven zonder afhankelijk te zijn van kleur of locatie.
  • Labelen van interactieve elementen: Voeg tekst of iconen toe om de functie van knoppen en links te verduidelijken, vooral als er kleuren of vormen worden gebruikt om onderscheid te maken tussen elementen.

Belangrijkste punten ​

  • Gebruik geen zintuiglijke kenmerken (zoals kleur of vorm) als de enige manier om instructies te geven.
  • Beschrijf de functie of tekstuele content van een interactief element in plaats van visuele kenmerken.
  • Controleer dat instructies duidelijk zijn voor gebruikers met een beperking in het waarnemen van kleuren, vormen of locaties.

Tools en Hulpmiddelen ​

  • WAVE Web Accessibility Evaluation Tool: Identificeert problemen met zintuiglijke kenmerken en helpt om alternatieven te vinden voor zintuiglijke aanwijzingen. WAVE.
  • Colour Contrast Analyser: Biedt ondersteuning bij het analyseren van kleurgebruik en kan helpen bij het verduidelijken van de instructies. Colour Contrast Analyser.

Betekenis voor toegankelijkheid ​

Door instructies toegankelijk te maken voor alle gebruikers, inclusief degenen die afhankelijk zijn van niet-zintuiglijke kenmerken, wordt de website gebruiksvriendelijker en inclusiever. Dit voorkomt misverstanden en navigatieproblemen en zorgt ervoor dat gebruikers met verschillende beperkingen de content correct kunnen begrijpen en gebruiken.

Referenties ​