Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid Monitor Arbeid TNO

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Monitor Arbeid TNO
Scope van de website Binnen de scope van het onderzoek valt: Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem anders is dan van de onderzochte website.
  • Alle externe systemen en websites waar via de website met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 122

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: Het TNO logo linksboven op elke pagina heeft geen tekstalternatief (Logo TNO). Ook mist het linkdoel (bijv. 'Ga naar de homepagina'). Er gaat iets mis in de code, waardoor het aria-label op het <a>-element niet gekoppeld is aan het klikbare logo. Daarnaast is het aria-label Engelstalig, maar dit moet Nederlands zijn.

Bevinding 2: Onderaan elke pagina staat een afbeelding met golven om de footer van de rest van de pagina te onderscheiden. Deze afbeelding heeft geen tekstalternatief en dit is ook niet nodig omdat het om een decoratieve afbeelding gaat. Maar de afbeelding heeft wel een leeg alt-attribuut (alt="") nodig, zodat hulpsoftware weet dat de afbeelding genegeerd kan worden.

Bevinding 3: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… staan grafieken en een infographic. Al deze afbeeldingen missen een tekstueel alternatief. Er moet minimaal in het alt-attribuut een korte tekst staan die aangeeft waar de afbeelding over gaat, maar daarnaast moet een volwaardig tekstueel alternatief worden gegeven voor alle visuele informatie. Zie ook succescriterium 1.4.5.

Bevinding 4: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staan in de visualisaties in de Benchmarktool social media iconen. Deze missen een tekstalternatief. Zie ook succescriterium 4.1.2.

Bevinding 5: In de PDF "Factsheet ZEA 2021" staat het logo van TNO en het logo van CBS. Momenteel zijn deze afbeelding niet voorzien van een tag, daarom hebben zij ook geen tekstalternatief. Zorg ervoor dat deze afbeeldingen een goede alternatieve tekst krijgen waarin de organisatienaam in voorkomt.

Bevinding 6: In de PDF "Factsheet ZEA 2021" staan verschillende decoratieve afbeeldingen. Zorg ervoor dat deze worden aangemerkt als artifact zodat de afbeeldingen verborgen zijn voor screenreaders.

Bevinding 7: Op pagina 1 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat het logo van TNO. Het logo in niet voorzien van een tag en wordt daardoor niet voorgelezen door screenreaders. Zorg ervoor dat de afbeelding in een figure-tag wordt geplaatst en een alternatieve tekst krijgt waarin alle teksten op de afbeelding staan.

Bevinding 8: Op pagina 3 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staan in de inhoudsopgave decoratieve punten (......) tussen teksten en paginanummers. Deze punten zijn getagd en worden daardoor voorgelezen door screenreaders, bijvoorbeeld als 'twintig punt'. Dit is verwarrend voor screenreadergebruikers. Zorg dat deze items gecodeerd zijn als artefact zodat screenreader ze niet voorlezen.

Bevinding 9: In de tabel op pagina 25 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staan iconen die informatie overbrengen. Voor mensen die afhankelijk zijn van screenreaders is het niet duidelijk wat de betekenis is van deze iconen, mogelijk worden de iconen niet door elke screenreader voorgelezen. Zorg er daarom voor dat deze iconen een goed tekstalternatief hebben.
Dezelfde iconen zijn ook in andere tabellen in de PDF geplaatst, bijvoorbeeld in de tabel op pagina 39 en op pagina 43

Bevinding 10: Op pagina 48 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een decoratieve balk die voorzien is van een figure-tag. Deze balk is puur decoratief en moet daar worden aangemerkt als artefact zodat deze niet wordt voorgelezen door screenreaders. Markeer deze afbeelding als artefact en verwijder de figure-tags.

Bevinding 11: De grafieken in de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" hebben geen alternatieve tekst, bijvoorbeeld de grafiek op pagina 22. Het is noodzakelijk dat de grafieken een alternatieve tekst krijgen zodat screenreadergebruikers weten welke informatie de grafiek overbrengt. Kijk hierbij bijvoorbeeld wat de trend is die de grafiek weergeeft. Als gegevens die gebruikt zijn om de grafiek mee te maken in de bijlage staan, kan hier naar verwezen worden in de alternatieve tekst naast de beschrijving van de grafiek.

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 12: Op de pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staat een Benchmarktool en een instructiefilm over hoe de zoekfunctie in de benchmarktool te gebruiken is. De instructie is alleen visueel, de audio bestaat uit muziek. Er is geen alternatief voor de informatie in de video: Hoe de zoekfunctie gemakkelijk te gebruiken. Zorg voor een alternatief om aan dit criterium te voldoen.

Bevinding 13: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ staan podcasts. Er is geen toegankelijk alternatief voor doven en slechthorenden niet toegankelijk. Zorg er voor dat er een alternatief geleverd wordt dat gelijkwaardige informatie geeft, bijvoorbeeld door een transcript aan te bieden.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 14: Alle zoekvelden op de website, zoals op www.monitorarbeid.tno.nl/nl-nl/ en bovenaan de pagina, missen een <label> in de code. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk wat ze hier kunnen invullen.
Dit komt ook voor op pagina www.monitorarbeid.tno.nl/nl-nl/ en www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ (Benchmarktool).

Bevinding 15: De elementen in het kruimelpad linksboven aan de pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ zitten in een unordered list maar niet in list elementen.
Daarentegen zit de talen-keuzeknop boven aan elke pagina in een list element dat niet in een unordered list zit. Zorg ervoor dat de juiste code in de HTML wordt gebruikt om deze lijsten op te maken.

