Issues:
Content-audit digitale toegankelijkheid PWC e-learnings

(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 hele e-learning komen svg-afbeeldingen voor die niet zichtbaar zijn op de pagina, maar wel zichtbaar zijn voor hulpsoftware. Daarnaast worden de achtergronden wel herkent als afbeelding, die geen alternatieve tekst hebben. Zorg ervoor dat deze afbeeldingen ook onzichtbaar zijn voor hulpsoftware door ze te verbergen met aria-hidden.

Bevinding 2: Op pagina 1 van hoofdstuk 7 verandert de + knop van uiterlijk wanneer een item bekeken is, het verandert in een vinkje. Deze verandering is niet beschikbaar voor hulpsoftware, er wordt geen additionele informatie uitgesproken wanneer bezoekers langs de knop navigeren. Dit is verwarrend omdat bezoekers geen status verandering horen en niet weten dat de knop niet meer klikbaar is, zij weten niet wat er verandert in het scherm. Zorg daarom voor een alternatieve tekst voor deze verandering, die wordt gecommuniceerd wanneer bezoeker focus hebben op de knop.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 3: Op de landingspagina van https://360.articulate.com/review/content/7d1d31ef-e9cd-4ddd-b3c5-dd3d918807de/review staat een H1-kop 'EU actions related to sustainable finance' en een knop met de toegankelijke naam 'Start course'. In de code staat de kop ónder de knop. Hierdoor is er géén content aanwezig onder de kop. Wanneer tekst is opgemaakt als kop, moet daar content (zoals tekst, een hiërarchisch kleinere kop, of bijvoorbeeld een afbeelding, video of interactief element) op volgen. Zie ook succescriterium 1.3.2.

Bevinding 4: Op pagina 3 van de module staat de tekst 'Module I1-EU actions related to sustainable finance, intermediate level'. Deze kop is visueel een kop voor de onderliggende tekst, maar is opgemaakt als paragraaf. Zorg ervoor dat deze informatie (dat het een kop is) ook beschikbaar is voor bezoekers die het scherm niet kunnen zien door een h-element te gebruiken. Bezoekers die bijvoorbeeld gebruik maken van voorleessoftware kunnen aan de hand van sneltoetsen of een koppenlijst snel een beeld krijgen van de content op een pagina en door de koppen navigeren. Wanneer teksten niet als echte koppen zijn opgemaakt, kan dit niet. Dit probleem doet zich op meerdere pagina's en plekken voor, bijvoorbeeld op de overzichtspagina bij de tekst 'Choose a chapter'.

Bevinding 5: Op pagina 3 van hoofdstuk 3 komen keuzerondjes voor waarmee bezoekers antwoord geven op een vraag. De keuzerondjes zijn niet gegroepeerd, waardoor bezoekers die gebruik maken van bijvoorbeeld voorleessoftware wel de antwoorden voorgelezen krijgen, maar niet weten op welke vraag zij antwoord geven. Groepeer de keuzerondjes, bijvoorbeeld met een fieldset en legend combinatie, om dit probleem op te lossen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina 2 van hoofdstuk 4. Daar is nu geen relatie tussen selectievakjes en de betreffende vragen. Dit probleem doet zich op meerdere pagina's voor.

Bevinding 6: Op onder andere pagina 1 van hoofdstuk 5 komt dikgedrukte tekst voor die wordt gebruikt om het belang van bepaalde termen te benadrukken. Deze informatie is niet beschikbaar voor bezoekers die gebruik maken van hulpsoftware. Een semantisch geschikt element hiervoor is het strong-element, dit geeft nadruk aan een woord of korte zin.

Bevinding 7: Op pagina 1 van hoofdstuk 6 komen vier comboboxen voor. Deze hebben geen label. Bezoekers die het scherm niet kunnen zien weten daardoor niet waar de comboboxen voor dienen. Geef de comboboxen een beschrijvend label en koppel daarnaast de vraag programmatisch (zie succescriterium 1.3.2) aan de combobox om dit probleem op te lossen.

Bevinding 8: Op pagina 7 van hoofdstuk 7 wordt informatie visueel een vorm van een tabel getoond, maar de relatie tussen de verschillende termen is niet aanwezig voor bezoekers die gebruik maken van hulpsoftware. Presenteer deze informatie ook op een begrijpelijke manier voor hulpsoftware, bijvoorbeeld door gebruik te maken van één of meerdere HTML-tabellen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina 12 van hoofdstuk 7.

Bevinding 9: Deze bevinding is ontstaan na het oplossen van een eerdere bevinding in de audit en is gevonden tijdens de hercontrole:
Op pagina 15 van hoofdstuk komen 2 tabs voor die enkel met de muis te bedienen zijn. De tekst 'Climate change adaptation' komt nu echter helemaal niet voor voor bezoekers die gebruik maken van hulpsoftware, beide teksten zijn nu 'Climate change mitigation'.

Bevinding 10: Nieuwe bevinding:
Op pagina 13 van 17 komen twee sliders voor. De knoppen hebben een toegankelijke tekst, maar de categorie (Electric cars en Fossils fuels) komen niet voor in de toegankelijke naam van de knop, en de categorie is ook niet programmatisch gekoppeld aan de slider, waardoor bezoekers niet weten waar ze antwoord op geven met het verschuiven van de slider.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 11: Op de landingspagina https://360.articulate.com/review/content/7d1d31ef-e9cd-4ddd-b3c5-dd3d918807de/review staat een H1-kop 'EU actions related to sustainable finance' en een knop met de toegankelijke naam 'Start course'. In de code staat de kop ónder de knop. Dit is geen logische leesvolgorde voor bezoekers die gebruik maken van hulpsoftware. Zorg ervoor dat alle informatie wordt aangeboden in een logische, betekenisvolle volgorde.

Bevinding 12: Op de overzichtspagina van de e-learning staat het navigatiemenu met glossary en references bóven de main van de pagina, maar in de code staat het navigatiemenu onderaan. Dit is verwarrend voor bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren, ook juist wanneer zij het scherm wel kunnen zien. Zorg ervoor dat de visuele volgorde en de focusvolgorde niet volledig uit elkaar liggen.

Bevinding 13: Op onder andere pagina 1 van hoofdstuk 4 staat een term in de tekst, waar bezoekers op kunnen klikken om de definitie te lezen. Voor bezoekers die gebruik maken van het toetsenbord komt de knop om de definitie te openen pas ná de tekst 'Click on the + icons...'. Dit is met name verwarrend voor bezoekers die het scherm niet kunnen zien en niet weten dat de term interactief was. Dit probleem komt op meerdere pagina's voor. Een vergelijkbaar probleem komt voor op pagina 4 van hoofdstuk 7 waar alle knoppen om de termen in de infographic te openen, vóór alle paragrafen in de infographic zijn geplaatst.

Bevinding 14: Op pagina 1 van hoofdstuk 6 staan vragen, met daarnaast comboboxen waarmee bezoekers antwoord kunnen geven op de vragen. In de accessibility tree komen eerst de 4 vragen voor, en daarna pas de 4 comboboxen. Hierdoor is er geen relatie meer tussen vraag en antwoordmogelijkheid. Plaats de comboboxen in de juiste volgorde en zorg voor een duidelijke programmatische koppeling tussen de vragen en antwoordmogelijkheden.

Bevinding 15: Wanneer bezoekers op pagina 12 van hoofdstuk 7 door willen gaan zonder antwoord, verschijnt er een dialoogvenster. In de accessibility tree komt de knop 'Ok' hier vóór de uitleggende tekst die daar visueel boven staat. Zorg ervoor dat de volgorde waarin informatie gepresenteerd wordt ook logisch is voor bezoekers die het scherm niet kunnen zien. Dit probleem doet zich op meerdere pagina's voor.

Bevinding 16: Op pagina 5 van hoofdstuk 7 staan de knoppen om informatie te tonen in de accessibility tree ónder de tekst die onder die knoppen hoort, waardoor de relatie tussen de 'kop' en de bijbehorende tekst niet meer duidelijk is. Zorg ervoor dat bezoekers éérst een categorie selecteren, en toon daarna de bijbehorende informatie.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 17: Op pagina 1 van hoofdstuk 1 staat de tekst 'Click on the '+' icons for a short explanation'. Alle instructies om content te kunnen begrijpen of te bedienen, moeten ook tekstueel en/of semantisch aanwezig zijn zodat de instructies ook te begrijpen zijn voor mensen die het beeld niet zien. Denk hierbij aan vorm, omvang, locatie, geluid en oriëntatie van de content, die ook tekstueel beschreven moet zijn op dezelfde pagina. Dit probleem doet zich op meerdere pagina's voor. Een vergelijkbaar probleem is de tekst 'click on the underlined words' op bijvoorbeeld pagina 4 van hoofdstuk 7 en 'the + icons on the right' op pagina 1 van hoofdstuk 5. Dit probleem komt op meerdere pagina's voor.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 18: In de downloadbare PDF komen geordende lijsten voor. Het contrast tussen de roze cijfers (HEX #DB536A) en de witte achtergrond is 3,8:1 waar dat minimaal 4,5:1 moet zijn.

2. Bedienbaar

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 19: Deze bevinding is aangepast naar aanleiding van de hercontrole:
Pagina 3 van de e-learning (waar bezoekers op de knop 'Start' kunnen drukken) bevat bewegende content. Bezoekers kunnen de beweging stoppen door ergens in het scherm met de muis te klikken. Dat wordt echter niet gecommuniceerd en is geen functionaliteit die met het toetsenbord te bedienen is. Bewegende, knipperende, scrollende of automatisch updatende content kan bezoekers afleiden bij het gebruik van de rest van de pagina. Daarom moet er altijd een mogelijkheid zijn om de beweging te stoppen of te pauzeren, zonder verlies van functionaliteit of content. Dit probleem doet zich ook aan het einde van de module voor.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 20: Aangezien het hier gaat om een iframe-toepassing binnen een andere webpagina, dient de paginatitel te worden onderzocht op het domein waar de e-learning als toepassing wordt geplaatst. Dit valt buiten de scope van dit onderzoek.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 21: Deze bevinding is ontstaan na het oplossen van een probleem aan de hand van de audit en is gevonden tijdens de hercontrole:
Op pagina 2 van hoofdstuk 4 staan selectievakjes. Alle selectievakjes hebben nu de toegankelijke naam 'Radio button 3' door een verkeerd gekoppeld label. Deze naam is én niet beschrijvend, en niet geschikt als naamgeving voor alle keuzerondjes omdat de naam van een selectievakje iets moet zeggen over de keus die een bezoeker maakt bij het aanvinken ervan.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 22: Op de overzichtspagina van de module kunnen bezoekers een hoofdstuk openen door op 'Start' te klikken. Wanneer zij vanuit het hoofdstuk weer teruggaan naar de overzichtspagina is de naam van de knop verandert in 'Continue'. De toegankelijke naam van de knop is echter nog hetzelfde als eerst: 'Start chapter X'. Bezoekers die spraakgestuurde navigatie gebruiken kunnen hierdoor de knop niet bedienen omdat de zichtbare naam en de toegankelijke naam niet overeen komen. Dit geldt ook voor afgeronde hoofdstukken waarbij de naam van de knop in 'Completed' verandert. Het toevoegen van een screenreader only tekst dat een hoofdstuk afgerond is, is niet voldoende. Het gaat hier namelijk niet om het aanbieden van een alternatieve tekst, maar om het bedienbaar zijn van de knoppen voor spraakgestuurde navigatie.

Bevinding 23: Deze bevinding is ontstaan na het oplossen van een eerder probleem in de audit en is gevonden tijdens de hercontrole:
Op pagina 3 van hoofdstuk 6 komt een submit-knop voor. De toegankelijke naam is 'Rectangle 1'. Dit probleem komt nu op meerdere pagina's voor.
Bezoekers die spraakgestuurde navigatie gebruiken kunnen de knop daardoor niet of moeilijker bedienen. Hou er daarnaast rekening mee dat het toevoegen tekst, zoals hier bij de keuzerondjes en op andere plekken voorkomt (bijvoorbeeld: Answer 2:') de elementen potentieel ook moeilijker maakt om te bedienen.

Bevinding 24: Deze bevinding is ontstaan na het oplossen van een eerder probleem in de audit en is gevonden tijdens de hercontrole:
Op pagina 14 van hoofdstuk 7 komt een invoer-element met als toegankelijke naam 'Type your answer here. In percentage.' Omdat deze tekst niet visueel voorkomt en dit niet overeen komt met de visuele labels op de pagina en de vraag niet gegroepeerd is met het invoerelement, kunnen bezoekers die gebruik maken van spraakgestuurde navigatie dit invoerveld niet of moeilijk bedienen.

Bevinding 25: Deze bevinding is ontstaan na het oplossen van een eerder probleem in de audit en is gevonden tijdens de hercontrole:
Op de overzichtspagina van de module staat visueel de knop 'Start' bij hoofdstuk 7. De toegankelijke naam van de knop is echter 'Start chapter 6''. Bezoekers die spraakgestuurde navigatie gebruiken kunnen hierdoor de knop niet bedienen omdat de zichtbare naam (die zij uitspreken) en de toegankelijke naam (die zij niet zien) niet overeen komen. Daarnaast bestaat er al een knop met de naam 'Start chapter 6'. Zorg ervoor dat de visuele naam voorkomt in de toegankelijke naam, het liefst vooraan, of pas de visuele naam aan.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 26: Op meerdere pagina's komen knoppen voor die uitgeklapt kunnen worden (bijvoorbeeld op pagina 1 van hoofdstuk 1). Na het klikken verandert de knop van uiterlijk (een sluit-knop), maar de toegankelijke naam blijft hetzelfde. Zorg ervoor dat de functie van de knop voorkomt in de toegankelijke naam. Zorg ook dat wordt aangegeven of een knop geopend is of niet, bijvoorbeeld met het aria-expanded attribuut.

Bevinding 27: Op pagina 3 van hoofdstuk 3 staat de knop 'Submit'. Deze knop verstuurt informatie en moet daarom van type 'submit' zijn. De knop heeft nu echter als type 'button'. Dit probleem komt op meerdere pagina's voor.

Bevinding 28: Op pagina 1 van hoofdstuk 5 komt lege knop voor, visueel ter hoogte van de derde zin van de eerste paragraaf. In de accessibility tree komt deze knop echter pas ná knop 4 voor. Verwijder de knop, of plaats de knop in de juiste volgorde en geef de knop een toegankelijke naam. Dit probleem komt op meerdere pagina's voor, waaronder op pagina 4 van hoofdstuk 7.

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

• e-learnings:
  https://360.articulate.com/review/content/4c4b9727-0ca8-473c-868f-ddb827a424e9/review

Ondersteunende technieken

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

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.