Skip to main content
Een laptop staat open met daarop een rij HTML code weergegeven

Accessible Rich Internet Applications (ARIA) attributen gebruiken voor digitale toegankelijkheid

Door Apps & Websites, Tips & Trics

Developers kunnen ontzettend veel doen om websites toegankelijker te maken. De regelmatige lezer van Digitaal Toegankelijk.nl is ongetwijfeld bekend met best practices zoals het toepassen van de juiste contrast ratio’s, het ondertitelen van ingesloten video’s en het bouwen van een overzichtelijke website-structuur. Bezoekers van een website zullen snel met het blote oog zien of een website aan deze voorwaarden voldoet.

Naast zichtbare verbeteringen kunnen developers ook (op het eerste gezicht) niet zichtbare verbeteringen doorvoeren. Voorbeelden hiervan zijn alternatieve beschrijvingen van afbeeldingen en hyperlinks. Op deze manier krijgen gebruikers van schermlezers mee wat er in afbeeldingen gebeurt of wat het doel van hyperlinks en knoppen is.

In dezelfde categorie van ogenschijnlijk onzichtbare verbeteringen op het gebied van digitale toegankelijkheid, vallen ook Accessible Rich Internet Applications (ARIA) attributen. In dit artikel lichten we de rol van ARIA-elementen bij het toegankelijk maken van websites toe.

vrouw met rood haar zit achter computer te programmeren

Wat zijn ARIA-elementen?

ARIA-elementen worden gebruikt om onderdelen van websites te beschrijven zodat mensen met een (visuele) beperking een beter beeld krijgen van de content. Goed om te weten is dat je ARIA-elementen niet als functionele code moet zien, maar als code die beschrijvend werkt. Simpel gezegd zorgt ARIA ervoor dat mensen met een visuele beperking een webpagina net zo kunnen gebruiken als mensen zonder beperking.

ARIA wordt in de praktijk vooral gebruikt om:

  • Het doel van interactieve web-elementen te beschrijven
  • De structuur van een pagina duidelijk te maken
  • Elementen te beschrijven die live geüpdatet worden, zoals sportstanden
  • Dynamische elementen zoals pop-up schermen te beschrijven

Developers kunnen ARIA-elementen als stukjes code in de broncode van een website plaatsen. ARIA is daarom niet met het blote oog te zien. De groep bezoekers van een website die baat hebben bij ARIA-elementen bestaat vooral uit mensen die een schermlezer gebruiken.

Waarom ARIA-elementen gebruiken?

Maar, wat is het voordeel van het plaatsen van stukjes ARIA op een website? Het positieve effect van deze elementen zit hem vooral in de verbeterde gebruikerservaring voor mensen die afhankelijk zijn van een schermlezer. Deze groep zal gemakkelijk zijn of haar weg kunnen vinden op de website. Goed om te weten voor developers die een budget moeten verantwoorden: een betere gebruikerservaring betekent ook dat webshops meer omzet kunnen draaien, websites bezoekers beter naar commerciële pagina’s kunnen leiden en bezoekers minder snel een website verlaten. Digitale toegankelijkheid zorgt dus ook voor een boost in omzet.

Jongen in de rug gezien is aan het programmeren op twee schermen

Waarom geen ARIA-elementen gebruiken?

De vuistregel ‘Ieder voordeel heb z’n nadeel’ gaat ook hier op, misschien nog wel meer dan normaal. De verkeerde implementatie van ARIA kent een groot nadeel: verwarring en een slechte gebruikerservaring voor gebruikers van een schermlezer. Dit verkeerde gebruik kan op twee manieren worden veroorzaakt: onvoldoende kennis van ARIA en schermlezers of browsers die niet de juiste ondersteuning bieden. Helaas kennen diverse API’s, schermlezers en browsers verschillende methoden om ARIA te ondersteunen. Er bestaat dus geen ‘golden standard’ voor ARIA gebruik. Het wordt aangeraden om de geïmplementeerde ARIA snippers op verschillende browsers/schermlezers te testen.

Tips voor het gebruik van ARIA-elementen

De eerste reden voor incorrect ARIA gebruik, onvoldoende ARIA kennis, kan uiteraard verholpen worden. De volgende tips helpen je om ARIA aan te bieden voor de bezoekers van jouw website. Bekijk voor het meest up-to-date ARIA handleiding op de website van de W3C.

  • Geen ARIA is beter dan slechte ARIA. Zoals eerder benoemd doet onjuist gebruik van ARIA meer kwaad dan goed. Ben je niet zeker over de toepassing van deze elementen op jouw website? Raadpleeg dan een expert en wacht met het toepassen van ARIA tot je zeker weet of de code de gebruikerservaring verbetert.
  • HTML-attributen hebben de voorkeur boven ARIA. Is het mogelijk om web-elementen te beschrijvingen via HTML elementen? Verkies dan deze methode boven ARIA. Gebruik HTML en ARIA niet beiden om elementen te beschrijven, maar beperk je tot één oplossing.
  • Interactieve ARIA-elementen moeten toegankelijk zijn met een toetsenbord.
    Dit zou voor zich moeten spreken. Zorg ervoor dat gebruikers die geen muis gebruiken ook door de ARIA beschrijvingen kunnen navigeren.
  • Zorg voor custom ARIA code. Stukken ARIA-code die je op de websites van de W3C of andere platformen vindt, zijn niet per definitie compatibel met de technologie die jouw website ondersteunt of de schermlezers van de bezoekers van je website. Ontwikkel altijd eigen code snippets voor de meest efficiënte implementatie van ARIA.

Een extra paar ogen

Door Apps & Websites, Blind, Slechtziend, Tools, Visuele Beperking

Toen ik in de jaren tachtig van de vorige eeuw op het blindeninstituut zat, leerden we eigenlijk alleen maar braille. Totdat er voor die tijd een revolutionaire uitvinding werd gedaan.

Profielfoto Edwin

Edwin Ruyer

Edwin is muzikant, blind, en blogt voor Digitaal Toegankelijk om de wereld te laten zien hoe hij leeft met zijn beperking.

De Optcacon

De Optacon werkte als volgt: er stond een apparaat voor je neus. Hierin legde je je linker wijsvinger. In je rechter hand had je een soort cameraatje waarmee je over geschreven tekst op papier ging. Die letters werden door middel van stroompjes naar je linker wijsvinger geprojecteerd, zodat je ze in dat apparaat kon voelen. En voor heel kleine lettertjes, zoals in een krant of telefoonboek, moest je weer een andere camera aansluiten.

Ik was betrokken bij dat experiment. Dus ik kan sindsdien ook jullie letters lezen. Het grote nadeel van dit apparaat was dat het langzaam ging en dat je na een uur geen gevoel meer had in je wijsvinger. Het kostte bovendien ook nog eens 50.000 gulden, dus het was voor de meesten niet te betalen en werd nergens vergoed. Dus al snel verdween de Optacon van de markt.

De Optacon in gebruik

Seeing AI

Het heeft best lang geduurd voor er iets op de markt kwam waarmee wij ziende tekst konden lezen. Eigenlijk pas met de scanner, zo’n vijfentwintig jaar later. Daarmee konden we tekst van papier scannen en omzetten naar Word, zodat onze sprekende computer het kon voorlezen.

Die techniek ging verder. Ondertussen werken vele blinden met Seeing AI. Dit is een simpele app voor iPhone of Android (ontwikkeld door Microsoft) die het leven van de blinde een stukje simpeler maakt. Essentieel is wel dat je een beetje met je camera moet kunnen omgaan. Geloof me dat is voor vele blinden nog een hele klus (waarschijnlijk is dat ook de reden waarom er zo weinig blinde cameramannen zijn).

