Digitale toegankelijkheid checklist

Blog
Gepost op
Digitale toegankelijkheid checklist

11 richtlijnen voor betere digitale toegankelijkheid

Digitale toegankelijkheid draait om het creëren van een digitale omgeving (zoals websites, apps, enz.) die voor zoveel mogelijk mensen bruikbaar is. Dit wordt bereikt door rekening te houden met de diverse capaciteiten of situaties van de gebruikers die toegang hebben tot deze omgeving.

Bij Dropsolid maken we gebruik van een uitgebreide toegankelijkheidschecklist, bestaande uit richtlijnen die problemen moeten voorkomen op het gebied van content, structuur, ontwerp (UI) en ontwikkeling. Hierdoor wordt het eenvoudiger om uiteindelijk te voldoen aan de WCAG 2.2 AA-standaard.

In deze blog kom je meer te weten over de 11 richtlijnen voor een betere digitale toegankelijkheid: 

  1. Leesniveau
  2. Semantische HTML
  3. Tabnavigatie
  4. Zoom
  5. Links
  6. Media
  7. Formulieren
  8. Contrast
  9. Animatie en lichtflitsen 
  10. Touch 
  11. Responsive design

1. Leesniveau

Zorg dat de tekst overeenkomt met het leesniveau van je publiek. Dit betekent niet enkel rekening houden met het taalvermogen maar ook met het feit dat veel mensen afhaken bij gigantische blokken tekst.

  • Vermijd ondoordringbare tekst door korte en actieve zinnen te gebruiken.
  • Vermijd ingewikkeld taalgebruik. De essentie moet begrijpbaar zijn zonder kennis van kernfysica (tenzij
    dat net is waar uw website over gaat, natuurlijk).
  • Vermijd oubollig taalgebruik.

2. Semantische HTML

Gebruik de juiste HTML voor de juiste functie. Dit zorgt ervoor dat screen readers de navigatie en inhoud kunnen vinden en andere hulpmiddelen deze kunnen gebruiken (inclusief toetsenbordnavigatie). Wij werken voor onze content vaak met een CMS, waar een WYSIWYG-editor gelukkig automatisch de juiste tags plaatst. Maar net zoals voor SEO, zijn er zaken om op te letten. Hier zijn enkele voorbeelden:

  • Een link wordt voorgesteld door een ‘a’-tag en die hoort een beschrijvende tekst te hebben.
  • Een afbeelding wordt voorgesteld door een ‘img’-tag en deze moet een alternatieve tekst krijgen.
  • Gebruik koppen consistent (headings).
  • Gebruik tabellen enkel voor data-weergave.

3. Tabnavigatie

Een website mag niet enkel via de muis (of touch) bruikbaar zijn. Het moet mogelijk zijn om op een duidelijke en vlotte manier, via de tab-toets doorheen de site te navigeren en via oa. de Enter-toets, pijltjes, … elementen zoals links en formulieren te bedienen:

  • Is elk interactief element bereikbaar?
  • Is de volgorde zoals je verwacht? Bijvoorbeeld als je in de navigatie zit, kan je die items in een logische
    volgorde doorlopen, inclusief de submenu’s?
  • Werkt dit ook op kleinere schermen? Kan je bijvoorbeeld tot aan het mobiel menu geraken en dit
    openen via de Enter-toets?
  • Kan je formulieren verzenden door op Enter te klikken wanneer je focus op de verzendknop staat?

Zorg er dan ook voor dat de actieve elementen een focus-stijl hebben, zodat de bezoeker kan zien wat actief staat.

Pop-ups moeten gemakkelijk gesloten kunnen worden via het toetsenbord. Liefst zien we geen pop-ups die automatisch tevoorschijn komen, maar komen die enkel tevoorschijn als je gebruiker ergens op klikt. De alomtegenwoordige cookie-pop-up is een uitzondering, omdat deze nodig is voor de functionaliteit van vele websites (er zijn wettelijke verplichtingen rond het gebruik van cookies).

4. Zoom

Zorg dat je gebruiker kan inzoomen tot 200%, zonder dat er functionaliteiten (bijvoorbeeld navigatie) of informatie verloren gaat. Denk er ook aan dat dit ook geldt voor kleine schermen (zoals een smartphone).

5. Links

Links moeten duidelijk te onderscheiden zijn. Zorg dus voor een kleur die contrasteert met de omliggende tekst en achtergrond.

Voor tekstlinks is onderlijnen een gekend patroon. Daar doe je weinig mee verkeerd omdat dit goed ingeburgerd is. Je moet wel aandacht besteden aan stijlen die verward kunnen worden met gewone tekst. Bijvoorbeeld door een link een felle achtergrondkleur geven kan het lijken op een highlighted tekst, of door een link enkel in het vet zetten kan het doen lijken op bold tekst.

