šŸ‘ HAN-DS

# Accessibility

Producten en websites van de HAN moeten toegankelijk zijn voor iedereen, ook voor mensen met visuele, gehoor, cognitieve en lichamelijke beperkingen. Toegankelijk ontwerp geeft iedereen de kans te interacteren met, het begrijpen van, en te navigeren door onze producten.

# Structuur en hiƫrarchie

Consistentie en een duidelijke hiƫrarchie helpen gebruikers die door pagina's heen navigeren via links of koppen.

  • Gebruik koppen en titels zodat gebruikers de structuur kunnen zien en hoe de verschillende secties gerelateerd zijn aan elkaar.
  • Laat via onder andere active states en breadcrumbs zien waar iemand zit in de applicatie of site.

# Keyboard navigatie

Sommige gebruikers kunnen geen muis gebruiken en navigeren met andere tools zoals keyboard, screenreader, mond- of oogbesturing. Zorg ervoor dat alles dat via hover ontsloten wordt ook door middel van keyboard focus en screenreader te benaderen is.

Vraag je bij het maken van een website of applicatie af of een keyboard gebruikt kan worden om:

  • te navigeren
  • dezelfde taken uit te voeren als een muis
  • te laten weten waar je bent op de pagina
  • te laten weten waar de keyboard focus is

# Keyboard focus

Keyboard focus volgt de pagina zoals het oog hem zou scannen: van boven naar beneden, van links naar rechts.

  • Wees bewust van de volgorde van de elementen op de pagina. Is het logisch gekeken vanuit de gebruiker?
  • Laat weten waar de focus is.
  • Gebruik input focus niet om te selecteren, events te triggeren of om notificaties te tonen. Gebruikers moeten misschien door alle opties heen navigeren om aanpassingen te maken.
  • Hou in gedachte waar de focus naar terug gaat als het in-focus element verdwijnt. Gebruikers moeten terugkeren naar de plek waar ze waren voordat het element in focus kwam.

# Tooltips

Gebruikers kunnen tooltips activeren via hun keyboard. Wanneer een element focus krijgt wordt een tooltip getoond. Wanneer de focus weggaat verdwijnt de tooltip ook.

# Valideer formulieren inline

Valideer formulier velden inline en toon notificaties bij het veld zodat keyboard gebruikers niet ver hoeven te navigeren om feedback te krijgen.

# Betekenisvolle tekst

Consistente en helpende tekst maakt de UI (gebruikers interface) toegankelijk voor mensen met een screenreader. Screenreaders helpen mensen met een visuele handicap door zichtbare en onzichtbare teksten voor te lezen.

Zichtbare tekstelementen

  • UI labels,
  • koppen,
  • buttons,
  • formulieren,
  • hyperlinks,
  • help text

Onzichtbare tekstelelementen

  • alt teksten voor afbeeldingen,
  • alt teksten voor buttons

# Wees bondig

Mensen met een screenreader krijgen elk UI element voorgelezen, dus hoe korter de tekst hoe sneller ze door de navigatie heen kunnen.

# Gebruik consistente labeling

Geef elementen en componenten die dezelfde functionaliteit hebben hetzelfde label. Wanneer de gebruiker het element in een andere context treft moeten ze het makkelijk kunnen herkennen en de functie of actie begrijpen. Bijvoorbeeld een menu item dat Studeren heet moet een pagina openen die Studeren heet. Een notificatie met de titel 'kopieer pagina' moet een button hebben met het label 'kopieer'.

# Omschrijf wat een element doet

Het label van een element moet aangeven wat er gebeurt wanneer het geselecteerd is.

  • Do: Bewerk voorkeuren - Wanneer uitgesproken is de actie die volgt duidelijk.
  • Don't: Voorkeuren - De gebruiker weet nu niet of je gaat bewerken of alleen bekijken.

In buttons omschrijf wat de actie doet en wat er gaat gebeuren.

  • Do: Reserveer lokaal
  • Don't: Ga ervoor!

Hyperlinks tonen waar je naar toe gaat na het selecteren.

  • Do: Meer informatie over reserveren
  • Don't: Lees meer

# Afbeeldingen en video

Beschrijf niet tekstuele elementen in de UI (door bijvoorbeeld het gebruik van alt text) zodat screenreaders het bondig en accuraat kunnen vertellen.

# Afbeeldingen die informatie bevatten

Als een afbeelding informatie bevat die alleen begrepen kan worden door de afbeelding te zien, dan moet je de inhoud omschrijven via de alt text:

  • Kort en accuraat. Een paar woorden. Maximaal twee korte zinnen.
  • Herhaal geen informatie die in de tekst rond de afbeelding al te vinden is.
  • Gebruik niet "afbeelding van..." of "foto van..." om de afbeelding te omschrijven. De screenreader maakt dit al duidelijk.
  • Als de betekenis en inhoud van de afbeelding al duidelijk is door de omringende tekst, dan heb je niet zoveel alt text nodig.

# Decoratieve afbeeldingen

Als de afbeelding alleen gebruikt wordt om de pagina smakelijk voor het oog te maken, geen link bevat en niet gebruikt wordt om informatie over te brengen voeg dan wel het alt attribuut toe maar geen tekst: alt=""

# Videos

  • Voeg ondertiteling en transcript toe.
  • Gebruikers kunnen video's en gif's starten en stoppen.

# Kleur

Kleuren moeten voldoende contrast (AA) hebben zodat gebruikers met slecht zicht het prodict kunnen zien en gebruiken.

# Visuele hints

Geef informatie niet alleen maar aan door kleur. Gebruik meerdere visuele hints zoals lijndikte, patroon, vorm, tekst, iconen en/of illustraties zodat alle gebruikers (ook kleurenblind en/of bijna blind) dezelfde informatie krijgen.

# Testen en research

Het volgen van deze richtlijnen helpt de applicatie of website verbeteren, maar garanderen niet automatisch dat deze ook volledig toegankelijk is. Wat je nog meer kunt doen:

  • Test de gebruikers interface (UI) voor kleurcorrectie (kleurenblindheid), vergroten en andere accessibility mogelijkheden om er zeker van te zijn dat de interface (UI) blijft werken.
  • Gebruik mensen met een beperking wanneer je test.
  • Laat een accessibility test uitvoeren door een extern bureau

Verdere richtlijnen:

# Contactpersoon bij de HAN

Wil je een user- of accessibilitytest laten uitvoeren neem dan contact op met MCV Servicedesk/ ASKhan.

Iconen ā†’