Maar wanneer je dat een beetje onder de knie hebt, biedt het programma vele mogelijkheden. Om te beginnen: het scannen van korte tekst. Dit gebruik ik sinds kort voor het scannen van verpakkingen van producten. Werkt supersnel. Even scannen en je telefoon vertelt precies alle ins en outs van het product.

Maar de app kan meer

Voor langere lappen tekst en brieven heeft de app Seeing AI de documentenscanner. Je maakt eerst een foto van de tekst en dan wordt hij netjes voor je voorgelezen. Ook streepjescodes doet hij met gemak. Briefgeld ontwaart hij netjes voor je, met de valutascanner.

Maar het apparaat gaat verder. Hij kan je doormiddel van een pieptoon laten horen hoe licht een ruimte is. Hoe hoger de toon hoe lichter de ruimte. Super handig om te kijken of je lampen uit zijn.

Ook herkent de app kleuren. Praktisch, voor wanneer je wilt weten welke kleur kleding je uit de kast pakt. Daarnaast kan de app ruimtes scannen. Als je een foto van de ruimte maakt, vertelt hij precies wat hij ziet.

En tenslotte kan die personen herkennen of beschrijven. Mij beschrijft deze app als een man van ongeveer 45. Dit compliment wilde ik jullie niet onthouden. Alleen dat was al een reden om dit staaltje techniek met jullie te delen. Voor wie het leuk vindt om hier mee te spelen: hij is gewoon gratis in de AppStore te downloaden.

Ontwikkelen voor mensen én zoekmachines: overeenkomsten tussen SEO en digitale toegankelijkheid

Door Apps & Websites, Tips & Trics, Tools, Visuele Beperking, WCAG, Wetgeving

Tijdens het ontwikkelen of verbeteren van een website dragen verschillende criteria en richtlijnen los van elkaar bij aan een optimale website. Door via zoekmachine-optimalisatie (SEO) slim in te spelen op zoekgedrag van de doelgroep en de website technisch te optimaliseren, scoort een website hoger in Google, wat zorgt voor meer bezoekers. Met richtlijnen in de WCAG kunnen ontwikkelaars een toegankelijke website maken; ook voor mensen met een auditieve, visuele of andere beperking. Schermlezers kunnen bijvoorbeeld geschreven content gemakkelijk voorlezen aan blinden en slechtzienden.

Raakvlakken tussen beide aspecten

Beide uitgangspunten van optimalisatie zijn belangrijk, maar de motivaties voor SEO en digitale toegankelijkheid lopen vaak uiteen. In SEO gestoken tijd en geld betaalt zich vaak terug omdat er meer bezoekers en dus meer potentiële klanten naar de website komen. Digitale toegankelijkheid zorgt ervoor dat de website door een breder publiek gebruikt kan worden. Helaas zijn investeringen in SEO vaak makkelijker te verantwoorden door managers, waardoor de digitale toegankelijkheid van een site achter kan blijven.

Zonde, want er zijn ontzettend veel raakvlakken tussen beide aspecten. Investeringen in digitale toegankelijkheid zorgen bijvoorbeeld ook voor een betere technische toestand van de website, waardoor Google deze hoger zal ranken. In dit artikel worden de overeenkomsten tussen SEO en digitale toegankelijkheid beschreven, zodat u beide aspecten kunt opnemen in uw online strategie.

Optimaliseren voor mensen, niet voor algoritmes

Hoewel de motivaties voor SEO en digitale toegankelijkheid uiteenlopen, overlapt de focus van beide aspecten behoorlijk: de gebruiker staat centraal. Waar Google websites beloont die antwoorden bieden aan gebruikers van de zoekmachine, staat bij digitale toegankelijkheid het gebruiksgemak van de eindgebruiker centraal. In beide richtlijnen staan de gebruikservaring en het gemak van de gebruiker dus centraal.

Het is daarom niet gek dat er een behoorlijke overlap bestaat tussen ‘best practices’ voor SEO en voor digitale toegankelijkheid. Goed nieuws, want zo kun via één investering goed scoren op beide vlakken. Twee vliegen in één klap dus.

Vier mannen in een kantoor zijn aan het werk bij een whiteboard

Waarom is toegankelijk ontwikkelen belangrijk voor SEO?

Google waardeert een goede gebruikservaring enorm. Maar, waarom is een toegankelijke en goed bruikbare website eigenlijk van belang? Voor SEO geldt dat een goed toegankelijke website eenvoudig te navigeren is, de gehele ervaring verbetert en helpt om informatie op de website eenvoudig te vinden.

Google beloont nu al websites die een goede gebruikservaring bieden. Aangezien toegankelijke websites eenvoudig te gebruiken en begrijpen zijn, is er een aanzienlijke overlap in ‘best practices’ voor SEO en toegankelijkheid. In dit artikel wordt dit gemeenschappelijke gebied besproken. Door rekening te houden met deze tips bij het ontwikkelen of verbeteren van een website zal je website straks én toegankelijker én beter vindbaar zijn.

1. Paginatitels

Een duidelijke paginatitel stelt een bezoeker eenvoudig en snel op de hoogte van de inhoud en context van de pagina. Zo kan die een oogopslag bepalen of de gezochte informatie op de pagina te vinden is. Zeker wanneer er meerdere tabbladen open staan, zijn de titels van groot belang om het overzicht te bewaren. Vooral schermlezers hebben baat bij dit overzicht, omdat ze zo de best mogelijke informatie door kunnen geven naar gebruikers.

Door het hanteren van paginatitels die zowel belangrijke zoekwoorden bevatten als een uitleg over de pagina, behaal je dus twee keer resultaat: voor SEO en toegankelijkheid.

2. Alternatieve beschrijvingen van afbeeldingen

Een tekst in de broncode van een afbeelding geeft de mogelijkheid om te beschrijven wat er in de afbeelding te zien is. Ontzettend handig voor mensen die afhankelijk zijn van een schermlezer voor het ‘lezen’ van een website. Helaas zijn deze beschrijvingen ontzettend misbruikt in de SEO-gemeenschap. SEO-specialisten zagen de alternatieve beschrijvingen namelijk als een extra mogelijkheid voor het plaatsen van relevante zoekwoorden. Hierdoor kon een website beter scoren in de zoekresultaten op een bepaald zoekwoord, maar werd de website niet duidelijk voor blinden en slechtzienden.

Gelukkig heeft Google de richtlijnen rondom de alternatieve beschrijvingen aangepast. ‘Create a great user experience’ is wat Google aanbeveelt op voor onderwerp.

Toegankelijke alternatieve beschrijvingen helpen dus zowel je website beter te scoren in Google als bruikbaarder te maken voor een groot publiek. Direct aan de slag? Lees onze tips voor het schrijven van alternatieve beschrijvingen van afbeeldingen!

Man in korte broek hangt op de bank en leest op zijn laptop

3. Ankerteksten van hyperlinks

De ankerteksten van hyperlinks zijn de tekst van een hyperlink die klikbaar is. In de zin “Voor meer informatie kunt u de WCAG-richtlijnen downloaden.” is ‘WCAG-richtlijnen downloaden’ de ankertekst. Wanneer een ankertekst beschrijft wat de functie van de link is, weet een gebruiker van een schermlezer wat het doel van de link is. Ankerteksten kunnen daarom enorm veel meerwaarde bieden voor gebruikers van schermlezers.

