Issues:
Content-audit digitale toegankelijkheid website TNO Nederlands Materialen Observatorium
(Alleen de bevindingen)
Scope van de evaluatie
Naam website | TNO Nederlands Materialen Observatorium |
---|---|
Datum | 22 mei 2025 |
Scope van de website |
Binnen de scope van het onderzoek valt:
|
Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
1. Waarneembaar
1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content (Niveau A)
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 1: Op pagina https://nederlandsmaterialenobservatorium.nl/ (en elke pagina anders dan de homepagina) waar de header wordt getoond staat het logo van TNO Nederlands Materialen Observatorium. De alternatieve tekst van het logo is "TNO_NMO_RGB_wit". Dit beschrijft niet de functie/unieke eigenschappen van deze afbeelding. Voor bezoekers die niet kunnen zien, is het belangrijk dat zij kunnen herkennen dat hier een logo te zien is. Daarnaast moet een afbeelding, als het ook een link is, een duidelijk linkdoel bevatten. Wijzig deze bijvoorbeeld naar "Logo TNO Nederlands Materialen Observatorium - Ga naar de homepage". Dit is ook een probleem voor succescriteria 2.4.4 en 2.5.3.
Bevinding 2: Advies: op pagina https://nederlandsmaterialenobservatorium.nl/grondstoffen-beeld/grondstoffen-wereldwijd/ staat onder de koptekst h2 "Grondstoffen in kaart" en de paragraaf tekst een afbeelding van een kaart waarop wordt getoond welke landen momenteel de belangrijkste producenten van kritieke grondstoffen in de wereld zijn. De tekst boven de afbeelding (in de alternatieve tekst staat "Een uitleg van de inhoud is boven de kaart te vinden.") beschrijft niet voldoende de inhoud van de kaart, maar de aanname is dat de informatie wel te vinden is als je de link 'studie van de Europese Commissie' volgt. Dit zou in de tekst nog expliciet aangegeven kunnen worden.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 3: Op pagina https://nederlandsmaterialenobservatorium.nl/ (en elke pagina anders dan de homepagina) staat in de header een menu met een aantal links naar pagina's. Deze links zijn genest in een koptekst h2. Op deze kopteksten h2 volgt een koptekst h1 (Nederlands Materialen Observatorium) op hetzelfde niveau als de kopteksten h2. Gebruik koppen in een hiërarchisch correcte volgorde. Bezoekers die gebruikmaken van schermvoorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, et cetera.
Bevinding 4: Op pagina https://nederlandsmaterialenobservatorium.nl/toeleveringsketens/circulariteit/ staat naast de figuur met de alternatieve tekst "De figuur hiernaast geeft een beeld van de zogenaamde recycling rate. Meer informatie en uitleg is naast te figuur te vinden." een stuk tekst schuingedrukt. Hier is het em-element gebruikt om een heel stuk tekst nadruk te geven, dat is niet de bedoeling. Het em- en strong-element is bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een tekst in een schuingedrukt lettertype te tonen.
Een soortgelijk probleem zien we terug bij het stuk tekst naast de tweede figuur (met de alternatieve tekst "Figuur waarin de positie van Nederland voor verschillende CRM's/SRM's te zien is. De toelichting bij deze figuur is hiernaast te lezen."). Hier is eveneens een stuk tekst schuingedrukt. Ook hier is het em-element gebruikt om een heel stuk tekst nadruk te geven.
We zien dit nog een aantal keer terugkomen, bijvoorbeeld op de volgende pagina's: https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/welke-kritieke-grondstoffen-zijn-er/,
Bevinding 5: Op pagina https://nederlandsmaterialenobservatorium.nl/over-het-nmo/organisatiestructuur/ staan onder de koptekst h2 "NMO programmalijnen" een aantal programmalijnen, bijvoorbeeld "Programmalijn 1 - Organisatie en netwerk" die zijn opgemaakt met het strong-element. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mogen deze elementen niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3). In dit geval kan hier een koptekst h3 worden gebruikt.
Bevinding 6: Op pagina https://nederlandsmaterialenobservatorium.nl/toeleveringsketens/zicht-ketens/ staat onder "Toeleveringsketen batterij" een opsomming met 5 onderdelen. Dit is echter niet opgemaakt als een opsommingslijst, waardoor bezoekers die gebruikmaken van schermvoorleessoftware niet in één oogopslag kunnen ontdekken dat dit een opsomming is en hoeveel onderdelen deze lijst heeft. Maak dit op als een echte opsommingslijst (ol- en li-elementen).
1.3.3 Zintuiglijke eigenschappen (Niveau A)
Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen
Uitkomst: Onvoldoende
Bevinding 7: Op pagina https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/welke-kritieke-grondstoffen-zijn-er/ staan "Kritieke en strategische grondstoffen" afgebeeld. In de paragraaf tekst beginnend met de tekst "Voor het samenstellen van de lijst met kritieke grondstoffen..." staat de volgende alinea tekst: "Bekijk het overzicht met kritieke en strategische grondstoffen hieronder. De strategische grondstoffen zijn lichtgrijs gemarkeerd.". Voor iemand die niet kan zien, zijn dit aanwijzingen die niet behulpzaam zijn. Alle instructies om content te kunnen begrijpen of te bedienen, moeten ook tekstueel en/of semantisch aanwezig zijn zodat de instructies ook te begrijpen zijn voor mensen die het beeld niet zien. Denk hierbij aan vorm, omvang, locatie, geluid, kleur en oriëntatie van de content. Dit kan vaker voorkomen.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 8: Op pagina https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/welke-kritieke-grondstoffen-zijn-er/ staan "Kritieke en strategische grondstoffen" afgebeeld. Zoals in de tekst beginnend met de tekst "Voor het samenstellen van de lijst met kritieke grondstoffen..." staat beschreven, zijn de strategische grondstoffen lichtgrijs gemarkeerd. Deze strategische grondstoffen zijn alleen door kleurverschil te herkennen. Bezoekers die geen kleuren kunnen onderscheiden missen zo informatie. Naast kleuren kun je hier bijvoorbeeld ook een omlijning bij de strategische grondstoffen aanbrengen.
Bevinding 9: Op pagina https://nederlandsmaterialenobservatorium.nl/toeleveringsketens/circulariteit/ heeft de afbeelding van de recycling rates gekleurde onderdelen die alleen door kleurverschil herkenbaar zijn. Bezoekers die geen kleuren kunnen onderscheiden missen zo informatie. Naast kleuren kun je hier bijvoorbeeld ook verschillende soorten arcering gebruiken om de informatie over te brengen.
Een soortgelijk probleem zien we terug bij de afbeelding met de gekleurde cirkels. De afbeelding heeft eveneens elementen die alleen door kleurverschil herkenbaar zijn.
Bevinding 10: Advies: op pagina https://nederlandsmaterialenobservatorium.nl/contact/ staat de link "privacy statement" in een lopende tekst. Deze link is alleen herkenbaar doordat het een andere kleur heeft. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat het om een link gaat. Dit wordt nu niet afgekeurd, omdat de contrastratio tussen de linktekst (HEX #0069BF) en de omringende tekst (HEX #00030A) met 3,7:1 voldoende is. Toch is het beter om hyperlinks in lopende tekst ook herkenbaar te maken met minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 11: Op pagina https://nederlandsmaterialenobservatorium.nl/zoeken/?zoeken_term=NMO staat boven de footer een pagineringselement om door de zoekresultaten te navigeren. Wanneer je over het cijfer '2' en de link 'volgende' hovert, wordt deze tekst wit met een lichtgrijze achtergrond (HEX #F2EEEB). De witte tekst biedt te weinig contrast op deze lichtgrijze achtergrond. De contrastverhouding is hier 1,1:1 waar dit minimaal 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
NB: De actieve pagina heeft dezelfde kleurencombinatie en daarom een te laag contrast, maar omdat dit een niet-actieve component van de gebruikersinterface is, geldt hiervoor een uitzondering.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 12: Op pagina https://nederlandsmaterialenobservatorium.nl/publicaties/ hebben de publicaties een label met het thema wat van toepassing is (kritieke grondstoffen of toeleveringsketens). Het label heeft een lichtgrijze achtergrondkleur (HEX #F2EEEB). In combinatie met de witte pagina-achtergrond biedt deze kleurencombinatie te weinig contrast. De contrastverhouding is hier 1,1:1 waar dit minimaal 3,0:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Bevinding 13: Op pagina https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/welke-kritieke-grondstoffen-zijn-er/ staan "Kritieke en strategische grondstoffen" afgebeeld. Zoals in de tekst beginnend met de tekst "Voor het samenstellen van de lijst met kritieke grondstoffen..." staat beschreven, zijn de strategische grondstoffen lichtgrijs gemarkeerd. De lichtgrijze achtergrondkleur (HEX #F2EEEB) heeft in combinatie met de witte pagina achtergrond te weinig contrast. De contrastverhouding is hier 1,1:1 waar dit minimaal 3,0:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast. Zie ook de bevinding bij succescriterium 1.3.3 Zintuiglijke eigenschappen.
2. Bedienbaar
2.4 Navigeerbaar
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Voldoende
Bevinding 14: Advies: alle pagina’s met uitzondering van de homepage, bijvoorbeeld https://nederlandsmaterialenobservatorium.nl/contact/, bevatten zowel de specifieke naam van de pagina als naam van de website. Een goede aanvulling zou zijn om ook bij de homepagina de specifieke naam van de pagina te benoemen (Home - Nederlands Materialen Observatorium) zodat bezoekers altijd weten op welke pagina zij zich bevinden. Dit komt vooral bezoekers ten goede die middels hulpsoftware tussen verschillende tabs navigeren.
2.4.4 Linkdoel (in context) (Niveau A)
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevinding 15: Op pagina https://nederlandsmaterialenobservatorium.nl/ (en elke pagina anders dan de homepagina) waar de header wordt getoond staat het logo van TNO Nederlands Materialen Observatorium. De alternatieve tekst van het logo is "TNO_NMO_RGB_wit" en dit is het enige dat het linkdoel aangeeft. Dit geeft nu niet duidelijk aan waar de link naartoe gaat. Wijzig het tekstalternatief daarom bijvoorbeeld naar "Logo TNO Nederlands Materialen Observatorium - Ga naar de homepage". Dit is ook een probleem voor succescriteria 1.1.1 en 2.5.3.
2.5 Input modaliteiten
2.5.3 Label in naam (Niveau A)
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 16: Op pagina https://nederlandsmaterialenobservatorium.nl/ (en elke pagina anders dan de homepagina) waar de header wordt getoond staat het logo van TNO Nederlands Materialen Observatorium. De alternatieve tekst van het logo is "TNO_NMO_RGB_wit" en dit is ook de naam van de link. Dit betekent dat de zichtbare tekst niet gebruikt kan worden om deze link te bedienen met spraakbedieningssoftware. Wijzig het tekstalternatief bijvoorbeeld naar "Logo TNO Nederlands Materialen Observatorium - Ga naar de homepage". Dit is ook een probleem voor succescriteria 1.1.1 en 2.4.4.
3. Begrijpelijk
3.1 Leesbaar
3.1.2 Taal van onderdelen (Niveau AA)
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevinding 17: Op pagina https://nederlandsmaterialenobservatorium.nl/publicaties/eu-strategic-dependencies-and-capacities/ staat een link naar een Engelse publicatie. Hier wordt een aantal keer een Engelse titel (span in het broodkruimelpad en een h1 koptekst als titel) gebruikt namelijk "EU strategic dependencies and capacities: second stage of in-depth reviews". De taal van de pagina is Nederlands, daarom moet hier in de code een taalwissel worden toegevoegd. Dit kan door de omliggende HTML-code een lang="en" toe te voegen. Dit is belangrijk omdat hier dan de Engelse content in het Engels wordt voorgelezen door hulpsoftware.
Dit geldt ook voor de link naar de publicatie zelf, deze wordt onder de koptekst h1 en paragraaf tekst weergegeven.
Onderbouwing van de evaluatie
Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.
Steekproef getoetste webpagina's
- Home:
https://nederlandsmaterialenobservatorium.nl/ - Contactformulier:
https://nederlandsmaterialenobservatorium.nl/contact/ - 404:
https://nederlandsmaterialenobservatorium.nl/404 - Zoekresultaten:
https://nederlandsmaterialenobservatorium.nl/zoeken/?zoeken_term=NMO - Publicaties:
https://nederlandsmaterialenobservatorium.nl/publicaties/ - Publicatie:
https://nederlandsmaterialenobservatorium.nl/publicaties/maakt-grondstof-kritiek/ - Over het NMO:
https://nederlandsmaterialenobservatorium.nl/over-het-nmo/ - Thema:
https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/ - Afbeelding van tekst:
https://nederlandsmaterialenobservatorium.nl/toeleveringsketens/zicht-ketens/ - Figuur met legenda:
https://nederlandsmaterialenobservatorium.nl/toeleveringsketens/circulariteit/ - Toegankelijkheid:
https://nederlandsmaterialenobservatorium.nl/toegankelijkheid/ - Organisatiestructuur:
https://nederlandsmaterialenobservatorium.nl/over-het-nmo/organisatiestructuur/ - Afbeeldingen:
https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/welke-kritieke-grondstoffen-zijn-er/ - Grondstoffen in kaart:
https://nederlandsmaterialenobservatorium.nl/grondstoffen-beeld/grondstoffen-wereldwijd/ - Willekeurige pagina 1:
https://nederlandsmaterialenobservatorium.nl/kritieke-grondstoffen/beleid-kritieke-grondstoffen/ - Willekeurige pagina 2:
https://nederlandsmaterialenobservatorium.nl/publicaties/eu-strategic-dependencies-and-capacities/
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.