6. Media

Voor audiovisueel materiaal moeten alternatieven beschikbaar zijn:

  • Bij geluidsbronnen (bijvoorbeeld een podcast of interview) zorg je voor een transcript.
  • Bij video’s met geluid maak je gebruik van ondertiteling.
  • Bij video’s zonder geluid geef je een beschrijvende tekst mee.

Video- of audiospelers moeten ook toegankelijk zijn, net zoals andere UI-elementen. Dit betekent dus ook dat de knoppen via het toetsenbord bediend moeten kunnen worden en de labels duidelijk moeten zijn. Een goed voorbeeld is de YouTube speler. Deze is misschien niet 100% perfect, maar wel toegankelijk via het toetsenbord en biedt functies zoals closed captioning om ondertitels weer te geven (wanneer dit enabled is).

7. Formulieren

Maak duidelijk aan je gebruiker waar hij bezig is in het formulier:

  • Gebruik focus-stijlen om duidelijk te maken welk veld de bezoeker aan het invullen is.
  • Als een veld verplicht is of een fout heeft, maak duidelijk om welk veld het gaat en hoe je dit kan oplossen.

Help de gebruiker om door de formulieren te geraken:

  • Laat formulieren toe om autofill te gebruiken en sta toe om tekst te plakken in velden (bijvoorbeeld wachtwoorden).
  • Als je sessies gebruikt (bijvoorbeeld online banking), toon dan ook duidelijk aan de gebruiker hoeveel tijd er over is en maak het gemakkelijk om de sessie te verlengen (minimum 20 seconden en via een eenvoudige actie).

8. Contrast

Hogere contrastwaarden helpen bij verschillende types van kleurenblindheid en troebel zicht. Je meet het contrast gemakkelijk met tal van contrast-checkers die je online vindt. Die waarden gaan samen met de grootte van de tekst, zo gelden andere waarden voor tekst die groter is dan 24px dan voor kleinere tekst.

Dit geldt ook voor de het design van de focus-stijlen op interactieve elementen. Bijvoorbeeld een gekleurde rand op een invulveld van een formulier wanneer de gebruiker tekst aan het typen is moet genoeg contrast hebben ten opzichte van de achtergrond en de binnenkleur van het veld.

9. Animatie en lichtflitsen

Let op met lichtflitsen, deze kunnen epileptische aanvallen veroorzaken. Vermijd dus flitsen die langer duren dan 3 seconden of beperk dit tot een zeer klein gebied.

Voor bewegende, scrollende of knipperende elementen, wordt aangeraden om niet langer dan 5 seconden te animeren en controls te voorzien waarmee de gebruiker deze uit kan zetten.

Autoplay van audio of video wordt afgeraden. In gevallen waar dit niet vermeden kan worden, wordt hier ook aangeraden om controls te voorzien waarmee de gebruiker ze uit kan zetten.

10. Touch

Zorg dat alle aanklikbare elementen, groot genoeg zijn (minimum 24 bij 24 px) om ook met touch te werken.

Op een touch-screen gedragen ‘click’ en ‘hover’ zich hetzelfde. Zorg dat UI-elementen die zowel click als hover functionaliteit hebben, ook bruikbaar zijn met touch. Bijvoorbeeld als een menu-item een submenu heeft dat opent op hover, zou je die functionaliteit kunnen verplaatsen naar een icoon van een pijltje.

11. Responsive design

Het spreekt ondertussen bijna voor zich, maar zorg dat een ontwerp de informatie duidelijk kan overbrengen op verschillende schermgroottes maar vooral op kleine schermen en devices. Zorg er ook voor dat de nodige functionaliteiten ook op die kleinere formaten werken. Het is niet altijd voldoende om enkel het browservenster kleiner te maken, het is nuttig om de site effectief op een smartphone te testen:

  • Kan je nog steeds inzoomen?
  • Werkt de touch-functionaliteit met de navigatie?
  • Kan je scrollen doorheen de pagina?

De smartphone is alomtegenwoordig en een belangrijk onderdeel van hulpmiddelen bij bijvoorbeeld blinden of mensen met een motorische handicap dus laat dit zeker niet liggen.

We zetten de checklist ook om naar een PDF-bestand, zodat je gemakkelijk kunt controleren welke aspecten nog ontbreken op jouw website en waar verbeteringen mogelijk zijn.

Download de checklist

Digitale nieuwtjes
rechtstreeks in je inbox?