Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Helpwanted

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Helpwanted.nl
Datum 21 maart 2024
Scope van de website Binnen de scope van het onderzoek vallen:
  • Alle pagina's op helpwanted.nl
  • Alle pagina's op het subdomein chat.helpwanted.nl
Buiten de scope van het onderzoek vallen:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 60

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: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit:
Onderaan elke pagina staat het logo van Helpwanted. Dit logo had de alternatieve tekst 'home' wat de afbeelding niet beschreef. De alt-tekst is aangepast naar "Helpwanted bij online grensoverschrijdend gedrag. Ga naar de homepage", dezelfde tekst als op de logo's in de header. Het laatstgenoemde is echter een link, de logo's in de footer niet. Pas de tekst aan, gezien dit verwarring kan opleveren voor gebruikers van schermleessoftware. Een alternatieve oplossing zou zijn tevens een link van dit logo te maken. Deze logo's komen voor op meerdere geteste pagina's.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 2: Op de homepage staat de tekst 'Toch liever eerst meer ontdekken? Kijk gerust verder'. Deze tekst is dikgedrukt gemaakt met het strong-element. Het strong-element is niet geschrikt om teksten visueel mee op te maken. Het element heeft een semantische waarde; het geeft aan hulpsoftware aan dat een tekst belangrijk is. Daarom mag het strong-element ook alleen worden gebruikt op één of enkele woorden. Verwijder daarom het strong-element van deze tekst en maak bijvoorbeeld gebruik van de stylingopties die CSS biedt.

Bevinding 3: Op pagina https://www.helpwanted.nl/feedback staat een groep keuzerondjes met het bijschrift 'Selecteer een onderwerp'. Het bijschrift is niet correct gekoppeld aan de keuzerondjes. Het bijschrift is namelijk alleen in een label-element geplaatst en heeft geen koppeling met de keuzerondjes. Los dit probleem op door gebruik te maken van een fieldset en legend combinatie.

Bevinding 4: Op pagina https://www.helpwanted.nl/feedback staat een invoerveld met het label 'Toelichting'. Dit veld is niet gekoppeld aan het label. Maak gebruik van for- en id-attributen om het label-element aan het input-element te koppelen.

Bevinding 5: In de chatfunctie op pagina https://chat.helpwanted.nl/ staat bij de stap waar bezoekers een gebruikersnaam kunnen opgeven een invoerveld met het label 'Kies een gebruikersnaam'. Dit label is niet gekoppeld aan het invoerveld. Hierdoor komt de toegankelijke naam van het veld niet overeen met het visuele label (zie ook succescriterium 2.5.3). Koppel het label aan het invoerveld door het label in een label-element te plaatsen en deze aan het input-element te koppelen met for- en id-attributen.

