Issues:
Audit digitale toegankelijkheid website Diamonds TNO

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: In de header van iedere pagina staat een link "TNO.NL" met een icoon dat aan ziende bezoekers aangeeft dat de link naar een externe pagina verwijst. Deze informatie wordt niet doorgegeven aan screenreadergebruikers. Zorg ervoor dat deze bezoekers over dezelfde informatie beschikken als ziende bezoekers. Hetzelfde komt vaker voor in de website, bijvoorbeeld op de pagina diamonds.tno.nl/legal/accessibility bij de link "accessibility statement". De toegankelijke tekst bij het logo van Empa op pagina diamonds.tno.nl/projects/licara mist het woord 'logo'.

Bevinding 2: Op de pagina diamonds.tno.nl/projects/sis staat een afbeelding waarvan de alternatieve tekst gelijk is aan het bijschrift bij de afbeelding. Bezoekers die gebruik maken van schermleessoftware krijgen deze tekst twee keer te horen. Gebruik het alt-attribuut alleen om zichtbare informatie in de afbeelding die niet terug komt in de tekst te beschrijven, of laat hem leeg.

Bevinding 3: Op de home pagina diamonds.tno.nl staan contentblokken onder 'DIAMONDS highlights'. De alternatieve teksten van de afbeeldingen zijn hetzelfde als de titel van het artikel. Dit beschrijft de afbeelding niet. Laat bij voorkeur de alternatieve tekst van decoratieve afbeeldingen leeg, zodat bezoekers die gebruik maken van voorleessoftware geen overbodige informatie voorgelezen krijgen.

Bevinding 4: De toegankelijke tekst van de afbeelding op pagina diamonds.tno.nl/about-diamonds beschrijft de afbeelding niet maar is een herhaling van de eerste regels van de introtekst van het artikel. Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. Een beschrijving is overbodig voor screenreadergebruikers. De afbeelding moet wel een leeg alt-attribuut in het img-element hebben. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina diamonds.tno.nl/overview is de toegankelijke tekst van de afbeelding bij het artikel 'ECEL 3.0' een herhaling van een stukje begeleidende tekst.

Bevinding 5: Op pagina https://diamonds.tno.nl/overview staan decoratieve afbeeldingen in de contentblokken. De afbeeldingen hebben alternatieve teksten die de inhoud van de afbeeldingen niet beschrijven. Bijvoorbeeld bij ‘Psycat’, de afbeelding van een jongetje die in de regen stampt. De alternatieve tekst is hier ‘Mental health screening for youth’. Vermijd het gebruik van alternatieve teksten voor SEO-doeleinden. Wanneer decoratieve afbeeldingen een alternatieve tekst hebben, moet de inhoud van de afbeelding beschreven worden. Het alt-attribuut mag ook leeggelaten worden. Dit geldt ook voor pagina https://diamonds.tno.nl/search?qs=diamonds.

Bevinding 6: Op pagina https://diamonds.tno.nl/projects/sis staat een sterretje dat verwijst naar een tekst onderaan de pagina. Hulpsoftware leest dit niet altijd voor. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk dat er een voetnoot is.

Bevinding 7: Wanneer bezoekers in het formulier op pagina diamonds.tno.nl/register een formulierveld niet goed invullen, verschijnt er een rood kruisje achter het veld en als het goed ingevuld is een groen vinkje. De iconen worden door middel van het pseudo-element :before/:after en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img-element of svg met tekstalternatief.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 8: Op pagina diamonds.tno.nl/projects/licara zijn zinnen/koppen opgemaakt met het strong-element, bijvoorbeeld 'LICARA nanoSCAN and LICARA Innovation Scan have been developed by'. 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). Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://diamonds.tno.nl/register bij 'Terms of Use'

Bevinding 9: De invoervelden op pagina https://diamonds.tno.nl/register, zoals het invoerveld ‘E-mail address’, hebben geen toegankelijke naam omdat het label niet goed gekoppeld is aan het invoerveld. Er is een for attribuut gebruikt in het label element, maar het id attribuut mist in het input element. Koppel de labels op de juiste manier om dit probleem op te lossen.

Bevinding 10: Advies: Op pagina diamonds.tno.nl/legal/accessibility volgt na de titel met kopniveau 1 een kop van niveau 4. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Zorg voor een logische koppenstructuur waarbij geen niveaus overgeslagen worden. Hetzelfde komt vaker op de website voor, bijvoorbeeld op pagina diamonds.tno.nl/login waar alleen een kop niveau 5 aanwezig is.

Bevinding 11: Advies: Veel links op de website, zoals CONTACT boven aan elke pagina, hebben een titel waarin de linktekst herhaald wordt. Veel voorleessoftware leest ook de titel, waardoor het linkdoel twee keer voorgelezen wordt. Voorkom overbodige informatie.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 12: Op de home pagina diamonds.tno.nl staan blokken met daarin een afbeelding, meta informatie, een kop en tekst. Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de afbeelding, de categorie en de datum hoort. Zet de koppen vooraan in de HTML-code en zet hierachter de afbeelding en de metadata. Visueel mag deze indeling wel aangehouden worden. Dit geldt ook voor pagina https://diamonds.tno.nl/search?qs=diamonds.