De ankertekst hierboven is een voorbeeld van hoe het wel moet, de volgende ankertekst is minder goed: “klik hier om de WCAG richtlijnen te downloaden”. ‘Hier’ zegt niets over de bestemming van de link, laat staan het doel van de hyperlink.

Voor Google is een goede ankertekst ook belangrijk. Het geeft immers een betere gebruikservaring. Daarnaast is het een handige plek om belangrijke zoekwoorden te vermelden. Wanneer meerdere sites en pagina’s verwijzen naar een pagina met ankerteksten gerelateerd aan ‘WCAG richtlijnen’, zal Google de waarde van dit zoekwoord voor de pagina hoger inschatten.

4. Toegankelijk webdesign

Het archief met blogs over toegankelijk webdesign van DigitaalToegankelijk.nl puilt uit van artikelen. Concrete voorbeelden van toegankelijk webdesign zijn: het toepassen van voldoende kleurcontrast tussen tekst en achtergrond en het kunnen vergroten van een website tot 200%.

Wederom geldt dat een goede gebruikerservaring voorop staat bij SEO. Een toegankelijk webdesign zal daarom bijdragen voor de totale SEO-waardering van een website door Google.

5. Transcripties van audio en video

Een transcriptie is een uitgeschreven versie van een podcast, of andere audio of video. Voor toegankelijkheid is het verstandig om een uitgeschreven versie van audiovisuele content te plaatsen. Het voordeel van een transcriptie is dat mensen op hun eigen tempo de informatie tot zich kunnen nemen. Daarnaast is er veel software beschikbaar die helpt om gesproken tekst automatisch om te zetten in geschreven tekst.

Vanuit SEO-perspectief is een uitgeschreven versie van een podcast of video ontzettend interessant. Google’s ‘crawl bots’ kunnen namelijk niet de inhoud van video’s en audiobestanden indexeren. Een uitgeschreven tekst is daarentegen eenvoudig te begrijpen en te indexeren door Google en andere zoekmachines. Zo zal de video of podcast beter vindbaar worden in Google en dus door meer mensen bezocht worden.

een microfoon en koptelefoon op de voorgrond en een computer met audio-opname op de achtergrond

6. Georganiseerde HTML-structuur

De HTML-structuur van koppen en subkoppen in teksten geeft gebruikers van schermlezers een beeld van de structuur van een pagina. De hoofdtitel heeft bijvoorbeeld het <h1> element, subkoppen <h2>, kopjes daaronder <h3> etc. Wanneer een <h1>-element vaker gebruikt wordt, geeft dit niet alleen een verkeerd beeld af voor gebruikers van schermlezers, maar ook voor zoekmachines. De structuur zelf is geen expliciete richtlijn van Google, maar geeft wel de mogelijkheid om de juiste positieve voor belangrijke zoekwoorden te bepalen.

Andere voorbeelden van toegankelijke HTML die ook voor SEO goed werkt, zijn meta tags die een korte beschrijving van de pagina geven, of HTML-taalcodes die zoekmachines en schermlezers vertellen in welke taal tekst geschreven is. Handig voor bezoekers van je website én voor zoekmachines.

7. Gebruik van sitemaps

Een sitemap is een digitaal bestand met een overzicht van de belangrijke content op een website. Door deze sitemap toe te voegen aan een website kunnen gebruikers én zoekmachines makkelijk de benodigde content vinden.

De inhoud en structuur van een sitemap is afhankelijk van de structuur van een website. In het onderstaande voorbeeld staat de sitemap van DigitaalToegankelijk.nl weergegeven. Per onderdeel wordt een sectie van de website besproken. Zo wordt er onderscheid gemaakt tussen de blogs, pagina’s en overzichtspagina’s van een website. Handig voor zoekmachines én bezoekers!

Een voorbeeld van een goed georganiseerde sitemap

8. Broodkruimelsporen

Broodkruimelsporen, breadcrumbs in het Engels, geven de gebruiker de stappen weer die hij/zij genomen heeft in een website. Een voorbeeld hiervan is te zien in onderstaande screenshot van Coolblue.

voorbeeld van een broodkruimelspoor

Hierin is te zien dat de gebruiker eerst naar ‘Telefonie’ gegaan is en daarna steeds verder gefilterd heeft, tot uiteindelijk de iPhone 12 pagina bereikt is. Door dit weer te geven kunnen gebruikers eenvoudig terug naar vorige categorieën en pagina’s, waardoor het overzicht bewaard blijft. Voor zoekmachines geeft een goed broodkruimelspoor de structuur van een website weer.

9. Navigatie

Een goede navigatiestructuur kan zowel via de muis als via een toetsenbord eenvoudig bediend worden. Hierdoor kunnen ook mensen die geen muis kunnen gebruiken de website eenvoudig doorlopen. Voor zoekmachines heeft een overzichtelijke navigatiestructuur het voordeel dat ‘crawl bots’ de website eenvoudiger kunnen doorlopen.

Je website beter bruikbaar maken voor gebruikers van een toetsenbord? Lees onze tips voor het optimaliseren van websites voor gebruikers van een toetsenbord.

10. Leesbaarheid

Alle gebruikers moeten de tekst van je website kunnen lezen en begrijpen. Om digitaal toegankelijke teksten te schrijven is het belangrijk om korte zinnen te gebruiken. Daarnaast is het aanbevolen om moeilijke woorden te vermijden. Indien je toch moeilijke woorden of jargon gebruikt, kan je ervoor kiezen deze uit te leggen in de tekst. Als laatste is het aanbevolen vanuit de WCAG om veel opsommingen te gebruiken.

Wanneer deze tips worden opgevolgd ontstaan er teksten die voor een groter publiek toegankelijk zijn. Dit betekent dat mensen langer op de website zullen blijven, omdat ze de informatie kunnen lezen en begrijpen. Ze verlaten de website immers niet gefrustreerd omdat de tekst onduidelijk is. Voor Google is de tijd die mensen op een website doorbrengen van belang. Hoe hoger deze tijd, hoe beter Google de website beoordeelt.

Vergeet de ondertiteling niet

Door Apps & Websites, Auditieve Beperking, Doof, Slechthorend

Het is voor dovenden en slechthorenden belangrijk dat online video’s toegankelijk zijn. Niet alle bedrijven kiezen er echter voor om hun video’s te ondertitelen. Misschien kost het tijd en energie, of zijn ze zich er niet van bewust dat sommige mensen de video’s zonder ondertiteling niet kunnen volgen. Ik vind het een goed idee om de bedrijven erop te wijzen.

Profielfoto Claire

Claire Meijer

Claire is zelfstandig ondernemer en zet zich met haar bedrijf Klinktprima.nl in voor mensen met een auditieve beperking op de arbeidsmarkt. Ze is zelf doof en woont met haar man en haar zoontje in Helmond.

Sociale media en video’s

Voor doven en slechthorenden zijn sociale media zeer handig. Het gebruik ervan is een goede manier om nieuws bij te houden. Ook worden sociale media gebruikt om mensen, bedrijven en televisieprogramma’s te volgen. Veel dove en slechthorende mensen maken ervan gebruik, vooral van Facebook en Instagram. En onder jongeren is TikTok een populair sociaal medium.

Voor mensen met een auditieve beperking is het handig om visuele informatie te kunnen delen, bekijken en volgen. In groepen gericht op doven en slechthorenden, zoals op Facebook, worden video’s in Nederlandse Gebarentaal gedeeld. Tekst is vaak in eenvoudige taal geschreven, omdat het taalniveau van doven en slechthorenden lager kan zijn. Zo wordt er makkelijk gecommuniceerd en informatie gedeeld.

