Wat betekend digitale toegankelijkheid?

Kort gezegd moet informatie voor iedereen toegankelijk zijn. Voor overheden moet informatie en dienstverlening sinds een tijd verplicht voor iedereen toegankelijk zijn. Voor semi-overheid gelden iets minder strenge regels, maar ze zijn er wel. Hierom is een wettige verplichting rondom digitale toegankelijkheid in werking getreden. Dit besluit is gebaseerd op een Europese Richtlijn.

“Het verplicht overheidsinstanties tot het nemen van de noodzakelijke maatregelen om te voorkomen dat digitale informatie en dienstverlening mensen met een functiebeperking buitensluit. De wettelijke verplichting wordt in 3 fases ingevoerd; de eerste fase betreft nieuwe websites en websites van maximaal een jaar oud en is op 23 september 2019 ingegaan. De tweede fase volgt in september 2020 en geldt voor alle websites. En op 23 juni 2021 moeten mobiele apps ook voldoen aan de eisen uit het besluit.” Bron: Digitaleoverheid.nl/

In de praktijk

Wat bekenden deze regels dan in de praktijk? Voor verschillende klanten van ons hebben we inmiddels de digitale toegankelijkheidregels doorgevoerd. Dit zijn o.a. Sociaalplanbureau Groningen, Trendbureau Drenthe en CMO STAMM. Hierbij hebben we de ‘oude’ site op onze ontwikkelomgeving gezet en getoetst langs de stelregels voor digitale toegankelijkheid voor semi-overheden. In het volgende hoofdstuk gaan we verder in op deze stelregels. Vervolgens hebben we de op te pakken zaken doorgevoerd en laten testen door verschillende doelgroepen. Aan de hand van gebrukersfeedback konden we een extra optimalisatieslag maken, waarna de ‘nieuwe’ sites zijn live gezet.

Wat zijn de regels voor digitale toegankelijkheid?

Onderstaand de lijst met zaken waar we een website mee toetsen en indien nodig verbeteringen doorvoeren. Voor het overzicht hebben we de zaken onder verschillende categorieën opgedeeld.

Waarneembaar

• Niet-tekstuele items bevatten een alternatieve tekst
  Bezoekers die blind of slechtziend zijn gebruiken een screenreader om informatie op de website voorgelezen te krijgen. Om ook afbeeldingen, knoppen en formulieren toegankelijk te maken, moeten deze een passende alternatieve tekst krijgen. Bijvoorbeeld ‘foto van werknemers op kantoor’ in plaats van ‘IMG_1001.jpg
• Video’s en geluidsfragmenten bevatten een beschrijvend tekstalternatief
  Video’s moeten begrijpelijk worden gemaakt voor doven/ slechthorenden (door een beschrijvend tekstalternatief) en blinden/slechtzienden (door een geluidsfragment).
• Video’s (opgenomen en live) bevatten ondertiteling en audiodescriptie
  Belangrijke informatie wordt in video’s voornamelijk gegeven via geluid en niet via beeld. Ondertiteling – leesbare tekst onderin het beeld – helpt doven en slechthorenden om video’s te begrijpen. Audiodescriptie (hoorbare informatie die beschrijft wat er te zien is) helpt ook om de video’s beter te begrijpen.
• Informatie is onafhankelijk van presentatie
  De begrijpbaarheid van informatie, structuur en relaties mag niet afhankelijk zijn van de manier van presentatie. Een koptekst is voor niet-beperkte gebruikers makkelijk te onderscheiden van de rest, maar een screenreader maakt hier bijvoorbeeld geen onderscheid in. Of een tekst die een andere kleur heeft, maakt voor een kleurenblinde geen verschil.
• Content heeft een betekenisvolle volgorde
  Wanneer een volgorde van content van betekenis is, zoals voor deze checklist (waarin de succescriteria per principe worden opgesomd), moet dit in de code ook worden aangegeven zodat hulpapparatuur dit aan de gebruiker kan doorgeven.
• Zintuiglijke eigenschappen worden aangevuld met tekst of vorm
  Bij zintuiglijke informatie moet ook voor mensen met een beperking duidelijk zijn wat de bedoeling is. Een rode knop betekent bijvoorbeeld vaak ‘afsluiten’, maar voor kleurenblinden zal dit niet veel betekenen. Door gebruik van tekst of vorm wordt zintuiglijke informatie toegankelijker gemaakt.
• De schermoriëntatie is geschikt voor horizontaal en verticaal
  De bediening en weergave van het scherm mag niet beperkt zijn tot een bepaalde schermstand, maar zowel toepasbaar zijn voor horizontaal en verticaal gebruik van het scherm.
• Formulieren kunnen automatisch worden ingevuld
  Door middel van autocomplete worden formulieren automatisch ingevuld, wat de gebruiker werk bespaart en minder fouten oplevert.
• Kleurgebruik is aangevuld met logische vormen
  Voor kleurenblinden heeft informatie die alleen wordt getoond door middel van kleur geen zin – denk aan een groene en rode knop (voor bijvoorbeeld ‘ga verder’ en ‘ga terug’). Daarom moet kleurgebruik worden aangevuld met logische vormen (zoals pijlen of kruisjes).
