Rapport - Audit digitale toegankelijkheid chatfunctionaliteit Pleio
De website Chatfunctionaliteit Pleio voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 12 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.
De chatfunctionaliteit van Pleio is onderzocht op 28 mei 2021. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om de vervolgstappen te bepalen om tot een toegankelijke functionaliteit te komen.
De chatfunctionaliteit op fso.pleio.nl/cms/view/6d4157d2-7472-4091-a21c-4906228e2ec0/chat
Bevindingen: Als het chatvenster is geopend en het bericht is verstuurd, verschijnt een afbeelding van een robot tegenover het antwoord van de organisatie. Deze afbeelding is toegevoegd via het img-element. Deze afbeelding mist het alt-attribuut waardoor de bestandsnaam van de afbeelding wordt voorgelezen. Deze afbeelding is informatief omdat het aangeeft van wie dit bericht afkomstig is. Hier dient een alt-attribuut te komen met de naam van de afzender.
Als een gebruiker een afbeelding toevoegt aan de chat, komt deze afbeelding met de volgende alternatieve tekst in het chatoverzicht: 'Picture message'. De volgende afbeeldingen hebben dezelfde alternatieve tekst. De alternatieve teksten dienen uniek te zijn en in de taal van de website. Deze alternatieve teksten kunnen worden aangevuld met een cijfer om onderscheid tussen de afbeeldingen te maken. Of de laatste zin van voorafgaand bericht van de auteur te bevatten.
Bevindingen: Als het chatvenster is geopend en het bericht is verstuurd, verschijnt een invoerveld in beeld met placeholdertekst 'voer uw e-mailadres in'. De tekst die als een label erboven staat ('Ontvang een melding via e-mail') is in de code niet als label gekoppeld aan dit invoerveld.
Bevindingen: De leesvolgorde van informatie in het chatoverzicht is niet betekenisvol. Eerst komen de teksten van de berichten, gevolgd door de naam van de afzender. Het kan voorkomen dat de afzender meerdere berichten heeft verstuurd waardoor het voor een blinde gebruiker niet duidelijk wie de afzender is van het eerstvolgende bericht dat wordt voorgelezen. Beter zou zijn om bij de reacties van elke afzender met zijn naam te beginnen. Zo dient zijn naam als een soort kopje voor alle berichten die hij heeft geschreven.
Bevindingen: Als het chatvenster is geopend, staat er tegenover de naam van de organisatie ('FSO') een groene stip om aan te geven dat de organisatie online is. Deze informatie is alleen in kleur beschikbaar. Mensen die kleurenblind of slechtziend zijn, kunnen problemen hebben met het onderscheiden van kleuren of bepaalde kleuren zelfs helemaal niet zien. Daarom is het belangrijk om bij het overdragen van informatie niet alleen kleur te gebruiken, maar bijvoorbeeld ook (naast kleur) een andere vorm of tekst.
Als het chatvenster is geopend en het bericht is verstuurd, verschijnt een invoerveld in beeld met placeholdertekst 'voer uw e-mailadres in'. Als een foutief invoer wordt ingetoetst, kleurt de rand van het invoerveld rood om aan te geven dat er iets fout gaat. Deze foutmelding wordt alleen in kleur aangegeven en is daardoor niet voor iedereen toegankelijk is.
Als een gebruiker een afbeelding heeft toegevoegd die niet wordt verstuurd (verkeerd formaat of de afbeelding is te groot), blijft de afbeelding zichtbaar voor de gebruiker die het heeft geplaatst en blijft deze afbeelding onderaan het chatvenster staan. De afbeelding krijgt dan een grijze overlay. Hier wordt alleen in kleur aangegeven dat het versturen van deze afbeelding is mislukt.
Bevindingen: Als het chatvenster is geopend, staat onderaan het venster een invoerveld om het bericht te typen. De placeholdertekst heeft het kleurcontrast van 2,7:1. Dit moet minimaal 4,5:1 zijn.
Als een afbeelding is toegevoegd, verschijnt er in de rechteronderhoek van de afbeelding een datum van plaatsing. De tekstkleur is wit. Als er witte plekken op de afbeelding staan, wordt deze tekst bijna onleesbaar en heeft contrastwaarde van 1,1:1.
Bevindingen: Het volgende heeft niet direct betrekking op de chatwidget, maar kan de weergave en toegankelijkheid daarvan negatief beïnvloeden. Het inzoomen op een mobiel wordt belemmerd door de viewport instellingen (<meta name="viewport": user-scalable=no, max-width=, maximum-scale=1.0"). Deze code staat op het HTML-element van de pagina en heeft invloed op alles wat op deze pagina staat. Hier wordt aangeraden om dit stuk uit de code te verwijderen.
Bevindingen: Als het chatvenster is geopend, staat onderaan het venster een invoerveld om het bericht te typen. Dit invoerveld heeft geen rand en is afhankelijk van de witte achtergrondkleur om de grenzen van dit element aan te geven. Dit invoerveld staat op een lichtgrijze achtergrond. Het kleurcontrast is 1,1:1. Dit moet minimaal 3,0:1 zijn.
Als het chatvenster is geopend en het bericht is verstuurd, verschijnt een invoerveld in beeld met placeholdertekst 'voer uw e-mailadres in'. De randkleur van dit invoerveld is lichtgrijs op een witte achtergrond van het chatvenster. Het kleurcontrast is 1,3:1. Dit moet minimaal 3,0:1 zijn.
Bevindingen: De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. In de chatvenster is alleen de kop 'Waarmee kunnen we (..)' en de alinea daaronder zijn te zien. De status en de knop om de chat te beginnen vallen buiten de container waar ze in zitten.
Bevindingen: Als het chatvenster is geopend, staat onderaan het venster een invoerveld om het bericht te typen. De knop om emoji's te openen reageert niet op het toetsenbord. Deze functionaliteit is alleen met de muis te bedienen. Als deze knop met een muis wordt geactiveerd, opent een nieuw scherm met beschikbare emoji's. Dit venster is niet met het toetsenbord af te sluiten. Het chatvenster kan met het toetsenbord worden afgesloten. Maar bij het openen van het chatvenster, blijft het scherm met emoji's in beeld.
In het scherm met beschikbare emoji's zitten de zogenaamde tabs (de eerste rij in het scherm). Deze verborgen delen zijn niet met toetsenbord te openen. Er kan ook geen emoji worden geselecteerd met het toetsenbord.
Als het chatvenster is geopend en het bericht is verstuurd, verschijnt een invoerveld in beeld met placeholdertekst 'voer uw e-mailadres in'. De verstuurknop is niet toetsenbordtoegankelijk.
Bevindingen: De focusvolgorde is niet logisch. De knop om de chat te openen krijgt als eerste focus, het chatvenster opent. De focus dient op de 'Start chat' knop te komen, maar in plaats daarvan krijgt de sluitknop eerst de focus. Dan pas gaat de focus naar de startknop.
Bevindingen: Als de gebruiker een afbeelding of een pdf-document upload, verschijnt er een link in de chat met de naam van het bestand en 'download'. De linktekst bestaat uit dit ene woord: 'download'. De naam van het bestand maakt geen deel van de link. Een blinde gebruiker kan lijsten met links op de pagina genereren om zo sneller bij de content te komen. Als vele links dezelfde niets verklarende tekst bevatten, dan heeft de blinde gebruiker nog steeds geen overzicht.
Bevindingen: Als het chatvenster is geopend, staat onderaan het venster een invoerveld om het bericht te typen. De knop met een paperclip om de bestanden toe te voegen heeft geen focusindicator. Ziende toetsenbordgebruikers weten niet op welke elementen de focus zich bevindt.
Bevindingen: Het iframe waar de chat functionaliteit in staat heeft geen naam. Voorleessoftware kan niet aan zijn gebruiker vertellen wat in dit iframe staat. De naam kan worden toegevoegd via het title-element op het iframe. Deze naam dient uniek te zijn en goed beschrijven wat er in staat.
De knop waarmee de chat kan worden geopend heeft geen duidelijke toegankelijke naam. Voor bedieningselementen geldt dat de naam van het element zijn functie dient te beschrijven. Deze knop heeft geen tekst en is van de afbeelding afhankelijk om een toegankelijke naam te krijgen. De alternatieve tekst van de afbeelding luidt 'buble-icon'. Deze tekst beschrijft niet wat deze knop doet. Een betere tekst zou kunnen zijn 'Open chat'.
Als de chat is geopend, verandert de afbeelding op deze knop en ook de functie van de knop verandert. Nu kan deze knop worden gebruikt om de chat te sluiten. Deze nieuwe functie dient in de naam van de knop terug te komen. De knop heeft nu geen afbeelding en ook geen tekst en dus ook geen toegankelijke naam.
Een van de mogelijke manieren om deze knop toegankelijk te maken is het gebruik van een aria-label. In de originele staat kan het button-element aria-label='Open chat' hebben, in de tweede geval 'aria-label="Sluit chat"'. De afbeelding in het eerst geval wordt dan decoratief en kan verborgen worden voor hulpsoftware met een leeg alt-attribuut.
Op een klein scherm verschijnt linksboven het kopje 'Waarmee kunnen we je helpen?' een knop met een kruisje om het chatvenster te sluiten. Deze knop heeft geen toegankelijke naam. De voorleessoftware kan niet aan zijn gebruiker vertellen wat deze knop doet. Hier kan aria-label of verborgen tekst de oplossing bieden. Bij verborgen tekst moet worden opgelet dat het niet met display:none of aria-hidden='true' verborgen wordt, omdat deze code de elementen ook van de voorleessoftware verbeterd.
Als het chatvenster is geopend, staat onderaan het venster een invoerveld om het bericht te typen. Na het invoeren van tekst, verschijnt een knop om het bericht te versturen. Deze knop heeft geen toegankelijke naam.