Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Almere
Evaluatiedatum
12 september 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 45 van de 55 criteria voor toegankelijkheid (40 van de verplichte 50 criteria). Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de pagina's goed werken op mobiel, dat er geen afbeeldingen van tekst worden gebruikt en dat de pagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuist opgemaakte koppen
Missende of incorrect verbonden labels bij invoervelden
Niet alle content is bereikbaar bij inzoomen
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
Website naam
Formulieren Almere (TriplEforms)
Scope van de website
Formulieren van de gemeente Almere op https://formulieren.almere.nl/TriplEforms/formulierenoverzicht/nl-NL/evAlmere.aspx.
Formulieren via DigiD op de acceptatieomgeving https://acc.formulieren.almere.nl/TriplEforms/formulierenoverzicht/nl-NL/evAlmere.aspx
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
27Voldoende
10Onvoldoende
18Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Voldoende
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Aanvraag brievenbussticker
Uitkomst: Onvoldoende
Aanvraag gehandicaptenparkeerplaats
Uitkomst: Onvoldoende
Bezwaarschrift Werk & Inkomen (Sociale Dienst)
Uitkomst: Onvoldoende
Straatintimidatie melden
Uitkomst: Onvoldoende
Toestemmingsformulier reisdocument
Uitkomst: Onvoldoende
Aanvraag brievenbussticker
Aanvraag brievenbussticker Het formulier heeft geen logische koppenstructuur. In stap 1 zijn er alleen h1-koppen. Een meer logische opbouw zou zijn:
h1: Aanvraag brievenbussticker
h2: Formulierstappen
h2: Inleiding
In stap 2 heeft de kop van de stap (Gegevens aanvrager) geen kopopmaak. Deze zou hier het beste in een h2-element kunnen staan.
De actieve stap in het proces wordt aangegeven met een andere styling. In de tekst wordt dit echter niet bij elke stap aangegeven, zoals in stap 2. Hulpsoftware kan daardoor niet opmaken uit de code welke stap actief is. Voeg hiervoor aria-current=“step” toe aan het actieve item binnen elke stap.
Aanvraag gehandicaptenparkeerplaats
In de inleiding staan groene subkopjes zoals ‘Ontvangstbevestiging’ welke niet als kop zijn opgemaakt. Screenreader gebruikers die navigeren via koppen missen deze nu. Zet deze kopjes in een heading element zoals h2.
Bezwaarschrift Werk & Inkomen (Sociale Dienst)
De invoervelden voor het kenmerknummer en de datum van dagtekening hebben geen label beschikbaar voor hulpsoftware. Dit kan worden opgelost door de teksten boven de invoervelden in een label element te zetten en deze via een id te koppelen aan het invoerveld.
Wanneer er een foutmelding verschijnt, wordt de (visueel zichtbare) tekst ‘ongeldige waarde’ verborgen voor hulpsoftware. Hierdoor staat er voor screenreader gebruikers geen foutmelding meer, enkel een instructie. Zorg dat deze tekst niet verborgen wordt door het aria-hidden attribuut te verwijderen. Zie screenshot 3. NB: hier mist ook een foutsuggestie, zie 3.3.3.
In de laatste stap staat een kopje boven een tabel met de tekst ‘Gegevens aanvrager’. Deze is niet als kop opgemaakt maar via het strong-element. Dit element is bedoeld om één of enkele woorden uit te lichten in een paragraaf, niet om kopjes aan te geven. Screenreader gebruikers die navigeren via koppen missen deze nu. Dit kan worden opgelost door het kopje in een heading element te zetten boven de tabel of in een caption element binnen de tabel. Daarnaast is hier het probleem dat de gehele rij en daardoor ook dit kopje verborgen wordt voor hulpsoftware via het aria-hidden attribuut. Verwijder deze zodat de tekst ook voor gebruikers van hulpsoftware beschikbaar is.
Deze issues komen bij meerdere formulieren voor, ook op de acceptatieomgeving.
Straatintimidatie melden
Het formulier heeft geen logische koppenstructuur. Zie screenshot 6. Er is een h1 voor de kop van het formulier (dit is goed), vervolgens een h3 voor de kop van de stap (dit moet h2 zijn) en een h4 voor de kop van de Formulierstappennavigatie (dit moet ook een h2 zijn, want nu valt deze onder de Inleiding). Naast dat de niveaus niet kloppen, is het ook verwarrend dat de structuur niet bij alle formulieren hetzelfde is. Zo is de kop boven de stappennavigatie soms een h1 en soms een h4. Zorg dat dit consistent is.
Toestemmingsformulier reisdocument
De invoervelden voor de gegevens van het kind zoals voornaam en achternaam hebben geen label beschikbaar voor hulpsoftware. Dit kan worden opgelost door de teksten boven de invoervelden in een label element te zetten en deze via een id te koppelen aan het invoerveld.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Niet alle invoervelden voor persoonlijke informatie zoals naam en adres hebben een mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.
Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Aanvraag brievenbussticker
De tekst van de foutmeldingen (roze/wit, 3.1). Zie screenshot 1.
Aanvraag gehandicaptenparkeerplaats
De tussenkopjes in de inleiding (3.4:1). Zie screenshot 5.
Bezwaarschrift Werk & Inkomen (Sociale Dienst)
In de datumprikker: de tekst in de gekozen datum in de tabel (wit/blauw, 3.8:1) en van de knop van vandaag (donkergrijs/lichtgrijs, 4:1)
De knop ‘Volgende stap’ (bruin/wit, 3:1).
Toestemmingsformulier reisdocument
De opmerking in rood in de samenvatting (4:1). Zie screenshot 4.
Aanvraag persoonsgebonden budget Wmo
De tekst van de afgeronde stappen in grijs(2.94:1) en paars (4.21:1). Zie screenshot 11.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Aanvraag brievenbussticker
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Aanvraag brievenbussticker
Aan de zijkant van het formulier staat een lijst met stappen. Wanneer je inzoomt verdwijnt een deel van deze teksten en staan er alleen nog nummers. Zie screenshot 7. (NB: Op de acceptatieomgeving gaat dit wel goed, dan blijven de teksten in beeld.)
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Aanvraag gehandicaptenparkeerplaats
Uitkomst: Voldoende
Toestemmingsformulier reisdocument
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Aanvraag gehandicaptenparkeerplaats
Opmerking: De datumprikker is niet te gebruiken wanneer je inzoomt. Als je gaat scrollen verdwijnt de datumprikker. Dit is geen bevinding, omdat als alternatief de datum ook als tekst ingevoerd kan worden. Het zou echter gebruiksvriendelijker zijn als deze datumprikker wel te gebruiken is bij inzoomen. Zie screenshot 8.
Toestemmingsformulier reisdocument
Boven de 200% valt een deel van de content buiten beeld. Zie screenshot 9. Ook overlappen er onderdelen in de header. Zie screenshot 10.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Bezwaarschrift Werk & Inkomen (Sociale Dienst)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Bezwaarschrift Werk & Inkomen (Sociale Dienst)
De knop om een maand terug of vooruit te gaan in de datumprikker (grijs/grijs, 2.7:1)
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.
Aanvraag persoonsgebonden budget Wmo
De tekst in de stappen wordt afgebroken. Zie screenshot 12.
De titel van het formulier wordt deels verborgen. Zie screenshot 13.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Niet van toepassing
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Voldoende
Woonlastenfonds verkorte aanvraag 2023
Uitkomst: Voldoende
Woonlastenfonds verkorte aanvraag 2023
Opmerking: de knop om de datumprikker te openen is bereikbaar met het toetsenbord, maar de datumprikker kan niet geopend worden. Er is wel een alternatief om de datum als tekst in te voeren, maar doordat deze knop wel toegankelijk is gemaakt, werkt dit verwarrend. Zorg dat de datumprikker in het geheel werkt met het toetsenbord (dit heeft de voorkeur) of verberg ook de knop om deze te openen voor toetsenbord en hulpsoftware. Dit issue komt voor bij datumvelden op de productie en de acceptatieomgeving (met en zonder DigiD-inlog). De HTML markup is wel verschillend op beide omgevingen en de datumprikkers zien er ook verschillend uit.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Niet van toepassing
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Voldoende
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Voldoende
2.4.2: Paginatitel
Hele sample
Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Voldoende
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Niet van toepassing
2.4.6: Koppen en labels
Hele sample
Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Voldoende
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Voldoende
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample
Uitkomst: Voldoende
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
2.5.7: Dragging Movements
Hele sample
Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample
Uitkomst: Voldoende
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium
Uitkomst
Bevindingen
3.2.1: Bij focus
Hele sample
Uitkomst: Voldoende
3.2.2: Bij input
Hele sample
Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample
Uitkomst: Niet van toepassing
3.2.4: Consistente identificatie
Hele sample
Uitkomst: Niet van toepassing
3.2.6: Consistent Help
Hele sample
Uitkomst: Niet van toepassing
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking: Visueel hebben foutmeldingen de tekst ‘ongeldige waarde’ gevolgd door een instructie zoals ‘geef s.v.p. de reden’. Deze combinatie is voldoende voor dit criterium. Echter wordt deze informatie niet doorgegeven aan screenreader gebruikers omdat de tekst ‘ongeldige waarde’ wordt verborgen voor hulpsoftware. Hierdoor is het voor deze gebruikers mogelijk niet duidelijk dat een veld niet goed is ingevuld. Zie ook 1.3.1.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Voldoende
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Aanvraag brievenbussticker
Uitkomst: Onvoldoende
Aanvraag brievenbussticker
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan moeten deze suggesties aan de gebruiker worden geleverd. Bij het invoerveld voor de postcode wordt een bepaald format geëist, maar deze wordt niet als suggestie gegeven. Voeg een suggestie toe, bijvoorbeeld: ‘het veld voor postcode moet in de vorm 1234AB worden ingevoerd’. Zie screenshot 2. Dit issue komt bij meerdere formulieren voor, bijvoorbeeld bij het veld voor kenteken bij de aanvraag gehandicaptenparkeerplaats en het veld voor Burgerservicenummer bij Woonlastenfonds verkorte aanvraag 2023.
In stap 2 staan knoppen met een vraagteken icoon. Dit is een summary element zonder tekst. De knop heeft hierdoor geen toegankelijke naam. Voeg een tekst toe binnen het element of een aria-label of title attribuut. De inhoud van de uitleg staat binnen een div-element met een role van ‘alert’. Dit is echter geen live region, maar een (statisch) details element. Deze role kan daarom beter worden weggehaald. Dit komt bij meerdere formulieren voor, bijvoorbeeld Bezwaarschrift Werk & Inkomen (Sociale Dienst).
Straatintimidatie melden
In stap 1 staat er een vraag ‘Wat is er gebeurd?’ met 8 checkboxes. Al deze checkboxes hebben het attribuut ‘aria-required’, waardoor de screenreader ze alle als verplicht voorleest. Dit is verwarrend omdat het verplicht is minimaal 1 te selecteren, niet allemaal. Er is geen HTML oplossing om de fieldset verplicht te maken, maar het kan wel in tekst duidelijk worden gemaakt door ‘verplicht’ (of de asterisk) in de legend te zetten. Deze staat nu voor de legend. Wanneer deze in de legend staat, wordt het als groepslabel voorgelezen.
Toestemmingsformulier reisdocument
De knop om de datumprikker te openen heeft geen goede naam. Deze button heeft een image met als alt-tekst “...”. Pas de alt tekst aan of geef de button een aria-label met duidelijke knoptekst.
4.1.3: Statusberichten
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer een veld niet goed is ingevuld, komt er een melding in beeld met een rode achtergrond. Deze berichten worden niet doorgegeven aan hulpsoftware wanneer de focus er niet automatisch heen gaat. Dit kan worden opgelost via een role=“status” of het gebruik van live regions. Zie voor meer info https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques Dit komt voor in alle formulieren.