Bevinding 13: Op pagina https://diamonds.tno.nl/projects/sis staat een sterretje die verwijst naar een tekst onderaan de pagina. Bezoekers met een visuele handicap zien de relatie tussen het sterretje en de tekst onder in beeld niet. Geef een relatie tussen het sterretje en de voetnoot aan, bijvoorbeeld door middel van een link naar de voetnoot.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 14: Op pagina https://diamonds.tno.nl/register worden gegevens van de bezoeker gevraagd. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attritbuut hebben. Lees er meer over op: https://www.w3.org/TR/WCAG21/#input-purposes.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 15: Op pagina diamonds.tno.nl/legal/accessibility is een lichtblauwe link tekst 'accessibility statement' (HEX #3369FF) op een lichtgrijze achtergrond (HEX #FAFBFD). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,4:1 waar dit 4,5:1 moet zijn.

Bevinding 16: Op pagina diamonds.tno.nl/login is een lichtblauwe link tekst 'Forgot password' (HEX #2196F3) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn. De button 'Login' op de zelfde pagina heeft dezelfde kleurcombinatie met te laag contrast. Hetzelfde komt op meer pagina's voor, bijvoorbeeld op diamonds.tno.nl/legal/privacy

Bevinding 17: Op pagina diamonds.tno.nl/legal/register is een lichtblauwe link tekst 'Privacy policy' (HEX #2196F3) op een lichtgrijze achtergrond (HEX #F5F5F5). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,8:1 waar dit 4,5:1 moet zijn.

Bevinding 18: Op elke pagina staat rechts onderin een lichtgrijze link tekst 'Powered by' (HEX #999999) op een lichtgrijze achtergrond (HEX #FAFAFA). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,7:1 waar dit 4,5:1 moet zijn.

Bevinding 19: Op pagina diamonds.tno.nl/forgot-password een lichtgrijze link tekst 'Forgot your password?' (HEX #B5B5C3) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,0:1 waar dit 4,5:1 moet zijn.

Bevinding 20: In de zoekfunctie in de header van iedere pagina staat grijze placeholdertekst. De contrastratio tussen de grijze tekst (HEX #7B838A) en de witte achtergrond is 3,8:1 waar dat minimaal 4,5:1 moet zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 21: Wanneer op de home pagina diamonds.tno.nl de knop Read more focus krijgt is dat te zien aan een lichte kleurverandering en een focusrand. Het contrast van de lichtblauwe focusrand (HEX: #91BBFC) met de lichtgrijze achtergrond (HEX: #F0F3FA) is te laag. De contrastverhouding is hier 1,8:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik bijvoorbeeld een andere kleur op die plekken waar het contrast te laag is. Dit geldt ook voor pagina https://diamonds.tno.nl/search?qs=diamonds.

Bevinding 22: De focusrand om het invoerveld voor zoeken op pagina https://diamonds.tno.nl/search?qs=diamonds heeft een te laag contrast. De contrastratio tussen de blauwe focusrand (HEX #86B7FE) en de grijs/paarse achtergrond (HEX #F0F3FA) is 1,8:1 waar dat minimaal 3:1 moet zijn.

Bevinding 23: De focusrand om het invoerveld voor zoeken in de zoekfunctie in de header van iedere pagina heeft een te laag contrast. De contrastratio tussen de blauwe focusrand (HEX #86B7FE) en de witte achtergrond is 2:1 waar dat minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 24: De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiemelding over de pagina heen. De link 'Details toestaan' opent de mogelijkheid om met een schakelknop een voorkeur in te stellen: "Analytics
We'll collect information about your visit to our site. It helps us understand how the site is used – what's working, what might be broken and what we should improve."
Deze knop krijgt geen focus en is niet met behulp van het toetsenbord te bedienen. Hetzelfde geldt voor de sluiten knop rechtsboven in de cookiemelding.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 25: Er wordt gebruik gemaakt van een skiplink op de website, maar deze is: 1. Niet zichtbaar. 2. Krijgt niet als eerste focus en 3. Verplaatst alleen visueel de focus naar de content, maar verplaatst de daadwerkelijke toetsenbordfocus niet. De 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.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 26: Er wordt in de HTML code van de header bovenaan iedere pagina gebruikgemaakt van het attribuut tabindex met een waarde groter dan 0. Daardoor ontstaat er bij de menubalk bij "Home", "About Diamonds" en "Overview" een onlogische focusvolgorde. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert.

Bevinding 27: De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiemelding over de pagina heen. De cookiemelding krijgt niet als eerste focus. Dit belemmert het gebruik van de website voor bezoekers die met het toetsenbord navigeren. Zorg dat de melding als eerste weg te klikken is of integreer de melding in de webpagina.

Bevinding 28: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% is er een hamburgermenu dat open kan klappen. Als je nu met de tabtoets verder navigeert moet de toetsenbordfocus direct in het menu komen en moet je met de tabtoets binnen dit venster blijven. Dat gaat nu niet goed.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 29: Op de home pagina diamonds.tno.nl staan links met de linktekst "Read more". Vermijd linkteksten als ‘Lees meer’ en ‘Klik hier’, zulke teksten beschrijven het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn. hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina diamonds.tno.nl/overview en op pagina https://diamonds.tno.nl/search?qs=diamonds.

Bevinding 30: Advies: op pagina diamonds.tno.nl/register staat een reCAPTCHA met links naat 'Terms of use' en 'privacy policy' die niet werken (502 Bad Gateway). Dit valt niet af te keuren onder WCAG omdat elke bezoeker hier last van heeft maar verdient toch aandacht.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 31: De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiemelding over de pagina heen. Als de knop "Alles aanvaarden" focus krijgt is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen. Hetzelfde komt vaker voor op de website, bijvoorbeeld de link 'Details toestaan' in de zelfde cookiemelding.

Bevinding 32: Elke pagina bevat wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar de skiplink is niet zichtbaar wanneer de skiplink focus heeft. Zorg ervoor dat ook ziende gebruikers die met het toetsenbord navigeren de skiplink kunnen bedienen.

Bevinding 33: Wanneer een bezoeker op de (onzichtbare) skiplink klikt schuift het kruimelpad onder de witte menubalk met het TNO logo. Als een link in het kruimelpad bijvoorbeeld 'Home' focus krijgt is dat daardoor niet te zien.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 34: Op pagina diamonds.tno.nl/register heeft het eerste invoerveld het label 'E-mail address' en de naam 'name@domain.com'. Zorg ervoor dat naast de placeholder tekst de zichtbare label naam onderdeel is van de toegankelijke naam, het liefst vooraan. Hetzelfde komt vaker voor, bijvoorbeeld bij het label Confirm password op de zelfde pagina. Zie ook succescriterium 1.3.1.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 35: Op pagina diamonds.tno.nl/register staat een reCAPTCHA in een iframe. Hier ontbreekt een taalaanduiding van de inhoud van de pagina. Deze moet in de HTML-code in het iframe worden opgegeven door middel van een lang-attribuut bij het HTML-element. Dit attribuut moet dan de landcode van de taal bevatten.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 36: Op de pagina diamonds.tno.nl/projects/sis staat een linktekst "Stoffen Informatie Systeem: Geavanceerde online zoekmachine voor chemische stoffen". Deze tekst is in een andere taal. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="nl" toe te voegen. Een zelfde probleem komt voor op pagina https://diamonds.tno.nl/projects/sis met de tekst '* Arbobalans 2020, kwaliteit van de arbeid, effecten en maatregelen in Nederland. TNO, Leiden 2020'

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 37: Wanneer bezoekers op pagina https://diamonds.tno.nl/register geen of foutieve invoer invullen, verschijnen er foutmeldingen bovenaan de pagina. Bijvoorbeeld 'The username field is required.' Een goede foutidentificatie welke fout gemaakt is, en waar de fout gemaakt is. Bijvoorbeeld 'The username field is not filled in'. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

Bevinding 38: Het formulier op pagina diamonds.tno.nl/forgot-password maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan de tekst grootte niet aangepast worden zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 39: Het formulier op pagina diamonds.tno.nl/forgot-password maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan de tekst grootte niet aangepast worden zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 40: Op pagina diamonds.tno.nl/register heeft het eerste invoerveld met het label E-mail address een aria-describedby attribuut dat verwijst naar een niet bestaande ID. Het label bij het veld heeft een for="email" attribuut maar het invoerveld heeft niet de ID email. Hierdoor heeft het invoerveld geen toegankelijke naam en is voor bezoekers die afhankelijk zijn van hulpsoftware niet duidelijk wat hier ingevuld moet worden. Laat aria-describedby weg en geef het invoerveld de ID="email".

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 41: Wanneer bezoekers in het formulier op pagina diamonds.tno.nl/register een formulierveld niet goed invullen, verschijnt er zonder dat de pagina ververst een foutmelding. Blinden en slechtzienden die met een screenreader werken krijgen geen signaal dat er iets is gewijzigd en dat er foutmeldingen staan op het scherm. Zorg er bijvoorbeeld voor dat de focus naar de eerste foutmelding verplaatst.

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://diamonds.tno.nl/
• About:
  https://diamonds.tno.nl/about-diamonds
• Accessibility:
  https://diamonds.tno.nl/legal/accessibility
• Overview:
  https://diamonds.tno.nl/overview
• Item:
  https://diamonds.tno.nl/projects/sis
• Login:
  https://diamonds.tno.nl/login
• Register:
  https://diamonds.tno.nl/register
• 404:
  https://diamonds.tno.nl/legal/fout
• Privacy:
  https://diamonds.tno.nl/legal/privacy
• Item (table):
  https://diamonds.tno.nl/projects/licara
• https://diamonds.tno.nl/search?qs=diamonds
• Form:
  https://diamonds.tno.nl/forgot-password
• Item:
  https://diamonds.tno.nl/projects/psycat

Ondersteunende technieken

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

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.