Inspiratie Blog

Checklist digitale toegankelijkheid

Het controleren van de status van je digitale toegankelijkheid doe je het liefst meerdere keren tijdens het design- en ontwikkelproces. In dit artikel deel ik een lijst met checks die we bij Acato standaard bij de hand houden tijdens het ontwikkelen.

Geschreven door
Mark

Het is altijd aan te raden om je eigen werk grondig te controleren, vooral als het gaat om digitale toegankelijkheid. Bij Acato testen we regelmatig onze eigen code tijdens het ontwikkelproces door onder andere alleen het toetsenbord te gebruiken, in te zoomen tot 400% op een resolutie van 1280×1024 pixels en de screenreader (VoiceOver) te gebruiken. We delen de lijst op in zes onderwerpen:

Algemeen

Illustratieve weergave van een webpagina
 

We beginnen met enkele algemene bevindingen. We focussen op de content, het kleurcontrast en de semantische structuren:

  • Staat de taal van de website goed ingesteld? (<html lang="nl">)?

  • Zijn er skip links aanwezig naar de hoofd content?

  • Is alles omvat in een landmark (header, main, footer, nav, article, section, aside)?

  • Klopt het kleurcontrast (minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst)?

  • Zijn alle nav elementen voorzien van een aria-label (<nav aria-label="Hoofd">)?

  • Zijn interactieve elementen en links voorzien van een duidelijke outline?

  • Geven linkjes die geopend worden in een nieuw tabblad dit visueel/tekstueel aan?

  • Is er een logische tab volgorde aanwezig?

  • Is alles nog bereikbaar bij 400% zoom op 1280×1024 resolutie?

  • Is er geen horizontale scroll bij 400% zoom op 1280×1024 resolutie?

  • Is er een semantische structuur qua headings en content (h1 > h2 > h3 etc.)?

  • Wordt er gebruik gemaakt van de juiste elementen (buttons, ul‘s, a‘s) voor het juiste doel?

  • Worden wijzigingen met JavaScript op de pagina duidelijk gecommuniceerd aan de screen reader?

  • Is de pagina titel ingevuld en informatief genoeg?

  • Is het logo op home informatief, en op andere pagina’s een link naar de homepagina?

    • Op home “Logo van bedrijf”

    • Op ander pagina’s “Logo bedrijf – Ga naar de beginpagina”

  • Is er een toegankelijksheidsverklaring aanwezig op de website?

Media

illustratieve weergave van filmpjes

 

Bij media kijken we vooral naar afbeeldingen, video’s en animaties. Er zijn een paar geroutineerde checks die we kunnen uitvoeren:

  • Zijn video’s voorzien van ondertiteling en audioscriptie (of een transcript)?

  • Zijn video’s voorzien van een duidelijke title (bijvoorbeeld op de iframe)?

  • Zijn video shortcuts uitgezet, bij YouTube bijv. door &disablekb="1" aan de URL toe te voegen?

  • Hebben decoratieve afbeeldingen een lege alt tag en informatieve afbeeldingen de juiste content?

  • Kunnen bewegende elementen (en die langer dan 5 seconden doorgaan) stop worden gezet?

Toetsenbord

Illustratieve weergave van een toetsenbord

De beste manier om te weten of je website bruikbaar is voor gebruikers die alleen een toetsenbord kunnen hanteren, is door je muis of trackpad opzij te leggen en de website uitsluitend met toetsenbordcontrols te doorlopen.

  • Is het menu te bedienen met de pijltjes (link, rechts, onder, boven)?

  • Kunnen submenu’s worden geopend met enter/spatie/pijl omlaag?

  • Kunnen submenu’s worden gesloten met escape?

  • Zit er een focus trap op geopende submenu’s?

    • Alternatief: sluit een submenu als vanaf het laatste item op tab wordt gedrukt?

  • Zijn submenu’s voorzien van de juiste aria attributen aria-expanded en aria-hasdropdown?

Screen reader

Illustratieve weergave van een screenreader

 

Net als bij het toetsenbord is het goed om de website alleen met een screenreader te testen. Stel jezelf vooral de vraag: is het logisch wat er wordt voorgelezen?

  • Wordt de juiste informatie voorgelezen?
  • Zijn “Lees meer” links informatief, “Lees meer over onderwerp X”?
  • Geven interactieve controls de juiste status mee (“button, menu, gesloten”)?

Quickscan laten uitvoeren voor jouw website?

Wil je sparren over de digitale toegankelijkheid van jouw website of ben je benieuwd naar de status ervan? We kunnen een quickscan voor je uitvoeren (gebaseerd op dit artikel!) waarbij we zowel een automatische als een handmatige doorloop doen om te zien hoe toegankelijk jouw website is. Samen bespreken we de vervolgstappen om jouw website (nog) toegankelijker te maken!

Contact opnemen met Mark

Formulieren

illustratieve weergave van een formulier

 

Formulieren hebben een aantal vaste controles. Als je Gravity Forms in WordPress gebruikt, zijn de meeste van deze oplossingen al beschikbaar.

  • Heeft ieder label een for attribuut gekoppeld aan de id van een input?

  • Worden het aantal foutmeldingen in een aria-live="polite" callout boven het formulier weergeven?

  • Zijn er skip links aanwezig naar de foutmeldingen, die gelijk focussen op de input?

  • Zijn de foutmeldingen duidelijk omschreven met wat er verwacht wordt qua in te voeren content?

    • E-mailadres is niet ingevuld. Vul een e-mailadres in. Voorbeeld: ‘naam@domein.nl’.

  • Zijn input velden voorzien van een autocomplete attribuut waar nodig?

Interactieve controls

illustratieve weergave van een accordeon element

 

Tot slot controleren we de interactieve elementen, zoals modals, accordions en andere toggles.

  • Werken dialogs met het toetsenbord en zijn ze te sluiten met escape?

  • Kunnen dialogs worden gesloten door op de backdrop te klikken?

  • Zijn details/summary elementen op de juiste manier opgemaakt?

  • Worden sliders/swipers goed voorgelezen en zijn ze met het toetsenbord te bedienen?

  • Zijn interactieve elementen voorzien van de juiste aria controls?

    • aria-expanded, aria-controls, aria-labbeledby, aria-pressed, aria-label etc.

Conclusie

Bij het nalopen van je website zijn er veel aspecten om rekening mee te houden wat betreft digitale toegankelijkheid. In dit artikel hebben we er een aantal besproken; ik noem het een quickscan van de website. Deze quickscan is ook perfect om uit te voeren voordat je een audit laat doen door een gespecialiseerd bureau. Zo voorkom je alvast veel voorkomende issues. Een audit blijft echter belangrijk omdat deze het volledige spectrum van de succescriteria behandelt. Maar met deze quickscan heb je al een groot deel van het werk gedaan!