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
SED
Evaluatiedatum
29 januari 2025
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 32 van de 50 verplichte 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:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
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
enkhuizen.nl
Scope van de website
Alle pagina's op https://www.enkhuizen.nl/.
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.
23Voldoende
18Onvoldoende
14Niet 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
Nieuwsbericht Interesse in lokale politiek
Uitkomst: Onvoldoende
Belastingen en subsidies overzicht
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo in de header heeft de zichtbare tekst 'Gemeente Enkhuizen' maar de alt- tekst luidt 'Logo SED - Enkhuizen'. Zorg dat de alternatieve tekst gelijk is aan de zichtbare tekst.
Nieuwsbericht Interesse in lokale politiek
De foto bovenaan het artikel heeft geen alt-attribuut. Screenreadergebruikers weten niet wat voor afbeelding dit is, en krijgen mogelijk de bestandsnaam voorgelezen. Geef bij de foto in de alt-tekst een korte beschrijving van wat er op de foto te zien is.
Belastingen en subsidies overzicht
Boven elke lijst staat een afbeelding waarvan de alt-tekst bestaat uit een herhaling van de titel, zoals ‘Belastingen’. Dit is geen correcte beschrijving van de afbeelding. Het is beter om de alt-teksten hier leeg te laten zodat de screenreader de afbeeldingen negeert.
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
Contact
Uitkomst: Onvoldoende
Contactformulier (proces)
Uitkomst: Onvoldoende
Identiteitskaart aanvragen
Uitkomst: Onvoldoende
Nieuwsbericht Interesse in lokale politiek
Uitkomst: Onvoldoende
Belastingen en subsidies overzicht
Uitkomst: Onvoldoende
Nieuwsbrief
Uitkomst: Onvoldoende
PDF besluit Woo verzoek
Uitkomst: Onvoldoende
PDF besluitenlijst 17-12-2025
Uitkomst: Onvoldoende
Contact
De lijst met openingstijden is niet correct opgemaakt. Er zit een lijst (ul-element) direct in een andere lijst. Dit kan problemen geven voor het uitlezen door hulpsoftware.
De invoervelden onder 'Heeft u gevonden wat u zocht?' hebben geen label. Er staat een gekoppeld label element in de code, maar deze heeft geen tekst. ‘Ja’ en ‘Nee’ wordt er in gezet via CSS. Daardoor hebben de invoervelden nu geen naam voor hulpsoftware. Zet deze teksten in de HTML.
De actieve pagina in het menu wordt aangegeven met een andere styling. In de tekst wordt dit echter niet aangegeven. Hulpsoftware kan niet opmaken uit de code welke pagina actief is. Voeg hiervoor bijvoorbeeld aria-current=“page” toe aan het actieve menu-item.
Contactformulier (proces)
De verplichte velden worden aangegeven met een asterisk, die door middel van het pseudo-element ::after en de content property in de CSS op de pagina wordt gezet. Op deze manier kan het zijn dat het teken wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. CSS is alleen geschikt voor het toevoegen van puur decoratieve content. Beter is het om de asterisk in de HTML te plaatsen als image met een alt-tekst of in de vorm van tekst (‘verplicht’).
Identiteitskaart aanvragen
De koppenstructuur is niet helemaal logisch opgemaakt. Er is een h2-kop ‘Veelgestelde vragen’. Hieronder staan meerdere vragen met een kop, welke ook op h2-niveau staat. Deze horen dan een niveau lager te staan.
Nieuwsbericht Interesse in lokale politiek
De koppenstructuur is niet helemaal logisch opgemaakt. Er is een h3-kop ‘Meer nieuws’. Hieronder staan meerdere items met een kop, welke ook op h3-niveau staan. Het is hier beter om de kop ‘Meer nieuws’ op h2-niveau te zetten, zodat de nieuwsitems er qua hiërarchie onder vallen.
Belastingen en subsidies overzicht
De lijst met links onder Belastingen is niet correct opgemaakt. De uitklapbare items onder de 'Toon meer' knop staan in een div-element in plaats van een ul-element. Dit kan problemen geven voor het uitlezen door hulpsoftware. Een ul-element mag alleen li-elementen bevatten.
Nieuwsbrief
Er zijn visueel verborgen invoervelden zonder label, welke niet verborgen zijn voor hulpsoftware. Het gaat om een invoerveld vlak voor en een na het formulier. Zorg dat deze ook voor screenreaders verborgen worden, bijvoorbeeld via ‘aria-hidden’ (Nu kom je met de screenreader op deze velden terecht, maar het invullen lukt niet.) Zie screenshot 1.
PDF besluit Woo verzoek
Hoewel er in de metagegevens staat dat het document getagd is, zijn er geen tags beschikbaar. Screenreaders lezen daardoor enkel ‘lege pagina’. Deze codelaag moet worden aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.
PDF besluitenlijst 17-12-2025
De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.
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
Contactformulier (proces)
Uitkomst: Onvoldoende
Contactformulier (proces)
De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Autofill maakt het invullen van formulieren voor veel gebruikers gemakkelijker, zoals voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Voeg de juiste ‘autocomplete’-attributen toe bij de invoervelden. Zie voor de volledige lijst https://www.w3.org/TR/WCAG21/#input-purposes. Deze bevinding komt ook voor op de pagina Nieuwsbrief.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
Jongeren Adviesraad
Uitkomst: Voldoende
Nieuwsbrief
Uitkomst: Onvoldoende
Jongeren Adviesraad
Opmerking: De links in de tekst worden alleen met een verschil in kleur aangegeven. Omdat het contrast tussen de links en de omliggende tekst meer dan 3:1 is, wordt dit hier toegestaan. Echter, slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijk te maken. Dit komt op meerdere plekken voor, bijvoorbeeld op de pagina over de Nieuwsbrief.
Nieuwsbrief
Wanneer het formulier wordt verzonden zonder het e-mailadres in te vullen, wordt visueel alleen in kleur aangegeven dat er iets fout is gegaan. Zet ook in tekst een melding erbij. Bijvoorbeeld: ‘het e-mailadres is verplicht en niet ingevuld.’
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Contactformulier (proces)
Uitkomst: Onvoldoende
Afspraak maken
Uitkomst: Onvoldoende
PDF besluit Woo verzoek
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.
Contactformulier (proces)
De links om de pagina af te drukken en naar boven te gaan (2.9:1).
De links in de footer naar het privacybeleid en de cookies (3.62:1).
Blauwe links binnen het formulier zoals ‘vorige stap’ (3.62:1).
De rode ‘afbreken’ knop (4.28:1).
De rode foutmeldingen op roze achtergrond (3.74:1).
Afspraak maken
In de datepicker staat zwarte tekst op een donkerblauwe achtergrond. Deze tekst voldoet niet aan de minimale contrasteis. De zwarte knoppen om tussen de maanden te navigeren voldoen net wel (3.0:1), maar het is raadzaam hiervan ook het contrast nog wat te verhogen.Zie screenshot 6. De hoge-contrast-variant van deze pagina biedt hier geen goed alternatief, omdat daarin ook meerdere onderdelen te weinig contrast hebben en sommige teksten zelfs geheel onzichtbaar zijn (witte tekst op witte achtergrond). Zie screenshot 7.
PDF besluit Woo verzoek
De gele kopjes in de footer zoals ‘Bezoekadres’ (1.3:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Afspraak maken
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.)
Vanaf 175% verdwijnen de toegankelijkheidsopties aan de zijkant (Readspeaker, Tekstgrootte en Contrast).
Vanaf 200% verdwijnt het broodkruimelpad. Met name op dieper liggende pagina’s geeft dit waardevolle informatie over waar de bezoeker zich bevindt.
Vanaf 300% wordt een deel van het menu onzichtbaar. Hier kan ook niet heen gescrolld worden. Zie screenshot 9.
Contact
Op 400% moet je in 2 richtingen scrollen om een cijfer te geven in de feedback functie. Zie screenshot 8.
Afspraak maken
Op 400% lopen het invoerveld voor het telefoonnummer en content door elkaar heen. Zie screenshot 10. In het overzicht loopt het e-mailadres deels buiten beeld.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Nieuwsbrief
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.
Nieuwsbrief
De randen van de invoervelden van het formulier hebben een contrast van 1.5:1 met de achtergrond. Slechtzienden kunnen moeite hebben om te bepalen waar ze input kunnen geven. Verhoog het contrast van de randen van de velden ten opzichte van de achtergrondkleur tot tenminste 3:1.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Voldoende
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Contactformulier (proces)
Uitkomst: Onvoldoende
Contactformulier (proces)
Ingezoomd vanaf 175% klappen de stappen achter ‘Voortgang’ in achter een knop bovenaan het formulier. Met de muis kun je deze uitklappen, met het toetsenbord werkt dit niet.
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
PDF besluit Woo verzoek
Uitkomst: Onvoldoende
PDF besluitenlijst 17-12-2025
Uitkomst: Onvoldoende
PDF besluit Woo verzoek
De titel van het document beschrijft de inhoud niet. De titel luidt ‘Geanonimiseerd document’. Maak hier bijvoorbeeld van ‘Besluit Woo verzoek vergunningen Welwonen Bloemenbuurt’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Pas de titel aan in de Documenteigenschappen in Adobe PDF. Stel daarnaast in de eigenschappen in dat de documenttitel wordt getoond in plaats van de bestandsnaam.
PDF besluitenlijst 17-12-2025
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. Stel daarnaast in de eigenschappen in dat de documenttitel wordt getoond in plaats van de bestandsnaam.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Belastingen en subsidies overzicht
Uitkomst: Onvoldoende
Belastingen en subsidies overzicht
Wanneer je de link 'Toon meer' activeert en dan verder navigeert (met de tab-toets), ga je verder in de volgende sectie in plaats van in de sectie waar je meer links wilde zien. Dit kan verwarrend zijn voor screenreader gebruikers, die niet weten dat ze nu in een ander onderwerp zitten. Zorg dat de focus verder gaat bij de links die zojuist geopend zijn.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Afspraak maken
Uitkomst: Onvoldoende
Opvang vluchtelingen
Uitkomst: Onvoldoende
Nieuwsbrief
Uitkomst: Onvoldoende
Afspraak maken
In de paragraaf onder ‘Waarom werken op afspraak?‘ staat een link naar een telefoonnummer zonder tekst. Het doel van deze link is daardoor voor screenreadergebruikers niet duidelijk. Deze link lijkt er dubbel in te staan en kan daarom beter worden weggehaald.
Opvang vluchtelingen
Onderaan de pagina staat visueel een link naar een e-mailadres. In de code (en wanneer je de links aanklikt), zijn het echter 3 verschillende links. Dit is nogal verwarrend. Zie screenshot 4.
Nieuwsbrief
In de eerste paragraaf staan 3 lege e-mail links. Het doel van deze links is daardoor voor screenreader gebruikers niet duidelijk. Zie screenshot 2.
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
Belastingen en subsidies overzicht
Uitkomst: Onvoldoende
Belastingen en subsidies overzicht
Achter de afbeeldingen boven elke lijst zit een link naar de categorie. De focus komt hierop terecht, maar deze is niet zichtbaar. Geef de link een zichtbare focusstijl of zorg dat de link geen focus kan ontvangen als deze niet bereikbaar moet zijn. (De links werken niet met de muis.)
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: Onvoldoende
PDF besluit Woo verzoek
Uitkomst: Onvoldoende
PDF besluitenlijst 17-12-2025
Uitkomst: Onvoldoende
PDF besluit Woo verzoek
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 besluitenlijst 17-12-2025
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: 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
Nieuwsbrief
Uitkomst: Onvoldoende
Nieuwsbrief
In het formulier 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 validatie met duidelijke teksten over wat er fout gaat. Dus niet alleen ‘Vul dit veld in’ of ‘Dit veld is verplicht’, maar bijvoorbeeld ‘Het veld e-mail is niet ingevuld, en dit is verplicht’. Zie screenshot 5.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Contactformulier (proces)
Uitkomst: Onvoldoende
Contactformulier (proces)
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. Ook kan een ‘required’ of ‘aria-required’ attribuut behulpzaam zijn voor gebruikers van hulpsoftware, aangezien de asterisk niet door alle screenreaders goed wordt voorgelezen. Dit komt ook voor bij de Nieuwsbrief.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Contactformulier (proces)
Uitkomst: Onvoldoende
Contactformulier (proces)
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 de postcode wordt een bepaald format geëist, maar deze wordt niet als suggestie gegeven. Voeg een suggestie toe, bijvoorbeeld: ‘de postcode moet in deze vorm worden ingevoerd: 1234AB’.
Het zoekveld met suggesties is niet correct opgemaakt. Het is een combobox waarvoor het ‘aria-controls’-attribuut vereist is om aan te geven wat er geopend wordt. Ook is de lijst die geopend wordt niet correct opgemaakt. Dit kan worden opgelost door deze de rol ‘listbox’ te geven. De list-items met de rol van ‘option’ kunnen geen geneste link elementen bevatten. Deze worden nu genegeerd door hulpsoftware. Screenreadergebruikers kunnen daardoor de suggesties nu niet goed gebruiken. Zowel VoiceOver (Mac) als NVDA (Windows) zegt bij elke suggestie nu alleen ‘Object object’). Zie voor meer informatie over hoe de combobox correct op te maken https://www.w3.org/TR/wai-aria-1.1/#combobox.
Op het zoekveld staat de status ‘aria-expanded’ op ‘true’, ook als er nog geen lijst met suggesties te zien is. Dit is verwarrend voor screenreadergebruikers. Zie screenshot 3. Zorg dat deze status alleen op ‘uitgeklapt’ staat als er daadwerkelijk suggesties open staan. Dit geldt ook voor het zoekveld in de header.
Afspraak maken
Bovenaan het formulier staat een voortgangsbalk. Deze heeft attributen voor hulpsoftware ‘aria-valuemin’ , ‘aria-valuemax’ en aria-valuenow’. Het element van de voortgangsbalk heeft echter geen geldige rol, bijvoorbeeld ‘range’. Hierdoor kan hulpsoftware de informatie niet goed doorgeven aan de gebruiker. Zie ook https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin.
Het eerste invoerveld onder 'Product' is een combobox, welke niet goed is opgemaakt. Het ‘aria-controls’-attribuut is hier vereist. (Zie ook de opmerkingen over het zoekveld.) Het invoerveld om een product te kiezen dat hierna opent, heeft geen label. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk waar dit veld voor is. Dit is een span element met als role 'textbox'. Voor screenreadergebruikers is het nu niet duidelijk wat er gebeurt: voor het tekstveld wordt geen beschrijving gegeven en de suggesties worden ook niet voorgelezen.
4.1.3: Statusberichten
Hele sample
Uitkomst: Onvoldoende
Zoekresultaten
Uitkomst: Onvoldoende
Zoekresultaten
Wanneer er een nieuw zoekwoord wordt ingevuld of een filter ge(de)selecteerd verschijnt er rechtsboven een tekst met het aantal resultaten. Dit is een statusbericht, maar dit wordt niet programmatisch doorgegeven aan hulpsoftware. Een screenreadergebruiker weet nu niet dat er nieuwe resultaten zijn verschenen en hoeveel dit er zijn. Dit kan worden opgelost via het gebruik van live regions. Zie voor meer info https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques.
