Issues:
Audit digitale toegankelijkheid website Soatestwijzer

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: In de hulpfunctie staat een afbeelding naast de tekst 'Powered by Watermelon'. Deze afbeelding heeft geen alternatieve tekst. Voeg een alternatieve tekst toe met tenminste de naam van de organisatie als dit om een logo gaat, of laat het alt-attribuut leeg als deze afbeelding puur decoratief is zodat hulpsoftware de afbeelding kan negeren.

Bevinding 2: Wanneer een bezoeker in de hulpfunctie een chat start, wordt bij de 'Digitale hulp' met een groen bolletje aangegeven of de chat actief/online is. Hiervoor is geen alternatieve tekst beschikbaar voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat deze informatie op een toegankelijke manier beschikbaar wordt gemaakt.

Bevinding 3: De knop om de hulpfunctie te minimaliseren bestaat onder andere uit een afbeelding zonder alternatieve tekst. Verberg het icoon en geef de bijbehorende knop een beschrijvende naam (zie 4.1.2). Dit probleem komt in de hulpfunctie vaker voor, bijvoorbeeld in het dialoogvenster bij het sluiten van de hulpfunctie.

Bevinding 4: Wanneer bezoekers de hulpfunctie tijdens of na een chat willen sluiten verschijnt een dialoogvenster met daarin een afbeelding van een x-icoon in een cirkel. Dit icoon heeft de rol van afbeelding maar geen alternatieve tekst.

Bevinding 5: Wanneer bezoekers een uitgebreid advies openen, kunnen zij deze met het CSS x-icoon weer sluiten. Dit icoon heeft de rol 'img' gekregen, maar is ook verborgen met aria-hidden. Hierdoor is het icoon uit de accessibility tree verdwenen en niet meer beschikbaar voor hulpsoftware, ook als er wel een alternatieve tekst aanwezig zou zijn (wat nu niet het geval is). In dit geval is er ook geen toegankelijke rol aanwezig (zie 4.1.2). Hier zou het daarom beter zijn een knop toe te voegen met een toegankelijke naam.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Wanneer een bezoeker in de soatestwijzer een uitgebreid advies opvraagt, komt de bezoeker op een pagina met de naam 'Lees je hele advies'. Deze tekst staat dikgedrukt bovenaan het advies, maar is niet opgemaakt als kop terwijl het wel dienst doet als kop. Zorg ervoor dat visuele koppen ook herkenbaar zijn als kop voor hulpsoftware. (Gevolgde route: Ja, ik wil Soatestwijzer.nl uitproberen > Mijn partner en ik willen seks zonder condoom > Meer info over stoppen met condooms). Dit geldt ook voor de tekst 'Lees je advies' in het hoofdscherm van de soatestwijzer (bij het volgen van bovengenoemde route).

Bevinding 7: Wanneer een bezoeker in de soatestwijzer een uitgebreid advies vraagt komt de bezoeker op een pagina met de naam 'Lees je hele advies'. Als de bezoeker een advies zich te laten testen (route: één van de antwoordmogelijkheden waarbij de bezoeker klachten heeft of onbeschermde seks heeft gehad), bevat het advies tussenkopjes die zijn opgemaakt met het strong-element. Het strong-element heeft een eigen functie, maar geen kop-functie. Hierdoor zijn de koppen niet herkenbaar als kop voor bezoekers die gebruikmaken van hulpsoftware. Koppen zijn belangrijke navigatiemiddelen voor bezoekers die gebruik maken van hulpsoftware. Gebruik daarom de juiste koppen (bijvoorbeeld het h2-element) om dit probleem op te lossen.

Bevinding 8: Wanneer een bezoeker in de soatestwijzer een uitgebreid advies vraagt komt de bezoeker op een pagina met de naam 'Lees je hele advies'. Als de bezoeker een advies zich te laten testen (route: één van de antwoordmogelijkheden waarbij de bezoeker klachten heeft of onbeschermde seks heeft gehad), bevat het advies de tekst 'Let op, je dokter kan andere testen aanraden'. Deze tekst is opgemaakt met het em-element. Het em-element geeft gesproken nadruk aan voor één woord of een term. Gebruik hier in plaats daarvan het strong-element om extra nadruk in de zin van belangrijke tekst aan te geven. (PS: Dit geldt alleen voor de Nederlandstalige tekst, in de Engelstalige tekst is de tekst opgemaakt als gewone tekst).