• Video’s en geluidsfragmenten spelen niet automatisch af
  Wanneer een screenreader wordt ingezet die de tekst op de website voorleest aan blinde/slechtziende gebruikers, is het erg storend als video’s of geluidsfragmenten automatisch afspelen. Daarom moeten video’s en geluidsfragmenten een duidelijke ‘play’- knop hebben zodat ze handmatig aangezet kunnen worden.
• Contrasten van kleuren en niet-tekstuele informatie
  Voor slechtzienden en kleurenblinden moet er voldoende kleurcontrast zijn tussen achtergrond- en letterkleur, zodat de tekst duidelijk leesbaar is. Dit geldt ook voor niet- tekstuele informatie zoals knoppen, buttons en iconen.
• Teksten zijn schaalbaar
  De tekst moet vergroot kunnen worden (en daarbij nog goed op de website passen, en niet over afbeeldingen heenlopen) voor een betere leesbaarheid.
• Teksten zijn geplaatst als tekst en niet als afbeelding
  Soms worden teksten niet als tekst, maar als afbeelding op de website gezet. Dit heeft als gevolg dat screenreaders de tekst niet kunnen voorlezen, en de lettergrootte niet kan worden veranderd. Door tekst vooral te publiceren als tekst en niet als afbeelding, wordt de website toegankelijker voor gebruiker met een visuele beperking.
• Teksten zijn goed leesbaar
  Om teksten leesbaar te maken voor bezoekers met een visuele beperking of dyslexie, moet rekening worden gehouden met lettergrootte, woord- en regelafstand.
• Reactie op muisbewegingen of toetscommando’s kunnen worden stilgezet
  Visueel aantrekkelijk, maar niet altijd handig voor gebruikers met een beperking: menu’s die automatisch uitklappen, afbeeldingen die vergroten of teksten die veranderen als de muis er overheen beweegt. Deze reacties in de website moeten kunnen worden stilgezet wanneer dit de gebruikerservaring in de weg zit.

Bedienbaar

• De website is met een toetsenbord te bedienen
  Voor blinden, slechtzienden of gebruikers met beperkte handfunctie – gebruikers die vaak geen muis gebruiken – moet de website ook met het toetsenbord te bedienen zijn. Denk aan het verzenden van een contactformulier (waarvoor vaak een klik nodig is met de muis). Ook moet het toetsenbord gebruikt kunnen worden om over de website te navigeren, zonder dat de cursor vast komt te zitten in bepaalde elementen op de pagina.
• Toetscombinaties kunnen worden gewijzigd
  Vooraf geprogrammeerde toetscombinaties moeten kunnen worden gewijzigd en uitgeschakeld, omdat ze de gebruiker in de weg kunnen zitten bij het navigeren over de website.
• De timing van pagina’s is aanpasbaar
  Sommige websites werken voor de veiligheid van de pagina met een tijdsbegrenzing om bijvoorbeeld ingelogd te blijven. Voor gebruikers die meer tijd nodig hebben om door een pagina te navigeren, moet deze tijd verlengd kunnen worden.
• Automatische bewegingen kunnen worden gestopt
  Elementen die op het scherm verschuiven, bewegen of knipperen moeten kunnen worden gepauzeerd of gestopt, omdat ze de bezoeker kunnen afleiden bij het navigeren over de pagina.
• Flitsende content is geminimaliseerd
  Gebruikers met (een aanleg voor) epilepsie kunnen getriggerd worden door flitsende lichten en kleuren. Websites mogen geen onderdelen bevatten die meer dan drie keer per seconde flitsen
• Er worden skiplinks aangeboden
  Voor gebruikers met een screenreader is soms niet duidelijk wat er voor de rest op de pagina staat. Om te voorkomen dat ze steeds weer naar boven moeten scrollen, moeten skiplinks worden aangeboden om het hele menu te kunnen overslaan.
• Paginatitels zijn uniek en beschrijvend voor de content
  De titel is het eerste wat wordt voorgelezen. Met een goede titel weten gebruikers met een screenreader wat ze kunnen verwachten van de pagina.
• Elementen hebben een logische volgorde
  Bij navigeren met een toetsenbord springt de selectie van element naar element, wat in een
  logische volgorde moet gebeuren.
• Linkteksten zijn uniek en beschrijvend voor het linkdoel
  Gebruikers kunnen met hulpapparatuur een overzicht opvragen van de links op een pagina. Veel links zeggen ‘lees meer’ of ‘klik hier’, maar dit zegt niet zo veel in een overzicht. Linkteksten moeten daarom uniek en beschrijvend zijn, zodat het linkdoel in een keer duidelijk is.
• Elke pagina is op meerdere manieren te bereiken
  Om bezoekers met verschillende beperkingen te helpen om pagina’s te vinden, moet elke pagina op minstens twee manieren te bereiken zijn buiten de standaard navigatie om.
