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 Groningen
Evaluatiedatum
20 december 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 28 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Missende alt-teksten bij afbeeldingen
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Incorrect ARIA-gebruik
Scope van de evaluatie
Website naam
oisgroningen.nl
Scope van de website
Alle pagina's op https://oisgroningen.nl.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 50 van 50 WCAG 2.1 AA
Success Criteria.
16Voldoende
22Onvoldoende
12Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Actueel
Uitkomst: Onvoldoende
Cijfers:Open onderzoek Groningen
Uitkomst: Onvoldoende
Cijfers: statistische informatie
Uitkomst: Onvoldoende
Toegankelijkheidsverklaring
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In de footer staan 2 logo’s in één afbeelding met een leeg alt-attribuut. Logo’s geven informatie en hebben daarom altijd een goede alternatieve tekst nodig.
Actueel
De headerfoto is een img-element zonder alt-attribuut. Screenreader gebruikers weten niet wat voor afbeelding dit is, en krijgen mogelijk de bestandsnaam voorgelezen. Geef deze afbeelding een goede alternatieve tekst of geef het een leeg alt-attribuut wanneer de afbeelding decoratief is. Dit komt op meerdere pagina’s voor.
Cijfers:Open onderzoek Groningen
In de content staan meerdere logo’s in één afbeelding met een leeg alt-attribuut. Logo’s geven informatie en hebben daarom altijd een goede alternatieve tekst nodig. Een logo met leeg alt-attribuut komt ook voor op de pagina Urban data center regio Groningen.
Cijfers: statistische informatie
In de content staan afbeeldingen van vlaggen met een lege alt-tekst. Deze afbeeldingen hebben een functie en moeten daarom een goede alternatieve tekst hebben.
Toegankelijkheidsverklaring
De afbeelding met het label heeft een leeg alt-attribuut, maar dit is geen decoratieve afbeelding. Zorg voor een goede alternatieve tekst. (In de originele embedcode van Logius staat een alt-tekst en een link naar de verklaring. Met deze code wordt het label ook automatisch bijgewerkt naar de actuele status.)
Bij de link naar het rapport staat een icoon dat deze in een externe website opent. Dit icoon heeft geen alternatieve tekst. Voeg hier bijvoorbeeld een (verborgen) tekst toe binnen de link. Dit komt op meerdere pagina’s voor. Het is ook goed om te vermelden als het om een pdf-bestand gaat. Dan weet de gebruiker dat er een bestand geopend of gedownload gaat worden.
PDF Factsheet Leefbaarheid Algemeen
De afbeeldingen van de kaartjes hebben geen alternatieve tekst.
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
Homepage
Uitkomst: Onvoldoende
Actueel
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Opmerking: De knop naar het mobiele menu is in Windows High Contrast mode niet zichtbaar. Dit kan worden opgelost door een (transparante) outline omheen te zetten (in plaats van outline:0). Zie screenshot 10 en screenshot 11.
Homepage
De lijst met de slider items is niet correct opgemaakt. Het is gecodeerd als een tablist, welke alleen elementen met de rol van ‘tab’ mag bevatten. De lijst bevat nu li-elementen. Wanneer lijsten niet correct zijn opgemaakt, kan hulpsoftware deze mogelijk niet goed interpreteren.
Actueel
Het tekst-invoerveld om te zoeken heeft geen label. Er staat een placeholder tekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Dit komt op meerdere pagina’s voor, ook op pagina’s van nieuwsberichten (in de sidebar).
Om het zoekveld heen staat een lijst zonder list-items. Wanneer lijsten niet correct zijn opgemaakt, kan hulpsoftware deze mogelijk niet goed interpreteren. Zorg voor correcte li-elementen binnen de lijst of haal de lijstopmaak weg.
PDF Factsheet Leefbaarheid Algemeen
(Sub)koppen in het document zijn niet als kop opgemaakt, maar als paragraaf. Maak hier heading elementen van.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Onvoldoende
Actueel
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
Actueel
Bij de nieuwsberichten staat de metadata zoals de tags en de datum in de broncode voor de kop waar die bij hoort. Hierdoor verandert de betekenis van de volgorde, en valt de zichtbare metadata (in de layout) onder de vorige kop. Dit kan erg verwarrend zijn voor screenreadergebruikers, die vaak navigeren door van kop naar kop te springen. Zorg dat de metadata in de bronvolgorde na de kop staat (visueel kan het wel hetzelfde blijven). Dit komt op veel pagina’s voor.
PDF Factsheet Leefbaarheid Algemeen
De volgorde van de elementen in de broncode in dit document is niet logisch. Zo staan de tekstjes met de percentages tussen de legenda-items door en spring je heen en weer tussen beide legenda’s. Voor iemand die het document laat voorlezen is dit verwarrend. Zorg dat de bronvolgorde zoveel mogelijk overeenkomt met de visuele volgorde.
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De toegankelijkheidsopties voor tekstgrootte zijn niet te bedienen in landschapsweergave. Ze vallen grotendeels buiten beeld en er kan niet naartoe gescrolld worden. Zie screenshot 3. Mensen die motorisch beperkt zijn, kunnen niet altijd het device draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Invoervelden voor persoonlijke informatie op de website zoals naam en e-mailadres hebben geen 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. Dit komt voor bij het formulier voor de nieuwsbrief en het contactformulier.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
In de kaartjes worden de gebieden alleen onderscheiden door middel van kleur. Voeg een ander visueel middel toe voor mensen die de kleuren niet kunnen zien, zoals een tekst of arcering.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
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.
In de header staat witte tekst die over foto’s heen is geplaatst. Op plekken met een lichte achtergrond, zoals lucht, is het contrast niet voldoende. Dit kan worden opgelost door bijvoorbeeld een donkere balk achter de tekst te plaatsen of door de tekst een donkere schaduwrand te geven. Dit komt ook voor bij de tekst van de nieuwsbrief (wit/lichtblauw). Zie screenshot 4 en screenshot 5.
De knop met ‘aanmelding opslaan’ bij het aanmelden voor de nieuwsbrief (wit/groen, 2.76:1). Zie screenshot 7.
PDF Gebiedsanalyse Haren
De lichtgrijze teksten zoals ‘Basis voor beleid’ en ‘Kwaliteit fysieke leefomgeving'(1.4:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Nieuwsbericht Inwonerspanel Fietsen 2024
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Bij het inzoomen (al vanaf 110%) verdwijnt de zoekfunctie uit de header.
Boven 175% zoom zijn de toegankelijkheidsopties aan de zijkant niet goed meer te gebruiken. De knoppen vallen gedeeltelijk of geheel buiten beeld. Dit geldt ook voor de knop om de cookies te beheren.
Nieuwsbericht Inwonerspanel Fietsen 2024
Bij het inzoomen boven de 125% verdwijnt de sidebar met zoekfunctie en links naar nieuwsberichten. Dit komt op meerdere pagina’s voor.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Het document bestaat geheel uit afbeeldingen zonder alternatieve tekst. Zorg dat de content beschikbaar is in tekst met de juiste opmaak, zoals koppen, paragrafen en links, zodat de gebruiker de tekst volledig, correct en op de eigen manier tot zich kan nemen. (Nu moet een screenreader zelf de teksten uit de afbeelding halen en leest dit mogelijk niet in de goede volgorde en in de juiste taal voor.)
1.4.10: Reflow
Hele sample
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.)
Zie de bevindingen onder 1.4.4. Deze gelden ook voor dit criterium.
Boven de 250% vallen lange titels deels buiten beeld. Zie screenshot 6. Dit komt ook voor bij de tekst Toegankelijkheidsverklaring. Dit kan worden opgelost door via CSS woorden te laten afbreken wanneer er minder ruimte is.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Contact
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.
Contact
De randen van de invoervelden van het formulier hebben een te laag contrast (1.3:1). Slechtzienden kunnen hierdoor moeite hebben om te bepalen waar ze input kunnen geven. Dit geldt ook voor de checkbox van de reCaptcha (1.8:1) bij het contactformulier en bij het aanmelden voor de nieuwsbrief.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De popups van de toegankelijkheidsopties kunnen alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Actueel
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer je in de header de zoekfunctie opent, krijg je een overlay met een kruis-icoon als sluitknop. Deze knop werkt niet met het toetsenbord. Ook werkt de escape knop niet om uit de overlay te komen als je het zoeken wil cancelen. Zie ook 4.1.2.
Actueel
Bij het filteren op categorie kun je met de muis categorieën aanvinken en weer verwijderen. Met het toetsenbord is dit niet mogelijk.
De paginatie is niet te bedienen met het toetsenbord. Zie ook 4.1.2.
Contact
Wanneer je cookies hebt geweigerd, verschijnt er bij het formulier onder Captcha visueel een knop met ‘Klik om reCaptcha validatie te accepteren.’. Dit werkt niet met het toetsenbord. Zie ook 4.1.2. Zie screenshot 9.
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: Niet van toepassing
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: Onvoldoende
Random pagina 1 (Monitor dakloosheid Groningen 2022)
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Uitkomst: Niet getoetst
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
Random pagina 1 (Monitor dakloosheid Groningen 2022)
Geen bevindingen beschreven
PDF Gebiedsanalyse Haren
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
PDF Factsheet Leefbaarheid Algemeen
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer je onderaan de pagina de knop ‘Cookies beheren’ (waarvan de tekst buiten beeld valt) activeert, komt de focus niet in de cookiebanner, maar gaat naar het hoofdmenu. Zorg dat de focus dan ook meteen op de knoppen van de cookiebanner terecht komt. Zie screenshot 2.
In de opties voor het voorlezen staan knoppen die visueel disabled zijn (de tekst is grijs en het kleurcontrast is te laag), maar deze knoppen krijgen wel focus. Toetsenbord Gebruikers moeten er dus wel doorheen ‘tabben’ terwijl de functies niet beschikbaar zouden moeten zijn. Zorg dat knoppen die visueel en met de muis disabled zijn, ook met het toetsenbord geen focus kunnen krijgen.
Wanneer je het hoofdmenu opent wanneer je bent ingezoomd, gaat de focus niet meteen naar het menu, maar loopt eerst door op de onderliggende pagina. Zorg dat wanneer het menu geopend is, de focus alleen in het menu kan komen totdat deze weer gesloten is.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Voldoende
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Aan de rechterkant van de site staan 2 knoppen met beide de naam ‘toegankelijkheids instellingen’. Het zou duidelijker zijn om direct te benoemen welke opties er achter deze knoppen zitten, dus ‘Lees voor’ en ‘Tekstgrootte’. Dan hoeft een screenreadergebruiker het menu niet in om er achter te komen wat voor opties het zijn. (Voorlezen heeft een screenreadergebruiker sowieso niet nodig.)
Op diverse plekken worden Engelstalige labels gebruikt. Dit is mogelijk niet voor iedere bezoeker goed te begrijpen. Bijvoorbeeld de knop om het menu uit te klappen heeft als naam ‘Menu toggle’. Maak hier Nederlandstalige namen van.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer je bent ingezoomd, opent het hoofdmenu in een overlay. Hierbij is de focus op de pijlknop om het submenu bij Cijfers te openen niet zichtbaar. Geef deze bij voorkeur dezelfde focusstijl als de andere links, met een duidelijke rand.
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: Onvoldoende
Actueel
Uitkomst: Onvoldoende
Cijfers
Uitkomst: Onvoldoende
Actueel
Wanneer een optie is geselecteerd in zoekveld om te filteren, komt er een button te staan in het zoekveld. Deze heeft een andere zichtbare naam dan de toegankelijke naam. Zichtbaar is ‘Actueel’ en de toegankelijke naam is ‘Remove item’. Hierdoor kan de knop niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam altijd minstens de zichtbare tekst bevat.
Cijfers
Er zijn links waarbij de toegankelijke naam verschilt van de zichtbare naam. Bijvoorbeeld van een knop ‘Bekijken Cijfers’ is de toegankelijke naam via het aria-label ‘bekijk Open data’. Dit kan problemen geven voor gebruikers die via stem de knop willen bedienen. Zorg ervoor dat de toegankelijke naam altijd minstens de zichtbare tekst bevat. Dus in dit geval zou het de toegankelijke naam kunnen zijn ‘Bekijken cijfers open data’. Dit komt op meerdere pagina’s voor.
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Uitkomst: Onvoldoende
PDF Factsheet Leefbaarheid Algemeen
Uitkomst: Onvoldoende
PDF Gebiedsanalyse Haren
Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.
PDF Factsheet Leefbaarheid Algemeen
Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Onvoldoende
Cijfers: statistische informatie
Uitkomst: Onvoldoende
Cijfers: statistische informatie
In de content staan teksten in het Duits en Engels. Deze staan gecodeerd als Nederlands. Screenreaders kunnen hierdoor niet de juiste taal bepalen en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse en Duitse tekst aan met het ‘lang’-attribuut op de betreffende elementen (links en afbeeldingen wanneer de alt-teksten ook in Engels en Duits zijn).
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: Voldoende
3.2.4: Consistente identificatie
Hele sample
Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In het formulier voor het aanmelden voor de nieuwsbrief wordt alleen de standaard browser validatie gebruikt: hoe deze getoond wordt is afhankelijk van de browser. Hierdoor is niet goed te testen of deze wel altijd toegankelijk getoond wordt. Soms blijft een melding bijvoorbeeld maar heel kort in beeld of wordt deze in het Engels getoond. Zorg zelf voor een goede en toegankelijke clientvalidatie met duidelijke teksten over wat er fout gaat. Dus niet alleen ‘Vul dit veld in’ of ‘Dit veld is verplicht’, maar bijvoorbeeld ‘Het veld Voor- en achternaam is nog niet ingevuld, en dit is verplicht’. Zie screenshot 8.
De knop om het submenu te openen staat binnen de link die naar de hoofdpagina van cijfers gaat. Dit is verwarrend voor screenreadergebruikers, want zij krijgen wel meteen te horen dat het menu geopend kan worden (‘Cijfers open dropdown menu link’). Wanneer je deze vervolgens activeert, opent niet het submenu, maar ga je naar de hoofdpagina. Nest geen interactieve elementen omdat dit verwarring geeft. Zet de button na de link in plaats van in de link. Zo kunnen ook gebruikers van hulpsoftware de keuze maken om naar de hoofdpagina of naar het submenu te gaan.
De knop waarmee het submenu onder Cijfers kan worden uitgeklapt, geeft geen status aan of het geopend of gesloten is. Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen. De naam van de knop kan dan enkel ‘menu’ of ‘submenu’ worden in plaats van ‘open menu’. Via aria-expanded wordt de gebruiker dan geïnformeerd of het menu open of gesloten is.
De knoppen met de naam ‘toegankelijkheids instellingen’ geven geen status aan of de menu’s open of gesloten zijn. Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen.
De knop om het hoofdmenu te openen wanneer je bent ingezoomd, geeft geen status aan of het open of gesloten is. Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen.
Wanneer je in de header de zoekfunctie opent, krijg je een overlay met een kruis-icoon als sluitknop. Deze knop heeft geen goede rol en naam. Het is enkel een div-element met een svg zonder alternatieve tekst. Maak hier bij voorkeur een button element van met een goede omschrijving.
Homepage
De knoppen in de slider zijn niet correct opgemaakt. Ze hebben een role=”tab button”. Tab en button zijn verschillende rollen. Kies bijvoorbeeld ‘tab’ in combinatie met ‘aria-selected’.
Actueel
Het invoerveld om te filteren op categorie (span element met role="combobox") heeft geen naam. Dit kan bijvoorbeeld worden opgelost door het toevoegen van een aria-label attribuut. Ook mist het aria-controls-attribuut. Onder dit veld openen checkboxes met categorieën. De tweede optie staat op geselecteerd terwijl deze nog niet is aangevinkt. Zie screenshot 1.
Wanneer een optie is geselecteerd, komt er een button te staan in het zoekveld. Deze heeft geen goede naam. De button met visueel ‘Actueel’ heeft als naam ‘Remove item’. Maak hier bijvoorbeeld van ‘Actueel verwijderen’. Dit is ook een issue onder 2.5.3. Let er op dat een aria-label de content binnen een element overschrijft. Zorg bij een combobox voor een correcte markup zodat gebruikers van hulpsoftware ook weten wat er gebeurt. Zie bijvoorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/.
De paginatielinks hebben geen goede rol en naam. Het zijn nu list-items die met de muis aanklikbaar zijn. Maak hier link elementen van, zodat ook gebruikers van toetsenbord en hulpsoftware deze links kunnen gebruiken. Om duidelijk te maken dat het om paginatielinks gaat, kan de lijst binnen een navigation element worden geplaatst met een aria-label ‘pagina’s’.
In de paginatie is via styling te zien op welke pagina je je bevindt, en wat de links zijn naar de andere pagina’s. Dit is voor hulpapparatuur niet af te leiden uit de code. Dit is eenvoudig op te lossen door aria-current=“page” toe te voegen aan het list item met class=“active”.
Contact
Wanneer je cookies hebt geweigerd, verschijnt er bij het formulier onder Captcha visueel een knop met ‘Klik om reCaptcha validatie te accepteren.’. Deze knop is een span element zonder correcte rol. Dit zou een button of link element moeten zijn. Zie screenshot 9.
