Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid chatfunctionaliteit Gemeente Den Haag

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Chatfunctionaliteit Gemeente Den Haag
Scope van de website - De chatfunctionaliteit op pagina www.denhaag.nl/nl/bestuur-en-organisatie/contact-met-de-…
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 46

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm met links bovenin het logo van de gemeente Den Haag. Dit logo mist een alt-attribuut. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie bevatten en eventuele tekst dat bij het logo staat.
Dit komt voor op alle schermen binnen de chatfunctionaliteit.

Bevinding 2: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnen rechts bovenin 4 klikbare afbeeldingen. Deze afbeeldingen missen een alt-attribuut met een alternatieve tekst. Gebruikers van hulpsoftware weten nu niet wat deze klikbare afbeeldingen doen.

Bevinding 3: Bij pop-ups verschijnen grijze venstertjes met een rood kruis die bedoeld zijn om het venstertje te sluiten. Bijvoorbeeld de pop-up 'Verzend e-mail' die verschijnt wanneer op de afbeelding geklikt wordt om het transcript te mailen. Het kruisje wordt nu voorgelezen als 'cross'. Geef de afbeeldingsknop een alternatieve naam 'Sluiten'.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: In de chat wordt 2 keer een kop <h1> gebruikt. Deze koppen zijn handig voor mensen die gebruik maken van hulpsoftware, mits de koppen goed worden toegepast. En dat gebeurt nu juist niet. Zo is de tekst 'Wilt u de chatsessie nu beëindigen?' opgemaakt met een h1-element terwijl dit in het geheel geen kop is. Zorg voor een koppenstructuur die duidelijk maken waar de pagina over gaat en ervoor zorgt dat de paginastructuur te bepalen is.

Bevinding 5: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. De tekst 'Welkom bij de chatservice van de gemeente Den Haag. Stel uw vraag aan een van onze medewerkers.' is met het strong-element opgemaakt. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden. Maak gebruik van de stylesheet om de zin in een vet lettertype te tonen. Dit komt ook voor wanneer de chat wordt geopend via de link 'Er is nu geen medewerker beschikbaar'.

Bevinding 6: In het tekstvenster van de chat wordt het strong-element ook gebruikt voor het tijdstip en de naam van degene die een bericht heeft gestuurd. Ook hier is het beter om niet het strong-element te gebruiken, maar via CSS of <b> deze tekst anders op te maken.

Bevinding 7: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Hierin staat een invoerveld naast 'Uw naam'. Dit invoerveld is in de code niet aan het label 'Uw naam' gekoppeld. Hierdoor mist het invoerveld ook een naam voor succescriterium 4.1.2.

Bevinding 8: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer na het starten van de chat, de chat wordt beëindigd, verschijnt de tekst 'Vul hier s.v.p. ons klanttevredenheidsonderzoek in'. In het scherm dat opent, staan een aantal vragen met daaronder checkboxes. De verbanden tussen de checkboxes en het label erboven zijn in de code niet aangegeven. Voor gebruikers van hulpsoftware is nu niet duidelijk welke vraag bij de checkboxes hoort. Maak bijvoorbeeld gebruik van een legend/fieldset combinatie om dit probleem op te lossen.

Bevinding 9: Advies: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Hierin staat een invoerveld naast 'Uw naam'. Deze tekst en het invoerveld zijn in de code als een tabel gecodeerd. Een tabel is bedoeld is om (complexe) relaties weer te geven. Gebruik een tabel daarom liever niet voor opmaak.

Bevinding 10: Je kunt het transcript van de chat naar een mailadres sturen. In de popup om je e-mailadres op te geven ontbreekt het label bij het invoerveld. Deze moet tevens aan het veld geassocieerd worden. (Zie ook SC 4.1.2)

Bevinding 11: Als je de chat eindigt sta je in een blanko scherm. Onder in het scherm zie je bij inzoomen soms de bovenkant van zwarte tekst staan. Deze tekst begint met '/* Static variables. */ var lastKeyPressed = false; ...'. Iemand met een screenreader krijgt al deze tekst voorgelezen. Zorg ervoor dat code niet zichtbaar wordt voor de bezoeker. Gebruik in HTML bijvoorbeeld <!-- om deze code weg te houden van de bezoeker.