Bevinding 6: Advies: Op pagina https://www.helpwanted.nl/feedback staan keuzerondjes die indirect zijn gekoppeld aan hun label doordat het input-element genest is in het label-element. Het is beter om input-element direct te koppelen aan het bijbehorende input-element door gebruik te maken van for- en id-attributen.
Dit komt ook voor op pagina https://www.helpwanted.nl/onderwerpen/sextortion.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://www.helpwanted.nl/handleiding-facebook staan zintuigelijke bepalingen zoals 'het pijltje rechts bovenaan' en 'het icoontje met de drie bolletjes in de omslagafbeelding'. Sommige bezoekers kunnen deze instructies niet volgen, bijvoorbeeld als zij het scherm niet kunnen zien. Zorg er daarom voor dat instructies niet afhankelijke zijn van de zintuigen van een bezoeker, bijvoorbeeld door niet te verwijzen naar vorm, kleur, oriëntatie of geluid. Een mogelijke oplossing hiervoor is door ook naar de toegankelijke naam van het element te verwijzen.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 8: Wanneer toetsenbordgebruikers focus plaatsen op de knop 'Starten met chatten' op pagina https://chat.helpwanted.nl/ wordt dit alleen aangegeven met een lichte kleurverandering van de knop. Focus mag niet alleen met kleur worden aangegeven, er moet altijd een andere visuele indicator zijn naast kleur. Los dit probleem op door bijvoorbeeld een focusrand te gebruiken.
Dit probleem komt voor bij alle knoppen met deze opmaak in de chatfunctie.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 9: In de header op onder andere de homepage staat de tekst 'Verlaat site' (HEX #407DE5). Op de witte achtergrond heeft deze tekst onvoldoende contrast. De contrastverhouding is hier 4,1:1, waar dat minimaal 4,5:1 moet zijn.
Deze tekst met hetzelfde contrastprobleem komt voor op alle geteste pagina's.

Bevinding 10: Op de homepage staat de donkerblauwe tekst 'Lees meer over contact met de politie' (HEX #00244E) voor een groene achtergrond (HEX #00953F). Deze kleurencombinatie heeft onvoldoende contrast. De contrastverhouding is hier 3,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 11: Op pagina https://www.helpwanted.nl/nieuws wordt een blauwe kleur (HEX #407DE5) gebruikt om de data mee op te maken. Deze blauwe tekst heeft onvoldoende contrast op de witte achtergrond. De contrastverhouding is hier 3,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 12: Op de homepage staat de link 'NEE' (HEX #00244E) op een rode achtergrond (HEX #E26139). De contrastverhouding van deze tekst op de achtergrond is 4,4:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt voor op alle geteste pagina's.

Bevinding 13: Op pagina https://www.helpwanted.nl/over-helpwanted/contact-en-openingstijden staat een broodkruimelpad. De tekst in dit broodkruimelpad (HEX #77849B) heeft onvoldoende contrast op de witte achtergrond. De contrastverhouding is hier 3,7:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt voor op meerdere pagina's, bijvoorbeeld op https://www.helpwanted.nl/cookieverklaring-helpwanted, https://www.helpwanted.nl/over-helpwanted en https://www.helpwanted.nl/zoeken?q=online.

Bevinding 14: Op pagina https://www.helpwanted.nl/feedback staat de witte tekst 'Verstuur' op een groene achtergrond (HEX #00953F). De contrastverhouding is hier 3,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 15: Wanneer bezoekers een fout maken in het formulier op pagina https://www.helpwanted.nl/feedback verschijnt een rode foutmelding (HEX #FF0000). Het contrast van deze foutmelding op de grijze achtergrond (HEX #F2F4F6) is te laag. De contrastverhouding is hier 3,6:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 16: Wanneer een selectievakje naast de tekst 'Wat is er gebeurd?' op de homepage is geselecteerd, verschijnt de knop 'Toon alle onderwerpen'. Het contrast van de witte tekst op de groene achtergrond (HEX #00953F) is te laag. De contrastverhouding is hier 3,9:1, waar dat minimaal 4,5:1 moet zijn.
Dezelfde knop komt ook voor op pagina https://www.helpwanted.nl/onderwerpen.

Bevinding 17: Onderaan pagina https://chat.helpwanted.nl/ staan drie grijze links (HEX #A8B6BC) op een witte achtergrond. Deze teksten hebben een te laag contrast. De contrastverhouding is hier 2:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt vaker voor in de chatfunctie, bijvoorbeeld bij de placeholderteksten van invoervelden.

Bevinding 18: Op pagina https://chat.helpwanted.nl/ staat de witte tekst 'Start met chatten' op een blauwe achtergrond (HEX #009EE3). Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 3:1, waar dat minimaal 4,5:1 moet zijn.
Knoppen met dezelfde kleuren komen vaker voor in deze chatfunctie.

Bevinding 19: Bij de stap dat bezoekers een gebruikersnaam moeten invoeren in de chatfunctie op https://chat.helpwanted.nl/ staan grijze teksten (HEX #A8B6BC) op een lichte achtergrond (HEX #F4F8F9), bijvoorbeeld de knop 'Terug'. Deze kleuren hebben onvoldoende contrast. De contrastverhouding is hier 1,9:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt meerdere keren voor in de chatfunctie.

Bevinding 20: In de chat op pagina https://chat.helpwanted.nl/ staan witte teksten op een groen achtergrond (HEX #A2C510). Deze teksten hebben een te laag contrast. De contrastverhouding is hier 1,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 21: In de chat op pagina https://chat.helpwanted.nl/ zijn de berichten die de bezoeker zelf verstuurd wit op een blauwe achtergrond (HEX #009EE3). Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 3:1, waar dat minimaal 4,5:1 moet zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 22: Wanneer bij een schermbreedte van 1280x1024px wordt ingezoomd tot 400%, verdwijnt in het hoofdnavigatiemenu de link 'Zoek' vanaf 175%. Wanneer bezoekers inzoomen op een website mogen geen content of functionaliteiten verloren gaan. Zorg er daarom voor dat alle links in het navigatiemenu blijven staan als bezoekers inzoomen op de website.

Bevinding 23: Wanneer bij een schermbreedte van 1280x1024px wordt ingezoomd tot 400% staat de link 'Menu' over het logo van Helpwanted. Hierdoor is deze link slecht leesbaar en bedienbaar voor sommige bezoekers. Zorg ervoor dat wanneer bezoekers inzoomen op de website content niet over elkaar komt te staan.

Bevinding 24: Wanneer bij een schermbreedte van 1280x1024px wordt ingezoomd tot 400%, is op de homepage de tekst 'Tips en veiligheidsmaatregelen' deels niet meer zichtbaar. Hierdoor is de tekst mogelijk niet goed te lezen voor elke bezoekers. Zorg ervoor dat teksten niet wegvallen achter andere content wanneer bezoekers inzoomen.

Bevinding 25: Wanneer bezoekers op pagina https://www.helpwanted.nl/zoeken?q=online bij een schermbreedte van 1280x1024px inzoomen tot 400%, vallen teksten onder de kop 'Pagina's' weg. Zorg ervoor dat teksten in beeld blijven staan als bezoekers inzoomen.

Bevinding 26: Op de chatfunctie https://chat.helpwanted.nl/ staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Bevinding 27: Wanneer bezoekers in de chatfunctie op pagina https://chat.helpwanted.nl/ inzoomen tot 400% bij een schermbreedte van 1280x1024px gaan er verschillende dingen mis:

Bevinding 28: Wanneer bezoekers bij een schermbreedte van 1280x1024px inzoomen tot 400% op pagina https://www.helpwanted.nl/handleiding-facebook verschijnt er een horizontale scrollbalk op pagina. Dit komt omdat teksten buiten de schermweergave vallen. Het is niet toegestaan bij dit succescriterium om een horizontale scrollbalk te gebruiken om teksten zichtbaar te maken. Teksten moeten binnen de schermweergave blijven staan.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 29: In de chatfunctie op https://chat.helpwanted.nl/ kunnen bezoekers een gebruikersnaam invullen bij het veld 'Kies een gebruikersnaam'. Het contrast van dit witte invoerveld op de achtergrond (HEX #F4F8F9) is te laag. De contrastverhouding is hier 1:1, waar dat minimaal 3:1 moet zijn. Zorg ervoor dat het invoerveld voldoende contrast heeft, bijvoorbeeld door het veld een zwarte rand te geven.

Bevinding 30: In de chatfunctie op https://chat.helpwanted.nl/ kunnen bezoekers een gebruikersnaam invullen. Hier staat een selectievakje (HEX #A8B6BC) dat onvoldoende contrast heeft op de achtergrond (HEX #F4F8F9). De contrastverhouding is hier 1,9:1, waar dat minimaal 3:1 moet zijn.

Bevinding 31: In de chat op pagina https://chat.helpwanted.nl/ is de verzendknop (wanneer deze actief is) groen met een wit verzendicoon op de voorgrond. Het contrast tussen het icoon en de groene achtergrond (HEX #A2C510) is te laag. De contrastverhouding is hier 1,9:1, waar dat minimaal 3:1 moet zijn.

Bevinding 32: In de chat op pagina https://chat.helpwanted.nl/ staat het invoerveld 'Typ hier je bericht...' (HEX #F5F5F5) op een witte achtergrond. Het invoerveld heeft onvoldoende contrast. De contrastverhouding is hier 1:1, waar dat minimaal 3:1 moet zijn.

Bevinding 33: In de chat op pagina https://chat.helpwanted.nl/ staat een emoticon knop. Het contrast van deze knop (HEX #A8B6BC) op de achtergrond (HEX #F5F5F5) is te laag. De contrastverhouding is hier 1,9:1, waar dat minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 34: Op de homepage staan keuzevakjes om de onderwerpen mee te filteren naast de tekst 'Wat is er gebeurd?'. Deze keuzevakjes zijn niet te bedienen met het toetsenbord. Mogelijk komt dit doordat de input-elementen verborgen zijn met de CSS eigenschap Display: none;. Zorg ervoor dat het mogelijk is voor toetsenbordgebruikers om de keuzevakjes te bedienen en bereiken met het toetsenbord.
Deze filteropties zijn wel te bedienen wanneer bezoekers gebruikmaken van voorleessoftware zoals NVDA en met de pijltjestoetsen navigeren.
Dezelfde keuzevakjes komen ook voor op pagina https://www.helpwanted.nl/onderwerpen.

Bevinding 35: Op pagina https://chat.helpwanted.nl/ staan drie links onderaan de pagina: 'Spelregels', 'Over deze chat' en 'Over ons'. Deze links zijn niet te bedienen met het toetsenbord. Dit komt mogelijk doordat de a-elementen zijn opgemaakt zonder een href-attribuut. Zorg ervoor dat deze links te bedienen zijn met het toetsenbord. Een mogelijke oplossing hiervoor kan zijn om de links op te maken met het button-element in plaats van met een a-element. De links werken namelijk niet als links (met de muisaanwijzer), ze werken eerder als knoppen omdat ze een venster openen.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 36: Op alle pagina's komt dezelfde content voor in de header, zoals het logo van Helpwanted en de link 'Menu'. Er is geen mechanisme aanwezig op de website waarmee toetsenbordgebruikers deze herhalende content kunnen overslaan. Zorg ervoor dat toetsenbordgebruikers de content in de header kunnen overslaan, bijvoorbeeld door gebruik te maken van een skiplink.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 37: Op onder andere de homepage staan de links 'Menu' en 'Zoek'. Met deze links wordt een venster geopend dat over de hele pagina staat. Toetsenbordfocus wordt niet in dit venster geplaatst als het openen staat maar gaat vanaf de links 'Menu' en 'Zoek' verder op de achterliggende pagina. Hierdoor moeten toetsenbordgebruikers eerst over de hele pagina navigeren voordat focus wordt geplaatst in dit venster. Zorg ervoor dat de toetsenbordfocus gelijk in het venster wordt geplaatst zodra het opent. Ook moet de toetsenbordfocus in dit venster blijven tot de bezoeker het afsluit, of het venster moet automatisch afsluiten als de focus hieruit wordt geplaatst.

Bevinding 38: Wanneer de chat op pagina https://chat.helpwanted.nl/ zichtbaar is loopt de focusvolgorde niet goed. Het is mogelijk om focus te plaatsten om elementen die verbogen zijn, bijvoorbeeld de emoticons die verborgen zijn achter een knop of op het menu achter de link die gelabeld is met drie punten. De focus wordt ook niet geplaatst in het venster 'Goed dat je er bent', hierdoor is de chat niet te bedienen voor ziende toetsenbordgebruikers. Zorg ervoor dat de focusvolgorde goed loopt in de chatfunctie. Hierbij moet focus worden geplaatst in vensters en mag deze niet op de achterliggende pagina verder gaan terwijl het venster voor de pagina staat. Ook mag focus niet worden geplaatst op knoppen en links die visueel niet zichtbaar zijn.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

Bevinding 39: Advies: Als bezoekers op de homepage de vraag 'Vond je deze pagina hulpzaam?' beantwoorden met 'NEE', wordt de bezoeker doorgestuurd naar de pagina https://www.helpwanted.nl/feedback. Het is niet voor elke bezoekers duidelijk dat de link 'NEE' hen doorverwijst naar een feedbackpagina. Het is daarom beter om de linktekst aan te vullen met het linkdoel.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 40: Wanneer met het toetsenbord focus wordt geplaatst op het keuzerondje op pagina https://www.helpwanted.nl/feedback is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator door bijvoorbeeld een focusrand te gebruiken.
Dit geldt ook voor de verstuurknop op dezelfde pagina.
Hetzelfde probleem komt ook voor op pagina https://www.helpwanted.nl/onderwerpen/sextortion bij de tabbladen en keuzerondjes en op pagina https://www.helpwanted.nl/onderwerpen/cyberpesten bij de tabbladen.

Bevinding 41: In het zoekveld op pagina https://www.helpwanted.nl/zoeken?q=online staat een knop. Wanneer met het toetsenbord focus wordt geplaatst op deze knop is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven, bijvoorbeeld met een focusrand.

Bevinding 42: In de chatfunctie op pagina https://chat.helpwanted.nl/ staat bij de stap waar bezoekers een gebruikersnaam kunnen opgeven een selectievakje. Wanneer focus op dit selectievakje is geplaatst is dat niet zichtbaar. Zorg ervoor dat focus wordt aangeven met een visuele indicator, bijvoorbeeld een focusrand.
In de chatfunctie wordt geen focusrand gebruikt, ook niet op andere elementen. Hierdoor is de chatfunctie moeilijk te bedienen voor ziende toetsenbordgebruikers.

Bevinding 43: Advies: Op de website wordt gebruik gemaakt van de focusrand van de browser. Op sommige plekken kan dit ervoor zorgen dat focusrand slecht zichtbaar is of onvoldoende contrast heeft. Het is daarom beter om een eigen focusrand te gebruiken op de website. Ook worden de eisen voor het uiterlijk van de focusrand strenger in de WCAG 2.2.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 44: In de chatfunctie https://chat.helpwanted.nl/ kunnen bezoekers op een gegeven moment een gebruikersnaam invullen. Hier staat een invoerveld met het visuele label 'Kies een gebruikersnaam'. De toegankelijke naam van het invoerveld is 'Vul hier een gebruikersnaam in...'. Doordat het visuele label en de toegankelijke naam niet overeenkomen is het veld moeilijk te bedienen voor bezoekers die gebruikmaken van spraakbediening. Zorg ervoor dat het visuele label van het veld voorkomt in de toegankelijke naam, het liefst vooraan.

Bevinding 45: Advies: Het zoekveld op pagina https://www.helpwanted.nl/zoeken?q=online heeft de toegankelijke naam 'Geef zoekopdracht'. Omdat het veld visueel alleen gelabeld is met een vergrootglasicoon is deze toegankelijke naam voldoende. Toch is het beter om het veld een toegankelijke naam te geven zoals 'zoeken' of 'zoekveld'. Dat maakt het veld makkelijker te bedienen met spraakgestuurde bediening.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 46: In de chat op pagina https://chat.helpwanted.nl/ kan met de emoticon knop een venster worden geopend waarin tabs en andere emoticon knoppen in staan. Deze tabs en knoppen hebben Engelse toegankelijke namen terwijl de taalaanduiding van de pagina Nederlands is. Hierdoor worden de knoppen niet goed voorgelezen door screenreaders. Zorg ervoor dat deze elementen Nederlandse toegankelijke namen krijgen, of geef een taalwissel aan.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 47: Wanneer bezoekers een verplicht veld op pagina https://www.helpwanted.nl/feedback niet invullen bij het versturen, verschijnt de foutmelding 'Dit is een verplicht veld'. Deze foutmelding geeft niet aan welke fout de bezoeker heeft gemaakt. De fout is hier namelijk dat bezoekers het verplichte veld niet hebben ingevuld en niet dat het veld verplicht is. Als foutmeldingen niet aangeven welke fout de bezoeker heeft gemaakt kan het voor mensen met bepaalde cognitieve beperkingen lastig zijn om de fout op te lossen. Zorg er daarom voor dat foutmeldingen aangeven welke fout is gemaakt en bij welk veld deze fout is gemaakt.
Deze foutmelding komt ook voor in het formulier op pagina https://www.helpwanted.nl/onderwerpen/sextortion (zichtbaar nadat de situatiecheck is doorlopen).

Bevinding 48: Wanneer bezoekers in de chatfunctie https://chat.helpwanted.nl/ een fout maken bij het veld 'Kies een gebruikersnaam' of het selectievakje niet invullen verschijnt er een foutmelding. Deze foutmeldingen geven niet aan welke fout de bezoeker heeft gemaakt. Omdat de foutmeldingen niet bij de velden staan moeten deze meldingen ook aangeven in welk veld de fout is gemaakt. Los dit probleem op door de foutmeldingen aan te passen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 49: In de chatfunctie op pagina https://chat.helpwanted.nl/ moeten bezoekers hun geslacht en leeftijd opgeven. Deze vragen hebben geen visueel label. Hierdoor kan het voor bezoekers met bepaalde cognitieve beperkingen lastig zijn om de invoervelden goed in te vullen. Zorg ervoor dat invoervelden altijd een visueel label hebben dat buiten het invoerveld staat. Gebruik bijvoorbeeld geen placeholderteksten als label.
Dit probleem komt ook voor in de chat bij het invoerveld 'Typ hier je bericht...'.

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 50: In het zoekveld op pagina https://www.helpwanted.nl/zoeken?q=online staat een knop. Deze knop heeft geen toegankelijke naam. Hierdoor is de knop moeilijk te bedienen wanneer bezoekers gebruikmaken van hulpsoftware. Zorg ervoor dat de knop een toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van aria-label.

Bevinding 51: Wanneer bezoekers de link 'MENU' activeren op de homepage verschijnt er een venster over de pagina. In dit venster staat een zoekveld met daarin een knop. Deze knop heeft geen toegankelijke naam. Zorg ervoor dat knoppen en links altijd een toegankelijke naam hebben zodat deze goed bedient kunnen worden met hulpsoftware.

Bevinding 52: In de chatfunctie op pagina https://chat.helpwanted.nl/ moeten bezoekers hun geslacht en leeftijd opgeven. Bij deze stap staan keuzerondjes in de code die geen toegankelijke naam hebben. Hierdoor zijn de keuzerondjes moeilijk in te vullen voor bezoekers die afhankelijke zijn van hulpsoftware. Een mogelijk reden dat de keuzerondjes geen toegankelijke naam hebben is omdat ze gelabeld zijn door een svg-afbeelding zonder alternatieve tekst en niet door de tekst die visueel een label is, bijvoorbeeld 'Man'. Zorg ervoor dat de svg-afbeelding een alternatieve tekst krijgt of plaatst de tekst in het label-element.

Bevinding 53: In de chat op pagina https://chat.helpwanted.nl/ staan links en knoppen die geen toegankelijke naam hebben, bijvoorbeeld de link die gelabeld is met drie punten, de verzendknop en de emoticon knop. Deze links en knoppen zijn niet goed te bedienen voor bezoekers die gebruikmaken van hulpsoftware. Geef de links en knoppen een toegankelijke naam, bijvoorbeeld door gebruik te maken van aria-label.

Bevinding 54: In de chat op pagina https://chat.helpwanted.nl/ staan twee knoppen die een menu uitklappen, het gaat om de emoticon knop en de knop die gelabeld is met drie punten. Visueel is duidelijk wanneer deze knoppen zijn uitgeklapt, maar deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat in de code wordt aangegeven wanneer een knop is uitgeklapt, bijvoorbeeld door aria-expanded te gebruiken.

Bevinding 55: Advies: In de chat op pagina https://chat.helpwanted.nl/ staan meerdere links die werken als knoppen, bijvoorbeeld de emoticon knop en de knop die gelabeld is met drie punten. Omdat deze knoppen zijn opgemaakt met a-elementen worden deze door hulpsoftware aangegeven als links terwijl de elementen werken als knoppen. Dit kan verwarrend zijn voor verschillende gebruikers. Het is beter om wanneer iets werkt als een knop (het voert een actief uit) dit op te maken met een button-element.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 56: Wanneer bezoekers op de homepage de vraag 'Vond je deze pagina hulpzaam?' beantwoorden met 'JA' verschijnt de melding 'Fijn dat je hiermee geholpen bent' in beeld. Deze tekst wordt niet opgemerkt door screenreaders. Hierdoor missen mensen die het scherm niet kunnen zien deze melding. Zorg er voor dat wanneer tekst in beeld verschijnt dit wordt opgemerkt door hulpsoftware, bijvoorbeeld door gebruik te maken van aria-live.

Bevinding 57: Wanneer bezoekers in de chatfunctie https://chat.helpwanted.nl/ de link 'Spelregels', 'Over deze chat' of 'Over ons' activeren verschijnt er een venster op het scherm. Dit venster wordt niet direct voorgelezen door screenreaders. Hierdoor weten screenreadergebruikers niet dat er content op het scherm is verschenen. Zorg ervoor dat screenreaders de content voorlezen zodra het verschijnt, bijvoorbeeld door focus op het venster te plaatsen.

Bevinding 58: Wanneer bezoekers een bericht ontvangen in de chat op pagina https://chat.helpwanted.nl/ wordt dit niet opgemerkt door hulpsoftware. Een screenreader leest de ontvangen berichten bijvoorbeeld niet voor. Hierdoor weten bezoekers die het scherm niet kunnen zien niet dat een bericht naar hen is gestuurd. Zorg ervoor dat wanneer berichten verschijnen dit wordt opgemerkt door hulpsoftware, bijvoorbeeld door gebruik te maken van aria-live.

Bevinding 59: Wanneer bezoekers voor het eerst bij de chat terecht komen op pagina https://chat.helpwanted.nl/ staat er een venster voor de pagina met daarin de tekst 'Goed dat je er bent' en de knop 'Starten'. Dit venster wordt niet opgemerkt door voorleessoftware. Hierdoor missen bezoekers die het scherm niet kunnen zien deze informatie. Zorg ervoor dat het venster wordt opgemerkt door voorleessoftware, bijvoorbeeld door hier focus op te plaatsen.

Bevinding 60: Wanneer bezoekers op pagina https://chat.helpwanted.nl/ een fout maken in het veld 'Kies een gebruikersnaam' kan een foutmelding verschijnen. Deze foutmeldingen worden niet opgemerkt door voorleessoftware. Zorg ervoor dat alle content dat verschijnt wordt opgemerkt door hulpsoftware.
Dit geldt ook voor de foutmelding die verschijnt als het selectievakjes niet is ingevuld.

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: 2025-04-03 05:18:42 v2.4-011