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?
De Web Content Accessibility Guidelines (WCAG) versie 2.1 AA is het verplichte niveau onder de Europese standaard EN 301 549 en de European Accessibility Act. 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 voor dit onderzoek relevante WCAG criteria. 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
21 januari 2026
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 32 van de 55 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de website goed werkt op mobiel, dat er geen afbeeldingen van tekst worden gebruikt 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
raadvanalmere.nl
Scope van de website
Alle pagina's op https://raadvanalmere.nl/.
Niet de pagina’s op https://identity.onlineacademy.nl/ (ander systeem);
Niet de pagina’s op https://documentwijzer.raadvanalmere.nl/app/ (ander systeem).
Niet de pagina’s op almere.raadsinformatie.nl/ (ander systeem)
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.
19Voldoende
23Onvoldoende
13Niet 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
Homepage
Uitkomst: Onvoldoende
Agenda
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Mijn profiel
Uitkomst: Onvoldoende
Homepage
Binnen de link ‘Bekijk de laatste live uitzending’ staat een afbeelding zonder alt-attribuut. Screenreader gebruikers weten niet wat voor afbeelding dit is, en krijgen mogelijk de bestandsnaam voorgelezen. Het gaat hier om het ‘play’-icoon. Aangezien dit een (decoratief) onderdeel is van de link, kan deze afbeelding het beste een lege alt-tekst krijgen, zodat de afbeelding wordt genegeerd door screenreaders.
Boven de footer staat 3 paragrafen tekst met iconen erboven. Deze iconen hebben een onduidelijke alt-tekst zoals ‘gavelsolid’. Dit voegt niks toe voor screenreadergebruikers. Het is beter om de alt-teksten hier leeg te laten.
Agenda
Niet alle foto’s hebben een goede alternatieve tekst. Bijvoorbeeld bij het artikel ‘Mobiliteits- en Infrastructuur Programma Almere (MIPA): Werkplan 2026’ staat een alt-tekst met ‘PRS181108B08123620210322083108.jpg’.
Scholenprogramma
Bovenaan de content staat een foto met de alt-tekst ‘Afbeelding: Scholenprogramma’. Dit beschrijft niet wat er op de foto staat. Voeg een goede beschrijving toe en laat de tekst ‘Afbeelding’ weg, omdat de screenreader dat nu dubbel voorleest. (Een img-element wordt al voorgelezen als ‘afbeelding’).
Mijn profiel
De afbeelding van de profielfoto heeft geen alt-attribuut. Voeg een alt-tekst toe met een goede beschrijving.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Podcasts Goede raad luistert
Uitkomst: Onvoldoende
Podcasts Goede raad luistert
De podcasts hebben geen alternatief voor doven en slechthorenden. Voeg voor elke podcast een transcript toe.
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
Agenda
Uitkomst: Onvoldoende
Artikel Ontwikkelingsplan Hortus
Uitkomst: Onvoldoende
Raadsleden
Uitkomst: Onvoldoende
Raadslid profiel
Uitkomst: Onvoldoende
PvdA
Uitkomst: Onvoldoende
Hoe werkt de raad
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Mijn profiel
Uitkomst: Onvoldoende
Mijn raad
Uitkomst: Voldoende
Random pagina 1 blog
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De invoervelden in het inlogscherm hebben geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
Homepage
De pagina heeft geen logische koppenstructuur:
Binnen de nieuwsitems staan het raadsnummer en de datum opgemaakt als h6-kop. Deze tekst behoort geen kopopmaak te hebben, omdat er geen content achter volgt.
Ook de link ‘meer nieuws’ bevat onterecht een h6-kop. Het is voldoende als dit alleen een link is.
In de footer staan h6-koppen die er niet horen te staan, om links en teksten over de website. Haal de kopopmaak hier ook weg. Zie screenshot 4. Voor de links is het logischer om deze in een lijst te zetten (ul-element).
Het kopje ‘Gemeenteraadsverkiezingen’ is niet als kop opgemaakt, maar met het strong-element. Screenreader gebruikers die navigeren via koppen missen deze kop nu. Maak hier een h3- of h3-kop van.
Agenda
De pagina heeft veel h6-koppen waar geen kopopmaak behoort te zijn, zoals om het kruimelpad en de filters. Ook de introteksten in de nieuwsitems hebben hier onterecht een h6-kop. Zie screenshot 5. Dit komt op veel pagina’s voor, bijvoorbeeld op de pagina Raadsleden bij de functies en op de pagina Artikel Ontwikkelingsplan Hortus bij de metagegevens boven en onder het artikel.
Het tekst-invoerveld om te zoeken heeft geen label. Er staat een placeholdertekst, 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. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
Onder de zoekfunctie staan checkboxes met onderwerpen. Deze hebben geen labels. Er staat een tekst achter, maar deze is niet verbonden aan het invoerveld zodat hulpsoftware het kan herkennen. Zet deze tekst in een label element en verbindt deze met het ‘for’-attribuut aan het id van het invoerveld.
Artikel Ontwikkelingsplan Hortus
De kopvolgorde klopt niet op deze pagina. De h5-kop ‘Vergelijkbare artikelen’ valt onder de h4-kop ‘Eerdere berichten’, maar visueel lijkt dit een apart onderdeel te zijn. Zie screenshot 6.
Raadsleden
De eerste paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen. Dit komt op meerdere pagina’s voor, bijvoorbeeld op de pagina Ingekomen stukken bij de teksten boven de tabel.
Raadslid profiel
De lijst met functies is niet helemaal correct opgemaakt. Er staat een paragraaf element direct onder het ul-element. Dit kan problemen geven voor screenreaders. Zet onder een ul-element alleen li-elementen.
PvdA
De pagina heeft geen logische koppenstructuur. Bovenaan staat een h3-kop ‘Logo politieke partij PVDA’ (dit is een vreemde koptekst omdat er alleen een afbeelding in staat) met daaronder een h3-kop ‘Raadsleden’. Deze raadsleden vallen onder de PVDA, dus moeten daarom een kop hebben op een lager niveau dan ‘PVDA’. Beter is het om van ‘PVDA’ een h2-kop te maken. Zie screenshot 7.
Hoe werkt de raad
Tussenkopjes staan opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier h3-kopelementen van. Dit komt op meerdere pagina’s voor, bijvoorbeeld op de pagina Scholenprogramma.
Bij sommige woorden wordt er op hover een tooltip tekst zichtbaar, zoals bij ‘beleid’. Deze is niet beschikbaar voor gebruikers van hulpsoftware, doordat deze tekst verborgen is via CSS.
Scholenprogramma
De pagina heeft een h3-kop en daarna een h2-kop met beide de tekst ‘Scholenprogramma’. De eerste h3-kop heeft hier geen functie. Deze dubbele koppen komen op meerdere pagina’s voor.
De invoervelden in het aanmeldformulier hebben geen label voor hulpsoftware. Er staat een label element, maar deze is niet verbonden aan het invoerveld via het ‘for’-attribuut.
Mijn profiel
Meerdere invoervelden hebben geen label voor hulpsoftware. Bijvoorbeeld het invoerveld om een foto te uploaden en een woonplaats en buurtnaam te kiezen, en om een Mastodon id in te voeren. Voeg een (correct) gekoppeld label element toe of een aria-label.
Mijn raad
Opmerking: Er worden tabellen gebruikt voor layout doeleinden. Om ervoor te zorgen dat screenreaders dit niet als tabeldata voorlezen, wordt aangeraden het attribuut ‘role’=”presentation” toe te voegen op het table element. Dit komt op meerdere pagina’s voor, bijvoorbeeld op Contact.
Random pagina 1 blog
De foto bovenaan de pagina is opgemaakt als een h5-kop. Deze kopopmaak heeft hier geen functie en kan beter worden weggehaald.
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
Mijn profiel
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In het inlogformulier is autocomplete uitgezet via de waarde ‘off’.
Mijn profiel
Het ‘autocomplete’-attribuut is niet correct gebruikt. Op de velden voornaam, achternaam en e-mailadres hebben deze de waarde ‘never’. Bij het veld Woonplaats staat geen ‘autocomplete’-attribuut. Zie voor de correcte waardes https://www.w3.org/TR/WCAG21/#input-purposes.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
Agenda
Uitkomst: Onvoldoende
Mijn profiel
Uitkomst: Onvoldoende
Agenda
Binnen de items staan links met de tekst ‘Verder lezen’. Deze links worden alleen met een verschil in kleur aangegeven. Slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijker te maken. Dit komt ook voor bij de links in het inlogscherm.
Mijn profiel
Bij de checkboxes voor de interessegebieden wordt de focus alleen aangegeven m.b.v een andere kleur. Zie screenshot 8. Voeg een andere aanwijzing toe, bijvoorbeeld een dikkere rand.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vergaderschema
Uitkomst: Onvoldoende
Hoe werkt de raad
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Contactgegevens griffie
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 placeholdertekst in het zoekveld (lichtgrijs, 1.71:). DIt geldt zowel voor het zoekveld in de header als binnen de pagina van Agenda.
De placeholderteksten binnen invoervelden zoals in het inlogscherm en op Mijn profiel.
De tekst van de foutmelding bij het inloggen (3.96:1).
Homepage
Het raadsnummer en de publicatiedatum in de items in de slider (2.1:1). Deze teksten komen op meerdere pagina’s voor.
De grijze teksten in de footer (2023 Raad van Almere Powered by…, 4.2:1).
Vergaderschema
De rode tekst achter de * onder de lijst (3.99:1).
Hoe werkt de raad
De knop ‘aanmelden nieuwsbrief’ (2.71:1). Deze knop komt op meerdere pagina’s voor.
Scholenprogramma
De asterisk achter de verplichte invoervelden (oranje, 4.3:1).
De tekst van de foutmelding over het telefoonnummer (rood/roze, 3.53) en de melding dat het bericht is verzonden (groen/groen, 2.4:1). Zie screenshot 15 en screenshot 16.
Contactgegevens griffie
De oranje tekst bovenaan de content (2.84:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Zoekresultaten ‘cda’
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.
Het inzoomen op mobiele apparaten wordt belemmerd via het meta element, d.m.v. ‘user-scalable=no’ en ‘maximum-scale=1.0’.
Boven de 110% zoom verdwijnen de toegankelijkheidsfuncties voor kleur, tekstgrootte en spraak.
Opmerking: de voorleesoptie werkte niet tijdens het onderzoek.
Zoekresultaten ‘cda’
Bij het inzoomen wordt een deel van de teksten onleesbaar. Zie screenshot 12.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Agenda
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.)
Agenda
Op 400% zoom valt een deel van de tekst buiten beeld. Zie screenshot 11. Dit komt ook voor op de pagina Vergaderschema.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Voldoende
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Mijn profiel
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.
Mijn profiel
Op 400% zoom en met aangepaste tekstafstanden valt een deel van de tekst buiten beeld. Zie screenshot 13.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hoe werkt de raad
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De submenu’s kunnen alleen worden gesloten door de muis te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content uitklapt, 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.
Hoe werkt de raad
Wanneer je met de muis over bepaalde woorden gaat, verschijnt er een tooltip. Deze kan alleen worden gesloten door de muis te verplaatsen. Ook is het niet mogelijk om met de muisaanwijzer over de tooltip te bewegen. Deze problemen doen zich ook voor bij de tooltip op de pagina Mijn Profiel.
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Hoe werkt de raad
Uitkomst: Onvoldoende
Mijn profiel
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De submenu’s zoals onder Agenda zijn niet bereikbaar met het toetsenbord. Wanneer je inzoomt komt het menu achter een link te staan. Het menu kan wel geopend worden met het toetsenbord, maar de menu-items zijn niet bereikbaar.
De knop om naar het eigen profiel te gaan en uit te loggen werkt niet met het toetsenbord. Zie ook 4.1.2. Aanmelden werkt ook niet, doordat dit een link element is zonder ‘href’-attribuut.
De toegankelijkheidsfuncties (kleur, vergroting en audio) werken niet met het toetsenbord. Zie ook 4.1.2.
Hoe werkt de raad
Bij sommige woorden wordt er op hover een tooltip tekst zichtbaar. Met het toetsenbord zie je alleen een omlijning. Zie screenshot 9 en screenshot 10.
Mijn profiel
Achter Categorieën staat een vraagteken icoon. Deze laat op hover een tooltiptekst zien, maar met het toetsenbord werkt dit niet. Zie ook 4.1.2.
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: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De carrousel toont afwisselend verschillende afbeeldingen met verschillende teksten. Deze beweging is niet te stoppen of te pauzeren. Dit is hinderlijk voor mensen die bijvoorbeeld concentratieproblemen hebben of ADHD. De beweging leidt erg af van de tekst. Zorg ervoor dat er een mechanisme komt om de carrousel stop te zetten, bijvoorbeeld een pauzeknop. (En let er op dat deze ook werkt met het toetsenbord.)
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
Hele sample
Bevindingen:
Opmerking: Er zijn koppen en landmarks om blokken met links over te kunnen slaan. Voor veel toetsenbordgebruikers is een skiplink echter gemakkelijker om direct bij de hoofdcontent te kunnen komen. Navigatie via koppen en landmarks is namelijk alleen beschikbaar voor screenreadergebruikers. Het wordt daarom aangeraden een skiplink toe te voegen als eerste link op elke pagina.
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De webpagina’s hebben geen unieke titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Geef daarom altijd een beschrijving van de pagina in het title-element, bij voorkeur in de vorm ‘onderwerp – organisatie’.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Agenda
Uitkomst: Onvoldoende
Agenda
Binnen de agenda-items komt de focus op onzichtbare links. Dit is verwarrend voor toetsenbordgebruikers. Aangeraden wordt om per agenda-item enkel de focus op de titel te zetten. Dan heb je maar één tab-klik per item, in plaats van nu drie tab-kliks. Ook kan de focus op het blok als geheel worden gezet. Let daarbij wel op een goede linktekst.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Agenda
Uitkomst: Onvoldoende
Artikel Ontwikkelingsplan Hortus
Uitkomst: Onvoldoende
PvdA
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De links naar social media in de footer hebben geen linktekst. Voeg een (met CSS verborgen) tekst toe binnen de link, of voeg een ‘aria-label’-attribuut toe op de links die duidelijk maakt waar je naar toe gaat. Dit probleem doet zich ook voor bij een deel van de social media links onder content, zoals op de pagina ‘Raadslid profiel‘. Opmerking: de link naar WhatsApp werkt niet, dit is alleen een afbeelding.
Wanneer je inzoomt komt het menu achter een link te staan. Deze link heeft geen naam. Ditzelfde geldt voor de link om te zoeken.
Homepage
Er zijn meerdere links op de pagina met de tekst ‘Lees meer’. 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. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html. (Wat hier ook mogelijk is, is om de link op het gehele blok te zetten, dus 1 link per item in plaats van 2 links. De link kan dan om de titel heen staan, maar dat je met de muis en het toetsenbord het gehele blok kunt activeren.) Dit probleem komt op meerdere pagina’s voor, zoals op de pagina Raadsleden en op de pagina De partijen in de raad,, waar veel links staan met de tekst ‘Maak kennis’ en ‘Lees meer’.
Agenda
De links naar de agenda-items hebben geen tekst. Zie screenshot 1. Dit komt op meerdere pagina’s voor, zoals bij de zoekresultaten.
Artikel Ontwikkelingsplan Hortus
Onder ‘Tags’ staat een link zonder tekst. Zie screenshot 2.
PvdA
De links naar de profielen hebben geen tekst. Zie screenshot 3. Er staat ook al een link om de naam van het raadslid. Beter is het om deze extra lege links weg te halen.
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
Homepage
Uitkomst: Onvoldoende
Artikel Ontwikkelingsplan Hortus
Uitkomst: Onvoldoende
Raadsleden
Uitkomst: Onvoldoende
PvdA
Uitkomst: Onvoldoende
Zoekresultaten ‘cda’
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De focus op de knop om naar de bovenkant van de pagina te gaan is niet zichtbaar.
Homepage
Naast de kop ‘GEMEENTERAADSVERKIEZINGEN 2026’ staat een link met daarin een foto. Deze link krijgt focus, maar de focus is niet zichtbaar.
Artikel Ontwikkelingsplan Hortus
Aan de zijkant staan links onder 'Vergelijkbare artikelen'. De focus op deze links is niet zichtbaar. Dit komt op veel pagina's voor.
Raadsleden
Per raadslid komt de focus 2 keer op de link naar het profiel, de eerste keer onzichtbaar op de link achter de afbeelding. Aangeraden wordt om per item maar 1 keer de focus er op te zetten, op de ‘Maak kennis’ knop of op het blok als geheel. Dit probleem komt ook voor bij de link naar de partijen op de pagina De partijen in de raad en bij de blokken naar de raadsleden op de pagina PvdA. Per blok komt hier 3 keer de focus op dezelfde link, waarvan de eerste onzichtbaar.
PvdA
Na de paginacontent komt de focus op onzichtbare links. Dit lijken footer of header links, maar de pagina heeft geen zichtbare footer en header met menu’s.
Zoekresultaten ‘cda’
Per resultaat komt de focus eerst op een onzichtbare link, achter de foto. Aangeraden wordt om per item maar 1 keer de focus er op te zetten, op de titel of op het blok als geheel.
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De focus op de agenda-items in de slider is vaak 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
2.5.7: Dragging Movements
Hele sample
Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De tekstlinks in de footer (onder ‘Over deze site’ en ‘Actie’) staan te dicht bij elkaar, waardoor het ‘aanwijsgebied’ (grootte van het doel) te klein is. Bezoekers met een motorische beperking kunnen moeite hebben om links en buttons te selecteren die te klein zijn of te dicht op elkaar staan. Maak het doel minimaal 24px (nu is het 18px), gerekend vanaf het middenpunt van de link (link inclusief tussenruimte).
Dit probleem doet zich ook voor in linkblokken naast artikelen zoals op de pagina ‘Raadslid profiel’ onder ‘Actueel’.
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.2.6: Consistent Help
Hele sample
Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Mijn profiel
Uitkomst: Onvoldoende
Scholenprogramma
Wanneer er foutmeldingen zijn gevonden bij het verzenden van het formulier, wordt er niet in tekst aangegeven wat er fout is gegaan. Een goede foutmelding is wanneer er bijvoorbeeld wordt aangegeven dat een veld niet is ingevuld maar wel verplicht is, of niet correct is ingevuld. Bijvoorbeeld: ‘ Veld naam is verplicht en niet ingevuld.’ ‘Het emailadres is geen geldig adres, voer een adres in in de vorm naam@domein.com’. Nu wordt er alleen een rode rand getoond of een standaard browser validatie in het Engels. Zie screenshot 14. Dit probleem doet zich ook voor bij het bijwerken van de gegevens op de pagina Mijn profiel.
Opmerking: bij een fout telefoonnummer wordt het gehele formulier gewist en moet alles opnieuw worden ingevuld. Zie screenshot 15. Deze melding en de bevestiging dat het formulier is verzonden, worden getoond na een pagina refresh en zijn niet meteen zichtbaar. Je moet een stuk naar onderen scrollen om het resultaat te zien. Gebruikers kunnen dit missen. Dit kan worden opgelost met een statusbericht (zonder refresh), waarbij ook screenreadergebruikers de wijziging krijgen voorgelezen. Zie ook https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html.
Opmerking: bij de checkboxes zijn nu alle opties verplicht d.m.v. het ‘required’-attribuut. Dit kan verwarrend zijn voor screenreadergebruikers. Beter is om dit attribuut weg te halen en de tekst ‘verplicht’ in het label te zetten.
Mijn profiel
Opmerking: Het invoerveld voor Twitter verschijnt alleen als je je woonplaats gaat bijwerken.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Scholenprogramma
De betekenis van de asterisk (*) voor verplichte velden wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk, wat onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Scholenprogramma
Uitkomst: Onvoldoende
Scholenprogramma
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan moeten deze suggesties aan de gebruiker worden geleverd. Bij het e-mailadres en het telefoonnummer wordt een bepaald format geëist, maar deze wordt niet als suggestie gegeven. Voeg een suggestie toe, bijvoorbeeld: ‘het emailadres moet in deze vorm worden ingevoerd: ‘naam@domein.com’. Dit geldt ook voor de foutmelding bij het e-mailadres in het inlogformulier.
In het hoofdmenu staat een knop om naar het profiel te gaan. Deze knop heeft geen goede rol en naam. Het is nu enkel een afbeelding. Maak hier een button element van en geef daarbij ook aan of het submenu geopend is of gesloten. Dit kan worden gedaan m.b.v. het ‘aria-expanded’-attribuut.
De knop om het zoekvenster te sluiten (kruis icoon) heeft geen naam. Voeg bijvoorbeeld een aria-label toe.
Wanneer je inzoomt komt het menu achter een link te staan. Deze link heeft geen naam.
Aan de rechterkant van het venster staan iconen voor toegankelijkheid. Deze knoppen hebben geen naam en rol. Het zijn nu enkel div-elementen. Hierdoor zijn deze functies niet aanwezig voor gebruikers van toetsenbord en hulpsoftware. Maak hier button elementen van met een goede beschrijving en geef ook de waarde aan (of ze aan of uit staan).
Agenda
Onder de zoekfunctie staan checkboxes met onderwerpen. Deze hebben geen naam. Zet de tekst van het invoerveld in een label element en verbindt deze met het ‘for’-attribuut aan het id van het invoerveld.
Artikel Ontwikkelingsplan Hortus
Onder ‘Eerdere berichten’ staan knoppen waarmee meer tekst kan worden uitgeklapt. De waarde (in- of uitgeklapt) wordt niet doorgegeven aan hulpsoftware. Dit kan worden gedaan m.b.v. het ‘aria-expanded’-attribuut.
Raadslid profiel
De foto opent in een lightbox. De knoppen binnen deze popup hebben geen goede rol en naam. Het zijn enkel div-elementen. Maak hier button elementen van met een goede beschrijving.
Scholenprogramma
De invoervelden in het aanmeldformulier hebben geen naam. Koppel de label elementen aan de invoervelden m.b.v. het ‘for’-attribuut.
Podcasts Goede raad luistert
De iframes met de podcasts hebben geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title attribuut met beschrijving toe of een aria-label.
Mijn profiel
Meerdere invoervelden hebben geen naam. Bijvoorbeeld het invoerveld om een foto te uploaden en een woonplaats en buurtnaam te kiezen, en om een Mastodon id in te voeren. Voeg een (correct) gekoppeld label element toe of een aria-label.
Achter Categorieën staat een vraagteken icoon, welke op hover een tooltip laat zien. Deze tooltip component heeft geen goede rol. Zet bijvoorbeeld een button element om het icoon en koppel deze aan de tooltiptekst via ‘aria-describedby’. Geef de tooltip container een role=”tooltip”. Dit probleem doet zich ook voor op de pagina ‘Hoe werkt de raad’, bij de woorden met uitleg via een tooltip.