Bevinding 12: In het klantonderzoekscherm is een invoerveld om verbeteringen door te geven. Het lijkt erop dat hier geen label aan geassocieerd is. Met hulpsoftware zoals een screenreader wordt het veld als volgt bekendgemaakt: 'Gemeente Den Haag, document invoerveld, meerdere regels, leeg'. Zorg dat alsnog een veldnaam aan het veld wordt gekoppeld zodat een blinde met de screenreader kan bepalen wat de bedoeling is van het veld.

Bevinding 13: In het klantonderzoekscherm zijn meerdere groepen keuzerondjes. Deze keuzerondjes zijn nu niet gegroepeerd. Gebruik een fieldset en legend combinatie of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 14: Er is een functie om de chatsessie te beëindigen. Er verschijnt dan een grijs popupvenstertje. In de kop van het venster staat 'Chatsessie beëindigen'. Dit is een kop maar is niet opgemaakt als een kop. Geeft deze tekst als opmaak een h1-element. Dit geldt ook voor de andere grijze chatvenstertjes.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 15: Aan het begin van de chat moet je je naam invullen. Het doel van dit veld kan programmatisch worden bepaald, zodat extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. In dit geval voor de naam autocomplete="name".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: www.w3.org/tr/wcag21/.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 16: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Hierin staat een invoerveld naast 'Uw naam'. Wanneer het invoerveld de focus ontvangt, verandert de rand van het invoerveld naar lichtblauw. De focus is dan alleen waarneembaar door middel van een kleurverschil. Er verschijnt wel ook een nog lichtere rand omheen, maar deze heeft een te lage contrastwaarde. Zorg ervoor dat de focus niet kleurafhankelijk is, door te zorgen dat het contrast van beide focusranden hoog genoeg is. Zie ook succescriterium 1.4.11.
Dit geldt voor alle invoervelden in de chatfunctionaliteit.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 17: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnen de teksten van de agent in het grijs. Deze grijze kleur heeft een contrastwaarde van 3,6:1 met de achtergrond, maar dit moet minimaal 4,5:1 zijn.

Bevinding 18: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer na het starten van de chat, de chat wordt beëindigd, verschijnt de tekst 'Vul hier s.v.p. ons klanttevredenheidsonderzoek in'. Deze blauwe tekst heeft een contrastwaarde van 3,9:1, maar moet minimaal 4,5:1 zijn.

Bevinding 19: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer na het starten van de chat de optie wordt gekozen om een transcript te laten mailen, verschijnt de pop-up 'Verzend e-mail'. Deze grijze tekst op de lichtgrijze achtergrond heeft een te lage contrastwaarde van 4,3:1. Dit moet minimaal 4,5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bij een schermgrootte van 1024x768px ingezoomd wordt tot 200% dan zal op het klantonderzoek een deel van de tekst in bij vraag 8 door en over elkaar heen gaan en is daardoor onleesbaar.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 21: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Onderaan in de footer staat de klikbare afbeelding/link 'powered by LiveCom.net - Live Customer Service'. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 22: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, het scherm en er wordt ingezoomd tot 400%, wordt een groot deel van het scherm in beslag genomen door de header. In Firefox kan de chat zelf echter nog wel worden bekeken, maar in Chrome valt het tekstveld met de chatberichten weg en is er geen manier om deze te bekijken.