Ontbreekt ondertiteling, dan vraag ik erom

Zelf gebruik ik Facebook, Twitter, Instagram en LinkedIn. Meestal gebruik ik die voor zakelijke doeleinden en het delen van mijn blogs en nieuws. In het algemeen lees ik nieuwsberichten, leuke berichtjes van mijn vrienden, mijn favoriete bekende Nederlanders en van een paar televisieprogramma’s, zoals ‘Boer zoekt vrouw’ en ‘Een huis vol’.

De meeste video’s die ik tegenkom zijn voorzien van ondertiteling, zoals die van Hugo de Jonge, Rick Brink en een paar bekende Nederlanders. Mocht ik een belangrijke video tegenkomen van een organisatie of stichting die geen ondertiteling heeft gebruikt, dan vraag ik via een berichtje netjes om ondertiteling te plaatsen met een uitleg erbij over mijn doofheid en dove mensen. Ze reageren meestal netjes dat ze eraan zullen werken in de toekomst.

een mobiele telefoon met logo's van diverse sociale media

Niet alleen voor doven

Wat mij opvalt, is dat sommige video’s zoals die van nieuwsuitzendingen soms wel en soms niet ondertiteld zijn. Omdat het belangrijke kanalen zijn voor nieuws, vind ik dat de video’s altijd van ondertiteling moeten zijn voorzien. Het is niet alleen fijn voor doven en slechthorenden, maar ook voor mensen met een taalontwikkelingsstoornis (TOS), laaggeletterde mensen en mensen die de Nederlandse taal niet voldoende beheersen. Zij kunnen ook leren van het lezen van de Nederlandse ondertiteling.

Het is eenvoudig om bij een video op YouTube of Facebook ondertiteling te plaatsen. In deze video zie je hoe dat moet.

Wie meer wil weten over (on)toegankelijkheid van de ondertiteling, kan mijn eerdere blog over dit onderwerp lezen.

5 Tips voor het maken van een toegankelijke app

Door Apps & Websites

De focus van digitale toegankelijkheid ligt vaak op het gebruik van websites. Echter ontstaan er ook toegankelijkheidsproblemen bij mobiele applicaties (apps). Waar websites zowel via een desktop computer als via mobiele apparaten worden bereikt, geldt dat apps vrijwel altijd alleen op mobiele apparaten gebruikt worden. De focus voor optimalisatie ligt dus alleen op mobiel gebruik, wat het proces enigszins eenvoudiger maakt.

Maar, voor wie is het eigenlijk verplicht om een digitaal toegankelijke app te hebben? En, hoe zorg je ervoor dat jouw app voor iedereen te gebruiken is? In dit artikel vertellen we je meer over de toegankelijkheid van mobiele applicaties en geven we je een aantal tips.

Toegankelijke apps: wat is er verplicht?

Net als bij websites, is de wetgeving voor de toegankelijkheid van apps momenteel enkel gericht op overheidsinstanties. Vanaf 23 juni 2021 moeten alle apps van overheidsinstanties voldoen aan de webrichtlijnen van de WCAG. Eerder hebben we al toegelicht wat de webrichtlijnen zijn, hieronder staan enkele korte tips specifiek gericht op het gebruik van apps.

1. Gebruik de WCAG als richtlijn

De webrichtlijnen zijn niet voor niets opgesteld. Deze criteria bieden een ontzettend waardevolle schat aan informatie omtrent toegankelijkheid, ook voor mobiele applicaties. Zo is het bijvoorbeeld belangrijk voor apps om te kiezen voor voldoende kleurencontrast (minimaal 4,5:1) tussen tekst en achtergrond, zodat ook mensen met een visuele beperking informatie goed kunnen lezen. 

Andere tips voor het toegankelijk maken van een website zijn ook toe te passen op apps. Zorg er bijvoorbeeld voor dat gebruikers de app tot 200% kunnen inzoomen zonder dat deze zijn functionaliteiten verliest, voorzie afbeeldingen van alternatieve beschrijvingen voor schermlezers en voorzie video’s van ondertiteling. 

Een voorbeeld van een digitaal toegankelijke app

De app Stopcoach van Brthrs is een mooi voorbeeld van een digitaal toegankelijke app. © Brthrs

2. Zorg voor een duidelijke navigatie

Maak het gebruikers van je app eenvoudig om hun doel te vinden door rekening te houden met de navigatiestructuur van de app. In het voorbeeld van de Stopcoach-app hierboven is de navigatiestructuur duidelijk te zien. Knoppen zijn onder elkaar weergegeven, steken duidelijk af tegenover de achtergrond en de informatie en iconen op de knoppen geeft een beeld van de functie. 

Andere handig tips zijn bijvoorbeeld het bieden van een ‘terug-knop’, waarmee gebruikers altijd naar de vorige pagina kunnen gaan, of het weergeven van een ‘broodkruimelspoor’. Deze ‘broodkruimels’ geven de route aan die gebruikers genomen hebben, bijvoorbeeld van ‘home’ naar ‘diensten’ en vervolgens naar ‘toegankelijkheid’. Zo weet de gebruiker altijd waar hij vandaan komt en hoe hij terug kan.

man in de rug gezien gebruikt een app op zijn mobiele telefoon

3. Test prototypes en bestaande apps

De omvang en de onduidelijkheid van de WCAG-richtijnen hoeven niet in de weg te staan van het maken van een toegankelijke app. De droge informatie uit de WCAG is tenslotte gebaseerd op de gebruikservaring. Door de eindgebruikers van de app te betrekken bij het ontwerpen van een nieuwe app of een update, kan direct rekening worden gehouden met hun gebruikservaring. Voor het beste beeld van de toegankelijkheid van een prototype of bestaande app stel je dus een diverse testgroep samen. De input van zo’n testsessie kan vervolgens gebruikt worden om de puntjes op de i te zetten of voor het bepalen van een digitale strategie.

Digitaal Toegankelijk.nl helpt met het samenstellen van zulke testgroepen. Op basis van een aanvraag en intake wordt een groep samengesteld die uiteindelijk de app of website gaat testen. Op deze manier wordt de doelgroep betrokken bij het belangrijkste traject, de ontwikkeling van de app. Lees meer over het samenstellen van een testgroep voor de toegankelijkheid van apps

4. Begin zo vroeg mogelijk met toegankelijkheid 

Helaas staat digitale toegankelijkheid vaak laag op de prioriteitenlijst. Hierdoor verschuift het toegankelijk maken van een app in veel gevallen naar het einde van een ontwikkeltraject. Zonde, want hoe later aan de toegankelijkheid van een app wordt gewerkt, hoe meer tijd en geld dit over het algemeen kost. Digitaal Toegankelijk.nl en andere partijen kunnen adviseren over hoe je vanaf de start op een overzichtelijke manier rekening houdt met de toegankelijkheid van een app, zonder daar veel meer geld aan uit te hoeven geven. Dit advies kan vervolgens gebruikt worden bij het ontwikkelen van de app. 

iemand heeft een telefoon in één hand, een pen in de andere hand

5. Maak het team bewust van het belang van toegankelijkheid

Een van de oorzaken van de lage prioriteit die vaak aan toegankelijkheid wordt gegeven berust op onwetendheid. Mensen zijn zich vaak simpelweg niet bewust van de drempels die ontoegankelijke apps en websites kunnen zijn voor mensen met een beperking. Door met een geheel team gezamenlijk de materie in te duiken wordt er een breder draagvlak voor toegankelijkheid gecreëerd binnen een organisatie. 

