Issues:
Content-audit digitale toegankelijkheid E-learning [Ont]Regel de zorg - GGZ
(Alleen de bevindingen)
Scope van de evaluatie
Naam website | E-learning [Ont]Regel de zorg - GGZ |
---|---|
Datum | 7 december 2023 |
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 pagina https://elearning.ordz.nl/mod/page/view.php?id=60&forceview=1 staat de knop 'Dit ga je leren!' met daarnaast een pijl-icoon. Dit icoon wordt door hulpsoftware voorgelezen als 'ingevulde pijl die naar links wijst'. Dit is storende informatie voor bezoekers die afhankelijk zijn van voorleessoftware. Daarnaast brengt het niet over dat de bezoeker hiermee naar een vorig- of volgend onderwerp navigeert. Verberg het icoon en voeg bijvoorbeeld een screenreader-only tekst toe aan de knoppen ('Terug naar...'), of plaats de pijlen op een andere manier op de pagina (bijvoorbeeld als img-element) met een alternatieve tekst. Dit probleem komt op meerdere plekken en pagina's voor.
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 pagina https://elearning.ordz.nl/mod/page/view.php?id=61 staat de tekst 'Het verschilt per zorgsector of je spreekt van een cliënt, patiënt, zorgvrager...'. Deze tekst is opgemaakt met het h2-element, dit is een element voor kopteksten. Het gaat hier echter niet om een koptekst. Verwijder daarom het h2-element en gebruik CSS om een vergelijkbaar visueel effect te creëren. Een vergelijkbaar probleem komt voor op pagina https://elearning.ordz.nl/mod/choice/view.php?id=77&forceview=1 en op pagina https://elearning.ordz.nl/mod/page/view.php?id=86&forceview=1.
Bevinding 3: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=78&forceview=1 is de tekst 'Je hebt nu bedacht wat je zelf zou doen. Wil je weten wat de werkgroep van Nina deed om goed om te gaan met deze nieuwe manier van werken?' opgemaakt met het b-element. Deze tekst ziet er visueel uit als kop, maar is niet als kop opgemaakt. Bezoekers die gebruik maken van hulpsoftware kunnen aan de hand van een koppenlijst of koppen sneltoets over een pagina navigeren om zo snel een beeld te krijgen van de informatie op de pagina. Koppen die alleen visueel als kop zijn opgemaakt, maar dat niet echt zijn, zijn niet op die manier bereikbaar. Gebruik daarom een h-element om deze tekst op te maken.
Bevinding 4: Op onder andere pagina https://elearning.ordz.nl/mod/page/view.php?id=62 is een linktekst opgemaakt met het b-element. Hoewel eerdere versies van HTML het b-element alleen in termen van presentatie definieerden, heeft het element nu het specifieke semantische doel gekregen om tekst weer te geven "die uitspringt ten opzichte van de omringende inhoud zonder extra nadruk of belang uit te stralen, en waarvoor de conventionele typografische presentatie vetgedrukte tekst is". Denk daarbij bijvoorbeeld aan productnamen en kernwoorden (bron: W3 https://www.w3.org/TR/2012/WD-html-markup-20121025/b.html). Gebruik voor stylingdoeleinden in plaats daarvan CSS om eenzelfde visueel effect te creëren.
Bevinding 5: Op pagina https://elearning.ordz.nl/mod/lesson/continue.php wordt het em-element gebruikt om kopjes op te maken, zoals 'Jouw antwoord' en 'Feedback'. Het em-element geeft gesproken nadruk aan een woord of korte zin, en is niet bedoeld voor kop-opmaak. Daarnaast zijn teksten die alleen visueel een kop zijn maar niet als kop zijn opgemaakt, niet herkenbaar als kop voor hulpsoftware. Gebruik daarom een h-element in plaats van een em-element, of eventueel een descriptionlist om dit probleem op te lossen.
Bevinding 6: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=359 zijn meerdere teksten opgemaakt met het strong-element. Het strong-element geeft aan dat tekst relatief aan de tekst eromheen belangrijker is. Verwijder het strong-element.
Bevinding 7: Op pagina https://elearning.ordz.nl/mod/lesson/continue.php is een tabel gebruikt voor de opmaak van zowel het antwoord onder de kop 'Jouw antwoord:', als de kop 'Feedback:' en de content hieronder. Het gaat hier niet daadwerkelijk om een tabel, maar door hulpsoftware zoals een screenreader wordt het wel als zodanig voorgelezen. Dit kan verwarrend werken. Als een tabel gebruikt wordt voor de vormgeving, kan deze voor hulpsoftware verborgen worden door 'role=presentation' op het table-element te plaatsen. Ditzelfde komt op meer pagina's voor.
Bevinding 8: Advies: Op pagina https://elearning.ordz.nl/mod/lesson/view.php?id=93&pageid=30 komt visueel een koptekst voor, maar deze is onzichtbaar gemaakt met aria-hidden. In plaats daarvan is de tekst, inclusief de inleiding van de pagina, in de legend van de pagina geplaatst. Dit veroorzaakt mogelijk verwarring, bijvoorbeeld voor bezoekers die voorleessoftware gebruiken maar het scherm wel kunnen zien. Zij verwachten dat de kop aanwezig is, terwijl dat nu niet het geval is.
Bevinding 9: Advies: Op onder andere pagina https://elearning.ordz.nl/mod/choice/view.php?id=77&forceview=1 staan groepen invoervelden. Deze zijn nu ook als lijst opgemaakt. Dit is overbodig, het groeperen van de invoervelden is voldoende.
1.3.3 Zintuiglijke eigenschappen (Niveau A)
Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen
Uitkomst: Onvoldoende
Bevinding 10: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=60&forceview=1 staat in de tweede alinea informatie over de hoe de ondertiteling van de video's bediend kan worden. Hierbij wordt verwezen naar 'het "cc" symbool rechts onderin het videoscherm'. Deze beschrijving is onvoldoende duidelijk voor bezoekers die een visuele beperking hebben. Visueel is op de videoplayers een knop te zien waarop 'cc' staat, maar deze knop heeft de naam 'Choose captions', dit is hoe de knop wordt voorgelezen door hulpsoftware zoals een screenreader. Voor sommige gebruikers kan het daardoor onduidelijk zijn naar welke knop de beschrijving verwijst. Ook is de visuele locatie (rechts onderin) niet vast te stellen voor visueel beperkte bezoekers. Gebruik geen zintuigelijke eigenschappen bij de instructie voor het bedienen van de ondertiteling.
Bevinding 11: Op pagina https://elearning.ordz.nl/mod/lesson/view.php?id=93&pageid=30&startlastseen=yes staat 'Hieronder staan een aantal voorbeelden'. Voor bezoekers met een visuele beperking is niet te zien naar welke locatie op de pagina hiermee verwezen wordt, aangezien de voorbeelden er niet direct onder staan. Gebruik geen zintuiglijke informatie.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 12: Deze bevinding vereist mogelijk een technische oplossing:
Op onder andere pagina https://elearning.ordz.nl/mod/forum/view.php?id=354 komen linkteksten voor (de namen van degenen die een reactie hebben achtergelaten). Deze linkteksten zijn alleen herkenbaar in de lopende tekst doordat de teksten donkergroen zijn (HEX #275937). De contrastratio tussen de groene tekst en de zwarte tekst is 2,5:1. Om te voldoen aan dit criterium moet dit minstens 3:1 zijn, of de tekst moet op een andere manier herkenbaar zijn als link, zoals op andere pagina's met vetgedrukte tekst is gedaan (zie daarvoor eerst succescriterium 1.3.1).
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 13: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=359 staat in het linkermenu de zwarte tekst 'Certificaat' op een groene achtergrond (HEX #275937). Deze kleurencombinatie heeft onvoldoende contrast. De contrastverhouding is hier 2,5:1, waar dat minimaal 4,5:1 moet zijn.
Bevinding 14: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=359 heeft het tabje "Certificaat" in de navigatiebalk links een te laag contrast bij muishover. De donkergrijze tekst (HEX #1D2125) staat dan in verhouding tot het donkergroene achtergrond (HEX #1B3E27) in een ratio van 1,4:1, terwijl het criterium een minimum van 4,5:1 voorschrijft.
Bevinding 15: Op pagina https://elearning.ordz.nl/mod/feedback/view.php?id=115 staat een vragenmodule. Indien het nog niet is doorlopen, staat er een badge met de tekst "Nog te doen: bekijk" onder de kop "Evaluatie". De witte tekst op de lichtgrijze badge (HEX #F8F9FA) heeft een contrastratio van 1,1:1 waar dit minimaal 4,5:1 moet zijn.
1.4.5 Afbeeldingen van tekst (Niveau AA)
Informatie over succescriterium 1.4.5 Afbeeldingen van tekst
Uitkomst: Onvoldoende
Bevinding 16: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=84&forceview=1 staat een afbeelding van tekst. Deze opmaak is hier niet essentieel. Voor bezoekers met een visuele beperking is het belangrijk dat tekst als HTML wordt geplaatst en niet in een afbeelding. Zij kunnen tekst in HTML namelijk met een eigen stylesheet naar hun wensen opmaken, terwijl tekst in een afbeelding niet aanpasbaar is. Plaats tekst uit informatieve afbeeldingen daarom ook op een andere manier op de pagina.
2. Bedienbaar
2.4 Navigeerbaar
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Voldoende
Bevinding 17: Advies: Iedere pagina heeft een beschrijvende titel, maar de afzender ontbreekt. Overweeg daarom om de paginatitels aan te passen.
2.4.6 Koppen en labels (Niveau AA)
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 18: Op pagina https://elearning.ordz.nl/mod/page/view.php?id=86&forceview=1 komt een video voor met als toegankelijke naam '03 Deel 1 - Hoe start ik met ontregelen?'. Dit komt overeen met het hoofdstuk van de e-learning, maar niet met de inhoud van de video. De video gaat om de vier fasen van een ontregeltraject. Dit komt nu niet voldoende naar voren in de titel. Pas de titel van de video daarom aan. Een vergelijkbaar probleem komt voor op pagina https://elearning.ordz.nl/mod/page/view.php?id=101&forceview=1.
2.5 Input modaliteiten
2.5.3 Label in naam (Niveau A)
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 19: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://elearning.ordz.nl/mod/forum/view.php?id=354 kunnen bezoekers een reactie achterlaten. De visueel zichtbare naam van het invoerveld is ‘Schrijf je antwoord’, en dat verdwijnt wanneer een bezoeker begint met typen (dan is er geen visueel label meer), en de toegankelijke naam is alleen ‘Bericht’. Dit komt niet overeen met de visueel zichtbare naam waardoor bezoekers die gebruik maken van spraakgestuurde navigatie het veld niet of moeilijk kunnen bedienen.
Bevinding 20: Op pagina https://elearning.ordz.nl/mod/forum/view.php?id=35 staan rechtsonder iedere forumbijdrage drie links. Visueel leest men "Toon discussiestart" terwijl als title en aria-label "Permanente link naar het bovenliggende bericht" toegevoegd zijn. Dit is verwarrend voor gebruikers van schermleessoftware: er wordt immers niet naar het bovenliggende bericht gelinkt, maar naar het bovenste bericht.
3. Begrijpelijk
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 21: Indien men op https://elearning.ordz.nl/mod/lesson/view.php?id=63 geen optie aanvinkt en het formulier instuurt, komt men op een landingspagina waarop staat dat de invoer fout was. De specifieke fout wordt echter niet medegedeeld, waardoor de bezoeker niet weet wat er precies fout is gegaan.
3.3.2 Labels of instructies (Niveau A)
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevinding 22: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://elearning.ordz.nl/mod/forum/view.php?id=354 kunnen bezoekers een antwoord achterlaten. Het invoerveld waarmee je het antwoord achter kan laten heeft alleen de placeholdertekst 'Schrijf je antwoord...' als visueel label. Wanneer bezoekers iets typen in dit veld verdwijnt de placeholdertekst en heeft het veld geen visueel label meer. Zorg ervoor dat invoervelden altijd een visueel label hebben, ook als hier iets is ingevuld. Een placeholdertekst alleen is dus niet geschikt voor het visuele label. Plaats een visueel label buiten het veld dat altijd in beeld blijft staan.
Bevinding 23: Advies: Op pagina https://elearning.ordz.nl/mod/choice/view.php?id=77&forceview=1 staat een vraag, ter beantwoording door de bezoeker middels checkboxen. De instructie leest "Kies een van de beschikbare opties op basis van de vraag". Bij de optie "Anders, namelijk..." staat echter geen invoerveld. Indien bezoekers deze checkbox aanvinken of versturen, kunnen ze er redelijkerwijs van uitgaan dat er iets ingevuld moet worden. Advies is om de instructies aan te passen dan wel een invoerveld in het formulier te verwerken.
4. Robuust
4.1 Compatibel
4.1.2 Naam, rol, waarde (Niveau A)
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Voldoende
Bevinding 24: Opmerking: Op meerdere plekken, waaronder op pagina https://elearning.ordz.nl/mod/choice/view.php?id=69&forceview=1, wordt role=alert gebruikt waar dat niet gepast is. Dit is een technische bevinding en wordt derhalve in dit onderzoek niet afgekeurd, maar verdient wel de aandacht.
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
- Overzichtspagina:
https://elearning.ordz.nl/course/view.php?id=3 - Hoe werkt de e-learning:
https://elearning.ordz.nl/mod/page/view.php?id=60&forceview=1 - Video 1:
https://elearning.ordz.nl/mod/page/view.php?id=61 - Ervaringsverhaal:
https://elearning.ordz.nl/mod/page/view.php?id=62 - Formuliervragen radio:
https://elearning.ordz.nl/mod/lesson/view.php?id=63 - Proces formele regels:
https://elearning.ordz.nl/mod/lesson/view.php?id=67 - Formuliervragen 2 radio:
https://elearning.ordz.nl/mod/choice/view.php?id=69&forceview=1 - Afbeeldingen van tekst:
https://elearning.ordz.nl/mod/page/view.php?id=71&forceview=1 - Forumpagina:
https://elearning.ordz.nl/mod/forum/view.php?id=354&forceview=1 - Formuliervragen checkboxes:
https://elearning.ordz.nl/mod/choice/view.php?id=77&forceview=1 - Vervolg praktijkvoorbeeld:
https://elearning.ordz.nl/mod/page/view.php?id=78&forceview=1 - Afbeelding van tekst 2:
https://elearning.ordz.nl/mod/page/view.php?id=84&forceview=1 - Koptekst:
https://elearning.ordz.nl/mod/page/view.php?id=86&forceview=1 - Afbeelding van tekst 3:
https://elearning.ordz.nl/mod/page/view.php?id=90&forceview=1 - Comboboxen:
https://elearning.ordz.nl/mod/lesson/view.php?id=93&forceview=1 - Video 2:
https://elearning.ordz.nl/mod/page/view.php?id=101&forceview=1 - Certificaat:
https://elearning.ordz.nl/mod/feedback/view.php?id=115&forceview=1#module-359 - Evaluatie formuliervelden:
https://elearning.ordz.nl/mod/feedback/complete.php?id=115&courseid=3 - Feedback antwoord:
https://elearning.ordz.nl/mod/lesson/continue.php - Evaluatie:
https://elearning.ordz.nl/mod/feedback/view.php?id=115 - Antwoorden vragen:
https://elearning.ordz.nl/mod/page/view.php?id=375&forceview=1 - Formuliervragen checkboxes 2:
https://elearning.ordz.nl/mod/choice/view.php?id=82&forceview=1
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.