Bevinding 23: Wanneer je op het klantonderzoek inzoomt tot 200% (of verder) dan verschijnt er een horizontale scrollbalk. (in Chrome) Zorg dat de content niet aan de zijkant uit het scherm loopt. Tevens loopt bij vraag 8 de tekst door en over elkaar heen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 24: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Hierin staat een invoerveld naast 'Uw naam'. De randen van dit invoerveld hebben een te lage contrastwaarde met de achtergrond. De contrastwaarde is nu 1,3:1 maar moet minimaal 3,0:1 zijn.
Wanneer hetzelfde invoerveld de focus ontvangt, verandert de rand van het invoerveld naar lichtblauw. Deze rand heeft dan een contrastwaarde van 1,7:1 met de achtergrond. Er verschijnt ook een nog lichtere rand omheen, die een contrastwaarde heeft van 1,2:1. Het contrast van de focusrand moet minimaal 3,0:1 zijn.
Dit geldt voor alle invoervelden in de chatfunctionaliteit. Bij sommige velden verschijnt alleen de lichtere rand, zoals bij de invoervelden in de pop-ups.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 25: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnen rechts bovenin 4 klikbare afbeeldingen. Deze afbeeldingen zijn niet bedienbaar met het toetsenbord. Dit wordt vooral veroorzaakt doordat deze elementen geen correcte rol hebben, zie ook succescriterium 4.1.2.

Bevinding 26: Op sommige plekken wordt gebruik gemaakt van een soort popupvenster, zoals in de pop-up 'Verzend e-mail' die verschijnt wanneer op de afbeelding geklikt wordt om het transcript te mailen. De rode kruis om dit popupvenster te sluiten is niet bedienbaar met toetsenbord. Het is een knop dus daar is een speciaal HTML-element genaamd button beschikbaar om de knop te laten werken. Door hier de HTML op correcte wijze toe te passen kunnen andere succescriteria ook meteen voldoen, zonder extra programmeerwerk.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 27: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. De titel van de pagina is 'Gemeente Den Haag'. Hieruit is niet duidelijk op te maken dat dit het chatvenster betreft. Dit geldt voor alle schermen binnen de chatfunctionaliteit. Zorg dat aan elke scherm (welkomstscherm, chatscherm en feedbackscherm) een goede titel wordt toegekend zodat duidelijk is waar het venster voor dient. Dit is met name belangrijk als de bezoeker vanuit de chat heen en weer wisselt met het venster van de website van Den Haag.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 28: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer na het starten van de chat, de chat door de gebruiker wordt beëindigd, verschijnt een pop-up waarin wordt geverifieerd of de gebruiker echt de chat wil sluiten. De focus komt niet in de pop-up maar blijft op de achterliggende pagina staan.

Bevinding 29: Wanneer je klaar bent met de chat of kiest voor afsluiten, dan verwacht je dat het automatisch geopende chat-venster gesloten wordt en je weer terug kan keren naar waar je het laatst was in de browser. De (nieuwe) vensters blijven open staan.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 30: De chatbox heeft een invoerveld. Het is niet zichtbaar aangegeven dat daar een vraag gesteld kan worden of een reactie gegeven kan worden.

Bevinding 31: In de popup om je e-mailadres op te geven ontbreekt het label bij het invoerveld.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 32: De focus op de invoervelden is niet goed zichtbaar door een te lage contrastwaarde. Zie hiervoor succescriterium 1.4.11.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 33: Een aantal invoervelden zijn in de code niet gekoppeld aan de visueel zichtbare naam. Zie hiervoor de succescriteria 1.3.1 en 4.1.2.

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: Onvoldoende

Bevinding 34: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. In de code mist het lang-attribuut met de NL taalcode. Dit is nodig zodat hulpsoftware de teksten in de correcte taal voorleest.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 35: Als je in het tekstvak iets invult en je wilt een tweede regel invoeren, dan kan je in een textarea normaal gesproken op Enter drukken zonder dat de inhoud wordt verstuurd. Dat gebeurt hier wel. Op zich hoeft dat geen probleem te zijn, maar de nieuwe status dat de tekst is verstuurd ontbreekt. De nieuwe status, dat deze tekst in het venster te lezen is, ontbreekt ook (zie SC 4.1.3). Er ontbreekt een Verzendknop om de tekst te versturen. Test voor dit onderdeel ook met blinden die met een screenreader werken, mensen die alleen met toetsenbord navigeren en met mensen die gebruik maken van spraakgestuurde software. Door het ontbreken van een knop kunnen mensen die gebruik maken van pointergestuurd device (zoals een muis) gebruikt heb je niet de mogelijkheid om het bericht te versturen.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 36: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnt een invoerveld waar de gebruiker zijn bericht kan typen. Dit invoerveld mist een visueel label.

