Issues:
Audit digitale toegankelijkheid website Stop It Now
(Alleen de bevindingen)
Scope van de evaluatie
Naam website | Stop It Now |
---|---|
Datum | 3 april 2025 |
Scope van de website |
Binnen de scope van het onderzoek valt:
|
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: Op iedere pagina, bijvoorbeeld https://www.stopitnow.nl/, staat het logo van de organisatie in een link naar de homepagina. De alternatieve tekst van het logo is 'Stop it Now!'. Dit beschrijft de afbeelding onvoldoende. De alternatieve tekst moet zowel letterlijk het woord 'logo' bevatten, als alle tekst die op de afbeelding te zien is. Omdat de alternatieve tekst ook het linkdoel verzorgt, mag hieraan bijvoorbeeld 'Ga naar de homepagina' toegevoegd worden. Dit is niet verplicht, omdat aangenomen mag worden dat algemeen bekend is dat een link met het logo naar de homepagina leidt.
Bevinding 2: In het algemene navigatiemenu, bijvoorbeeld op pagina https://www.stopitnow.nl, staat een link vormgegeven als een knop met de tekst "Verlaat website". Het bevat een icoon met de alternatieve tekst "Exit app" wat de functie niet omschrijft. Nu wordt er door schermleessoftware "exit app afbeelding verlaat website link" voorgelezen wat verwarrend kan zijn. Laat in dit geval, gezien de afbeelding genest is in de link, de alt tekst leeg zodat het genegeerd kan worden door schermleessoftware.
Bevinding 3: In de footer van iedere pagina, bijvoorbeeld https://www.stopitnow.nl/over-stop-it-now/nieuws, staat een drietal logo's van organisaties. De onderste twee zijn van een alt tekst voorzien, de bovenste van Stichting Offlimits echter niet. Zorg dat dit wel het geval is, en geef bij alle drie aan dat het een logo betreft.
Bevinding 4: De broodkruimelpaden op nieuwsitempagina's, bijvoorbeeld https://www.stopitnow.nl/over-stop-it-now/nieuws/een-kijkje-achter-de-schermen-bij-stop-it-now, worden verdeeld middels blauwe chevrons. Deze elementen hebben een alternatieve tekst; "Pijl rechts". Dit is overbodig gezien het niets toevoegt. Verwijder dergelijke tekst een laat het alt attribuut leeg. Ditzelfde komt voor in de zij-menu's op sommige pagina's, zoals op pagina https://www.stopitnow.nl/over-stop-it-now/over-ons.
Bevinding 5: Op pagina https://chat.stopitnow.nl/chat/preprocessing? staat een logo. Dit logo heeft als aria-label op de link 'Homepage'. De alternatieve tekst van een logo moet altijd ten minste de naam van de organisatie bevatten en eventuele andere zichtbare tekst op het logo als de afbeelding ook een link is.
Bevinding 6: Op pagina https://chat.stopitnow.nl/chat? kunnen bezoekers en medewerkers emoticons gebruiken in berichten. Deze berichten hebben alleen een alternatieve tekst via het title-attribuut. Dit is niet voldoende. Geef de emoticons een beschrijvende alternatieve tekst.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 7: Op pagina https://www.stopitnow.nl/ staan drie blokken met tekst, waar per blok een koptekst in te herkennen is. Het gaat om de kopteksten 'Wie ben jij?', 'Wie zijn wij' en 'Wat doen wij?'. Deze zijn niet als koppen opgemaakt. De teksten zeggen iets over de bijbehorende content. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het belangrijk dat koppen als zodanig zijn opgemaakt, hierdoor kan de structuur van de pagina goed geïnterpreteerd worden. Maak de teksten op als koppen op het juiste kopniveau.
Bevinding 8: Op pagina https://www.stopitnow.nl/ heeft de tekst vanaf de kop 'Ervaringsverhalen' tot en met de link 'Lees de verhalen' het attribuut Aria-hidden=true gekregen. Door dit attribuut is deze content verborgen voor hulpsoftware. Daarnaast staat een focusbaar element in dit blok, elementen die focus kunnen krijgen mogen nooit verborgen worden met aria-hidden omdat sommige browsers dit negeren en de focus plaatsen op het element. Voor screenreadergebruikers kan dat erg vervelend zijn omdat zij weten dat de focus op een element staat, maar niets wordt voorgelezen. Zie tevens succescriterium 4.1.2.
Precies dezelfde content staat ook visueel verborgen op de pagina, ook met een link waar bezoekers de focus op kunnen plaatsen. Om verschillende toegankelijkheidsproblemen op te lossen (zie bijvoorbeeld ook succescriterium 2.4.7) is het een optie om de visueel verborgen tekst te verwijderen en de tekst die nu verborgen is voor hulpsoftware toegankelijk te maken door het aria-hidden attribuut te verwijderen.
Bevinding 9: Op meerdere pagina's, bijvoorbeeld https://www.stopitnow.nl/over-stop-it-now/over-ons, is het logo tevens de H1 kop. Dit is niet logisch voor bezoekers die aan de hand van de koppenstructuur door pagina's navigeren. Zorg dat de titel van de betreffende pagina de H1 kop betreft, en voor de diverse subkoppen lagere kopniveau's worden gebruikt.
Bevinding 10: Op pagina https://www.stopitnow.nl/contact staat een tabel, met daarboven de tekst "Hulplijn en chat". Het laatstgenoemde is opgemaakt middels het strong element, dat semantische waarde heeft en bedoeld is om nadruk te leggen op enkele woorden. Hulpsoftware kan dit met nadruk voorlezen. Maak deze tekst op middels een kopelement binnen de bestaande koppenstructuur. Maak voor de styling gebruik van CSS. Dit probleem doet zich ook op de pagina voor bij "Klachten", alwaar beide elementen gebruikt zijn. Hier kan het strong-element verwijderd worden en de styling aangepast worden in CSS.
Bevinding 11: Op pagina https://www.stopitnow.nl/over-stop-it-now/over-ons is in het zijmenu visueel te herkennen welke van de menu-items de huidige pagina betreft. Dit is te herkennen doordat hier een pijl voor staat. Voor bezoekers die niet kunnen zien is deze informatie niet beschikbaar. Dit kan worden opgelost door gebruik te maken van het aria-current="page" attribuut.
Bevinding 12: Op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws/11-in-aanloop-naar-de-rechtszaak-dagboek-van-perle-cornelia is de introtekst van het nieuwsbericht schuingedrukt gemaakt met het em-element. Omdat het em-element semantische waarde heeft, is deze niet geschikt voor styling. Dit geeft aan hulpsoftware de boodschap door dat de tekst meer nadruk verdient dan omliggende tekst. Verwijder het em-element en pas de styling aan via CSS.
Bevinding 13: Op pagina https://www.stopitnow.nl/voor-naasten/lotgenotengroep staat het formulier 'Aanmelden voor lotgenotengroep'. Hierin komen checkboxes voor, onder het label 'Voorkeurslocatie(s). Dit label is niet programmatisch gekoppeld aan de checkboxes, waardoor het voor bezoekers die gebruik maken van hulpsoftware niet duidelijk is waar deze bij horen. Dat er ook checkboxes staan die niet onder dit label horen, kan dit extra onduidelijk maken. Groepeer de checkboxes, bijvoorbeeld door gebruik te maken van een combinatie van fieldset en legend.
Bevinding 14: Op pagina https://chat.stopitnow.nl/chat staat in het invoerveld waar bezoekers iets kunnen invoeren een knop met als label een emoticon. Achter deze knop staan meerdere knoppen/emoticons die bezoekers kunnen selecteren met een muisaanwijzer. Ondanks dat deze knoppen/emoticons zijn verborgen achter een knop worden deze wel voorgelezen door screenreaders. Dit kan erg verwarrend zijn voor screenreadergebruikers. Zorg ervoor dat deze knoppen/emoticons verbogen blijven tot de bezoeker ze zichtbaar maakt door de knop te activeren.
1.3.2 Betekenisvolle volgorde (Niveau A)
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevinding 15: Op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws/11-in-aanloop-naar-de-rechtszaak-dagboek-van-perle-cornelia staat onder het nieuwsbericht een verklaring die hoort bij de dubbele asterisk (**) die eerder in de tekst gebruikt wordt. Voor bezoekers die niet kunnen zien en met behulp van hulpsoftware door de tekst heen gaan, is het lastig dat zij door alle tekst heen moeten voordat zij bij deze verklaring komen. Zorg ervoor dat de verklaring programmatisch aan de asterisken wordt verbonden, zodat deze kan worden voorgelezen op de plaats waar deze betekenisvol is.
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 16: Op pagina https://www.stopitnow.nl/contact staat een formulier waar de bezoeker onder andere het eigen e-mailadres kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
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: https://www.w3.org/tr/wcag21/#input-purposes.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 17: Wanneer op de focus wordt geplaatst op de pijliconen in de carrousel op de homepage wordt dat alleen aangegeven met een kleurverandering. De kleur van deze pijlen verandert van grijs naar wit. Mensen die kleuren niet goed waarnemen kunnen moeite hebben met zien waar de focus op is geplaatst wanneer dat alleen met een kleurverandering wordt aangegeven. Zorg ervoor dat focus niet alleen wordt aangegeven met een kleurverandering maar bijvoorbeeld door ook een focusrand te gebruiken.
Bevinding 18: Op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws staat onder de nieuwsberichten een navigatiesysteem. Hierin is alleen aan de kleur te herkennen welke pagina de huidige betreft. Voor bezoekers die bijvoorbeeld kleurenblind zijn, is dit niet te zien. De blauwe (HEX #326597) kleur heeft een contrastverhouding van 1:1 met de rode (HEX #A73834) kleur. Gebruik niet alleen kleur om informatie over te brengen. Of kies voor een kleurencombinatie met een contrastverhouding van minimaal 3:1, zodat de informatie ook via helderheid wordt overgebracht.
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 19: In het algemene navigatiemenu, bijvoorbeeld op pagina https://www.stopitnow.nl, staat een link vormgegeven als een knop met de tekst "Verlaat website". Bij hover is er sprake van een donkerblauwe tekst (HEX #336699) op een zeeblauwe knop (HEX #436D8D). Dit levert een contrast van 1,09:1 op waar dit minimaal 4,5:1 behoort te zijn. Pas het kleurcontrast aan.
Bevinding 20: Op de homepagina https://www.stopitnow.nl/ staan een aantal witte teksten op een achtergrondafbeelding die meerdere kleuren bevat. Op sommige punten levert dit een te laag contrast op, waardoor de tekst mogelijk niet goed leesbaar is. Als de pagina op een kleiner scherm of in ingezoomde weergave wordt bekeken verschuift de tekst en ontstaan nieuwe contrastproblemen. Het gaat bijvoorbeeld om de witte tekst in de header-afbeelding, waar de tekst op een grijsblauwe (HEX #C7AAA6) achtergrond valt is de contrastverhouding 2,1:1 waar deze minimaal 3:1 moet zijn. In het blok 'Ervaringsverhalen' doet dit probleem zich voor bij de witte teksten in de carousel, bijvoorbeeld 'En toen stond er politie voor de deur'. Deze valt deels op lichtgele (HEX #FFB16D) achtergrond, wat een contrastverhouding van 1,7:1 oplevert waar dit minimaal 3:1 moet zijn. Voor de kleinere tekst 'Ervaringsverhaal' geldt dat het contrast minimaal 4,5:1 moet zijn. Dit geldt ook voor de andere slides in de carousel.
Bevinding 21: Op https://www.stopitnow.nl/over-stop-it-now/nieuws bij ieder bericht een tag, bijvoorbeeld 'Oproepen' en 'Dagboek van een partner'. Hier staat witte tekst op een grijsblauwe achtergrond (HEX #5C85AD) als de muisaanwijzer hiernaartoe wordt gebracht. Dit levert een contrast van 3,8:1 op waar dit minimaal 4,5:1 behoort te zijn. Pas het kleurcontrast aan.
Bevinding 22: Op pagina https://www.stopitnow.nl/professionals/hoe-ga-je-het-gesprek-aan staan onder de kop 'Voor professionals' twee links, 'Zelfhulpmodes' en 'Handleiding Start het gesprek'. Deze bestaan uit witte tekst op een achtergrond die verschillende grijs/blauwe tinten bevat. Sommige van deze tinten leveren te lage contrastverhouding op met de tekst. Als de tekst op de grijsblauwe (HEX #8A9EA5) staat is de contrastverhouding 2,7:1. Deze moet minimaal 3:1 zijn.
Bevinding 23: Op pagina https://www.stopitnow.nl/contact staat een formulier. Bij hover over de "Verzenden" button kleurt de tekst lichtrood (HEX #DD777D). Er is sprake van 3,0:1 contrast met een witte achtergrond, waar dit minimaal 4,5:1 behoort te zijn. Pas het kleurcontrast aan.
Bevinding 24: Op pagina https://www.stopitnow.nl/ staan drie blokken met tekst. Het gaat om de de teksten bij de koppen 'Wie ben jij?', 'Wie zijn wij' en 'Wat doen wij?'. De teksten zijn witgekleurd en hebben op sommige punten onvoldoende contrast met de achtergrondkleur. Waar de witte tekst op rood/roze (HEX #B87771) valt is de contrastverhouding 3,5:1. Waar de witte tekst op blauw/grijze (HEX #889CA3) valt is de contrastverhouding 2,8:1. Zorg ervoor dat de contrastverhouding overal hoger is dan 4,5:1.
Bevinding 25: Als pagina https://www.stopitnow.nl/over-stop-it-now/over-ons op een klein scherm wordt bekeken (of in ingezoomde weergave), vouwt het zijmenu samen onder 'Gerelateerde pagina's'. Nadat deze is opengevouwen is te zien dat de link 'Over Stop it Now' een lichtblauwe (HEX #7496B8) kleur heeft. Deze heeft onvoldoende contrast met de lichtgrijze (HEX #F5F5F5) achtergrondkleur die wordt veroorzaakt door de schaduwrand van de knop 'Gerelateerde pagina's'. De contrastverhouding is 2,8:1 waar deze minimaal 4,5:1 moet zijn.
1.4.4 Herschalen van tekst (Niveau AA)
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 26: Wanneer bezoekers op de homepage inzoomen tot 110% bij een schermbreedte van 1280px vallen de teksten in de carrousel deels weg. Hierdoor zijn deze teksten niet meer goed leesbaar. Zorg ervoor dat teksten niet verdwijnen of achter andere content vallen wanneer bezoekers de schermweergave aanpassen.
1.4.5 Afbeeldingen van tekst (Niveau AA)
Informatie over succescriterium 1.4.5 Afbeeldingen van tekst
Uitkomst: Onvoldoende
Bevinding 27: Op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws/een-kijkje-achter-de-schermen-bij-stop-it-now staat een nieuwsbericht, dat geheel bestaat uit een afbeelding van tekst. De afbeelding is niet goed te vergroten, en de tekst die het bevat is verder niet op de pagina aanwezig, en de afbeelding bevat een leeg alt attribuut. De informatie is hierdoor niet beschikbaar voor blinde en slechtziende bezoekers. Plaats de informatie als gewone HTML tekst op de pagina. Geef daarnaast de afbeelding een alternatieve tekst die de afbeelding kort beschrijft, en waarin beschreven staat waar de uitgebreide informatie van de afbeelding op de pagina te vinden is.
1.4.10 Reflow (Niveau AA)
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 28: Als pagina https://www.stopitnow.nl/ wordt bekeken bij een schermgrootte van 1280 bij 1024 px en er wordt ingezoomd tot 400%, ontstaat een probleem bij de uitvouwbare knop 'Contact / Hulp?'. Nadat deze is uitgevouwen is niet alle content die is uitgevouwen te zien. Ook de sluit-knop valt buiten beeld, waardoor het lastig is om de knop weer in te vouwen. Zorg ervoor dat bij het inzoomen alle content en functionaliteit in beeld blijft.
Bevinding 29: Als pagina https://www.stopitnow.nl/over-stop-it-now/nieuws wordt bekeken bij een schermgrootte van 1280 bij 1024 px en er wordt ingezoomd tot 300%, ontstaat een horizontale scrollbalk op de pagina. Een deel van de paginering valt buiten beeld en kan via de scrollbalk weer tevoorschijn worden gehaald. Een scrollbalk op de hele pagina is echter niet toegankelijk voor sommige bezoekers. Daarom mag er geen scrollbalk op de hele pagina verschijnen bij het inzoomen. Zorg dat de paginering meeschaalt als er wordt ingezoomd, zodat deze volledig in beeld blijft.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 30: Op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws levert de focusindicator van de invoervelden een contrastprobleem op. Het gaat bijvoorbeeld om het veld 'Categorie'. Bij focus wijzigt de rand om het veld heen van lichtgrijs (HEX #CDD3D9) naar lichtblauw (HEX #80BDFF). De contrastverhouding is 1,3:1. Hierdoor is voor sommige bezoekers niet (goed) te zien waar de focus zich bevindt. Zorg ervoor dat de contrastverhouding minimaal 3:1 is.
Bevinding 31: Op pagina https://www.stopitnow.nl/over-stop-it-now/faq-s staan uitvouwbare links, zoals 'Wat is seksueel kindermisbruik?'. De focusindicator is lichtblauw (HEX #BFDEFF), en heeft onvoldoende contrast met de witte achtergrond. De contrastverhouding is 1,3:1 waar deze 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 32: Op pagina https://www.stopitnow.nl/ staat een carousel bij de kop 'Ervaringsverhalen'. Hierin staan knoppen die wel via de muisaanwijzer maar niet via het toetsenbord bedienbaar zijn. Het gaat om de vier elementen die eruit zien als ronde knoppen. Deze zijn opgemaakt als lijst-items binnen een lijst, maar bevatten niet alle functionaliteit die bij een knop hoort. Zorg dat alle functionaliteit ook beschikbaar is via het toetsenbord, maak deze elementen bijvoorbeeld op als knoppen met het button-element.
Bevinding 33: In de chatfunctie op pagina https://chat.stopitnow.nl/chat staat in het invoerveld waar bezoekers iets kunnen invoeren een knop met als label een emoticons. Deze knop is wel te bedienen met de muisaanwijzer maar niet met het toetsenbord. Zorg ervoor dat het voor toetsenbordgebruiker mogelijk is om de focus op de knop te plaatsen en deze te bedienen.
2.4 Navigeerbaar
2.4.1 Blokken omzeilen (Niveau A)
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Onvoldoende
Bevinding 34: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 35: De PDF op pagina https://www.stopitnow.nl/assets/downloads/Handleiding-Start-het-gesprek-Professionals-2021.pdf heeft geen titel in de documenteigenschappen. Voeg deze toe, en pas de instellingen aan zodat de documenttitel en niet de bestandsnaam wordt voorgelezen.
2.4.3 Focus volgorde (Niveau A)
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevinding 36: Indien men een pagina van de website opent, bijvoorbeeld de hoofdpagina https://www.stopitnow.nl/, staat de toetsenbordfocus als eerste op "Anonimiteit en privacy" in het bovenste menu. Deze focusvolgorde heeft geen logische opbouw. De focus zou het eerste moeten vallen op skiplinks indien aanwezig, en hierna op het logo als oriëntatiepunt. Daarna kan de focus naar het menu gaan.
Bevinding 37: Bij weergave van het mobiele menu, bijvoorbeeld op schermgrootte van 1280x1024px met 250% zoom (https://www.stopitnow.nl/) is het menu te vinden onder de menuknop (hamburgermenu). Nadat deze is opengevouwen, is het mogelijk om via het toetsenbord de focus het menu te laten verlaten. De focus valt dan op elementen op de pagina die op dat moment door het menu worden bedekt. Het is dan niet zichtbaar waar de focus zich bevindt. Bezoekers die wel kunnen zien maar navigeren via het toetsenbord, weten op dat moment niet waar zij zich bevinden op de pagina. Zorg ervoor dat de focus het menu pas kan verlaten nadat deze is afgesloten.
Bevinding 38: In de chatfunctie op pagina https://chat.stopitnow.nl/chat? opent een dialoogvenster wanneer bezoekers de chat willen sluiten. Na het doorlopen van de interactieve elementen Ja en Nee gaat de focus volgorde verder op de achterliggende pagina. Zorg ervoor dat de focus in het dialoogvenster blijft of dat het dialoogvenster automatisch sluit.
2.4.4 Linkdoel (in context) (Niveau A)
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevinding 39: Op https://www.stopitnow.nl/over-stop-it-now/nieuws staat paginering. Er wordt hier bij de links alleen een cijfer voorgelezen. Dit kan verwarrend zijn voor een bezoeker. Zorg voor een goede beschrijving, bijvoorbeeld "ga naar pagina #".
Bevinding 40: Advies: In het menu van de pagina's staat de link 'Verlaat website'. Dit is een link naar Google. Uit de linktekst wordt het linkdoel niet duidelijk. Omdat dit voor alle bezoekers geldt en niet alleen voor bezoekers met een functiebeperking, wordt dit niet op toegankelijkheid afgekeurd. Toch valt het te overwegen om dit aan te passen, zodat bezoekers weten waar zij terecht komen via deze link.
2.4.5 Meerdere manieren (Niveau AA)
Informatie over succescriterium 2.4.5 Meerdere manieren
Uitkomst: Onvoldoende
Bevinding 41: Op pagina https://www.stopitnow.nl/over-stop-it-now/over-ons staat een broodkruimelpad. De eerste link betreft de een andere pagina en de tweede link de pagina in kwestie. De eerste link bevat unieke content echter is dit slechts via dit broodkruimelpad te bereiken. Er is geen zoekfunctie op de website aanwezig en ten tijde van de audit was de sitemappagina tevens leeg. De verzamelpagina staat ook in de menubalk (Over ons) echter is het via dit element niet mogelijk om op de pagina te komen. Zorg dat er een tweede manier is om op deze pagina te komen. Dit probleem doet zich op meerdere pagina's voor, zoals https://www.stopitnow.nl/professionals.
2.4.7 Focus zichtbaar (Niveau AA)
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 42: Bij weergave van het mobiele menu, bijvoorbeeld op schermgrote van 1280x1024px met 250% zoom, wordt de algemene navigatie ondergebracht in een hamburgermenu, bijvoorbeeld op pagina https://www.stopitnow.nl/over-stop-it-now/nieuws/een-kijkje-achter-de-schermen-bij-stop-it-now. Er is geen focusrand aanwezig voor de deze knop, noch de sluitknop indien het is geopend. Zorg dat zichtbaar is waar de focus zich bevindt, voeg bijvoorbeeld een focusrand toe.
Bevinding 43: Op pagina https://www.stopitnow.nl/ staat een carousel. Hierin staan links, zoals 'Ik vertrouwde hem blind'. Als de focus hierop valt, is dat niet te zien. Voor bezoekers die navigeren via het toetsenbord maar wel kunnen zien, is op dat moment onbekend waar zij zich bevinden op de pagina. Los dit bijvoorbeeld op door een focusrand toe te voegen.
Bevinding 44: In de chatfunctie op pagina https://chat.stopitnow.nl/chat staat een sluitknop waarmee bezoekers de chat kunnen afsluiten. Wanneer met het toetsenbord de focus is geplaatst op deze knop is dat alleen zichtbaar door een subtiele kleurverandering. Zorg ervoor dat de focus wordt aangegeven met een goede, visuele indicatie, bijvoorbeeld een focusrand.
2.5 Input modaliteiten
2.5.3 Label in naam (Niveau A)
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 45: Op pagina https://chat.stopitnow.nl/chat/preprocessing? staat een link die volgens de linktekst naar de homepage verwijst. Deze link is niet bedienbaar voor bezoekers die gebruik maken van spraakgestuurde navigatie omdat de zichtbare tekst niet overeenkomt met de linktekst.
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: Op pagina https://www.stopitnow.nl/ staat een video. De knoppen in de menubalk van de video zijn grotendeels Engels, bijvoorbeeld "enter full screen" en "show more media controls". Hulpsoftware kan dit verkeerd uitspreken gezien de taalinstellingen van de pagina Nederlands is (lang="nl"). Vertaal dergelijke labels naar de taal van de overige content op de pagina, Nederlands.
Bevinding 47: Op iedere pagina, bijvoorbeeld https://www.stopitnow.nl/over-stop-it-now/nieuws staat een dialoogvenster om in contact te komen met de organisatie. De sluitknop bevat de tekst "Close popup icon of contact tab". Hulpsoftware kan dit verkeerd uitspreken gezien de taalinstellingen van de pagina Nederlands is (lang="nl"). Vertaal de tekst naar het Nederlands, zodat deze overeenkomt met de taal van de pagina.
Bevinding 48: Op de nieuwsitem pagina's, bijvoorbeeld https://www.stopitnow.nl/over-stop-it-now/nieuws/een-kijkje-achter-de-schermen-bij-stop-it-now, worden er Amerikaans Engelse datums gebruikt ("Gepubliceerd op February 10th, 2023"). Zorg dat datums in het Nederlands, de taal van de overige content, gegenereerd worden.
3.2 Voorspelbaar
3.2.4 Consistente identificatie (Niveau AA)
Informatie over succescriterium 3.2.4 Consistente identificatie
Uitkomst: Onvoldoende
Bevinding 49: Op pagina https://www.stopitnow.nl/over-stop-it-now/over-ons staat een broodkruimelpad. De eerste link betreft de verzamelpagina en de tweede link de pagina in kwestie. Beiden links heten "Over stop it now", maar leiden naar een andere pagina. Dit kan verwarring opleveren. Gebruik unieke omschrijvingen voor iedere pagina in het broodkruimelpad.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 50: Het contactformulier op pagina https://www.stopitnow.nl/contact maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan je de tekstgrootte niet aanpassen zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutidentificaties toe aan de formuliervelden om dit probleem op te lossen. Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld "Uw email-adres*" is niet ingevuld’.
3.3.2 Labels of instructies (Niveau A)
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevinding 51: Op pagina https://www.stopitnow.nl/contact staat een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een instructie bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'. Tevens valt op dat meerdere velden zonder sterretje tevens verplicht zijn. Voor sommige bezoekers kan het lastig zijn het formulier correct in te vullen als pas na het verzenden duidelijk wordt welke velden verplicht zijn. Vul de labels waar nodig aan.
3.3.3 Foutsuggestie (Niveau AA)
Informatie over succescriterium 3.3.3 Foutsuggestie
Uitkomst: Onvoldoende
Bevinding 52: Het contactformulier op pagina https://www.stopitnow.nl/contact maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan je de tekstgrootte niet aanpassen zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf specifieke foutsuggesties toe zodat het voor bezoekers duidelijk is hoe zij formuliervelden moeten invullen.
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 53: Op pagina https://www.stopitnow.nl/ staat de card "Ervaringsverhalen" in een div-element met een aria-hidden attribuut. Het div-element bevat content die niet moet worden verborgen, en een focusbare link. Verwijder daarom het aria-hidden attribuut. Zie tevens succescriterium 1.3.1.
Bevinding 54: Op pagina https://www.stopitnow.nl/ staat een video die geen titel heeft. Voor bezoekers die niet kunnen zien, is het daardoor onduidelijk welke video zich hier bevindt. Voeg een titel toe die dit beschrijft.
Bevinding 55: Op meerdere pagina's, bijvoorbeeld https://www.stopitnow.nl/, bevindt zich de knop 'Contact/Hulp?'. Deze kan worden uitgevouwen om gegevens zichtbaar te maken. Voor bezoekers die niet kunnen zien en gebruik maken van hulpsoftware zoals een screenreader, is het niet duidelijk wat er gebeurt als de knop gebruikt wordt. Dat er iets kan worden uitgevouwen en later weer ingevouwen, wordt niet aangekondigd. Los dit bijvoorbeeld op door gebruik te maken van het aria-expanded attribuut op de knop.
Bevinding 56: Als de pagina's, bijvoorbeeld https://www.stopitnow.nl/, op een kleiner scherm worden bekeken vouwt het menu samen onder een knop (hamburgermenu). Deze knop heeft via een aria-label de naam 'Menu uit- / inklappen' gekregen. Dit beschrijft onvoldoende wat de knop doet. Zorg ervoor dat de naam wijzigt als het menu wordt in- of uitgevouwen. Er kan ook voor worden gekozen de knop alleen de naam 'Menu' te geven, en het aria-expanded attribuut toe te voegen.
Bevinding 57: Als de pagina's, bijvoorbeeld https://www.stopitnow.nl/, op een kleiner scherm worden bekeken vouwt het menu samen onder een knop (hamburgermenu). Als deze wordt uitgevouwen, zijn menu-items (links) te zien. Bij deze links wordt niet aangekondigd dat deze kunnen worden uitgevouwen. Voor sommige bezoekers is het hierdoor niet bekend dat er submenu's zijn. Hulpsoftware leest voor dat het gaat om een link, daarom is de verwachting dat het element de functie van een link heeft en naar een andere pagina leidt. Los dit bijvoorbeeld op door de menu-items op dezelfde wijze op te maken als in het gewone menu, als knoppen met daaraan toegevoegd het aria-expanded attribuut.
4.1.3 Statusberichten (Niveau AA)
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevinding 58: In de chatfunctie op pagina https://chat.stopitnow.nl/chat kan een medewerker berichten sturen naar de bezoeker. Wanneer deze berichten op het scherm verschijnen worden deze niet opgemerkt door een screenreader. Hierdoor kunnen screenreadergebruikers niet weten of er berichten naar hen worden verstuurd. Zorg ervoor dat hulpsoftware deze berichten voorleest wanneer zij op het scherm verschijnen. Dit kan door gebruik te maken van aria-alert of een soortgelijke techniek. Wanneer de melding 'Medewerker typt' in de chat verschijnt wordt dit ook niet voorgelezen door hulpsoftware.
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
- hoofdpagina:
https://www.stopitnow.nl/ - over ons:
https://www.stopitnow.nl/over-stop-it-now/over-ons - contact (tabel):
https://www.stopitnow.nl/contact - PDF pagina:
https://www.stopitnow.nl/professionals/hoe-ga-je-het-gesprek-aan - PDF:
https://www.stopitnow.nl/assets/downloads/Handleiding-Start-het-gesprek-Professionals-2021.pdf - Sitemap (meerdere manieren):
https://www.stopitnow.nl/sitemap - nieuwsitem (afbeelding van tekst):
https://www.stopitnow.nl/over-stop-it-now/nieuws/een-kijkje-achter-de-schermen-bij-stop-it-now - nieuwsfilter:
https://www.stopitnow.nl/over-stop-it-now/nieuws - faq (dropdown menus):
https://www.stopitnow.nl/over-stop-it-now/faq-s - lotgenotengroep (formulier):
https://www.stopitnow.nl/voor-naasten/lotgenotengroep - Risicosignalen (lijsten):
https://www.stopitnow.nl/professionals/risicosignalen - Nieuwsitem (dagboek):
https://www.stopitnow.nl/over-stop-it-now/nieuws/11-in-aanloop-naar-de-rechtszaak-dagboek-van-perle-cornelia - Chatfunctie:
https://chat.stopitnow.nl/ - disclaimer:
https://www.stopitnow.nl/disclaimer - Professionals (meerdere manieren):
https://www.stopitnow.nl/professionals
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.