Rapport:
Audit digitale toegankelijkheid Monitor Arbeid TNO

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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.

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.

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.

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.

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.

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.

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

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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).

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.

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.

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).

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...").

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.

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.

Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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...").

Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-naar-regio/ 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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/.

Uitkomst: Onvoldoende

Bevindingen: 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'.

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-naar-regio/ .

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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Het contrast van de witte tekst op de oranje achtergrond (#FF9213) op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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.

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.

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.

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-later-met-pensioen/ hebben een te laag contrast. Bijvoorbeeld de bruine tekstballon "Heden" geeft een contrast van 2:1 waar dit minimaal 4,5:1 moet zijn.

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.

Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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).

Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-naar-regio/ 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).

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Op pagina www.monitorarbeid.tno.nl/nl-nl/news/nederlanders-gaan-steeds-later-met-pensioen/ 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.

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

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).

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.

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.

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.

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).

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;

• Oranje (HEX #f79231) heeft een contrastverhouding van 2,3:1.
• Groen (HEX #8dc63f) heeft een contrastverhouding van 2:1.
• Licht roze (HEX #f36f60) heeft een contrastverhouding van 2,8:1.

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

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):

• De roze lijn (HEX#f8766d) heeft een contrastverhouding van 2,6:1.
• De gele lijn (HEX#a3a500) heeft een contrastverhouding van 2,6:1.
• De groene lijn (HEX#00bf7d) heeft een contrastverhouding van 2,4:1.
• De blauwe lijn (HEX#00b0f6) heeft een contrastverhouding van 2,4:1.
• De paarse lijn (HEX#e76bf3) heeft een contrastverhouding van 2,6:1.

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

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):

• Grijs (HEX#a5a5a5) heeft een contrastverhouding van 2,4:1.
• Oranje (HEX#ed7d31) heeft een contrastverhouding van 2,7:1.
• Geel (HEX#ffc000) heeft een contrastverhouding van 1,6:1.

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

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):

• Groen (HEX#7cae00) heeft een contrastverhouding van 2,6:1.
• Blauw (HEX#00bfc4) heeft een contrastverhouding van 2,2:1.
• Paars (HEX#c77cff) heeft een contrastverhouding van 2,7:1.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-naar-regio/ 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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

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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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'.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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'.

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/ .

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?'".

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.

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.

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'.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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".

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.

Op de pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-naar-regio/ 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.

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

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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").

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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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/ .

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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'.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

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-naar-regio/ .

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-naar-regio/ .

Op pagina www.monitorarbeid.tno.nl/nl-nl/visualisaties/werkkenmerken-naar-regio/ 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.