Bevinding 16: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staan onder de kop 'Maar de NEA is ook...' een aantal lege H5 koppen. Dit is verwarrend voor gebruikers van hulpsoftware, verwijder deze daarom uit de codelaag.

Bevinding 17: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staan twee vetgedrukte koppen die met het <strong> element zijn opgemaakt. Het probleem is dat strong bedoeld is om nadruk te geven aan een of enkele woorden. Verwijder het strong-element, gebruik CSS voor opmaak, en geef de koppen een kopelement (bijvoorbeeld h5).

Bevinding 18: Op pagina www.monitorarbeid.tno.nl/nl-nl/fout is de hele tekst "Maar we denken natuurlijk graag met je mee!" met het strong-element opgemaakt. Deze tekst heeft geen nadruk nodig, gebruik in plaats daarvan CSS of een vergelijkbare manier om de tekst anders op te maken.
Dit komt ook voor op pagina monitorarbeid.tno.nl/nl-nl/coronacrisis/blog-jobcrafting/ ("4 basisprincipes...").

Bevinding 19: Op pagina www.monitorarbeid.tno.nl/nl-nl/ staan aan de linkerkant van de pagina checkboxes. De checkboxes zijn in de code niet gekoppeld aan het label dat ernaast staat. Daardoor weten personen die gebruik maken van hulpsoftware niet wat er aangevinkt kan worden. Maak een koppeling door gebruik te maken van for en id attributen.
Daarnaast mist als groepering de koppeling met het label erboven, waardoor de relatie tussen de groepering en het label niet duidelijk is. Dit kan worden opgelost door een fieldset/legend combinatie te gebruiken.

Bevinding 20: Op pagina www.monitorarbeid.tno.nl/nl-nl/ staan in de dropdown naast 'Sorteren op' opties, de geselecteerde optie heeft er een blauw vinkje naast. In de code is echter niet duidelijk welke optie geselecteerd is.

Bevinding 21: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… zijn de cursieve teksten zoals 'DI-profiel van de sector gezondheids- en welzijnszorg vergeleken met de overige sectoren in 2019.' opgemaakt met het <em> element. Ook dit element is bedoeld om nadruk te geven aan een of enkele woorden. Gebruik in plaats daarvan CSS of een vergelijkbare manier om de tekst anders op te maken.
Dit komt ook voor op pagina monitorarbeid.tno.nl/nl-nl/coronacrisis/blog-jobcrafting/ ("Geschreven door...").

Bevinding 22: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… worden gegevens per regio weergegeven in een tabel. In de laatste kolom, Score worden de letters 'L', 'G' en 'H' gebruikt. Onder in de tabel is visueel aangegeven dat het om "Laag", "Gemiddeld" en "Hoog" gaat. Deze informatie wordt niet doorgegeven aan screenreadergebruikers. Zorg ervoor dat deze bezoekers over dezelfde informatie beschikken als ziende bezoekers.
Daarnaast zijn de relaties in de tabel niet helemaal duidelijk doordat extra informatie, die verschijnt bij het uitklappen, als een aparte rij is toegevoegd. Het is dan niet duidelijk dat deze informatie deel is van het erboven staande kenmerk.
Wellicht is het hier beter om geen tabel te gebruiken, maar alleen van de accordeon-structuur gebruik te maken.

Bevinding 23: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is in de benchmarktool de actieve pagina in de lijst met 'links' aangegeven met een oranje kleur. In de code is nu niet beschikbaar welke pagina de huidige pagina is.

Bevinding 24: De PDF "Factsheet ZEA 2021" is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium met betrekking tot de PDF code laag zoals semantische koppen en alt teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 25: Teksten op pagina 2 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" zijn geplaatst in een Table-tag. Hierdoor worden deze teksten door screenreaders voorgelezen als een tabel, de tekst 'Rapport' wordt bijvoorbeeld gezien als een kop in de tabel en wordt herhaald wanneer andere cellen worden voorgelezen. Zorg ervoor dat deze teksten correct worden voorgelezen door de Table- en andere tags te verwijderen en de teksten in p-tag te plaatsen.

Bevinding 26: De paginanummer in de inhoudsopgave op pagina 3 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" zijn geplaatst in link-tags. Hierdoor worden deze getallen voorgelezen door screenreaders als links terwijl zij niet als link werken. Zorg ervoor dat de getallen werken als link of verwijder de link-tags.

Bevinding 27: Op pagina 3 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat de kop 'Inhoudsopgave'. Deze kop is niet geplaatst kop-tag (<H1>,<H2>, etc.) maar in een TOCI-tag. Hierdoor interpreteert hulpsoftware deze tekst als een item van de inhoudsopgave. Los dit probleem door de tekst in een kop-tag te plaatsen.
Meerdere koppen in het document staan niet in een kop-tag, bijvoorbeeld op pagina 5 en op pagina 10.

Bevinding 28: Op pagina 7 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een referentie in de tekst '... leefstijl1' die verwijst naar de voetnoot onderaan de pagina. Deze referentie is niet opgemaakt in een Reference-tag. Hierdoor kan hulpsoftware gewone tekst niet onderscheiden van de referentie. Los dit probleem op door de referentie in een Reference-tag te plaatsen. Plaats hierachter de Note-tag met de voetnoot zodat deze teksten achter elkaar worden voorgelezen door screenreaders.
Dit probleem komt bij andere referenties naar voetnoten in dit document, bijvoorbeeld op pagina 12 en op pagina 13.