Bevinding 9: Wanneer een bezoeker in de hulpfunctie 'Adressen' kiest, verschijnt een reactie met daarin een visuele opsomming. In de code gaat het echter niet om een opsomming maar om een getypte opsomming waarbij het '-' teken is gebruikt. Hierdoor is de opsomming niet herkenbaar als opsomming voor hulpsoftware. Maak gebruik van het ul-element en li-elementen om dit probleem op te lossen. Dit probleem komt in de hulpfunctie vaker voor.

Bevinding 10: Advies: De homepage bevat geen koppen. Koppen zijn belangrijke navigatiemiddelen voor bezoekers die gebruik maken van hulpsoftware. Overweeg daarom een koppenstructuur toe te voegen aan de pagina.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 11: Bij hover kleuren de linkteksten op pagina https://soatestwijzer.nl/soa-wijzer/contact blauw (HEX #017DC5). De contrastratio tussen de omliggende tekst en de blauwe linktekst is 2,4:1. Dit is te laag om te voldoen aan dit succescriterium. Voeg daarom minimaal één andere manier toe om linkteksten te onderscheiden van de omliggende tekst, bijvoorbeeld het onderstrepen van linkteksten. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://soatestwijzer.nl/soa-wijzer/disclaimer.

Bevinding 12: Advies: Op pagina https://soatestwijzer.nl/soa-wijzer/contact komen linkteksten voor, die alleen door het gebruik van kleur te onderscheiden zijn van de omliggende tekst. Omdat het contrastverschil tussen beide tekstkleuren hoger is dan een ratio van 3:1, is dit niet afkeurbaar. Het is echter toegankelijker om minimaal één andere methode te gebruiken om linkteksten aan de te duiden, bijvoorbeeld door de teksten te onderstrepen. Dit geldt ook voor onder andere pagina https://soatestwijzer.nl/soa-wijzer/disclaimer.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 13: In de hulpfunctie komt grijze tekst voor op een grijze achtergrond (HEX #F2F3F4), bijvoorbeeld de tijden van de verzonden berichten (HEX #D3D3D3) en de tekst 'Powered by Watermelon' (HEX #CCCCCC). De contrastratio's zijn hier 1,3:1 en 1,4:1 waar dat voor beide teksten minimaal 4,5:1 moet zijn.