Lees samen bijvoorbeeld eens de highlights uit de WCAG, bekijk onze kennisbank of ga aan de slag met het kaartspel Denken in beperkingen. Dit spel laat jou en je team op een laagdrempelige manier kennismaken met digitale toegankelijkheid. 

Hoe Slack zorgt voor een gebruiksvriendelijke ervaring voor alle gebruikers

Door Apps & Websites

De ergernissen rondom mailverkeer zullen bij veel mensen die op kantoor werken bekend zijn. Niet alleen stroomt een mailbox zo vol met tientallen mails, ook is het eigenlijk een zeer onoverzichtelijke manier van interne communicatie. Het eindeloos doorzoeken van mailboxen naar dat ene mailtje of dat ene document is voor niemand een plezier. Het is daarom niet voor niets dat veel bedrijven alternatieven hebben omarmd voor de interne communicatie. Eén van deze alternatieven is het communicatiehulpmiddel Slack

logo van slack

Wat is Slack?

Slack staat voor ‘Searchable Log of All Conversation and Knowledge’, ofwel ‘doorzoekbaar logboek van alle gesprekken en kennis’. De software stelt kleine en grote teams in staat om de interne communicatie te stroomlijnen. Dit gebeurt via chatfuncties die gebruikers in staat stellen om hele groepen te adresseren of juist privé-berichten te versturen. De populariteit van het platform is waarschijnlijk grotendeels te danken aan de vele integraties met andere platformen, zoals Google Drive, Dropbox, GitbHub en Zendesk.

Een platform dat wereldwijd door meer dan 12 miljoen mensen gebruikt wordt heeft een zekere verantwoordelijkheid om ervoor te zorgen dat iedereen de software probleemloos kan gebruiken. Hoe zorgt Slack ervoor dat de gebruikservaring voor iedereen prettig is?

Navigeren via het toetsenbord

Slack maakt navigeren via een toetsenbord gemakkelijker met een aantal handige snelkoppelingen. Zo kunnen gebruikers eenvoudig tussen verschillende chats en berichten navigeren, nieuwe gesprekken openen of berichten lezen. 

Wil je alle snelkoppelingen opvragen in Slack? Gebruik dan ‘⌘ + /’ op Mac of ‘Ctrl + /’ op Windows en Linux. Deze snelkoppelingen komen ook in beeld wanneer er wordt genavigeerd via een toetsenbord. Ook worden de geselecteerde elementen goed weergegeven en krijgen functionele emoji’s een korte beschrijving wanneer deze worden geselecteerd. Handig!

Screenshot van Slack waarin de shortcuts te zien zijn op het moment dat je toetsenbord wilt gebruiken

Screenshot van Slack waarin je ziet dat hij bij navigeren via toetsenbord aangeeft wat emoticons betekenen

Slack met een schermlezer

Ook is er rekening gehouden met Slack-gebruikers die een schermlezer gebruiken om de berichten te ‘lezen’. Schermlezers zijn software die geschreven tekst voor gebruikers voorlezen. Zo kunnen blinden en slechtzienden ook berichten, mail en andere geschreven tekst ‘lezen’. Een voorbeeld van een schermlezer is Apple’s Voice Over. In onderstaande video is te zien hoe Digitaal Toegankelijk’s Ed zijn schermlezer gebruikt. 

Thumbnail van de video van Blinde Ed die uitlegt hoe Voice Over werkt

In de broncode van Slack is rekening gehouden met de elementen die schermlezers nodig hebben om structuur in een pagina te zien, de zogenaamde ARIA landmarks. Ook heeft Slack meerdere snelkoppelingen voor het navigeren door deze ARIA elementen. Op VoiceOver gaat dit bijvoorbeeld via ‘⌘ + Option + U’, op NVDA is die via ‘D’ en op JAWS is de snelkoppeling ‘:’.

Weergave van Slack en notificaties

Niet alleen is er rekening gehouden met de navigatie van Slack, ook de weergave van onderdelen van het platform zijn aanpasbaar naar de wensen van gebruikers. Zo kunnen de bewegende emoji’s die meldingen weergeven bijvoorbeeld stop worden gezet. Dit kan via ‘Preferences -> Accessibility -> Animation ->Allow animated images and emoji’. 

Daarnaast is het mogelijk om het contrast van de achtergrond en elementen van Slack aan te passen. Gebruikers kunnen kiezen voor de dark mode of donkere modus. Deze optie zorgt ervoor dat lichte kleuren vervangen worden door donkere kleuren. Om deze optie te selecteren kunnen gebruikers naar ‘Preferences -> Themes -> Dark’. De onderstaande slider geeft het verschil tussen het lichte en donkere thema weer.

Screenshot van de dark mode van Slack

Een andere toegankelijkheidsoptie in Slack is het kunnen inzoomen van de content. Zo voldoet Slack aan één van de WCAG-eisen, namelijk dat webcontent tot 200% ingezoomd moet kunnen worden en nog steeds bruikbaar moet zijn. Naast de standaard zoomoptie via webbrowsers kunnen Mac gebruikers met ‘⌘ + +’ en ‘⌘ + -’ in- en uitzoomen. Voor Windows en Linux gebruikers is dit ‘Ctrl + +’ en ‘Ctrl + -’. 

Toegankelijkheidsopties van software

Digitaal Toegankelijk.nl zet zich in voor een toegankelijker internet. Daarom zijn we constant op zoek naar zowel uitblinkers op dit gebied als platformen die verbetering nodig hebben. Eerder bespraken we al de mogelijkheden voor het creëren van een toegankelijk contactformulier via WordPress. Welke software of welk platform verdient volgens jou een digitaal compliment? Wellicht heb je juist ergens verbeterpunten gezien. Laat het ons weten via de [email protected] of via het reactieformulier hieronder.  

Een digitaal toegankelijk contactformulier maken in WordPress

Door Apps & Websites, Tips & Trics

Volgens Marketingfacts is zo’n 35% van het totaal aantal websites op het internet gemaakt met het content managing system (CMS) WordPress. Ook in Nederland is dit CMS flink populair. De populariteit van WordPress zal vooral te danken zijn aan het feit dat de dienst gratis is en vertaald in meer dan vijftig talen.

telefoon ligt op een stapel formulieren. Op de telefoon is een briefje geplakt met de tekst 'Sign here'

Zelf werk ik ook graag met WordPress, om meerdere redenen. Ten eerste zijn WordPress-websites relatief eenvoudig te voorzien van extra modules of functionaliteiten. Het CMS kent een groot aantal (vaak gratis) plugins. Deze aanvullende stukken software stellen de website-eigenaar in staat om bijvoorbeeld extra beveiliging te installeren, de website beter vindbaar te maken op het internet of om een contactformulier op te stellen.

Ondanks dat WordPress een relatief toegankelijk CMS is, gaan developers met contactformulieren dikwijls de mist in op het gebied van toegankelijkheid. Terwijl deze formulieren vaak een belangrijke functie vervullen op een website. In dit artikel licht ik toe hoe je ervoor zorgt dat WordPress contactformulieren voor iedere bezoeker toegankelijk zijn.

Algemene WordPress instellingen

Voordat je aan de slag gaat met het checken en verbeteren van een contactformulier is het verstandig om eerst naar de algemene website te kijken. Is de website bijvoorbeeld te gebruiken met alleen een toetsenbord? Voldoet je website eigenlijk aan de juiste contrastratio’s? En, kunnen schermlezers visuele elementen wel herkennen en oplezen?