Bevinding 29: In Tabel 1 op pagina 21 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staan lege kopcellen. Een kopcel mag niet leeg zijn omdat deze iets zegt over onderliggende cellen in de tabel. Los dit probleem op door de TH-tag te vervangen voor een TD-tag.
Dit probleem komt ook voor in andere tabellen in de PDF, bijvoorbeeld in de tabel op pagina 25 en op 39.

Bevinding 30: Het bereik van de cel 'Cluster' in Tabel 1 op pagina 21 van de de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" is niet aangegeven. Dit is wel nodig omdat deze cel een kolombereik heeft over zes kolommen. Om ervoor te zorgen dat de tabel correct wordt voorgelezen door screenreaders moet het bereik van de cel worden aangegeven in de Tabeleditor.
Kopcellen die voor meerdere kolommen staan waarvan het bereik niet is aangegeven komen voor in meerdere tabellen, bijvoorbeeld in de tabel op pagina 25 en op pagina 40.

Bevinding 31: De scope van de kopcellen in Tabel 1 op pagina 21 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" is niet aangegeven. Zo kan hulpsoftware niet bepalen of een kopcel verbonden is met de rij of de kolom waar deze voor staat. Geef de scope van elke kopcel (<TH>) aan in de Tabeleditor.
Bij geen van de tabellen in dit document is de scope van kopcellen aangegeven, bijvoorbeeld de tabel op pagina 25 en op pagina 39.

Bevinding 32: Onder aan elke pagina van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een grijze tekst beginnend met 'Copyright 2021'. Deze tekst is niet op elke pagina voorzien van een tag en dat is goed, toch moet de tekst op één pagina wel in een tag worden geplaatst zodat bijvoorbeeld screenreaders deze ook kan voorlezen. Los dit probleem op de de tekst op één pagina in een tag te plaatsen, bijvoorbeeld op de eerste of laatste pagina.

Bevinding 33: Advies. Op pagina monitorarbeid.tno.nl/nl-nl/coronacrisis/blog-jobcrafting/ staat de paragraaf "Arnold Bakker geeft in het blog ..." in een tabel terwijl dit niet nodig is. Verwijder de tabel daarom uit de codelaag.

Bevinding 34: Advies: De pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… mist een kop van niveau H1. Zorg dat een pagina altijd minimaal (en maximaal) één H1 bevat.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 35: In de visualisaties op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staat de informatie in de grafieken niet op een betekenisvolle manier in de codelaag. Daardoor worden bijvoorbeeld eerst alle percentages opgelezen, en daarna de categorieën die bij die percentages horen. Zorg dat ook personen die het scherm niet kunnen zien en/of afhankelijk zijn van het toetsenbord dezelfde informatie kunnen krijgen.

Bevinding 36: Op pagina 1 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat de titel van het document met daaronder de ondertitel 'SECUNDAIRE ANALYSE NEA-COVID-19 COHORT'. In de codes van het document staat de tag waarin deze ondertitel in is geplaatst onder de tags met de andere teksten op deze pagina. Hierdoor wordt de tekst door screenreaders voorgelezen in een andere volgorde dan de visuele volgorde. Los dit op door de tag met de ondertitel direct onder de tag met de titel te plaatsen.

Bevinding 37: Op pagina 2 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een Table-tag. In de codes staat achter deze Table-tag een span-tag die een afbeelding bevat die op pagina 48 staat. Screenreaders lezen PDF-bestanden voor aan de hand van de codelaag, hierdoor wordt de afbeelding op pagina 48 voorgelezen op pagina 2. Dit is verwarrend voor screenreadergebruikers. Los dit probleem op door de afbeelding op de juiste plek in de codes te plaatsen.

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 38: Op pagina www.monitorarbeid.tno.nl/nl-nl/contact/ is 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: www.w3.org/tr/wcag21/.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 39: Wanneer de focus op de knop 'Versturen' komt, is dit alleen waarneembaar door een licht kleurverschil (blauw naar iets lichter blauw). Zorg voor een tweede visuele cue zodat ook personen met een vorm van kleurenblindheid de focus kunnen waarnemen.
Dit komt op meer plekken voor, bijvoorbeeld op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ bij de knop 'Lees meer', op pagina monitorarbeid.tno.nl/nl-nl/publicaties/factsheet-zea-2021/ bij de blauwe knop 'Factsheet ZEA 2021' en de zwarte knoppen als 'ZEA 2021 - Resultaten in vogelvlucht', en op de homepagina bij de knop 'Zoeken'.

