Toegankelijkheidsonderzoek

Alleen de bevindingen:
Audit digitale toegankelijkheid Chatbot Ida inclusief demo-omgeving

Onderzoeker
Erik Kroes; Reviewer van 200 OK
Datum
13 april 2026
Opdrachtgever
Tom Moesker van ICTU

Scope van de evaluatie

Naam website Chatbot Ida inclusief demo-omgeving
Scope
  • alle pagina's en de chatbot op versnellers.nl
Conformiteitsdoel WCAG 2.1 niveau AA
Basisniveau van toegankelijkheid ondersteund Gangbare browsers en hulpsoftware.

Disclaimer

Een website bestaat vaak uit verschillende soorten pagina's, processen en content. De steekproef die wij maken is representatief voor de inhoud van de website. De onderzoeken voeren we handmatig uit waarbij we gebruik maken van hulpmiddelen. Dit doen wij zorgvuldig met mensen met ervaring. Omdat dit mensenwerk is kan het voorkomen dat een probleem niet is benoemd. Dit onderzoek is een momentopname. De website of app kan inmiddels veranderd zijn.

Leeswijzer

De gevonden problemen kunnen ook op pagina's buiten de steekproef voorkomen. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website of app kunnen nieuwe problemen ontstaan.

Het resultaat is voldoende als bij de uitkomst staat:

Het resultaat is onvoldoende als bij de uitkomst staat:

Uitgebreide toetsresultaten

Aantal bevindingen: 16

1. Waarneembaar

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 1: Als je het gesprek terug laat lezen door hulpsoftware dan is het niet duidelijk wat de bezoeker heeft gevraagd of gezegd. Ook ontbreekt er een semantiek waaruit je bijvoorbeeld de omvang van het gesprek kunt halen. Dit kan je bereiken door bijvoorbeeld het gesprek in een geordende opsomming te plaatsen en het gesprek op juiste wijze op te bouwen met wie wat zegt en wat er gezegd is. Houd rekening met hoe de bezoeker aangesproken wordt door de gemeente: "U zegt" of "Jij zegt". Deels, 2 openstaande bevindingen:

  1. role="article" hoort hier niet
  2. wat de bezoeker zegt wordt wel voorgelezen, maar "u zegt" of "jij zegt" ontbreekt.

Bevinding 2: In medium en large modus staan in de zijbalk de gespreksonderwerpen. Het geselecteerde gesprek wordt in vet in het overzicht getoond. Zorg dat deze informatie ook beschikbaar is voor blinden en slechtzienden. screenshot zijbalk Deels: aria-current is toegevoegd, dat is goed Vraag van de onderzoeker is, hoe bij het inklappen van de zijbalk nog duidelijk is met welk gesprek je bezig bent. Zou je misschien in het grote deel van het scherm, bijvoorbeeld in de bovenbalk de naam/titel van het gesprek toe moeten voegen? Voor het kleinste scherm is dat niet nodig, omdat je daar niet van gesprek kan wisselen.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 3: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt in de medium-modus veel functionaliteit en content van de chatbot buiten beeld of over elkaar heen. screenshot herschalen De zijbalk kun je wegvouwen, maar deze knop mist dan weer iets als aria-expanded (SC 4.1.2)

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 4: Wanneer de verstuurknop focus heeft, is dat zichtbaar door een grijze cirkelvormige focusrand. De contrastverhouding tussen de focusrand en de donkergrijze achtergrond is 1,5:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 5: Nieuw: De chatknop is nu met toetsenbord niet te bereiken, maar met muis wel te bedienen. Bevinding: de chatbotknop vormt en geheel met het chatbotvenster. Als deze openstaat (knop met status aria-expanded=true) zou je hier ook de focus verwachten om het venster weer te luiten.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Voldoende

Bevinding 6: Advies: de chatbotknop bevindt zich helemaal achteraan de code. Je kunt deze beter toegankelijk maken door bijvoorbeeld bij de skiplinks aan het begin van de pagina een link naar de chatbotknop op te nemen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Voldoende