Bevinding 14: In de hulpfunctie komt rode tekst (bijvoorbeeld 'Digitale hulp') voor (HEX #DC6070) op een witte achtergrond. De contrastratio is hier 3,5:1 waar dat minimaal 4,5:1 moet zijn. Vergelijkbare problemen met rode tekst komen op meerdere plekken voor in de hulpfunctie. Bij de antwoordopties is er bijvoorbeeld een contrastratio van 2,8:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 15: In de hulpfunctie komt grijze placeholdertekst (HEX #D3D3D3) op een grijze/crèmekleurige achtergrond (HEX #F2F3F4) voor. De contrastratio is hier 1,3:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 16: Op onder andere pagina https://soatestwijzer.nl/soa-wijzer/contact komt groene linktekst (HEX #00A453) voor op een lichtgrijze/crèmekleurige achtergrond (HEX #F6F6F6). De contrastratio is hier 3:1 waar dat minimaal 4,5:1 moet zijn. Bij muishover kleuren de linkteksten blauw (HEX #017DC5). De contrastratio is hier 4,1:1 op de achtergrond, waar dat minimaal 4,5:1 moet zijn. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://soatestwijzer.nl/soa-wijzer/disclaimer.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 17: Wanneer bezoekers met schermgrootte 1280 bij 1024 inzoomen naar 400% zijn meerdere teksten op de website niet meer (geheel) leesbaar omdat bijvoorbeeld knoppen over teksten op de pagina staan. Naar beneden scrollen helpt hierbij niet om de teksten beter leesbaar te maken. Zorg ervoor dat content geen andere content bedekt wanneer bezoekers inzoomen.

Bevinding 18: Wanneer bezoekers met schermgrootte 1280 bij 1024 inzoomen naar 400% kunnen zij de hulpfunctie niet gebruiken omdat deze niet goed meeschaalt. Zorg ervoor dat er geen verlies van informatie en functionaliteit optreed bij zoomen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 19: De keuzeopties op https://soatestwijzer.nl/soa-wijzer/, zoals 'Ja ik wil soatestwijzer uitproberen' en 'Nee, stop', komen niet voor in de focusvolgorde op de website Hierdoor is de gehele tool niet toegankelijk voor bezoekers die gebruik maken van het toetsenbord om over de website te navigeren. Zorg ervoor dat interactieve elementen zowel met een aanwijzer (zoals de muis) én met het toetsenbord bereikbaar en bedienbaar zijn.
Opmerking: Bezoekers die de website laten voorlezen met voorleessoftware kunnen de knoppen wel bedienen, echter alleen door de gehele tekst te laten voorlezen. Daarnaast gebruiken niet alle bezoekers die van het toetsenbord gebruik maken ook voorleessoftware, of überhaupt externe hulpsoftware, derhalve is dit toch een bevinding op toetsenbordtoegankelijkheid en niet op focusvolgorde.

Bevinding 20: De knop om het venster van de hulpfunctie te minimaliseren (of de chat te sluiten/terug te gaan naar een eerdere optie) is niet bereikbaar en bedienbaar met het toetsenbord, enkel met de muis. De bezoeker kan het venster sluiten door terug te navigeren met het toetsenbord en het via de dan onzichtbare knop van de functie weer te sluiten, maar dit is geen toegankelijke oplossing omdat de knop niet zichtbaar is en geen toegankelijke naam heeft. Zorg er daarom voor dat interactieve elementen zowel met een aanwijzer als met het toetsenbord bereikbaar en bedienbaar zijn. Vergelijkbare problemen komen in deze functie vaker voor, bijvoorbeeld de antwoord functies in de hulpfunctie, nadat de bezoeker op 'Start' heeft geklikt, zijn niet bereikbaar en bedienbaar met het toetsenbord.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 21: De website mist een manier om herhalende blokken content, zoals het menu, de taalwissel en het logo, over te slaan.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 22: De titel van iedere pagina is hetzelfde als de de titel van de homepage, namelijk 'Soatestwijzer | Soa Aids Nederland'. Een beschrijvende titel is een belangrijk navigatiemiddel voor verschillende doelgroepen. Zorg er daarom voor dat iedere pagina een beschrijvende titel heeft, bijvoorbeeld 'Contact - Soatestwijzer' voor pagina https://soatestwijzer.nl/soa-wijzer/contact.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 23: Wanneer bezoekers met het toetsenbord het navigatiemenu openen en daar doorheen navigeren, gaat de toetsenbord daarna verder naar de adresbalk en de achterliggende pagina terwijl het menu open blijft staan. Zorg ervoor dat bezoekers het menu zelf moeten sluiten met de sluit-knop, of dat het menu vanzelf sluit na het laatste item, om dit probleem op te lossen. Een vergelijkbare situatie met het menu doet zich voor wanneer bezoekers via het menu naar een pagina gaan, en daarna de pagina sluiten. Zij komen dan weer in het menu terecht, maar in plaats van verder te navigeren gaat het menu naar de taalwissel en vervolgens naar de adresbalk.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 24: Advies: De knop om naar het Engels over te schakelen heet alleen 'EN'. Aangezien dit voor álle bezoekers zo is, is dit niet afkeurbaar maar het is toegankelijker om de knop een meer beschrijvende naam te geven.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 25: Er zijn twee knoppen om de hulpfunctie te openen, waarvan er één onzichtbaar is. Beide knoppen hebben geen zichtbare focusstijl. Voor bezoekers die gebruik maken van het toetsenbord om over de website te navigeren maar het scherm wél kunnen zien, is het daardoor niet duidelijk waar zij zich op de website bevinden. Voeg een duidelijke focusstijl toe. Overweeg daarnaast de onzichtbare knop te verwijderen, deze heeft geen toegevoegde waarde.

Bevinding 26: De knop 'Start' in de hulpfunctie is wel bedienbaar met het toetsenbord, maar krijgt geen zichtbare focus. Voeg een duidelijke focusstijl toe. Dit probleem komt voor bij meerdere knoppen in de hulpfunctie, bijvoorbeeld bij de sluitknop.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 27: De taal van https://soatestwijzer.nl/soa-wijzer/ is ingesteld op Engels, ook wanneer de pagina inhoud Nederlandstalig is. Zorg ervoor dat de taalinstelling overeenkomt met de hoofdinhoud van de pagina, of geef taalwissels aan voor anderstalige tekst.

Bevinding 28: Op de pagina komt een hulpfunctie voor, binnen een iframe. De taalinstelling van het iframe is Engelstalig. De taal van de knoppen is niet te achterhalen omdat de knoppen in de functie geen toegankelijke naam (en rol) hebben, echter, aangezien de inhoud van het iframe Nederlandstalig is (en daar geen taalwissel voor is aangegeven) gaan we er vanuit dat de knoppen ook Nederlandstalig zouden zijn, als ze een toegankelijke naam zouden hebben. Pas de taalinstelling van het iframe daarom aan naar het Nederlands. Let op: Voor de beperkte Engelstalige informatie in de hulpfunctie moet er dan wel een taalwissel worden aangegeven.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 29: In de hulpfunctie komt een invoerveld voor, met de placeholder tekst 'Stel je eigen vraag!'. De placeholder verdwijnt zodra een bezoeker begint met typen en is daarom geen toegankelijk visueel label. Zorg ervoor dat het duidelijk is welke invoer van de bezoeker verwacht wordt door een permanent zichtbaar label toe te voegen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 30: De knop om het navigatiemenu te openen (en weer te sluiten) heeft geen toegankelijke naam. Hierdoor is het voor bezoekers die gebruik maken van bijvoorbeeld voorleessoftware niet duidelijk waar deze knop voor is. Zorg ervoor dat ieder interactief element een toegankelijke naam, rol en waar van toepassing een status en waarde heeft. Er wordt nu ook niet gecommuniceerd of de knop in- of uitgeklapt is. Zorg ervoor dat deze informatie ook beschikbaar is voor hulpsoftware, bijvoorbeeld door gebruik te maken van het aria-expanded attribuut. Dit probleem komt vaker voor op de website, bijvoorbeeld bij de twee knoppen (waarvan er één niet zichtbaar is) om de hulpfunctie te openen. In de code komt een onzichtbare tekst voor bij de hulpfunctie, maar deze tekst is niet beschikbaar voor bezoekers en ook geen toegankelijk alternatief voor een toegankelijke naam van interactieve elementen.

Bevinding 31: De hulpfunctie is als iframe op de pagina geplaatst. Een iframe moet een toegankelijke naam hebben, maar dat is nu niet het geval. Plaats een toegankelijke en beschrijvende naam binnen het title-attribuut.

Bevinding 32: Meerdere knoppen in de hulpfunctie missen een toegankelijke naam, bijvoorbeeld de knoppen om te minimaliseren, terug te gaan naar eerdere opties of de chat te sluiten. Zorg ervoor dat ieder interactief element een toegankelijke naam, rol en waar van toepassing een status en waarde heeft.

Bevinding 33: De antwoordopties in de soatestwijzer hebben geen toegankelijke rol. Hierdoor is de informatie dat het om klikbare elementen gaat niet beschikbaar voor bezoekers die gebruik maken van o.a. voorleessoftware. Zorg ervoor dat ieder interactief element een toegankelijke naam, rol en waar van toepassing een status en waarde heeft. Dit geldt ook voor de knoppen waarmee de bezoeker naar een uitgebreid advies of een andere pagina wordt verwezen, en de knoppen om vervolgens het advies weer te sluiten. Let op: Sommige antwoordmogelijkheden bestaan uit meerdere opties, gebruik hier dan bijvoorbeeld in plaats van knoppen keuzerondjes, met een optie om de keuze te bevestigen (knop).

Bevinding 34: De antwoord functies in de hulpfunctie, nadat de bezoeker op 'Start' heeft geklikt, hebben geen toegankelijke rol. Hierdoor is de informatie dat het om klikbare elementen gaat niet beschikbaar voor bezoekers die gebruik maken van o.a. voorleessoftware. Zorg ervoor dat ieder interactief element een toegankelijke naam, rol en waar van toepassing een status en waarde heeft.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 35: Wanneer (onder andere) de pagina https://soatestwijzer.nl/soa-wijzer/ geladen wordt, verschijnt eerst een laadscherm voor de daadwerkelijke inhoud van de pagina getoond wordt. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg ervoor dat deze melding wordt doorgegeven.

Bevinding 36: Wanneer antwoorden in de hulpfunctie geladen worden, verschijnt er een laadanimatie. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg ervoor dat deze melding wordt doorgegeven.

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

• Home/proces:
  https://soatestwijzer.nl/soa-wijzer/
• Contact:
  https://soatestwijzer.nl/soa-wijzer/contact
• Wat is:
  https://soatestwijzer.nl/soa-wijzer/wat-is-advies-chat
• Over ons:
  https://soatestwijzer.nl/soa-wijzer/over-ons
• Disclaimer:
  https://soatestwijzer.nl/soa-wijzer/disclaimer

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

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.