• Koppen en labels zijn beschrijvend voor de pagina
  Blinde bezoekers kunnen met hun hulpapparatuur een overzicht opvragen van de paginatitels. Daarin moet direct duidelijk zijn welke informatie te vinden is op welke pagina. Dit geldt ook voor invoervelden van formulieren: het label van een invoerveld moet makkelijk aangeven wat ingevuld moet worden.
• De focus van de pagina is zichtbaar
  Bij het navigeren met een toetsenbord moet makkelijk te zien zijn waar op de pagina de gebruiker zich bevindt. Dit gebeurt meestal met een kader om het geselecteerde onderdeel als indicator.
• Er is een alternatief voor vingerbewegingen op een touchscreen
  Functies die met een touchscreen worden uitgevoerd, zoals in en uitzoomen met twee vingers, moeten ook op een alternatieve manier bediend kunnen worden met bijvoorbeeld knoppen en buttons.
• De aanraakfunctie (touch) kan worden geannuleerd
  Bij het gebruik van een touchscreen moet een ‘touch’ ongedaan kunnen worden gemaakt – alleen het aanraken van een button mag niet gelijk leiden tot de uitvoer van een functie. Er moet een soort uitweg mogelijk zijn, zoals de ‘touch’ ingedrukt houden en wegvegen of het scherm op een andere plek aantikken.
• De tekst in labels laat zien wat er gebeurt
  Voor elementen waar tekst in voorkomt (zoals een knop met ‘afsluiten’ of ‘bevestigen’) moet duidelijk zijn wat de functie is van het element, om verwarring te voorkomen.
• Acties door bewegingen kunnen worden gestopt
  Op sommige devices kan met een beweging (zoals het schudden van het scherm) een functie worden geactiveerd. Dit is niet voor iedereen handig (bijvoorbeeld voor gebruikers wiens scherm op de rolstoel is gemonteerd) en moet dus kunnen worden uitgeschakeld.

Begrijpelijk

• Het taalgebruik past bij de uitspraak van de screenreader
  Voor een screenreader zijn bepaalde woorden moeilijk uit te spreken (en dus te begrijpen), vooral als Engelse tekst in het Nederlands voorkomt. In verschillende talen worden bepaalde letters, woorden en klanken namelijk anders uitgesproken. Er vanuitgaande dat gebruikers van Nederlandse websites een screenreader hebben die in het Nederlands is ingesteld, moet de website dus content bevatten in duidelijk Nederlands.
• Talen zijn te wisselen
  Sommige websites maken gebruik van verschillende talen. Om toegankelijk te blijven is de verandering van taal in de code aangegeven.
• De gebruiker wordt herinnerd aan verandering van focus
  Met een verkeerde klik op een andere pagina terechtkomen is voor niet-beperkte gebruikers geen probleem, maar voor een gebruiker met een beperking kan dit lastig zijn. Daarom moet worden aangegeven als de focus wordt veranderd (bijvoorbeeld het openen van een nieuw scherm). Dit geldt ook bij het geven van input, zoals het versturen van een invulformulier.
• De navigatie en identificatie is consistent
  Vanuit verschillende pagina’s moet duidelijk zijn hoe de gebruiker over de website kan navigeren. Daarom moeten pagina’s een consistentie naamgeving hebben.
• Invoervelden en foutmeldingen geven duidelijke instructies
  Bij het invullen van een formulier geven de invoervelden duidelijke instructies (zoals ‘vul hier je adres in’ of ‘vul een sterk wachtwoord in met minstens een hoofdletter’). Dit geldt ook voor foutmeldingen: bij het maken van een fout moet de gebruiker duidelijke aanwijzingen krijgen om dit te herstellen.
• Invoervelden herkennen en voorkomen fouten
  Invoervelden hebben een automatische herkenning van fouten en geven een suggestie om de fout te voorkomen. Bij het invoeren van data die gevolgen heeft (zoals een bankafschrijving) moet deze kunnen worden gecontroleerd voordat alles wordt ingestuurd.

Robuust

• HTML-codes bevatten zo weinig mogelijk fouten
  Browsers kunnen eventuele fouten in een HMTL-code herkennen en handelen, maar hulpapparatuur voor gebruikers met een beperking kunnen hier soms niet goed mee omgaan. Om moeilijkheden te voorkomen kunnen online tools worden ingezet om fouten te bespeuren en op te lossen voor een zo goed mogelijke gebruikerservaring.
• Zelf-geprogrammeerde elementen zijn compatibel met hulpapparatuur
  Internetpagina’s met zelf-geprogrammeerde elementen en functionaliteiten moeten hetzelfde gedrag vertonen als standaardelementen (naam, rol en waarde) zodat ze compatibel zijn met hulpapparatuur van gebruikers met een beperking.
• Statusmeldingen kunnen door hulpapparatuur worden uitgelezen
  Statusmeldingen die automatisch worden doorgegeven aan het systeem moeten ook beschikbaar zijn voor gebruikers met hulpapparatuur.