Het lijkt overweldigend en dat is het ook wel redelijk. Gelukkig kun je ook zonder (veel) technische kennis redelijk eenvoudig een inzicht krijgen in de toegankelijkheid van je website. Eerder schreef ik een handleiding zelf de toegankelijkheid van je website testen. Daarnaast kun je voor WordPress websites eenvoudig voorzien van extra toegankelijkheidsopties met de WP Accessibility plugin.

Digitaal toegankelijke contactformulieren met Gravity Forms

Voor het toegankelijk maken van formulieren zijn aanvullende stappen vereist. Ondanks dat de broncode achter Gravity Forms voldoet aan de WCAG 2.1 AA, zijn de contactformulieren die deze plugin creëert niet vanzelfsprekend volledig toegankelijk.

Algemene Gravity Forms instellingen

Ga naar de instellingen van Gravity Forms (via het linkermenu in de backend van WordPress) en vink hier de volgende opties aan:

  • CSS uitvoeren: Ja
  • HTML5 uitvoeren: Ja

Formulier-instellingen

Om de instellingen van een los formulier aan te passen klik je in de WordPress backend bij het betreffende formulier op instellingen. Hier vink je de volgende instellingen aan:

  • Plaatsing label: Boven uitgelijnd
  • Plaatsing sub-label: Boven invoer
  • Formulierknop: Hier krijg je de keuze tussen tekst en afbeelding, klik op tekst
  • Formulierknop voorwaardelijke logica knop: vink deze optie niet aan

Ontoegankelijke formuliervelden

Gravity Forms kent een aantal soorten formuliervelden die niet door iedere bezoeker te gebruiken zijn. Deze zijn:

  • Multi-keuzelijst
  • HTML blokken met essentiële tekst
  • Sectie
  • reCAPTCHA V2. Als alternatief kan de anti-spam honeypot optie worden gebruikt, deze is terug te vinden in de formulier-instellingen. Wel een CAPTCHA gebruiken? Lees meer over het maken van een digitaal toegankelijke CAPTCHA.

De instellingen van de formuliervelden

Ook in de instellingen van specifieke formuliervelden zijn er enkele belangrijke punten waar rekening mee moet worden gehouden. Deze vind je wanneer je op een het driehoekje van een veld klikt:
Het scherm waarop de instellingen gekozen kunnen worden voor het invullen van een veld in gravity forms

    • Label veld: vul hier een beschrijving van de tekst in die ingevuld moet worden, bijvoorbeeld ‘e-mailadres’
    • Zichtbaarheid label veld: gebruik altijd een zichtbaar label, gebruik nooit de optie om het label te verbergen
    • Plaatsing beschrijving: selecteer ‘Boven invoer’
    • Aangepast validatiebericht: Schrijf hier een korte beschrijving van de foutmelding, bijvoorbeeld ‘het invullen van je e-mailadres is verplicht’

Toestaan dat veld dynamisch wordt gevuld: vink deze optie niet aan

Met behulp van deze instellingen wordt je contactformulier voor een groter publiek bruikbaar. Toch kan het zijn dat de website of het formulier ondanks deze wijzigingen niet voldoet aan de webrichtlijnen van de WCAG. Om hier zeker van te zijn kan de website getest worden door mensen met een beperking. Op deze manier vallen niet alleen softwarematige gebreken op, maar ook gebruiksvriendelijke valkuilen.

Digitaal toegankelijke contactformulieren met Contact Form 7

Een andere zeer populaire plugin voor het creëren van contactformulieren is Contact Form 7 (CF7). Ook hier zijn de standaardinstellingen van formulieren niet digitaal toegankelijk. Vergeleken met Gravity Forms verschilt de manier waarop de formulieren zijn opgebouwd sterk. Bij Contact Form 7 zijn gebruikers aangewezen op HTML.

De standaard code van CF7 ziet er als volgt uit:

<label> Je naam
    [text* your-name] </label>

<label> Je e-mailadres
    [email* your-email] </label>

<label> Onderwerp
    [text* your-subject] </label>

<label> Je bericht (optioneel)
    [textarea your-message] </label>

[submit “Verzenden”]

 

Om deze code toegankelijk te maken is het van belang om de standaard code aan te passen naar het volgende:

<p><label for=”naam”>Je naam (verplicht)</label> [text* your-name id=”naam”] </p> 

<p><label for=”email”>Je e-mailadres (verplicht)</label> [email* your-email id=”email”] </p>

<p><label for=”onderwerp”>Onderwerp (verplicht)</label> [text your-subject id=”onderwerp”] </p> 

<p><label for=”bericht”>Je bericht</label> [textarea your-message id=”bericht”] </p> <p>[submit “Verzenden”]</p>

 

 

Digitaal toegankelijke WordPress websites ontwikkelen

Digitaal Toegankelijk.nl is dé specialist op het gebied van online inclusiviteit. Wij helpen organisaties en ondernemingen bij het opsporen en verhelpen van problemen op het gebied van digitale toegankelijkheid. Wil je meer weten over het bouwen van een toegankelijke WordPress website? Lees dan verder op de pagina Hoe maak ik mijn WordPress-site digitaal toegankelijk of neem contact op met onze specialisten.

Regels rondom toegankelijkheid van apps voor (semi-)overheid

Door Apps & Websites, WCAG, Wetgeving

Digitale toegankelijkheid gaat verder dan inclusieve websites. En dat is maar goed ook. Meer dan 4 miljoen Nederlanders hebben een beperking. Denk hierbij niet alleen aan mensen die blind, doof of immobiel zijn, maar ook aan dyslexie, kleurenblindheid en cognitieve beperkingen. Ook deze 4 miljoen mensen zijn, net als de rest van Nederland, afhankelijk van digitale producten van de overheid.

Daarom is het goed dat er verplichtingen worden gesteld op het gebied van digitale toegankelijkheid. Hiermee verplicht de overheid (semi-)overheidsinstanties om hun diensten en producten voor iedereen toegankelijk te maken. Momenteel geldt deze verplichting alleen voor websites van (semi-)overheidsinstellingen, maar hier komt binnenkort verandering in.

Deadline toegankelijkheid apps (semi-)overheidsinstellingen

Vanaf 23 juni moeten mobiele applicaties (apps) van (semi-)overheidsinstellingen ook voldoen aan de WCAG 2.1 niveau AA richtlijnen. Dit wordt vanuit de overheid verplicht middels het Tijdelijk besluit digitale toegankelijkheid. De verplichting voor apps gaat bewust later van kracht dan die voor websites. Hierdoor probeert de overheid de instanties de benodigde tijd te geven om aan de richtlijnen te voldoen. En dit is niet voor niets.

iemand houdt telefoon vast en heeft daarnaast op een laptop aanstaan

Gratis Quickscan apps

Wij bieden (semi-)overheidsorganisaties nu een gratis Toegankelijkheids-Quickscan aan voor hun app(s). De quickscan geeft een overzicht van de belangrijkste aandachtspunten waar vanuit u verder kunt ontwikkelen.

Meer over de Quickscan

Verplichte richtlijnen apps overheidsinstellingen

De richtlijnen waar apps aan moeten voldoen zijn niet eenvoudig te begrijpen, laat staan toe te passen. Om het inzicht in de WCAG te vereenvoudigen heeft Digitaal Toegankelijk.nl de richtlijnen toegankelijk uitgelegd