Bevinding 40: Het dropdownicoontje naast 'Sorteren op' heeft krijgt het de focus ontvangt een blauwe kleur (#409ce0). De focus wordt daardoor alleen met een kleurverschil aangegeven. Zorg daarnaast voor een tweede visuele cue.
Iets soortgelijks komt voor in de visualisatie op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… .

Bevinding 41: Op pagina 1 van de PDF "Factsheet ZEA 2021" staat een cirkeldiagram waar gebruik wordt gemaakt van een legenda om betekenis te geven aan de verschillende kleuren in deze cirkel. Voor bezoekers die kleuren niet (goed) kunnen zien is het niet mogelijk om een link te leggen tussen de legenda en de verschillende vakken in de cirkeldiagram. Zorg ervoor dat bezoekers de betekenis van de onderdelen in de cirkeldiagram op een kleuronafhankelijke manier kunnen achterhalen. Gebruik daarvoor bijvoorbeeld vormverschillen of plaatst de betekenis van een bepaald vak in de cirkeldiagram daar direct naast.
Dit geldt ook voor de cirkeldiagram op pagina 2.

Bevinding 42: In de grafieken in de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" wordt gebruik gemaakt van een legenda om een betekenis te koppelen aan de verschillende kleuren in de grafiek, bijvoorbeeld in de grafiek op pagina 15. Voor mensen die kleuren niet (goed) kunnen zien is het niet mogelijk om de legenda te koppelen aan een lijn of staaf in de grafiek, hierdoor is het voor hen lastig om de grafiek te begrijpen. Zorg dat informatie ook wordt overgebracht op een kleur onafhankelijke manier, bijvoorbeeld door gebruik te maken van vorm.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 43: In de footer op elke pagina staat witte tekst op een lichtblauwe achtergrond (#409CE0). Deze tekst heeft een te laag contrast. De contrastverhouding is 3:1 waar dit 4,5:1 moet zijn. Deze kleurcombinatie komt op veel plaatsen in de website voor.

Bevinding 44: Het contrast van de links op de blauwe achtergrond (#409CE0) in de footer van elke pagina is te laag als je er met je muis overheen gaat (#CAA206). De contrastverhouding is hier 1,2:1, waar dit minimaal 3:1 moet zijn.

Bevinding 45: Het contrast van de lichtblauwe tekst (#409CE0) op de lichtgrijze achtergrond (#FFFCFC) op pagina www.monitorarbeid.tno.nl/nl-nl/ is te laag. De contrastverhouding is hier 2,9:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 46: Het contrast van de witte tekst op de oranje achtergrond (#FF9213) op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… onder "Relevante pagina’s en gerelateerde download"s is te laag. De contrastverhouding is hier 2,2:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 47: Het contrast van de oranje nummering onder aan de pagina (#FF9213) op de lichtgrijze achtergrond (#FFFCFC) op pagina www.monitorarbeid.tno.nl/nl-nl/ is te laag. De contrastverhouding is hier 2,2:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 48: In het contactformulier op de pagina www.monitorarbeid.tno.nl/nl-nl/contact/ zijn de labels in grijze tekst (#9E9C9C) op een grijze achtergrond (#EFECEC) geplaatst in de invoervelden. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,3:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 49: De witte teksten op gekleurde achtergrond blokken in het flow diagram Overheidsbeleid - Duurzame inzetbaarheid op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… hebben een te laag contrast. Bijvoorbeeld de bruine tekstballon "Heden" geeft een contrast van 2:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 50: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ hebben de ondertitels van de podcasts (#7F8287) een te lage contrastwaarde van 2,7;1 met de achtergrond, terwijl dit minimaal 4,5:1 moet zijn.

Bevinding 51: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… hebben een aantal teksten in de infographic een te lage contrastwaarde. Bijvoorbeeld de witte tekst op een geelgouden achtergrond (#daae38) (2,1:1) en de witte tekst op de groene achtergrond (#a8b243) (2,3:1).

Bevinding 52: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… is het contrast van de witte letters met de oranje achtergrond (#ff9900) in de visualisatie te laag (2,1:1). In combinatie met de lichtblauwe achtergrond is de oranje tekst (zelfde hex) nog lager (1,9:1).

Bevinding 53: In de benchmarktool op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is het contrast van de oranje kleur i.c.m. de witte achtergrond (bijv. om aan te geven welke link actief is) te laag (2,7:1).
Voor de knop 'Kies categorieën' is dit nog lager (2,1:1).
Daarnaast staan sommige zwarte getallen in de visualisaties op een gekleurde achtergrond. Het contrast tussen de zwarte tekst en de donkerroze achtergrond heeft een contrastwaarde van 4,4:1 en is daarmee net te laag.

Bevinding 54: In de PDF "Factsheet ZEA 2021" staan roze teksten (HEX#f36f60) op een witte achtergrond, bijvoorbeeld de tekst 'Typen zelfstandigen' op pagina 1. Deze teksten hebben een te laag contrast. De contrastverhouding is hier 2,8:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 55: In de PDF "Factsheet ZEA 2021" staan witte teksten op een oranje achtergrond (HEX#f79231). Deze teksten hebben een te laag contrast. De contrastverhouding is hier 2,3:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 56: In de PDF "Factsheet ZEA 2021" heeft de witte tekst 'Zonder personeel 1.024.300' op de roze achtergrond (HEX#ef519e) een te laag contrast. De contrastverhouding is hier 2,3:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 57: In de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staan blauwe teksten (HEX #649ec9) op een witte achtergrond, en witte teksten op een blauwe achtergrond (HEX #649ec9) in tabellen zoals op pagina 45. Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 2,8:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 58: Onderaan elke pagina van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een grijze tekst (HEX #808080) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is hier 3,9:1, waar dit 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 59: Op de pagina www.monitorarbeid.tno.nl/nl-nl/ staan onder "Uitgelicht" en "Snel naar" een aantal blokken met afbeeldingen en links. Wanneer bij een schermgrootte van 1024x768px ingezoomd wordt tot 200% valt het pijltje buiten beeld. Daardoor is het lastig om met de muis de rest van de content te bekijken.

Bevinding 60: www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is er in het uitklapbare gedeelte "Benchmarktool" een grafische weergave van de gegevens. Wanneer bij een schermgrootte van 1024x768px ingezoomd wordt tot 200% verdwijnt op verschillende tussenliggende breakpoints een deel van de gegevens buiten beeld.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 61: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… staan verschillende afbeeldingen met grafieken en tekst. De informatie in die afbeeldingen is belangrijk en er wordt naar verwezen in de tekst. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina, of zorg voor een toegankelijk alternatief, bijvoorbeeld door de informatie als uitgeschreven tekst aan te bieden.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 62: Op de pagina www.monitorarbeid.tno.nl/nl-nl/ staan onder "Uitgelicht" en "Snel naar" een aantal blokken met afbeeldingen en links. Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% valt het pijltje buiten beeld. Daardoor is het lastig om met de muis de rest van de content te bekijken.

Bevinding 63: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is er in het uitklapbare gedeelte "Benchmarktool" een grafische weergave van de gegevens. Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% verdwijnt op verschillende tussenliggende breakpoints een deel van de gegevens buiten beeld, of valt content over elkaar zodat dit niet meer leesbaar is.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 64: Als het zoekveld op de homepagina www.monitorarbeid.tno.nl/nl-nl/ focus krijgt is dat te zien door een lichtblauwe rand #409CE0 rond het veld tegen een lichtblauwe achtergrond #b3d4fc. De contrastverhouding is hier 2:1, waar dit minimaal 3:1 moet zijn.

Bevinding 65: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… hebben de meeste kleuren in de grafiek een te lage contrastwaarde met de witte achtergrond: de donkergroene kleur (#74b16c) heeft een contrastwaarde van 2,6:1, de lichtrode kleur (#f5afb9) heeft een contrastwaarde van 1,8:1 en de lichtgroene kleur (#bcd7b7) een contrastwaarde van 1,6:1.
Voor de grijzige kleuren in de tweede grafiek is dit 1,4:1 (bijv. #dbdbdd en #dadadc).
De verhouding moet minimaal 3:1 zijn.

Bevinding 66: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-… is in de infographic het contrast van de grijze pijl (#d4cfd2) naast stap 1 en 2 is met 1,5:1 te laag.

Bevinding 67: Op pagina www.monitorarbeid.tno.nl/nl-nl/ verschijnt achter de checkboxes een lichtblauwe cirkel wanneer deze de focus krijgen. Het contrast met de witte achtergrond is te laag. Ook wanneer een checkbox is geselecteerd is het contrast van de oranje kleur #ff9213 met het witte vinkje te laag (2,2:1).

Bevinding 68: Op pagina www.monitorarbeid.tno.nl/nl-nl/ heeft het dropdownicoontje wanneer het de focus ontvangt een te lage contrastwaarde van 2,9:2 (#409ce0). Dit moet minimaal 3:1 zijn.

Bevinding 69: Op pagina www.monitorarbeid.tno.nl/nl-nl/ staan in de dropdown naast 'Sorteren op' opties, de geselecteerde optie heeft er een blauw vinkje naast. Dit vinkje heeft een contrastratio van 2,7:1, maar moet minimaal 3:1 zijn.

Bevinding 70: Het zoekveld in de Benchmarktool op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ heeft een te lage contrastwaarde (#d2d2d2) van 1,5:1 i.c.m. de witte achtergrond.

Bevinding 71: De contrastwaarde van de social media iconen in de Benchmarktool op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is te laag (#c2c2c2) (1,8:1).

Bevinding 72: Op pagina 1 van de PDF "Factsheet ZEA 2021" staat een cirkeldiagram waarin resultaten worden aangegeven met behulp van kleuren (zie ook SC 1.4.1). Deze kleuren moeten een goed contrast hebben maar dit is niet het geval bij alle kleuren. De volgende kleuren hebben een te laag contrast op de witte achtergrond;

Deze kleuren moeten een minimale contrastverhouding van 3:1 hebben. Dit geldt ook voor de cirkeldiagram op pagina 2.

Bevinding 73: Op pagina 24 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een grafiek waarin gekleurde lijnen in staan (zie ook SC 1.4.1). Omdat deze lijnen informatie over brengen hebben ze een contrastverhouding van minimaal 3:1 nodig. Bij de volgende kleuren is dat niet het geval (gemeten tegenover de witte achtergrond):

Deze contrastproblemen herhalen zich in andere grafieken in het document, bijvoorbeeld de grafiek op pagina 23.

Bevinding 74: Op pagina 16 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een staafgrafiek waarin kleuren worden gebruikt om informatie aan de staven te hangen (zie ook SC 1.4.1). Omdat deze kleuren informatie over brengen hebben ze een contrastverhouding van minimaal 3:1 nodig. Bij de volgende kleuren is dat niet het geval (gemeten tegenover de witte achtergrond):

Deze contrastproblemen herhalen zich in andere staafgrafieken in het document, bijvoorbeeld de grafiek op pagina 17.

Bevinding 75: Op pagina 15 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staat een grafiek waarin kleuren worden om de legenda en grafiekaan elkaar te kopellen (zie ook SC 1.4.1). Omdat deze kleuren informatie over brengen hebben ze een contrastverhouding van minimaal 3:1 nodig. Bij de volgende kleuren is dat niet het geval (gemeten tegenover de witte achtergrond):

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 76: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… staat naast Regio een vraagteken. On hover verschijnt hier extra informatie. Deze content voldoet niet aan twee van de eisen van dit criterium. Ten eerste is te extra content niet 'dismissable': de extra content kan niet worden weggehaald zonder de muis te verplaatsen. Dit moet wel mogelijk zijn, bijv. door de Esc toets te gebruiken. Ook is de content niet 'hoverable': er kan niet over de content zelf gehoverd worden met de muis.

Bevinding 77: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ verschijnt binnen de visualisaties in de Benchmarktool informatie door over een grafiek heen te hoveren. Deze extra content is niet dismissable.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 78: Het TNO logo linksboven elke pagina is een link is naar de homepagina. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze link niet bedienen. Zorg ervoor dat alle interactieve elementen bedienbaar zijn met het toetsenbord.
Dit geldt ook voor het zoekicoon in het menu bovenaan de pagina.

Bevinding 79: Als je met de muis over de menu items boven elke pagina gaat verschijnen er dropdowns met meer links. Het is niet mogelijk deze links met behulp van het toetsenbord te bereiken. Zorg ervoor dat alle interactieve elementen bedienbaar zijn met het toetsenbord.

Bevinding 80: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… staat naast Regio een vraagteken. De informatie die verschijnt door met de muis over het vraagteken te hoveren is niet bereikbaar met het toetsenbord.

Bevinding 81: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staan in de visualisaties in de Benchmarktool de links 'tonen' en 'verbergen'. Deze zijn niet toetsenbordtoegankelijk. Dit geldt ook voor de legendateksten, die door erop te klikken verborgen kunnen worden, voor de social media iconen en voor de knoppen 'Kies categorieën' en 'Sluit'.
Ook binnen het venster 'Trends' is niet alles toetsenbordtoegankelijk.

Bevinding 82: Advies: Op de home pagina www.monitorarbeid.tno.nl/nl-nl/ staat een iframe met een groot aantal Tweets. Elke link daarin krijgt focus. Een toetsenbord gebruiker moet eerst al die links, meer dan honderd, passeren voor de belangrijke inhoud in de footer van de pagina bereikt kan worden. Zorg voor een mogelijkheid om het iframe te omzeilen.

Bevinding 83: Op pagina 2 van de PDF "Factsheet ZEA 2021" staat de link 'www.monitorarbeid.nl'. Deze link is niet te bedienen met het toetsenbord, wel kan de link geactiveerd worden met de muisaanwijzer. Zorg ervoor dat het voor toetsenbordgebruikers mogelijk is op deze link met alleen het toetsenbord te activeren.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 84: Op de pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ wordt gebruik gemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 85: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden 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.

Bevinding 86: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ bevat elke podcastaflevering onterecht een skiplink. Een skiplink is alleen nodig bij blokken herhalende content. De skiplink heeft hier geen nut voor toetsenbordgebruikers. Verwijder deze skiplinks daarom.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 87: De titel van de pagina www.monitorarbeid.tno.nl/nl-nl/ is 'Home' maar het betreft de zoekresultatenpagina. Pas de titel aan zodat deze het doel van de pagina beschrijft.

Bevinding 88: Advies: De titel van de home pagina van de site www.monitorarbeid.tno.nl/nl-nl/ is "Home". De naam van het domein (bijv. 'Monitor Arbeid') komt daar in niet voor. Dit is voor alle bezoekers een probleem, maar kan een extra belemmering vormen voor personen met een cognitieve beperking.
Dit komt op alle pagina's voor.

Bevinding 89: De PDF "Factsheet ZEA 2021" heeft een goede titel gekregen in de eigenschappen van het document. Deze titel wordt niet weergegeven bij het openen van de PDF. Zorg ervoor dat de documenttitel bij openen wordt weergegeven en niet het bestandsnaam. Doe dit door bij Bestand > Eigenschappen > Weergave bij openen > Vensteropties te kiezen voor de optie 'Documenttitel'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 90: Als een gebruiker op een link in de footer van de website klikt, bijvoorbeeld de link "Coronacrisis", dan krijgt op de gelinkte pagina dezelfde link in de footer focus. Bezoekers die afhankelijk zijn van het toetsenbord weten zo niet waar ze in de pagina zijn. Op elke nieuwe pagina moet de focus bovenaan de pagina beginnen.

Bevinding 91: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staat in de visualisaties in de Benchmarktool de link 'Trends'. Wanneer dit scherm openstaat is het mogelijk om de toetsenbordfocus over de rest van de pagina te gaan terwijl het scherm open blijft staan. De focus moet in het scherm blijven totdat deze wordt gesloten.
Dit probleem doet zich ook voor wanneer de website in een ingezoomde weergave wordt bekeken en het hamburgermenu wordt geopend.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 92: In de footer onderaan elke pagina staan twee social media links. Het aria-label geldt nu als linkdoel, maar deze luidt bijvoorbeeld "visit @ www.youtube.com/channel/UCABaFdefroUcKfpbiOFoeAw". Dit is geen duidelijk linkdoel. Pas de naam aan naar bijvoorbeeld 'Bezoek ons op Youtube'.

Bevinding 93: Op pagina www.monitorarbeid.tno.nl/nl-nl/ bestaat het gehele blok 'Onderzoek op maat' uit 1 link met als aria-label "Read more about Lees meer". Hieruit is het linkdoel niet duidelijk en ook komt de tekst niet overeen met (een deel van) de visueel zichtbare tekst. De beste oplossing is om de link om bestaande tekst heen te plaatsen (zoals 'Onderzoek op maat') en vervolgens met Javascript het klikbare gebied te vergroten.
Dit blok komt ook voor op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ .

Bevinding 94: Iets soortgelijks komt voor op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/, ook hier is het aria-label van de link 'Lees meer'. "Read more about Lees meer". Zorg in dit geval dat duidelijk is waarover meer gelezen kan worden, bijvoorbeeld door het aria-label aan te passen naar "Lees meer over 'Wat is de NEA?'".

Bevinding 95: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ staan een aantal iframes met een podcast interface. De link waarmee informatie om te delen opent heeft geen naam. Omdat de link geen linkdoel heeft, is het voor blinden en slechtzienden die gebruik maken van een screenreader niet duidelijk wat de link doet. Voeg een duidelijke linktekst toe om dit probleem op te lossen.

Bevinding 96: In dezelfde iframes op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ zit rechtsboven een afbeelding van een golfpatroon. Deze heeft wel een alternatieve tekst "Anchor logo wave symbol" maar een afbeelding moet als het ook een link is, een duidelijk linkdoel bevatten.
Dit geldt ook voor de afspeelknop, deze heet 'Play or pause audio', maar het is nu onduidelijk welke aflevering afgespeeld kan worden.

Bevinding 97: Onderaan de zoekresultaten op pagina www.monitorarbeid.tno.nl/nl-nl/ staan de links 1, 2, etc. Deze links verwijzen naar andere pagina's met zoekresultaten. Visueel is dat duidelijk, maar wanneer de links bijvoorbeeld worden voorgelezen door screenreaders is dat niet duidelijk. Verander de toegankelijke naam van deze links in iets als 'Ga naar pagina 1' of 'Pagina 1'.

Bevinding 98: Onderaan de zoekresultaten op pagina www.monitorarbeid.tno.nl/nl-nl/ twee links waarmee bezoeker kunnen navigeren naar de volgende en vorige pagina met zoekresultaten. Visueel is het duidelijk waar de links naar verwijzen door de pijliconen, maar mensen die gebruik maken van een screenreader weten niet waar de links naar verwijzen. Zorg ervoor dat de links een toegankelijke naam met een linkdoel hebben.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 99: Wanneer het blok met de link "Onderzoek op maat" op de homepagina, www.monitorarbeid.tno.nl/nl-nl/ de focus krijgt, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk interactief element focus heeft.
Dit komt ook voor op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoekopmaat/ bij "Aan de slag".

Bevinding 100: Als de pagina naar beneden gescrold is en de focus komt op een van de menu-items boven aan de pagina dan scrolt de pagina niet automatisch naar boven als een gebruiker onder aan de pagina is. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk interactief element focus heeft.

Bevinding 101: Op de pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… worden regionale gegevens weer gegeven. Binnen de visualisatie is de focus nergens zichtbaar. Als de focus op één van de kenmerken komt, bijvoorbeel "Gemiddelde leeftijd" is dat bijvoorbeeld niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk interactief element focus heeft.

Bevinding 102: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ is de focus niet zichtbaar op het uitklapbare element 'Benchmarktool'.

Bevinding 103: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ is de focus niet zichtbaar op de meeste elementen in de podcast, zoals de afspeelknop en de deelknop.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 104: De links in het menu bovenaan elke pagina hebben een Engelstalig aria-label. Bijvoorbeeld de link 'Onderzoeken' heeft een aria-label 'Read more about Onderzoeken'. De visuele naam komt daardoor niet overeen met de toegankelijke naam. Hierdoor kunnen personen die gebruik maken van spraaksoftware moeite hebben met het activeren van deze links. Het aria-label is overbodig, verwijder deze daarom.
Daarnaast hebben de links een title-attribuut met dezelfde tekst als visueel zichtbaar is, dit is overbodig.
Dit komt op meerdere plekken voor, bijvoorbeeld bij de links in de footer, en op meerdere pagina's, zoals op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ bij 'Lees meer' en 'Contactformulier'.
En ook op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoekopmaat/ bij het blok 'Aan de slag' ("Read more about Contact").

Bevinding 105: Op pagina www.monitorarbeid.tno.nl/nl-nl/ staat een zoekveld met de visuele tekst 'Zoek naar onderzoeken, artikelen of resultaten'. Het invoerveld mist in de code een toegankelijke naam, waardoor het invoerveld niet met spraaksoftware kan worden geactiveerd.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 106: De pagina's van de Nederlandstalige versie van de website www.monitorarbeid.tno.nl/nl-nl/ hebben de taalaanduiding Engels. Zorg voor de juiste taalcodering in de HTML.
Dit geldt ook voor de iframes op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ .

Bevinding 107: In de eigenschappen van PDF "Factsheet ZEA 2021" is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 108: Op pagina 36 van de PDF "Identificatie van risicogroepen voor mentale gezondheidsproblemen onder werknemers tijdens de corona pandemie" staan verschillende Engelse teksten, bijvoorbeeld de tekst 'Distance learning and parental mental health during COVID-19, Educational researcher'. Op de P-tag waar de Engelse teksten in staan is geen taalwissel aangegeven. Hierdoor zal een screenreader de teksten met een Nederlandse uitspraak voorlezen. Los dit probleem op door onder de eigenschappen van de tag waar de teksten in staan de taal op Engels te zetten.
Engelse teksten staan op meerdere pagina in de PDF, bijvoorbeeld op pagina 37 en op pagina 39.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 109: Op pagina www.monitorarbeid.tno.nl/nl-nl/ vindt een contextwijziging plaats wanneer een bezoeker een checkbox aanvinkt. De pagina wordt direct gewijzigd en de focus wordt verplaatst. Zorg dat er geen contextwijziging plaatsvindt (tenzij de gebruiker daar van tevoren van op de hoogte wordt gebracht). Zorg bijvoorbeeld dat de pagina pas wijzigt wanneer een gebruiker zelf kiest om te filteren (door een knop te gebruiken na het selecteren van filteropties) of plaats de focus op de zelfde plaats terug.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 110: Als in het formulier op pagina www.monitorarbeid.tno.nl/nl-nl/contact/ een het veld "naam" niet wordt ingevuld verschijnt er na "versturen" onder het veld de melding: "$FORM_FIELD_REQUIRED". Deze tekst geeft niet goed aan wat er fout is. Een goede foutmelding heeft bijvoorbeeld de vorm 'Het veld [Naam veld] is niet (goed) ingevuld'.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 111: Op de homepagina www.monitorarbeid.tno.nl/nl-nl/ komen dubbele id's voor, namelijk id="arrow". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.

Bevinding 112: Op verschillende pagina's is het broodkruimelpad niet correct opgemaakt. Bijvoorbeeld op pagina www.monitorarbeid.tno.nl/nl-nl/over-ons/ staan de links 'Home' en 'Over ons' in een ul-element, maar zijn niet opgemaakt in li-elementen maar in a-elementen. Alleen li-elementen mogen directe afstammelingen zijn van een ul-elementen. Daarnaast zullen de links niet goed worden geïnterpreteerd door hulpsoftware zoals screenreaders. Los dit probleem op de door link in li-elementen te plaatsen.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 113: Bovenaan elke pagina staat een menu met uitklapbare elementen. Deze missen in de code een waarde die aangeeft of het element uitgeklapt is of ingeklapt. Gebruik aria-expanded of een vergelijkbare techniek om dit probleem op te lossen.
Dit geldt ook binnen het menu dat verschijnt wanneer de website in een ingezoomde weergave wordt bekeken.

Bevinding 114: Het vergrootglas in het menu bovenaan elke pagina mist in de code een rol (button). Daarnaast is de toegankelijke naam 'search', maar dit moet een Nederlandstalige naam zijn.

Bevinding 115: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staat het uitklapbare element 'Benchmarktool'. Deze mist in de code de juiste rol (button) en een waarde die aangeeft of het element is uitgeklapt of ingeklapt.

Bevinding 116: Op pagina www.monitorarbeid.tno.nl/nl-nl/podcasts/ hebben de afspeelknoppen bij de podcasts de naam 'Play or pause audio'. Het is hierdoor niet duidelijk in welke staat de knop zich bevindt. Zorg dat de naam verandert naar 'Play' of 'Pause' afhankelijk van de staat.

Bevinding 117: Op de homepagina www.monitorarbeid.tno.nl/nl-nl/ staan onder "Uitgelicht" blokken zo als "Factsheet Werkstress" met daarin links die focus kunnen krijgen. Op het overkoepelende <div> element staat echter aria-hidden="true". Dit attribuut mag alleen gebruikt worden bij elementen die geen focus kunnen krijgen. Los dit op door het aria-hidden attribuut te verwijderen.

Bevinding 118: In het hamburgermenu dat op elke pagina verschijnt als het venster smal wordt wordt gebruik gemaakt van uitvouwbare blokken (accordeons) zoals bij de menu knop zelf of de knop "Onderzoeken". Voor ziende gebruikers is het duidelijk dat de accordeon in- of uitgevouwen is. Voor screenreadergebruikers is dat niet zo. Geef in de code de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen.
Hetzelfde geldt voor de uitklapbare informatie in de footer van elke pagina, bijv. "Onderzoeken".
En voor de uitklapbare elementen in de visualisatie op www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… .

Bevinding 119: Op pagina www.monitorarbeid.tno.nl/nl-nl/ is de dropdown niet als select-element vormgegeven. Daardoor is de huidige rol 'invoerveld alleen lezen'. Dat komt niet overeen met de daadwerkelijke rol.
Daarnaast hebben de opties die geselecteerd kunnen worden in de code geen toegankelijke naam. Het is dus niet duidelijk voor gebruikers van hulpsoftware wat er geselecteerd kan worden.
Dit komt ook voor in de visualisatie op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… .

Bevinding 120: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-… staan in de visualisatie een + en - knop. De toegankelijke namen van deze knoppen zijn ook alleen '+' en '-'. De middelste knop (reset) heeft helemaal geen naam. Zorg dat (in de code) duidelijk is wat de functionaliteit van deze knoppen is.

Bevinding 121: Op pagina www.monitorarbeid.tno.nl/nl-nl/onderzoeken/nea/ staan in de visualisaties in de Benchmarktool de links 'tonen' en 'verbergen'. Deze missen een href en daarmee een rol. Beter is het overigens om de rol button te gebruiken.
Ook de social media iconen missen een rol en toegankelijke naam.
Dit geldt ook voor de knop met de X die verschijnt als het scherm 'Trends' wordt geopend.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 122: Wanneer op pagina www.monitorarbeid.tno.nl/nl-nl/ een checkbox wordt geselecteerd, worden de resultaten direct gewijzigd. Er is ook direct tekstueel zichtbaar hoeveel resultaten worden getoond (bijv. '2 resultaten gevonden'). Dit is een statusbericht en moet aan hulpsoftware worden 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

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-04-25 01:46:49 v2.3-011