Bevinding 7: Advies: Bij het openen van het chatbotvenster word je direct naar het invoerveld geleid. Hier is onderzoek met ervaringsdeskundigen nodig. Ik vraag me namelijk af of het niet handiger is voor iemand die blind is, dat je bovenin het venster wordt gezet zodat je als bezoeker van boven naar beneden het chatvenster kan verkennen. Nu wordt de bezoeker bijna aan het eind van het venster geplaatst. En heeft geen idee waar het gesprek in het venster staat. Wellicht een idee om dit alleen te doen als de bezoeker nog geen vragen heeft gesteld.


Bevinding 8: Advies: De focusvolgorde hangt af van de manier waarop het chatvenster geopend wordt, modal of non-modal. Als het non-modal is en het mogelijk is om naar andere pagina's te navigeren zonder het gesprek te verliezen voeg dan een pagina toe aan de demo. En zorg dat je op toegankelijke wijze van de ene naar de andere pagina kan navigeren. Advies: De chat is nu "modal". Echter is de achtergrond nog volledig zichtbaar. Iets van een backdrop zou duidelijker maken dat deze achtergrond niet te gebruiken is. Het onmogelijk maken van scrollen versterkt dit effect.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Voldoende

Bevinding 9: Advies: veel gemeenten maken gebruik van vertaalknop en verschillende soorten vertaalsoftware. Houd er rekening mee dat de chatbot dit ondersteunt. Als de website in het Engels is dan verwacht je ook een Engelstalige chatbot.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Voldoende

Bevinding 10: Advies: Als iemand ervoor kiest de vraag in een andere taal te stellen is het niet nodig om te raden naar de taal. Het lang-attribuut is dan niet noodzakelijk omdat je het risico loopt dat de verkeerde taalcode gebruikt wordt.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 11: In de code vinden we een <div> met aria-live="polite" aria-atomic="true">Chatvenster is geopend... Deze code is overbodig want de status wordt al gegeven door de knop die de chatbot opent. Of is er een ander methode om de chatbot te openen? Laat anders deze code weg. Openstaand: Maar er zijn nog 2 soortgelijken: "<div data-v-24e9b37c="" aria-live="polite" aria-atomic="true" class="sr-only">Chatvenster vergroot</div>" en "<div aria-live="polite" aria-atomic="true" class="sr-only">Je bent nu op pagina Testomgeving Ida</div>"


Bevinding 12: Advies: Plaats een zichtbare naam bij de knop om de chatbot te openen. Dit verbetert de herkenning voor velen, en maakt het voor mensen met spraakbesturing ook mogelijk om de knop te bedienen. voorbeeld knop


Bevinding 13: Advies: Voor een chatbot die relevant moet zijn terwijl de bezoeker de website gebruikt is “non-modal” een logische keuze. Voor consistentie en voorspelbaarheid is het dan belangrijk dat de website altijd bereikbaar en bedienbaar is als de chat open staat. De chat moet dan ook niet schermvullend zijn, ook niet op lage resoluties. Voor de te maken keuzes. Als het de bedoeling is om de chatbot non-modal te houden dan is het goed om ook navigeerbare elementen in de demo te plaatsen zodat getest kan worden wat er gebeurt als je naar een andere pagina gaat.


Bevinding 14: Opgelost: Er is een knop genaamd "Sluiten" in het chatvenster. Aangezien de chat alleen kleiner gemaakt wordt, en niet gesloten (zoals bij “modal”) is een andere naam passender. Ook de afbeelding op de knop is geen "X" maar een "v". gebruik daarom een term als “minimaliseer”, “verklein” of “maak klein”. Advies: Kijk ook hoe besturingssystemen deze knop benoemen.


Bevinding 15: Advies: Plaats bij knoppen ook de naam van de knop in tekst.


Bevinding 16: Nieuw: Als je in de medium modus staat kan je en 'Nieuw gesprek' openn via Ctrl+Shift+O. Als op Ctrl+Shift+O drukt en je houdt drze ingedrukt kan er een fout ontstaan. In dat geval komt er een dialoog-venster. Dit venster is niet gemarkeerd als modal (aria-modal), de focus kan naar de achtergrond, en de boodschap is deel engels (niet gemarkeerd als engels). Daarnaast is "begrepen" geen omschrijvende tekst voor een sluit-knop voorbeeld modal

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bij dit onderzoek is de volgende software gebruikt:

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Rapportinformatie: V2.0.1-WCAG2.1-R3.2-T0.15-nl