Enkele belangrijke voorwaarden waar apps van (semi-)overheidsinstanties aan moeten voldoen zijn bijvoorbeeld:

Kleurcontrast

Voldoet de tekst op de app aan de verplichte contrastratio van 4,5:1?

Waarom: zodat de tekst ook voor bijvoorbeeld kleurenblinden of mensen met een andere visuele beperking goed te lezen is.

Beschrijvingen

Hyperlinks en afbeeldingen moeten voorzien worden van een alternatieve beschrijving die vertelt waar de link de gebruiker heen verwijst of wat er in de afbeelding te zien is.

Waarom: zo kunnen gebruikers van schermlezers ook de inhoud en het doel van een pagina begrijpen. Lees meer over het schrijven van alternatieve beschrijvingen.

Ondertiteling van video’s

Video’s worden helaas nog steeds niet standaard voorzien van ondertiteling. Ook video’s in apps hebben volgens de WCAG ondertiteling nodig.

Waarom: zodat gebruikers met een auditieve beperking ook de boodschap van een video meekrijgen.

Minder dan drie flitsen

Bewegende en flitsende inhoud trekt weliswaar de aandacht van gebruikers, maar het kan ook een negatieve impact hebben. Volgens de WCAG mag inhoud niet vaker dan drie keer per seconde flitsen.

Waarom: op deze manier wordt een veilige app-ervaring geboden, ook voor gebruikers met bijvoorbeeld epilepsie.

Toegankelijkheidsonderzoek

Deze kenmerken zijn redelijk eenvoudig te controleren. Andere, meer technische vereisten zijn moeilijker te doorgronden. Hiervoor is het van belang om een toegankelijkheidsonderzoek uit te laten voeren.

In dit onderzoek wordt onderzocht of de app aan de WCAG normen voldoet. De onderzoeken van Digitaal Toegankelijk.nl gelden als officieel toegankelijkheidsonderzoek. Aan de start van een toegankelijkheidsonderzoek staat de gratis quick scan die Digitaal Toegankelijk.nl aanbiedt. Direct vrijblijvend inzicht in de status van een app? Neem dan direct contact op met onze specialisten.

iemand zit achter laptop waar een telefoon aan is gekoppeld en is aan het programmeren

Voldoen aan de verplichting

Uit onderzoek blijkt dat twee maanden voor de deadline nog geen enkele geregistreerde (semi-)overheidsapp volledig voldoet aan de toegankelijkheidseisen. Maar, hoe voldoe je als organisatie wél aan deze eisen?

Om te voldoen aan de verplichting digitale toegankelijkheid voor apps van overheidsinstellingen zijn meerdere stappen vereist. De eerder genoemde gratis quick scan is een handig beginpunt. Hierna wijst een officieel toegankelijkheidsonderzoek uit in welke mate de app momenteel voldoet aan de WCAG 2.1 niveau AA. 

Dit toegankelijkheidsonderzoek resulteert vervolgens in de nodige input voor de volgende stap: een toegankelijkheidsverklaring. In deze verklaring geven organisaties aan welke maatregelen worden genomen om de app volledig toegankelijk te maken én te houden. Het wordt aangeraden om deze verklaring zo vroeg mogelijk voor de uiteindelijke deadline te publiceren. Zo hebben organisaties ruimte om apps klaar te maken voor 23 juni. 

Gratis Quickscan voor (semi-)overheid

Met de gratis Quickscan testen we uw app op:

Aanpasbaarheid grootte en dikte tekst

Donkere modus

Scherm inzoomen

iphone met daarin een scherm van de app 'Denken in beperkingen'

Herstel door schudden

Selectie uitspreken

Aanpasbare transparantie

Twee maanden voor deadline: geen enkele geregistreerde (semi-)overheidsapp voldoet volledig aan toegankelijkheidseisen

Door Apps & Websites, WCAG, Wetgeving

Over slechts 8 weken – op 23 juni 2021 – moeten apps van overheidsinstanties voldoen aan het ‘Besluit digitale overheid’. Sinds vorig jaar september gold dit al voor websites, nu moeten overheidsinstanties zorgen dat ook hun mobiele apps voldoen aan de toegankelijkheidseisen. Met de deadline voor de deur zou je verwachten dat overheidsinstanties druk bezig zijn met de toegankelijkheid van hun apps, daar lijkt het echter niet op.

man met rode trui houdt iphone vast

Toegankelijkheidseisen

Om te voldoen aan de toegankelijkheidseisen, moeten apps een zogenaamde toegankelijkheidsverklaring (laten) opstellen voor hun app. In zo’n verklaring is opgenomen in hoeverre de app op dat moment voldoet aan de toegankelijkheidseisenen. Daarnaast wordt in de verklaring gesteld welke acties de organisatie onderneemt om de app toegankelijk te houden, of deze juist toegankelijker te maken. Volgens de overheid is deze verklaring niet alleen een verantwoording aan de politiek, maar ook een uitleg aan gebruikers van de app.

Slechts 22 apps geregistreerd

Deze verklaringen worden gepubliceerd in het Register van toegankelijkheidsverklaringen. In het register zijn momenteel slechts 22 apps geregistreerd. Terwijl de Rijksoverheid alleen al 37 apps in de Appstore heeft, om nog te zwijgen over de 355 Nederlandse gemeentes die allemaal minimaal 1 app hebben. Veel belangrijke overheidsapps missen, zoals de DigiD-app en de Berichtenbox-app van de Rijksoverheid.

Geen enkele app voldoet volledig

Zoals aangegeven, staat in de toegankelijkheidsverklaring vermeld in hoeverre de app op dat moment voldoet aan de eisen. Daarin zijn vier verschillende niveaus te onderscheiden:

A. Voldoet volledig

B. Voldoet gedeeltelijk

C. Eerste maatregelen genomen

D. Voldoet niet

Apps die niet voldoen aan de eisen, hebben enkel een verklaring aangevraagd, nog geen toegankelijkheidsonderzoek gedaan (categorie C) of voldoen simpelweg helemaal niet (categorie D).

Wanneer een app gedeeltelijk voldoet (categorie B), betekent dit dat er een officieel toegankelijkheidsonderzoek is gedaan waaruit is gebleken dat de website nog niet 100 procent voldoet aan de eisen.

Uit het register blijkt dat er van de 22 apps, maar 2 apps zijn die gedeeltelijk voldoen (categorie B) en geen enkele app is die volledig voldoet:

Eerste maatregelen genomen: 11
Voldoet Niet: 9
Voldoet gedeeltelijk: 2
Voldoet volledig: 0

Robert Keus, initiatiefnemer van DigitaalToegankelijk.nl“De afgelopen jaren hebben veel overheden apps in de ban gedaan. Apps zijn namelijk duurder in onderhoud. Daarnaast heeft men de handen vol aan het toegankelijk maken van de website. Zeker met de huidige wetgeving rondom toegankelijkheid denken overheidsinstanties nu wel twee keer na voordat ze apps (door-)ontwikkelen. In mijn ogen is dit heel jammer, apps zijn voor bepaalde toepassingen zeer functioneel. Het is zonde als deze apps niet worden ontwikkeld om deze reden.”

Gratis quickscan

Er lijkt nog een hoop werk te liggen om de deadline van 23 juni 2021 te kunnen halen. Daarom willen we alle (semi-)overheidsinstanties een gratis quickscan aanbieden. Ben je hierin geïnteresseerd? Meld je dan hier aan.

Zelf de toegankelijkheid van een website testen

Door Apps & Websites, Tips & Trics

