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
25 november 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 31 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 dat er geen bewegende onderdelen worden gebruikt die niet gepauzeerd kunnen worden, dat de pagina's goede titels hebben en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Scope van de evaluatie
Website naam
basismonitor-groningen.nl
Scope van de website
Alle pagina's op https://basismonitor-groningen.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.
13Voldoende
19Onvoldoende
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: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Uitleg Kompas
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Startpagina
Voor de h1-kop ‘Basismonitor Groningen’ staat een afbeelding zonder alt-attribuut. Geef deze een goede beschrijving of een lege alt-tekst wanneer de afbeelding decoratief is. Dit komt op meerdere pagina’s bij de h1-kop voor.
Kompas van Groningen
De foto van de wijk onder de kaart (bijvoorbeeld Oranjebuurt) heeft geen alt-attribuut. Voeg hier een alt-tekst toe met een beschrijving.
De figuren, zowel het kompas zelf (de cirkels) als de grafieken aan de rechterkant van het kompas hebben geen alternatieve teksten. Voeg per figuur een korte omschrijving toe, bijvoorbeeld in een title-element van de svg. Voeg ook een verwijzing toe naar een alternatief voor de gedetailleerde informatie, zoals een datatabel.
Uitleg Kompas
De alt-teksten bij de kleurenbalken hebben teksten met een bestandsnaam:‘Uitleg kompas_stoplichtkleuren.PNG’. Deze tekst voldoet niet omdat het niet in een begrijpelijke taal is geschreven. Dit komt op meerdere plekken voor.
Thema Gezondheid
De grafieken hebben geen alternatieve teksten. Geef een korte omschrijving die gelinkt is aan de figuur, bijvoorbeeld als title element binnen een svg of als caption binnen een figure element. Voeg ook een verwijzing toe naar een alternatief voor de gedetailleerde informatie, zoals een datatabel. Dit komt bij meerdere thema’s voor.
Ook zijn er tabellen die als afbeelding worden getoond met enkel een korte alt-tekst, bijvoorbeeld onder Bevolking/Samenstelling Bevolking/Bevolking naar burgerlijke staat. Deze kunnen beter als HTML-tabel worden aangeboden.
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
Startpagina
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Uitleg Kompas
Uitkomst: Onvoldoende
Stand van Groningen
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De lijst met het menu van Kompas van Groningen (na het activeren van de Menu knop in de header) is niet correct opgemaakt. Een ul-element hoort alleen li-elementen te bevatten, geen div-elementen. Wanneer lijsten niet goed zijn opgemaakt, kan hulpsoftware dit mogelijk niet goed interpreteren.
Onder ‘Stadsdelen’ en ‘Overzicht thema’s’ opent een invoerveld om te zoeken. Dit veld heeft geen label voor hulpsoftware.
De lijsten met opties hebben geen groepsnaam (label). Het is voor hulpsoftware niet duidelijk waar deze lijsten bij horen.
De teksten zoals ‘Stadsdelen’ zijn opgemaakt met het strong-element, maar dat is hier niet voor bedoeld. Beter is het om deze teksten in een label-element te zetten en de labels te stylen. Zie ook 4.1.2.
Startpagina
De koppenstructuur is niet logisch opgemaakt. De tekst ‘Statistieken en andere monitoringsinformatie over de gemeente Groningen en haar inwoners’ staat in een h3-kop, maar hier volgt geen content achter. Dit hoort niet opgemaakt te zijn als kop. Daaronder staat visueel het kopje ‘Welkom op de Basismonitor van de gemeente Groningen’, maar deze staat opgemaakt met een b-element. Dit hoort wel kop-opmaak te hebben (en geen b-element). Screenreadergebruikers navigeren vaak via koppen. Zorg daarom voor een goede koppenhiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan.
Kompas van Groningen
De knoppen naar de stadsdelen openen visueel een lijst met wijken. Dit zijn losse buttons, die niet als groep zijn opgemaakt. Beter is het om deze in een lijst te zetten zodat hulpsoftware dit ook als een lijst herkent.
Aan de linkerkant van de sectie ‘Wijken vergelijken’ staan drie iconen die als knoppen dienen. De geselecteerde optie heeft een andere kleur dan de rest. Het wordt niet aan hulpsoftware doorgegeven welke actief is. Dit kan bijvoorbeeld worden gedaan met een verborgen screenreadertekst of met behulp van het aria-selected-attribuut.
Uitleg Kompas
De tussenkopjes op deze pagina zijn opgemaakt met een b-element. Deze kopjes worden niet voorgelezen als kopteksten. Maak hier heading elementen van.
Stand van Groningen
De koppenstructuur is niet logisch opgemaakt. Bovenaan staat een h4 kop, meteen gevolgd door een h1 kop. De eerste h4-kop heeft geen functie, want er volgt geen content onder. Dit moet dus geen kop zijn, of onderdeel worden van de h1. Deze constructie komt ook voor op de themapagina’s. Er is een h2-kop ‘Onderwerpen’. De onderwerpen die daaronder staan, hebben ook h2-koppen. Deze koppen hebben echter geen content, dus deze kunnen beter enkel als link worden opgemaakt. (Als er nog wel content onder staat, moeten ze een kopniveau lager hebben.)
Thema Gezondheid
Er staat visueel naast de h1-kop ‘Gezondheid’ een selectielijst met thema’s. In de code is dit echter geen lijst, maar een div-element met losse links. Het is hierdoor voor hulpsoftware niet duidelijk dat het hier om een groep gaat. Gebruik hier een ul-element of een select-element om de opties te groeperen.
De tekst ‘Direct naar een thema van Stand van Groningen’ staat nu in een div-element, maar kan beter worden opgemaakt als label element. Zorg dat het label en de lijst programmatisch aan elkaar verbonden worden. Dit kan met for=”id” met een id op het select element, of via een aria-labelledby-attribuut op de ul-lijst.
In het submenu wordt met styling aangegeven welke items (hoofditem en subitem) actief zijn. Dit wordt niet programmatisch doorgegeven aan hulpsoftware. Dit kan worden opgelost met verborgen screenreadertekst of via het aria-current-attribuut.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Veel grafieken zijn deels uitleesbaar door hulpsoftware, maar de betekenis gaat geheel verloren. Dan worden bijvoorbeeld alle waardes op de assen voorgelezen, maar niet de balken met data waar het om gaat. Beter is het om deze figuren geheel te verbergen voor hulpsoftware en te verwijzen naar een toegankelijk alternatief.
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Kompas van Groningen
Het gebruik van het kompas is afhankelijk van inzicht in de layout, zoals het herkennen van cirkels rond een middelpunt. Gebruikers die deze layout niet kunnen zien, kunnen de data moeilijk interpreteren. Geef bijvoorbeeld een alternatieve versie van het kompas in een datatabel of lijst. (Dit kan ook een link zijn naar een andere webpagina waar deze data op een andere manier wordt aangeboden.)
1.3.4: Weergavestand
Hele sample
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Kompas van Groningen
De tekst in de kaart wordt op portretmodus aan de linkerkant van het scherm deels afgebroken. Zie screenshot 11. (Dit is zonder inzoomen, en uitzoomen is niet mogelijk.) 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: Niet van toepassing
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Kompas van Groningen
De waarden van indicatoren in de diverse figuren (positief/negatief/neutraal) worden enkel aangegeven met verschil in kleur. Kleurenblinden en slechtzienden kunnen deze verschillen mogelijk niet onderscheiden. Voeg een extra indicatie toe voor de waarde, zoals tekst of structuur. Of bied een alternatief voor de figuren, bijvoorbeeld in de vorm van datatabellen. Zie screenshot 1.
Thema Gezondheid
Er zijn veel grafieken waarbij de categorieën alleen worden onderscheiden door middel van kleur, bijvoorbeeld onder ‘Sterfte naar leeftijd en oorzaak van overlijden’. Kleurenblinden en slechtzienden kunnen deze verschillen mogelijk niet onderscheiden. Voeg een extra indicatie toe voor de waarde, zoals tekst of structuur. Of bied een alternatief voor de figuren, bijvoorbeeld in de vorm van datatabellen. Zie screenshot 2.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Thema Gezondheid
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.
De teksten ‘Direct naar..’ binnen de selectielijsten (4,47:1).
De knop ‘MENU’ wanneer deze actief is (3,8:1).
Startpagina
De tekst in het blauwe blok over Stand van Groningen (2,14:1).
Beide blokken met links op hover (paars 3,59:1, blauw 1,69:1).
Kompas van Groningen
De knoppen met ‘Centrum’ (2,94:1) en ‘Zuid’ (3,84:1).
Opmerking: als je een stadsdeel hebt geselecteerd, worden de andere knoppen laag in contrast. Ze zijn gestyled als inactief, maar je kunt er wel op klikken.
Thema Gezondheid
De kop ‘Gezondheid’ en de knoppen in wit/lichtblauw combinatie van het submenu (2.13:1).
De grijze sub-items zoals ‘Geluk’ (4,47:1).
Ingezoomd komt de ‘knop’ om van thema te wisselen boven de foto te staan. Dit is witte tekst op een lichte foto. Zie screenshot 8.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Thema Gezondheid
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.
Thema Gezondheid
Boven de 175% opent de content in een popup. Hierbinnen kan echter niet gescrolld worden (niet verticaal en niet horizontaal), waardoor niet alle informatie bereikbaar is.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Onvoldoende
Thema Bevolking
Uitkomst: Onvoldoende
Thema Bevolking
Er zijn tabellen die als afbeelding worden getoond, bijvoorbeeld onder Samenstelling Bevolking/Bevolking naar burgerlijke staat. De tekst in deze afbeelding kan niet worden aangepast door bezoekers die eigen stylesheets gebruiken. Deze tabellen kunnen beter als HTML-tabel worden aangeboden.
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Kompas van Groningen
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.)
Startpagina
Wanneer je inzoomt, verdwijnt de tekst onder de h1-kop. Eerst komt er nog een scrollbalkje, maar op den duur is die ook weg. Zie screenshot 4 en screenshot 7. Dit komt op meerdere pagina’s voor waar zo’n introductietekst staat.
Kompas van Groningen
Op 400% ingezoomd is het kompas niet meer te gebruiken, alleen de titel en de tekst van ‘Hoe werkt het?’ zijn nog zichtbaar. Zie screenshot 5.
Opmerking: op 300 % zijn alle onderdelen nog te bereiken, maar is er wel erg weinig ruimte voor de content. Ook schalen de teksten in het kompas (de figuur) niet mee. Zie screenshot 6.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Thema Gezondheid
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.
Het verschil in kleur tussen de niet-gefocuste en gefocuste knoppen voor Kompas van Groningen en Stand van Groningen in het menu wanneer je bent ingezoomd (rood/donkerrood, 1,5:1)
Kompas van Groningen
De sluitknop in de kaart (lichtgrijs, 1,6:1).
Thema Gezondheid
De sliderknoppen (witte pijlen) wanneer deze boven een lichte foto staan.
Het verschil in kleur tussen de niet-gefocuste en gefocuste submenu-items (grijs/blauw, 1,5:1).
De kleuren van de lijnen/balken in grafieken ten opzichte van de achtergrond en ten opzichte van elkaar (1,1:1), bijvoorbeeld roze en lichtblauw onder Uitgelicht/Gezondheid.
De lichtgroene scrollknop (1,7:1).
De sluitknop van de themalijst (wit/lichtblauw, 2,1:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
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.
Op 400% ingezoomd lopen items in de footer door elkaar heen. Zie screenshot 9.
Kompas van Groningen
Binnen de kaart overlapt de afbeelding van de kleurenbalk de tekst die eronder staat. Zie screenshot 10. Onder ‘Wijken vergelijken’ worden de namen van wijken binnen de gekleurde blokjes deels afgebroken.
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: Onvoldoende
Kompas van Groningen
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Kompas van Groningen
De kompas functionaliteit is niet te bedienen met het toetsenbord. Een paar voorbeelden van issues:
Wanneer je met de muis op de link ‘Hoe werkt het?’ klikt, scroll je naar de h1-kop met ‘Hoe werkt het?’. Met het toetsenbord scroll je naar de h1-kop ‘Wijken vergelijken’.
Het is niet mogelijk om door de stadsdelen en wijken te navigeren.
Het is niet mogelijk om indicatoren te selecteren.
De knoppen naast het ‘wiel’ hebben geen zichtbare focus waardoor je niet weet wanneer je deze kunt bedienen.
De resultaten na het zoeken op postcode hebben geen zichtbare focus.
De deelknoppen openen een popup met de muis, met het toetsenbord gebeurt er niks.
Thema Gezondheid
Boven de 175% ingezoomd opent de content van de menu-items in een popup. De focus gaat hier niet in, maar blijft op de onderliggende pagina staan. De sluitknop werkt nu niet (en de escape toets ook niet). De enige manier om hier uit te komen is om gebruik te maken van het hoofdmenu, wat hier waarschijnlijk niet wenselijk is. Zorg dat bij een popup de focus alleen in de popup kan komen.
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: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Bovenaan de pagina krijgen meerdere items focus terwijl ze onzichtbaar zijn. Dit is verwarrend. Zorg dat elementen alleen focus kunnen krijgen als ze ook zichtbaar zijn, in dit geval wanneer het menu geopend is. Ook wanneer het menu geopend is, komt de focus nog op onzichtbare elementen binnen het menu. Haal ook de focus hiervan weg. De elementen op de onderliggende pagina moeten pas weer focus krijgen wanneer het menu gesloten is. Die focus loopt nu ook door bij een geopend menu.
Thema Gezondheid
De submenu-items, bijvoorbeeld onder ‘Lichamelijk - en psychosociaal functioneren‘, krijgen ook focus wanneer ze niet uitgeklapt zijn.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Thema Gezondheid
De links in de slider (pijlen) hebben geen tekst en daarmee geen linkdoel.
De links met i-icoontjes bij de grafieken hebben geen tekst en daarmee geen linkdoel.
Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Geef links daarom altijd een duidelijke tekst.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Thema Gezondheid
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In het uitklapmenu bovenaan de pagina is de focus op de selectielijsten zoals Stadsdelen niet zichtbaar. De outline en de border staan op none/0.
De focus op de scroll knop onderaan de grote foto (dubbel pijltje) is niet zichtbaar.
Opmerking: De focus op de pijl naar boven is moeilijk zichtbaar, omdat dit enkel een kleine schaduw is.
Zorg dat er altijd een zichtbare focusstijl is, met voldoende contrast (minimaal 3:1).
Thema Gezondheid
De focus op het eerste menu-onderdeel is niet zichtbaar. Deze is standaard donkerblauw, en op focus ook. Daardoor zie je niet dat je er op staat.
De focus op de ‘knop’ om de lijst met thema’s te openen is niet zichtbaar. Dit geldt ook voor de sluitknop.
Boven de 175% ingezoomd is de focus op de subitems (grijze teksten) niet zichtbaar.
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
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De pagina’s staan ingesteld op Engels (html lang=”en”), maar de content is Nederlands. Hierdoor lezen screenreaders de content mogelijk niet in de juiste taal voor. Zet de pagina’s op Nederlands.
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: 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: Niet van toepassing
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De zoekvelden in het hoofdmenu om naar een stadsdeel/wijk of een thema te gaan hebben geen zichtbaar label. Het is daardoor mogelijk niet voor iedereen duidelijk wat hier ingevoerd kan worden.
De knop waarmee het menu in de header 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 selectielijsten in het hoofdmenu zijn niet goed opgemaakt. Ze bestaan uit een div-element met een aria-expanded attribuut. Dit attribuut hoort op een interactief element te staan, zoals een button of een link. Nu is de rol van deze elementen niet duidelijk (en de status ook niet, want dit werkt niet op een div-element zonder rol). Hetzelfde geldt voor de lijst die geopend wordt, dit is een tree met een aria-expanded attribuut. Zet dit attribuut alleen op de button die de lijst opent, niet op het onderdeel dat geopend wordt. Het is nu voor een screenreadergebruiker niet duidelijk dat je op een knop staat die opties toont. Zorg dat de buttons en de lijsten aan elkaar gelinkt worden, bijvoorbeeld met ‘aria-haspopup’, en dat het duidelijk is wanneer de opties open staan.
Wanneer je bent ingezoomd op 175% of meer verandert de layout van het menu. Er zijn nu 2 knoppen met Kompas van Groningen en Stand van Groningen. Deze hebben echter een rol van ‘navigation’. Navigation is een landmark die gebruikt kan worden voor bijvoorbeeld een lijst met links. Deze knop moet alleen de (impliciete) rol van knop hebben. Deze knoppen geven geen status aan of de lijst eronder geopend of gesloten is. Dit kan worden opgelost door het ‘aria-expanded’ attribuut toe te voegen. Zie screenshot 3.
Er zijn knoppen gevonden zonder naam. Deze knoppen bevatten afbeeldingen van pijlen omlaag en omhoog, onder de grote foto en onderaan de pagina. Geef deze button elementen bijvoorbeeld een (verborgen) tekst of aria-label.
Kompas van Groningen
De knoppen naar de stadsdelen geven niet aan dat er een lijst is geopend. Geef dit bijvoorbeeld aan met aria-expanded of aria-haspopup.
Binnen de kaart staan knoppen met een kruis icoon om de geopende content te sluiten. Deze knoppen hebben geen naam. Geef deze button elementen bijvoorbeeld een (verborgen) tekst of aria-label.
Binnen het kompas staat aan het eind van de breadcrumb een pijltje om subonderwerpen te openen. Dit is een link zonder naam. Binnen het kompas fungeren secties van de figuur als links naar onderwerpen en om weer uit te zoomen. Deze elementen hebben geen correcte rol (link of button). Binnen het kompas zijn er links om te de informatie te delen. Dit zijn span-elementen zonder correcte rol en naam.
Thema Gezondheid
De knop om van thema te wisselen heeft geen naam. De knop heeft ook geen attribuut die aangeeft dat er een lijst uitgeklapt kan worden en wat de waarde hiervan is. Voeg een naam toe als button tekst of aria-label, en een aria-expanded attribuut voor de lijst met opties. De knop om de popup te sluiten heeft ook geen naam. Zie ook 1.3.1.
Wanneer je bent ingezoomd opent de content in een popup. De sluitknop hiervan heeft geen naam.
De links in de slider (pijlen) hebben geen naam.
De links met i-icoontjes bij de grafieken hebben geen naam.
