Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid chatfunctionaliteit Pleio

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Chatfunctionaliteit Pleio
Scope van de website De chatfunctionaliteit op fso.pleio.nl/cms/view/6d4157d2-7472-4091-a21c-4906228e2ec0/…
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

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

Bevinding 2: 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.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: 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.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 4: 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.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 5: 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.

Bevinding 6: 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.

Bevinding 7: 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.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 8: 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.

Bevinding 9: 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.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Voldoende

Bevinding 10: 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.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 11: 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.

Bevinding 12: 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.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 13: 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.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 14: 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.

Bevinding 15: 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.

Bevinding 16: 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.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 17: 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.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 18: 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.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 19: 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.

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 20: 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.

Bevinding 21: 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’.

Bevinding 22: 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.

Bevinding 23: 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.

Bevinding 24: 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.

Bevinding 25: 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.
Als het bericht is verstuurd, verschijnt een invoerveld in beeld met placeholdertekst ‘voer uw e-mailadres in’. Dit invoerveld heeft geen toegankelijke naam.

****** Tot.: 25 Bevindingen

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: 2021-10-20 04:55:31 v2.3-010