Het testen van een website op toegankelijkheid kun je op verschillende manier doen. Voor overheidsinstanties is het verplicht om een toegankelijkheidsonderzoek uit te laten voeren door een organisatie die hiervoor bevoegd is, zoals Digitaal Toegankelijk.nl. Ook zonder verregaande technische kennis of programmeervaardigheden is het mogelijk om de toegankelijkheid van een website te peilen. Hierdoor krijg je inzicht in de huidige situatie, zodat je zelf gerichte stappen kunt zetten om de website inclusiever te maken.

meisje met een telefoon in de hand zit bij een laptop en lacht

In dit artikel worden enkele manieren besproken om zelf de toegankelijkheid van een website te testen. De hieronder beschreven methodes geven slechts een indicatie van de toegankelijkheid van een website, ze bieden geen volledig beeld. Voor een volledig beeld is het belangrijk om een toegankelijkheidsonderzoek uit te laten voeren.

Waar moet je op letten?

Zo divers als mensen zijn, zo allesomvattend is digitale toegankelijkheid. Waar moet je op letten bij het testen van toegankelijkheid? Als het de eerste keer is dat je in de wereld van de toegankelijkheid duikt, kan het overweldigend overkomen.

Digitale toegankelijkheid wordt gemeten aan de hand van de webrichtlijnen van de WCAG. Hierin staat per onderdeel van de website beschreven hoe deze zo toegankelijk mogelijk gemaakt kan worden. Zo worden onder andere de content, afbeeldingen, techniek en multimedia van websites besproken. Met deze handige WCAG checklist wordt het nalopen van een website een stuk eenvoudiger. 

Hoe test je de toegankelijkheid van een website zelf?

Maar, hoe loop je de punten van de WCAG na? Hieronder staan verschillende methoden die zonder technische kennis uitgevoerd kunnen worden. 

meisje zit op een gele stoel met een telefoon in de hand

1. Navigatie met het toetsenbord 

Niet iedere internetgebruiker navigeert op dezelfde manier. Het gebruik van een muis is niet voor iedereen vanzelfsprekend. Voor mensen die een motorische beperking hebben kan het gemakkelijker zijn om het toetsenbord te gebruiken, in plaats van de muis. Check dus of jouw website te gebruiken is met het toetsenbord.

Dit doe je door met de tabtoets naar onderdelen van de site te navigeren. De combinatie shift-tab wordt gebruikt om naar een vorig element te gaan. Het is aan te raden om op deze wijze meerdere pagina’s van de site door te lopen. Probeer bijvoorbeeld eens een contactformulier in te vullen of op een bepaalde pagina te eindigen. (WCAG 2.1.1 & 2.1.2)

Optimalisatie-tips voor navigatie met het toetsenbord

  • Highlight het geselecteerde element met een duidelijk contrasterende kleur. Hierdoor is het eenvoudig te zien welk onderdeel momenteel geselecteerd wordt. In de onderstaande screenshot is een voorbeeld te zien vanuit de header van Digitaal Toegankelijk.nl. (WCAG 2.4.7)
  • Daarnaast is het mogelijk om extra opties te bieden voor toetsenbordgebruikers. Deze verschijnen vaak wanneer iemand een website opent en de tabtoets indrukt. Via deze opties kunnen gebruikers direct naar de hoofdcontent springen, zodat ze niet het hele menu door hoeven te lopen.

Screenshot van de header van Digitaal Toegankelijk.nl, waarin te zien is dat het geselecteerde element gehighlight is door een kader eromheen.

2. Inzoomen 

Om aan de richtlijnen van de WCAG te voldoen, moet de content op je website vergroot kunnen worden tot 200% en daarbij niet aan bruikbaarheid inboeten. Hierdoor stel je bezoekers met een visuele beperking in staat om gebruik te maken van je website. (WCAG 1.4.4)

Optimalisatie-tips voor vergroten tot 200%

Beperk je tijdens het testen niet tot één browser, maar gebruik ook andere browsers. 

3. Toegankelijkheid getest door Lighthouse

Gelukkig hoeft niet alles handmatig getest te worden. Wist je dat er een handige tool voor het testen van digitale toegankelijkheid in Google Chrome zit ingebouwd? Deze tool heet ‘Lighthouse’ en je vindt hem in Google’s Developers Tools. Deze optie is op twee manieren te openen. De eerste optie is door via een klik op de rechtermuisknop naar ‘Inspect’ of ‘inspect element’ te klikken. De tweede manier is via snelkoppelingen vanuit het toetsenbord. Voor Mac computers is dit Control, Command en C, voor Windows computers is dit Control, Shift en I. 

screenshot van de pop-up die je ziet als je klikt op je rechtermuisknop. Je kunt dan kiezen voor 'Inspect' om Lighthouse te openen.

Via de twee pijltjes in de taakbalk kom je bij het de optie ‘Lighthouse’. De pijltjes zijn in onderstaande afbeelding te zien.

Screenshot van het Inspect venster, waarin je vervolgens op Lighthouse kunt klikken.

Eenmaal in het menu van Lighthouse is het mogelijk om de website op toegankelijkheid (Accessibility) te laten testen. Google geeft in het rapport dat volgt foutmeldingen aan voor contrastratio’s, navigatieproblemen, missende beschrijvingen en andere onderdelen uit de WCAG. Naast het benoemen van de problemen worden er ook direct mogelijke oplossingen aangedragen. Handig beginpunt voor het verbeteren van de toegankelijkheid van je website!

4. Screenreaders

Volgens het Oogfonds kent Nederland zo’n 250.000 mensen met een visuele beperking. Deze groep is tijdens het surfen op het net afhankelijk van schermlezers om geschreven content te begrijpen. Deze software leest webpagina’s, WhatsApp-gesprekken en andere apps voor aan gebruikers. Een bekend voorbeeld van een schermlezer is Apple’s VoiceOver. Deze software zit standaard ingebouwd in iPhones. 

handen bij een screenreader

Door zelf een schermlezer te installeren/gebruiken via je laptop of smartphone krijg je enorm veel inzicht in de gebruiksvriendelijkheid van je website. Het is wel belangrijk om je website dan eerlijk te testen en je ogen volledig gesloten te houden. Zo ervaar je de navigatie via een schermlezer het beste.

Alt-tekst

Maar, hoe zorg je ervoor dat schermlezers weten wat er op een website vermeld staat? Software kan immers geen afbeeldingen ‘lezen’. Het eerste punt is afbeeldingen en hyperlinks te voorzien van beschrijvingen. Op deze manier kunnen schermlezers ook visuele content oplezen aan gebruikers. Lees voor tips het artikel over het maken van alternatieve beschrijvingen

Daarnaast is het van belang dat schermlezers begrijpen hoe onderdelen van de website gestructureerd zijn, zodat de content in chronologische volgorde getoond kan worden. Eerder verzamelde we de belangrijkste punten voor optimalisatie voor schermlezers.

Website laten testen

Het ligt voor de hand, maar je gaat de website zelf nooit zo goed kunnen testen als andere gebruikers wel zouden kunnen. De beste (onofficiële) methode om te testen is door de website door iemand met een beperking te laten gebruiken. De kans is groot dat deze testers tegen struikelblokken aanlopen die jij zelf niet had gezien. 

Digitaal Toegankelijkheid.nl verbindt website-eigenaren en testers met elkaar. In een (digitale) testsessie vragen we leden van ons testpanel om hun eerlijke oordeel te geven over jouw website, app of ander digitaal product. Meer weten? Neem vrijblijvend contact met ons op!