Bevinding 37: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer na het starten van de chat, de chat wordt beëindigd, verschijnt de tekst 'Vul hier s.v.p. ons klanttevredenheidsonderzoek in'. Een aantal vragen moeten beantwoord worden door een getal tussen de 1 en de 10 te selecteren. Er is geen instructie geleverd die aangeeft wat deze getallen betekenen (1=slecht, 10=goed).

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 38: In de HTML-code van de chat komen dubbele id's voor, namelijk id="boxtitle". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 39: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Hierin staat een invoerveld naast 'Uw naam'. Dit invoerveld heeft in de code geen toegankelijke naam. Dit geldt voor alle invoervelden in de chatfunctionaliteit.

Bevinding 40: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnen rechts bovenin 4 klikbare afbeeldingen. Deze missen alle 4 een toegankelijke naam en een correcte rol (knop).
Met één daarvan kan het geluid worden gemutet of geünmutet. De waarde hiervan verandert niet in de code. Het is daardoor niet duidelijk wat de huidige staat is.

Bevinding 41: Binnen de chats verschijnen sommige functies in een grijze popupvenster, zoals de pop-up 'Verzend mail' die verschijnt als je op de afbeelding klikt om het transcript te mailen. Het rode kruisje dat verschijnt om de popup te sluiten heeft geen goede naam en rol.

Bevinding 42: Je kunt het transcript van de chat naar een mailadres sturen. In de popup om je e-mailadres op te geven ontbreekt het label bij het invoerveld. Deze moet tevens aan het veld geassocieerd worden. (Zie ook SC 1.3.1)

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 43: Wanneer de chat wordt geopend via de link 'Start een chatgesprek', verschijnt een welkomstscherm. Wanneer vervolgens de chat wordt gestart, verschijnen in groene tekst statusupdates, zoals 'U chat momenteel met [Naam]' of 'Chat is gestopt'. Deze statusupdates worden nu niet doorgegeven aan gebruikers van hulpsoftware, waardoor zij niet weten dat er iets gewijzigd is op het scherm.
Dit komt ook voor wanneer de gebruiker ervoor kiest om een transcript aan zichzelf te versturen ('De tekst van de chatsessie wordt per e-mail verstuurd naar...').

Bevinding 44: Tijdens de chat worden updates niet bekend gemaakt. Als aan de andere kant getypt wordt verschijnt er een melding, maar deze melding wordt niet doorgegeven aan hulpsoftware. Ook wanneer er een nieuw bericht binnenkomt wordt de gebruiker met hulpsoftware hier niet van op de hoogte gebracht. Ook kan de tekst van de chat niet bereikt worden door de screenreader waardoor het hele gesprek niet gevoerd kan worden.

Bevinding 45: Binnen de chats verschijnen sommige functies in een grijze popupvenster, zoals de pop-up 'Verzend mail' die verschijnt als je op de afbeelding klikt om het transcript te mailen. Er wordt niks gedaan om gebruikers van screenreaders in te lichten dat er nieuwe belangrijke informatie op het scherm is verschenen.

Bevinding 46: Geen toegankelijkheidsprobleem, maar een probleem voor iedereen: wanneer je feedback verstuurt of de chat eindigt verschijnt een leeg scherm. Al bezoeker heb je nu geen idee wat je moet doen en of het venster al gesloten kan worden (bijvoorbeeld als je het transcript in je mailbox wenst te ontvangen). Liefst zie je hier een melding dat de feedback goed is aangekomen en het transcript verstuurd is. Tot slot de bezoeker inlichten dat het venster gesloten kan worden.

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

Bronnen

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

Geprint: 2024-03-28 13:44:37 v2.3-011