Beginnersgids toegankelijkheid testen
Met de test op deze pagina kun je zelf al een goede eerste indruk krijgen van de toegankelijkheidsstatus van de app. Hiermee kun je met 20% van de moeite waarschijnlijk al tot 80% van de fouten vinden.
Aanpak
Een app testen op de volledige WCAG succescriteria is erg omvangrijk en complex. Naast kennis over de richtlijnen heb je tevens kennis van de hulpmiddelen nodig. Als het doel is om een beeld te vormen van toegankelijkheid hoef je niet de hele WCAG richtlijn te kennen. Wij hebben enkele WCAG richtlijnen versimpeld tot een korte uitleg en een vraag.
We gebruiken de hulpmiddelen tekstvergroting, de schermlezer, een meting van contrast en stellen daarbij de volgende 15 vragen.
Testen zonder hulpmiddel
Zonder hulpmiddel kun je de onderstaande punten testen.
Is er ondertiteling beschikbaar bij video?
Bij het publiceren van een video moet er ondertiteling zijn, zelfs bij live video. Hierdoor kunnen mensen die ondertiteling nodig hebben de inhoud ook direct tot zich nemen.
Succescriterium 1.2.2 - Ondertitels voor doven en slechthorenden (vooraf opgenomen) - Niveau AZijn details die je ziet in video’s beschreven?
Als er belangrijke informatie te zien is die je niet kunt horen moet je de informatie beschrijven. Dit doe je door een geluidsspoor aan te bieden waar de visuele informatie in beschreven wordt. Op deze manier kunnen mensen die blind zijn alle informatie horen.
Succescriterium 1.2.3 - Audiodescriptie of media-alternatief (vooraf opgenomen) - Niveau ADraait de inhoud van het scherm mee als je je toestel draait?
Gebruikers in een rolstoel hebben hun toestel soms horizontaal gemonteerd. De inhoud van het scherm moet meedraaien met de weergave van het toestel. Ondersteun een verticale en horizontale weergave.
Succescriterium 1.3.4 - Weergavestand - Niveau AAIs het bij een formulier duidelijk welke gegevens verwacht worden en welke velden verplicht zijn?
Zorg voor duidelijke instructies wanneer je vraagt om gegevens in te vullen. Voeg een label toe aan de invoervelden, bijvoorbeeld ‘Voornaam’. Geef het aan indien gegevens volgens een vastgestelde volgorde ingevuld moeten worden. Markeer velden wanneer ze verplicht zijn.
Succescriterium 3.3.2 - Labels of instructies - Niveau ATekstvergroting
Op de telefoon kun je bij de systeeminstellingen tekstvergroting aanzetten. Dit werkt op alle devices anders maar als je zoekt op “tekst” in de systeeminstellingen zie je de optie testgrootte staan. Als je deze dan op maximaal zet kun je vervolgens zien of jouw app gebruik maakt van groot lettertype en of dit niet tot fouten leidt.
Wordt tekst groter weergeven wanneer je een groter lettertype hebt ingesteld?
Voor slechtziende gebruikers is het belangrijk dat tekst vergroot kan worden. Via de systeeminstellingen geven gebruikers hun voorkeur aan voor de lettergrootte. Zorg ervoor dat je app deze instelling gebruikt om tekst automatisch vergroot te weergeven.
Succescriterium 1.4.4 - Herschalen van tekst - Niveau AAIs alle tekst te lezen met het grootste lettertype?
Zorg dat alle inhoud op het scherm ook bij het grootste lettertype te lezen blijft. Inhoud moet te lezen zijn zonder dat er gescrolt hoeft te worden in twee richtingen. Doordat de tekst groter weergeven wordt kan het voorkomen dat andere elementen van het scherm vallen. Maak het mogelijk om deze elementen alsnog te bereiken.
Succescriterium 1.4.10 - Reflow - Niveau AAContrast
Je kunt eenvoudig jouw app testen op contrast. Beantwoord de vragen om een beeld te vormen of jouw app voldoende contrast heeft. Zelf gebruiken wij deze contrastchecker. Maar er zijn diverse tooltjes beschikbaar die contrast kunnen meten.
Is het contrast van normale tekst minimaal 4,5:1?
Het is voor slechtziende en kleurenblinde gebruikers belangrijk dat tekst goed leesbaar is. De contrastverhouding tussen de tekstkleur en achtergrondkleur moet minimaal 4,5:1 zijn. Voor dikgedrukte tekst en grotere tekst voldoet een verhouding van 3:1.
Succescriterium 1.4.3 - Contrast (minimum) - Niveau AAIs het contrast van de inhoud minimaal 3:1?
De inhoud van een scherm moet voor iedereen leesbaar zijn. Dit bereik je door genoeg kleurverschil te gebruiken bij grafische elementen zoals iconen, knoppen en invoervelden. Het contrast moet minimaal 3:1 zijn.
Succescriterium 1.4.11 - Contrast van niet-tekstuele content - Niveau AASchermlezer
Een schermlezer, ook bekend als screen reader, leest voor wat er op het scherm te zien is. Door middel van gebaren kun je door apps heen navigeren en handelingen uitvoeren. Op deze manier is het mogelijk om zonder zicht gebruik te maken van apps. Meer informatie over de schermlezer vind je op de pagina over hulpmiddelen. Als de schermlezer goed werkt dan zullen toetsenbordbediening, stembediening en schakelbediening meestal ook goed werken. De gebaren van de schermlezer kun je oefenen in de screenreader.app.
Is er alternatieve tekst beschikbaar voor alle inhoud zonder tekst?
Mensen die blind zijn maken gebruik van een schermlezer om de informatie op het scherm voor te laten lezen. Zorg ervoor dat er een beschrijving beschikbaar is voor alle inhoud zonder tekst. Denk hierbij aan afbeeldingen, door ze te beschrijven kan de schermlezer voorlezen wat er te zien is.
Succescriterium 1.1.1 - Niet-tekstuele content - Niveau AIs de volgorde van elementen duidelijk voor hulpmiddelen?
Als de volgorde van de inhoud belangrijk is voor de betekenis dan moet je zorgen dat hulpmiddelen dezelfde volgorde gebruiken. Gebruikers navigeren normaal gesproken van links naar rechts en van boven naar onder. Controleer of dezelfde volgorde wordt gebruikt door hulpmiddelen.
Succescriterium 1.3.2 - Betekenisvolle volgorde - Niveau AZijn er plekken in de app waar je vast komt te zitten met het toetsenbord?
Voorkom dat mensen die een extern toetsenbord gebruiken vast komen te zitten in je app. Het komt bijvoorbeeld vaak voor dat pop-ups niet gesloten kunnen worden met het toetsenbord. Je kunt dit voor een groot gedeelte testen met de schermlezer.
Succescriterium 2.1.2 - Geen toetsenbordval - Niveau AWordt de juiste naam, rol en waarde gegeven?
Voor gebruikers met hulpmiddelen moet het duidelijk zijn welke acties ze kunnen uitvoeren. Zorg dat voor alle elementen de naam, rol en waarde bepaald kan worden bepaald. Wanneer je een afbeelding gebruikt als knop, moet je de rol instellen als knop.
Succescriterium 4.1.2 - Naam, rol, waarde - Niveau AIs de opbouw van het scherm duidelijk bij het gebruiken van hulpmiddelen?
Informatie op het scherm moet overgebracht worden aan hulpmiddelen. Zorg dat koppen bijvoorbeeld niet alleen dikgedrukt zijn, maar ook in de code als kop gemarkeerd zijn.
Relaties op het scherm moeten via hulpmiddelen te gebruiken zijn. Elementen in een lijst moeten één voor één genavigeerd kunnen worden. Elementen in een tabel moeten via rijen en kolommen kunnen worden genavigeerd.
Succescriterium 1.3.1 - Info en relaties - Niveau AKan je de app bedienen met hulpmiddelen?
Zorg dat alle functionaliteit in de app met hulpmiddelen is te gebruiken. Mensen die blind zijn maken gebruik van de schermlezer. Mensen met een motorische beperking maken gebruik van schakelbediening, stembediening en/of het toetsenbord. Deze hulpmiddelen zijn in het besturingssysteem ingebouwd.
Succescriterium 2.1.1 - Toetsenbord - Niveau ABeschrijven de koppen en labels de content voldoende duidelijk?
Het gebruik van koppen is belangrijk om te snappen hoe de inhoud is opgebouwd. Blinde gebruikers kunnen via een schermlezer een overzicht opvragen van alle koppen op het scherm. Het gebruik van labels is belangrijk bij formulieren om te begrijpen welke invoer gevraagd wordt. Zorg ervoor dat de labels gekoppeld zijn aan de invoervelden.
Succescriterium 2.4.6 - Koppen en labels - Niveau AAVolledig overzicht van de richtlijnen
Door de eenvoud en het aantal vragen zul je een goed beeld krijgen. Je zult met 20% van de moeite waarschijnlijk al tot 80% van de fouten vinden. Toch zal het geen volledig beeld geven maar een eerste indruk. Ga voor een volledig beeld naar het overzicht met alle richtlijnen van de WCAG.
- WCAG overzicht
Web Content Accessibility Guidelines (WCAG)
De Web Content Accessibility Guidelines (WCAG) bevatten een groot aantal aanbevelingen om apps toegankelijker te maken.
- Appt Evaluatiemethode (Appt-EM)
Appt Evaluatiemethode (Appt-EM)
De Appt Evaluatiemethode (Appt-EM) kan gebruikt worden om de toegankelijkheid van apps op een uniforme en reproduceerbare manier vast te stellen.