WCAG-EM rapport Nioo.knaw.nl 2025-05-27

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

U202: Afbeeldingen die decoratief zijn, of waar een tekstueel alternatief zou leiden tot herhaling voor de gebruiker, hebben geen tekstueel alternatief Onvoldoende

Toelichting

Als afbeeldingen gebruikt worden als een link, en er ook tekst in de link staat, moet er geen alt-tekst toegevoegd worden als deze dezelfde informatie zou geven.

Om decoratieve afbeeldingen goed te delen kan je CSS background images gebruiken, je kan het alt-attribuut leeg laten, of je kan role="presentation" op de afbeelding zetten.

Bevindingen per richtlijn

Afbeelding niet opgemaakt als decoratief

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratieve afbeelding gevonden die niet te negeren is voor hulptechnologie. Zie bijvoorbeeld:

De afbeeldingen in de carrousel zijn decoratief, net als de kaartafbeelding. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

Er is een tekstueel alternatief aanwezig voor de afbeeldingen over de filterfietsen. Om deze reden kunnen de afbeeldingen als decoratief worden opgemaakt. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost
Kokerjuffers met ‘plantenhuis’ leven volop in Nederlands water https://nioo.knaw.nl/nl/nieuws/kokerjuffers-met-plantenhuis-leven-volop-in-nederlands-water

De afbeeldingen bij de artikelen zijn decoratief, maar niet zo opgemaakt. Dit probleem komt voor op onder andere de volgende pagina('s):

Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit
Wie we zijn https://nioo.knaw.nl/nl/wie-we-zijn
Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering
Wat we doen https://nioo.knaw.nl/nl/wat-we-doen

De afbeeldingen bij de resultaten. Dit probleem komt voor op onder andere de volgende pagina('s):

Zoeken

De bannerafbeelding is niet opgemaakt als decoratief. Dit probleem komt voor op onder andere de volgende pagina('s):

Contact https://nioo.knaw.nl/nl/contact
Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

Afbeelding niet opgemaakt als decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratieve afbeelding gevonden die niet te negeren is voor hulptechnologie. Zie bijvoorbeeld:

De afbeeldingen in het overzicht. Dit probleem komt voor op onder andere de volgende pagina('s):

Facilities https://nioo.knaw.nl/en/facilities
News events https://nioo.knaw.nl/en/news-events

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

Afbeelding op kaart in overzicht geen alternatief of decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratieve afbeelding gevonden als onderdeel van een kaart in een overzicht, die niet te negeren is door hulptechnologie. Dit kan waarschijnlijk opgelost worden door een leeg alt-attribuut toe te voegen. Zie bijvoorbeeld:

De afbeelding van de kaart moet decoratief zijn opgemaakt. Echter, omdat het een interactieve afbeelding is die te vergroten is, kan het zijn dat dit wel goed overkomt bij hulptechnologieën. In dat geval is het handig om wel een alternatieve tekst te geven. Een van de twee oplossingen hiervoor zouden handig zijn. Dit probleem komt voor op onder andere de volgende pagina('s):

Contact https://nioo.knaw.nl/nl/contact

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

Icoon niet opgemaakt als decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratief icoon gevonden dat niet is opgemaakt als decoratief. Het icoon kan als decoratief worden opgemaakt, omdat er een tekstueel alternatief naast het icoon te vinden is. Op dit moment is de informatie dubbel te horen voor gebruikers met een schermlezer. Zie bijvoorbeeld:

Het beeld van de vogel op het gele stuk is niet opgemaakt als decoratief. Dit probleem komt voor op onder andere de volgende pagina('s):

Broeikasgassen https://nioo.knaw.nl/nl/dossiers/broeikasgassen

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

U203: Video's en animaties hebben een titel nodig die het onderwerp beschrijft Voldoende

Toelichting

Video's en animaties moeten een titel hebben die het onderwerp beschrijft. Hier wordt verwacht dat het element een titel heeft van wat de content van de video of animatie is.

Dit kan je doen door een kop boven de video of tekst te zetten. Als je bijvoorbeeld een video op de website zet waarin een introductie wordt gegeven over digitale toegankelijkheid, is het afdoende om een kop met de tekst "Introductie digitale toegankelijkheid" te plaatsen.

U212: Een kaart heeft een titel en beschrijving die het doel van de kaart beschrijft Onvoldoende

Toelichting

Als een plattegrond wordt toegevoegd aan de pagina, moet er een titel worden toegevoegd aan de plattegrond. Op deze manier is het duidelijk voor gebruikers wat de context en onderwerp is van de plattegrond.

Bevindingen per richtlijn

Plattegrond of kaart zonder titel of beschrijving

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een kaart of plattegrond op de pagina, maar deze heeft geen toegankelijke naam en/of beschrijving. Het is belangrijk wel een duidelijke toegankelijke naam en beschrijving mee te geven. Zie bijvoorbeeld:

Dit probleem komt voor op onder andere de volgende pagina('s):

Facilities https://nioo.knaw.nl/en/facilities

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U212

1.2.1 Alleen audio en alleen video (vooraf gemaakt)

U204: Vooraf opgenomen audio fragmenten hebben een gelijk tekstueel alternatief Voldoende

Toelichting

Een link naar de text versie is voldoende, maar het moet duidelijke gelabeld zijn zodat de gebruiker het makkelijk kan vinden

1.2.2 Bijschriften (vooraf opgenomen)

U205: Alle vooraf opgenomen video content heeft ondertiteling Onvoldoende

Toelichting

Om te voldoen aan de EN 301 549 en WCAG richtlijnen moeten de ondertitelingen in dezelfde taal zijn als de video.

Bevindingen per richtlijn

Incorrecte automatisch gegenereerde ondertiteling bij vooraf opgenomen video met audio

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is vooraf opgenomen video met audio gevonden, waarvan de beschrijvende ondertiteling automatisch is aangemaakt. De automatische ondertiteling komt niet overeen met wat er daadwerkelijk te horen is. Zie bijvoorbeeld:

Er zijn (minimale) verschillen tussen de gegenereerde ondertiteling en de gesproken audio. Dit kan voor verwarring zorgen voor gebruikers die deze audio missen.

Dit probleem komt voor op onder andere de volgende pagina('s):

Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit
Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering
Homepagina https://nioo.knaw.nl/

WCAG SC:

1.2.2

EN 301 549:

9.1.2.2, 10.1.2.2, 11.1.2.2

Aceit:

U205

1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen)

U213: Er is audiobeschrijving of een media-alternatief voor video's Onvoldoende

Toelichting

Er wordt een alternatief geleverd voor video’s. Hier kan op twee manieren aan worden voldaan:

Het aanbieden van audiobeschrijving: Een audiobeschrijving legt uit wat er visueel gebeurt in een video in de vorm van een audiotrack. Er wordt zo context toegevoegd aan visuele informatie. Dit is dus een extra toevoeging aan de normale bijschriften van een video, zoals ondertiteling. Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.
Of het aanbieden van een media-alternatief: Hieronder valt bijvoorbeeld een volledig teksttranscriptie van de video.

Er zijn uitzonderingen:

Wanneer de video zelf al een alternatief is en is duidelijk als zodanig gemarkeerd.
Je hebt geen audiobeschrijving nodig als alle informatie in de video in de reguliere soundtrack wordt verstrekt.

Bevindingen per richtlijn

Vooraf opgenomen video zonder alternatief of audiobeschrijving

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is vooraf opgenomen video met audiotrack gevonden, zonder een tekstueel alternatief of audiobeschrijving die de belangrijke video-inhoud beschrijft. Zie bijvoorbeeld:

Niet alle visueel zichtbare tekst in de video wordt via audio duidelijk gemaakt. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost

WCAG SC:

1.2.3

EN 301 549:

9.1.2.3, 10.1.2.3

Aceit:

U213

Sprekers niet (in audio) aangegeven bij opgenomen media

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn meerdere sprekers, maar het wordt niet (duidelijk genoeg) aangegeven wie er wanneer aan het woord is. Dit moet door middel van een audiobeschrijving toegankelijk zijn voor gebruikers die de context niet altijd visueel kunnen zien. Zie bijvoorbeeld:

Dit probleem komt voor op onder andere de volgende pagina('s):

Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit
Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering
Homepagina https://nioo.knaw.nl/

WCAG SC:

1.2.3

EN 301 549:

9.1.2.3, 10.1.2.3

Aceit:

U213

1.2.4 Bijschriften (live)

U206: Er worden ondertitels voor doven en slechthorende geleverd voor alle live audiocontent in gesynchroniseerde media Niet van toepassing

1.2.5 Audiobeschrijving (vooraf opgenomen)

U208: Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media Onvoldoende

Toelichting

Een audiobeschrijving legt uit wat er visueel gebeurt in de video aan gebruikers die niet kunnen zien. Dit wordt vaak gedaan als een aparte video met een audiodescriptie, maar kan ook worden gedaan als een extra audiotrack op de originele video dat de gebruiker kan aan- en uitzetten.

Voorbeelden van visuele informatie die moet worden opgenomen in de audiobeschrijving zijn tekstlabels en naamborden.

Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.

Hier is een voorbeeld van een audiobeschrijving: https://www.youtube.com/watch?v=O7j4_aP8dWA

Bevindingen per richtlijn

Vooraf opgenomen video zonder audiobeschrijving

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een vooraf opgenomen video met audio gevonden, zonder audiobeschrijving van de visueel gepresenteerde informatieve inhoud van de video. Zie bijvoorbeeld:

Niet alle visueel zichtbare tekst in de video wordt via audio duidelijk gemaakt. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost

WCAG SC:

1.2.5

EN 301 549:

9.1.2.5, 10.1.2.5, 11.1.2.5

Aceit:

U208

1.3.1 Info en relaties

U302: Alle visuele koppen zijn in de code weergeven als semantische koppen met het bijbehorende kop-niveau Onvoldoende

Toelichting

Gebruik HTML elementen H1 tot H6. Als dat niet mogelijk is kunt u WAI-ARIA gebruiken.

Bevindingen per richtlijn

Kop niet programmatisch opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een kop gevonden die niet goed is opgemaakt als kop in de code. Zie bijvoorbeeld:

Er zijn teksten gevonden die als paragraaf zijn opgemaakt, maar visueel er uit zien als kop. Dit probleem komt voor op onder andere de volgende pagina('s):

Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

De koppen met bijvoorbeeld ‘gebruikersnaam’ zijn niet opgemaakt als kop in de code. Dit probleem komt voor op onder andere de volgende pagina('s):

Account https://nioo.knaw.nl/nl/user

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U302

U304: Er worden geen witregels of lege paragrafen gebruikt om ruimte te maken in de tekst Onvoldoende

Toelichting

Typografie is belangrijk voor leesbaarheid. Onderdeel van typografie is de witruimte tussen tekstregels en rondom headings. Ruimte tussen tekst moet door formatting gemaakt worden, niet door witregels toe te voegen.

Witregels met meerdere line breaks of met lege paragrafen worden voorgelezen door hulpsoftware als "leeg" wat een vervelende UX tot gevolg heeft.

Bevindingen per richtlijn

Pdf heeft lege tags

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De pdf bevat lege tags. Dit is verwarrend en is niet toegankelijk, omdat dit gebruikers niet verder helpt met het begrijpen van de structuur van de pdf.

Dit probleem komt voor op onder andere de volgende pagina('s):

Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U304

U305: Lijsten hebben een juiste opmaak in de code Onvoldoende

Toelichting

In HTML zijn er drie verschillende soorten lijsten:

Niet-gesorteerde lijsten, gemaakt met ul en li elementen
Gesorteerde lijsten, gemaakt met ol en li elementen
Omschrijvende lijsten, gemaakt met dl, dt en dd elementen

Bevindingen per richtlijn

Lijst niet (voldoende) programmatisch opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een lijst gevonden die in de code niet of niet voldoende als een lijst is opgemaakt. Hierdoor kan deze niet goed gedetecteerd worden door hulpsoftware. Zie bijvoorbeeld:

De opsommingstekens worden voorgelezen terwijl dit niet moet. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

WCAG SC:

https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U305

U306: Het blockquote HTML-element wordt gebruikt voor langere citaten, en q voor kortere citaten Voldoende

Toelichting

Informatie over het blockquote element kan je vinden op:

Informatie over het q element kan je vinden op:

https://www.w3.org/TR/WCAG20-TECHS/H49

Denk er aan zelf geen aanhalingstekens te gebruiken bij q- en blockquote-elementen. Dit wordt door de browser of user agent gedaan.

U307: Er wordt correct gebruik gemaakt van WAI-ARIA Voldoende

Toelichting

WAI-ARIA, oftewel ARIA, staat voor *Web Accessibility Initiative - Accessible Rich Internet Applications.* Dit zijn extra attributen die ontbrekende informatie kan melden aan hulptechnologieën.

Hiervoor is het belangrijk aria-attributen op correcte wijze te gebruiken. Als er gebruik gemaakt van onjuiste of overbodige aria-attributen, kan dit verwarring opleveren, vooral bij gebruik van een schermlezer.

U308: Regel- en kolomkoppen worden met th-elementen aangegeven en hebben het juiste scope- of header-attribuut Voldoende

Toelichting

Het th-element wordt gebruikt om header-cellen van een tabel aan te geven. Dit kan een regel of kolom zijn, maar ook meerdere regels of kolommen. Zorg er voor dat cellen met data en cellen met headers goed aangegeven zijn. Dat kan bijvoorbeeld met het scope attribuut.

Het scope attribuut kan de volgende waardes hebben:

row = een rij
col = een kolom
rowgroup = alle regels na deze cel binnen een tbody-element
colgroup = alle volgende kolommen in een groep binnen een colgroup-element

In complexere tabellen kan je header-attributen gebruiken.

Bijvoorbeeld:

<th id=”aheading”>A heading</th>

<th id=”asecondheading”>A second heading</th>

<td headers=”aheading asecondheading”>Data cell with two headings</td>

Let op dat header cellen zelf kunnen linken aan andere header cellen.

U309: Alle tabellen zijn opgemaakt met de juiste HTML tabel Voldoende

Toelichting

Gebruik native HTML elementen (table, thead, tbody, caption, tr, th, td) of respectievelijke WAI-ARIA rollen

U311: Tabel-onderschriften zijn gemaakt het caption-element Voldoende

Toelichting

Gebruik het <caption> element om een tabel-onderschrift te maken. Als dit niet mogelijk is, kan je een normale heading gebruiken met het juiste h-niveau (H1-H6).

U316: Foutmeldingen die te maken hebben met specifieke formuliervelden zijn gekoppeld aan het bijbehorende element Voldoende

Toelichting

Dit kan je doen door de foutmelding in het label-element te zetten, of door aria-describedby attributen te gebruiken.

U317: Formuliervelden die bij elkaar horen, zijn gegroepeerd, zijn in dezelfde fieldset en hebben een omschrijvende legenda Voldoende

Toelichting

Gebruik het fieldset-element om gerelateerde functionaliteiten binnen formulieren te linken, zoals radio buttons. Gebruik het legend-element om een korte omschrijving aan de groep te geven. Let er op dat de legenda het eerste child-element van de fieldset moet zijn.

Je kan ook het respectievelijke WAI-ARIA attribuut role="group" gebruiken en aria-labelledby

U318: Alle omschrijvingen en labels zijn in de code gekoppeld aan het bijbehorende formulierveld Onvoldoende

Toelichting

Dit wordt meestal gedaan door het visuele label in het label-element te zetten, en deze te koppelen met form control. Als het nodig is, kan je aria-label gebruiken om instructies in de code toe te voegen aan form control zonder deze visueel te tonen.

Bevindingen per richtlijn

Impliciet label voor groep invoervelden

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

De groepslabels voor de invoervelden zijn programmatisch niet goed gekoppeld aan de invoervelden zelf. Hierdoor kan belangrijke informatie voor het invullen gemist worden als gebruik gemaakt wordt van ondersteunende technologieën. Zie bijvoorbeeld:

De filterknoppen zijn niet goed geprogrammeerd als groep. Dit probleem komt voor op onder andere de volgende pagina('s):

Zoeken

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U318

U324: Waar mogelijk wordt gebruik gemaakt van semantische HTML Voldoende

Toelichting

Het wordt aanbevolen dat HTML wordt gebruikt op een manier waarmee mensen bekend zijn. Dit betekent het gebruik van semantische HTML en de conventies volgt die we vaak op het internet zien. Deze consistentie zorgt ervoor dat mensen ermee kunnen communiceren zoals ze gewend zijn, wat de cognitieve belasting zal verminderen.

Bijvoorbeeld links in tekst die niet zijn opgemaakt zijn als link, hierdoor zijn ze niet aanklikbaar met de muis en ook niet bedienbaar via het toetsenbord. Dit is verwarrend voor gebruikers, met name gebruikers van schermlezers of mensen met een cognitieve beperking, omdat de verwachting is dat je een link direct kunt aanklikken en niet nog los hoeft te selecteren en kopiëren.

U325: Alle visuele relaties die zichtbaar zijn in de content, zijn ook zichtbaar in de code Onvoldoende

Toelichting

Denk bijvoorbeeld aan een chat widget. Je kan zien dat de linker berichten van de andere persoon zijn, en de rechter berichten van jou. Dit moet ook duidelijk zijn in de code.

Bevindingen per richtlijn

Pdf is niet getagd

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

De pdf is niet gecodeerd waardoor deze niet toegankelijk is voor ondersteunende technologieën, zoals een schermlezer. Daarnaast is het niet mogelijk om de pdf op koppen, lijsten, tabellen en ander gebruik van codestructuur te toetsen.

Dit probleem komt voor op onder andere de volgende pagina('s):

De bodem pakt uit! https://nioo.knaw.nl/files/2024-11/CSC_flyer.pdf

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Pdf met verkeerde tag opmaak

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De pdf heeft wel een tag- of elementenstructuur, maar deze is niet goed opgebouwd, waardoor de tags niet voldoende overeenkomen met de semantische structuur. Het is belangrijk de tags altijd goed te controleren, met name als je software gebruikt om de tags automatisch toe te voegen, zodat hulpsoftware het document goed uit kan lezen.

Dit probleem komt voor op onder andere de volgende pagina('s):

Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

WCAG SC:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

U326: Help-teksten en instructies voor een specifiek formulierveld zijn in de code aan dit formulierveld gekoppeld Voldoende

Toelichting

Dit betreft hulpteksten in instructieteksten, niet het label zelf.

Je kan de aria-labelledby of aria-describedby attributen gebruiken om te refereren aan een hulptekst.

Gebruik aria-labelledby als de instructie het formulier volledig omschrijft.

Gebruik het aria-describedby als de hulptekst een extra omschrijving geeft, of als er al een label is gelinked aan het formulier.

U631: Het menu staat binnen een nav-element Voldoende

Toelichting

Het nav-element wordt gebruikt om gebruikers met een visuele beperking te laten weten dat dit links zijn voor websitenavigatie.

1.3.2 Betekenisvolle volgorde

U319: Elementen zijn in een logische volgorde geplaatst in de broncode Onvoldoende

Toelichting

Dit is belangrijk voor gebruikers van schermlezers, omdat de volgorde in de broncode de leesvolgorde bepaalt. Als regel moet de volgorde van de paginainhoud zinvol zijn, zelfs wanneer CSS is uitgeschakeld.

Bevindingen per richtlijn

Verborgen element in de leesvolgorde

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is content visueel verborgen, maar deze is niet correct verborgen voor gebruikers van hulpsoftware. De content is ook geen toevoeging die enkel voor gebruikers van hulpsoftware relevant is. Hierdoor komt de content wel terug in de leesvolgorde, maar niet visueel in beeld, wat verwarring kan opleveren. In plaats van content enkel buiten het zichtbare gebied te plaatsen, is het beter de content programmatisch goed te verbergen, zodat het zowel visueel als voor hulpsoftware verborgen is. Zie bijvoorbeeld:

De schermlezer leest de ‘hidden headers’ op. Dit probleem komt voor op onder andere de volgende pagina('s):

Alle onderzochte webpagina’s

Er zijn koppen te vinden bij de filters. Deze zijn visueel niet zichtbaar en ook dubbelop met de zichtbare koppen. Dit zorgt voor verwarring voor gebruikers met een schermlezer. Dit probleem komt voor op onder andere de volgende pagina('s):

Zoeken

WCAG SC:

1.3.2

EN 301 549:

9.1.3.2, 10.1.3.2, 11.1.3.2.1, 11.1.3.2.

Aceit:

U319

U617: Componenten die bedoeld zijn als modal dialogs staan gebruikers niet toe om content op de achtergrond te selecteren Voldoende

Toelichting

Modal dialogs zijn componenten die bovenop normale content op de pagina getoond worden. Er wordt van de gebruiker verwacht dat er iets gedaan wordt met deze content, voordat de gebruiker verder kan met de originele content. Modals moeten worden aangegeven in HTML met aria-modal="true".

Een belangrijk aspect hierbij is dat gebruikers die met het toetsenbord navigeren en gebruikers met schermlezers de focus in het modale dialoogvenster moeten behouden totdat ze hun mening over de inhoud hebben gevormd en het actief hebben gesloten. Daarom zou je niet per ongeluk de focus op de achtergrond moeten kunnen krijgen.

1.3.3 Zintuiglijke kenmerken

U402: Instructies zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten Voldoende

Toelichting

Vermijd "klik op de knop aan de rechterkant" en soortgelijke uitdrukkingen.

Je kunt richtingen, grootte, vormen en kleuren gebruiken in je instructies, maar er niet volledig op vertrouwen. Bijvoorbeeld "klik op de knop 'ja' aan de rechterkant" zou acceptabel zijn omdat het ook het zichtbare label bevat.

1.3.4 Weergavestand

U506: De website/ app kan worden gebruikt in alle schermoriëntaties Voldoende

1.3.5 Identificeer het doel van de input

U406: Het doel van elk invoerveld is gespecifieerd in de opmaak Onvoldoende

Toelichting

Wanneer mogelijk, moet je markup gebruiken om het doel van elk invoerveld aan te geven. Dit kan gedeeltelijk worden gedaan door het juiste element/type/markup te kiezen.

In HTML moet je het attribuut autocomplete gebruiken om te verklaren welk type gegevens de gebruiker moet invoeren in invoervelden die gegevens over de gebruiker verzamelen. Dit maakt het gemakkelijker voor browsers en ondersteunende technologie om eerder opgeslagen gegevens automatisch in te vullen. Lees meer over het attribuut en mogelijke waarden hier:

Bevindingen per richtlijn

Invoerveld zonder (correct) autocomplete-attribuut

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een invoerveld zonder het juiste autocomplete-attribuut. Bij invoervelden waarbij persoonlijke gegevens ingevuld moeten worden, is een autocomplete-attribuut nodig. Dat zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Bijvoorbeeld door de invoervelden al automatisch in te vullen. Zie bijvoorbeeld:

De invoervelden 'Your name' en 'E-mail address'. Dit probleem komt voor op onder andere de volgende pagina('s):

Nioo birthday https://nioo.knaw.nl/en/form/nioo-birthday-2025

Bij bijvoorbeeld adres, e-mail of VAT-nummer. Dit probleem komt voor op onder andere de volgende pagina('s):

Request the game of traits game for educational purposes https://nioo.knaw.nl/en/form/request-the-game-of-traits-game-

WCAG SC:

1.3.5

EN 301 549:

9.1.3.5, 10.1.3.5, 11.1.3.5.1, 11.1.3.5.

Aceit:

U406

1.4.1 Gebruik van kleur

U403: Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden Onvoldoende

Toelichting

Voor gebruikers die moeite hebben met het onderscheiden van kleuren, of die cognitieve beperkingen hebben, is het belangrijk dat kleur niet de enige manier is om een status of informatie door te geven.

Kleur mag je niet als het enige visuele middel gebruiken om informatie over te brengen, om een actie aan te geven, tot een reactie op te roepen of om een visueel element te kunnen onderscheiden.

Kleuren en vormen worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat, naast kleur, ook over het gebruik van vormen of verwijzingen naar locaties op het scherm. Denk hierbij aan foutmeldingen, bevestigingen of aanduidingen van beschikbaarheid.

Bevindingen per richtlijn

Kleur is gebruikt als enige vorm van communicatie en/of onderscheid

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een component gevonden waarbij kleur de enige indicator is tot onderscheid met andere componenten. Zie bijvoorbeeld:

In de diagrammen wordt gebruik gemaakt van kleur om dingen te communiceren. Bijvoorbeeld de diagram onder de kop Algemeen beeld 2024. Dit probleem komt voor op onder andere de volgende pagina('s):

Kokerjuffers met ‘plantenhuis’ leven volop in Nederlands water https://nioo.knaw.nl/nl/nieuws/kokerjuffers-met-plantenhuis-leven-volop-in-nederlands-water

WCAG SC:

1.4.1

EN 301 549:

9.1.4.1, 10.1.4.1, 11.1.4.1

Aceit:

U403

U404: Links zijn niet alleen herkenbaar door hun kleur Voldoende

Toelichting

Je kan onderstrepen of icoontjes, dikgedrukte tekst, of andere visuele indicatoren gebruiken,

Het is niet voldoende als deze indicatoren alleen zichtbaar zijn als je over het element hovered, omdat ze dan niet toegankelijk zijn voor hulpsoftware.

Het moet makkelijk te zien zijn welk element op een pagina interactief is, zonder op de elementen te hoeven focussen.

1.4.2 Audiobesturing

U429: Elk geluid dat automatisch start en meer dan 3 seconden speelt, kan worden gepauzeerd of uitgeschakeld Voldoende

Toelichting

Dit criterium is van toepassing op geluiden die minstens 3 seconden duren.

1.4.3 Contrast (minimaal)

U409: Alle tekst heeft voldoende contrast ten opzichte van de achtergrond Onvoldoende

Toelichting

Kleine tekst (lager dan 14px bold of 18px regular) minimaal een contrastverhouding van 4.5:1

Grote tekst (14px bold of hoger en 18px regular of hoger) minimaal een contrastverhouding van 3.0:1.

Als de achtergrond varieert, meet dan waar de contrast het laagste is.

https://developer.paciellogroup.com/resources/contrastanalyser/

Bevindingen per richtlijn

Tekst met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tekst gevonden met een kleur die een te lage contrastverhouding (4,5:1 of lager) heeft ten opzichte van de achtergrondkleur. Zie bijvoorbeeld:

De witte tekst met de achtergrondkleur. Dit probleem komt voor op onder andere de volgende pagina('s):
- Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

hmEYxp1xPjnDeLHoO1TPf4Zli22GYRiGYRiGYRiGYRiGYRiGYRiGcSC22GYYhmEYhmEYhmEYhmEYhmEYhmEcCd9wzxdbbDMMwzAMwzAMwzAMwzAMwzAMwzCOgF5gs8U2wzAMwzAMwzAMwzAMwzAMwzAMwzBG+P9MjHAfisXd1wAAAABJRU5ErkJggg==

Er is een stuk tekst met een te laag contrast ten opzichte van de achtergrondkleur. Dit is 3,9:1, in plaats van de minimale 4,5:1. Dit probleem komt voor op onder andere de volgende pagina('s):
- Broeikasgassen https://nioo.knaw.nl/nl/dossiers/broeikasgassen

De donkergrijze tekst op lichtgrijze achtergrond heeft onvoldoende contrast (2,9:1). Bijvoorbeeld de tekst 'Senior researcher'. Dit probleem komt voor op onder andere de volgende pagina('s):
- Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit
- Broeikasgassen https://nioo.knaw.nl/nl/dossiers/broeikasgassen
- Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering

De tekst bovenop de carrouselafbeeldingen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Homepagina https://nioo.knaw.nl/

De lichtblauwe tekst ‘’De bodem pakt uit!’’ op witte achtergrond. Dit probleem komt voor op onder andere de volgende pagina('s):
- De bodem pakt uit! https://nioo.knaw.nl/files/2024-11/CSC_flyer.pdf

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

Tekst (groot) met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tekst gevonden van 18pt of groter, die een kleur heeft met een contrastverhouding lager dan 3:1 ten opzichte van de achtergrondkleur. Zie bijvoorbeeld:

De gele tekst op de blauwe en witte achtergronden. Dit probleem komt voor op onder andere de volgende pagina('s):

De bodem pakt uit! https://nioo.knaw.nl/files/2024-11/CSC_flyer.pdf

De koptekst heeft een contrast van 2,6:1 in plaats van de minimum 3:1. Dit probleem komt voor op onder andere de volgende pagina('s):

News events https://nioo.knaw.nl/en/news-events

Het contrast bij 'Klimaatverandering' is 2:1 op de lichte delen, terwijl het minimum 3:1 is. Het contrast is 2,6:1 bij reflow. Dit probleem komt voor op onder andere de volgende pagina('s):

Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

Tekst met drukke achtergrond

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er bevind zich tekst op de pagina met een druk patroon of afbeelding op de achtergrond. Hierdoor is de tekst zelf lastig te lezen. Zie bijvoorbeeld:

De tekst bij de koppen 'Biodiversiteit', 'Klimaatverandering' en 'Duurzaam gebruik van land & water'.

Dit probleem komt voor op onder andere de volgende pagina('s):

Wat we doen https://nioo.knaw.nl/nl/wat-we-doen
Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering

De kop en teksten op de bannerafbeelding/carousel. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/
Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

1.4.4 Formaat wijzigen

U503: Gebruikers kunnen de tekstinhoud minstens 200 procent vergroten Voldoende

Toelichting

Voor veel gebruikers is het belangrijk om de tekstgrootte te kunnen vergroten. Dit is niet alleen belangrijk voor gebruikers met een visuele beperking, maar ook voor gebruikers die de website/ app op een klein apparaat zoals een smartphone gebruiken of in fel zonlicht.

Om aan de criteria in WCAG en EN 301 549 te voldoen, is het voldoende om een mechanisme in de website/ app aan te bieden waarmee gebruikers de tekst met 200% kunnen vergroten, maar voor veel gebruikers is het belangrijk om de website/ app op andere manieren te kunnen vergroten. Blokkeer de mogelijkheid van gebruikers niet om de website/ app in een webbrowser te vergroten. Probeer ervoor te zorgen dat de website/ app reageert op de instellingen van gebruikers binnen de webbrowser en het besturingssysteem. Om aan dit criterium in WCAG en EN 301 549 te voldoen, hoef je dit niet te doen, maar er is een ander criterium in EN 301 549 die vereist dat de website/ app luistert naar gebruikersinstellingen binnen het besturingssysteem. Lees hier meer over op U510/U511.

Let op dat je niet per se zo'n functie in je website/ app nodig hebt. Het is veel beter voor de gebruiker om gebruikersinstellingen binnen de browser en het besturingssysteem te respecteren. Dat zou de belangrijkste aanpak moeten zijn.

1.4.5 Afbeeldingen van tekst

U411: Gebruik tekst, geen afbeeldingen van tekst Onvoldoende

Toelichting

In complexe afbeeldingen zoals diagrammen is het acceptabel dat sommige tekst als onderdeel van de afbeelding wordt weergegeven.

Logotypen zijn ook een acceptabele uitzondering.

Bevindingen per richtlijn

Afbeelding bevat essentiële tekst

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een afbeelding waarin tekst is ingesloten in de afbeelding, waarvan de tekst essentieel is voor de context. Deze tekst is niet toegankelijk voor gebruikers van schermlezers of mensen die de opmaak van tekst wijzigen (zoals beschreven in 1.4.12) Zie bijvoorbeeld:

Pagina 8, 18. Dit probleem komt voor op onder andere de volgende pagina('s):

Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

Er zijn meerdere afbeeldingen op de pagina die essentiële tekst bevatten wat niet op een andere manier te zien is. Dit probleem komt voor op onder andere de volgende pagina('s):

Kokerjuffers met ‘plantenhuis’ leven volop in Nederlands water https://nioo.knaw.nl/nl/nieuws/kokerjuffers-met-plantenhuis-leven-volop-in-nederlands-water

WCAG SC:

1.4.5

EN 301 549:

9.1.4.5, 10.1.4.5, 11.1.4.5.1, 11.1.4.5.

Aceit:

U411

1.4.10 Reflow

U501: De lay-out is responsive en past zich aan aan de grootte van het scherm Onvoldoende

Toelichting

Alle content moet responsief zijn, maar het wettelijke criterium staat enkele uitzonderingen toe. Situaties waarin het moeilijk of onmogelijk is om de functionaliteit te behouden wanneer de viewport- of schermgrootte te klein wordt, zijn acceptabele uitzonderingen. Uitzonderingen zijn onder meer complexe tabellen, kaarten, spelletjes en videospelers. Onze aanbeveling is om de inhoud indien mogelijk volledig responsief te maken.

Bevindingen per richtlijn

Reflow tweedimensioneel scrollen

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

De pagina of onderdeel op de pagina scrolt in twee dimensies, zonder dat dit noodzakelijk is voor het element, zoals bij een tabel of grafiek. Voor kleine schermen is het belangrijk dat content in één scrol (lees) richting geplaatst is. Zie bijvoorbeeld:

De links vallen weg op op de mobiele weergave. Dit probleem komt voor op onder andere de volgende pagina('s):

Toegankelijkheidsverklaring https://nioo.knaw.nl/nl/toegankelijkheid

AbzU0CjzsnlmAAAAAElFTkSuQmCC

In reflow moet er tweedimensioneel gescrold worden om alle tekst van de filters te kunnen lezen. Dit probleem komt voor op onder andere de volgende pagina('s):

Facilities https://nioo.knaw.nl/en/facilities

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

Verlies van functionaliteit bij reflow

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een component gevonden met verlies van functionaliteit tijdens reflow. Zie bijvoorbeeld:

De pauzeknop bij het carrousel op de homepagina valt weg tijdens reflow. Hierdoor kun je het niet makkelijk pauzeren op een mobiele weergave. Dit probleem komt voor op onder andere de volgende pagina('s):
- Homepagina https://nioo.knaw.nl/nl
De 'Inloggen om dit dossier te v...' knop is niet meer volledig leesbaar.

cYgkbT+KYv4PoAWdWHtNwmkAAAAASUVORK5CYII=

Dit probleem komt voor op onder andere de volgende pagina('s):

- Broeikasgassen https://nioo.knaw.nl/nl/dossiers/broeikasgassen

Het sitetaal-veld valt half weg. Dit is te vinden bij de taalinstellingen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Account https://nioo.knaw.nl/nl/user

v9tn992cTgzZgAAAABJRU5ErkJggg==

Niet de volledige knoptekst is te lezen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Wie we zijn https://nioo.knaw.nl/nl/wie-we-zijn
- Wat we doen https://nioo.knaw.nl/nl/wat-we-doen

fwz2if4upjOxAAAAAElFTkSuQmCC

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

1.4.11 Contrast van niet-tekstuele content

U408: Grafische inhoud die wordt gebruikt voor interactieve besturingselementen, het tonen van status of het verstrekken van informatie, heeft voldoende contrast ten opzichte van de achtergrond. Onvoldoende

Toelichting

Onderdelen van de interface en grafische objecten moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van de aangrenzende kleuren.

https://developer.paciellogroup.com/resources/contrastanalyser/

Bevindingen per richtlijn

Knop op afbeelding achtergrond

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een knop gevonden die bovenop een afbeelding is geplaatst, waarbij er niet altijd voldoende contrast is om het gebied waar de knop wordt geraakt te zien. Zie bijvoorbeeld:

Er is een te laag contrast van het kruisje ten opzichte van de achtergrondafbeelding. Dit kruisje komt tevoorschijn wanneer je de afbeelding vergroot. In de WCAG 2.2 is het ook belangrijk dat de hitbox groot genoeg is, en is het dus goed om daar nu gelijk iets mee te doen. Zie: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost

WCAG SC:

1.4.11

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Invoerveld met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een invoerveld gevonden met een rand of achtergrondkleur, met een te laag contrast ten opzichte van naastgelegen kleuren.

Dit probleem komt voor op onder andere de volgende pagina('s):

Nioo birthday https://nioo.knaw.nl/en/form/nioo-birthday-2025

WCAG SC:

1.4.11

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

1.4.12 Tekstafstand

U502: Bij het wijzigen van de instellingen voor tekstafstand is er geen verlies van content of functionaliteit Onvoldoende

Toelichting

Tekst mag nooit afgesneden worden of overlappen als de tekstinstellingen worden aangepast. Om dit te testen moet een tool gebruikt worden zoals:

https://codepen.io/stevef/pen/YLMqbo/

Als een bezoeker van je website een of meerdere van onderstaande stijleigenschappen wijzigt — met behulp van de browserinstellingen of door een persoonlijke stylesheet aan te maken — moet alle inhoud leesbaar blijven en mag geen functionaliteit verloren gaan.

De regelafstand moet minstens 1,5 keer groter gemaakt kunnen worden dan de lettergrootte.
De afstand onder (of tussen) paragrafen moet minstens 2 keer groter gemaakt kunnen worden dan de lettergrootte.
De letterafstand (tracking) moet minstens 0,12 keer groter gemaakt kunnen worden dan de lettergrootte.
De woordafstand (spacing) moet minstens 0,16 keer groter gemaakt kunnen worden dan de lettergrootte.

Bevindingen per richtlijn

Verlies van content of functionaliteit bij toepassen tekstafstand stijlen

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Bij het toepassen van tekstafstand stijlen, is er content die verdwijnt of onbruikbaar wordt. Zie bijvoorbeeld:

Bij het toepassen van tekstafstand stijlen valt een deel van het menu weg. Dit probleem komt voor op onder andere de volgende pagina('s):

Alle onderzochte webpagina’s

Wanneer de tekstafstand wordt aangepast, valt een deel van de tekst weg. Dit probleem komt voor op onder andere de volgende pagina('s):

Klimaatverandering https://nioo.knaw.nl/nl/themas/klimaatverandering

8AAAAASUVORK5CYII=

De tekst in de carrousel. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

WCAG SC:

1.4.12

EN 301 549:

9.1.4.12, 10.1.4.12, 11.1.4.12

Aceit:

U502

1.4.13 Content bij hover of focus

U602: Aanvullende content die door hover met de aanwijzer zichtbaar wordt, kan door de gebruiker naar wens behouden of verborgen worden Voldoende

Toelichting

Het moet ook mogelijk zijn om hovercontent te verbergen zonder de focus te verplaatsen van het object dat de content activeert, bijvoorbeeld door op de ESC-toets te drukken.

2.1.1 Toetsenbord toegankelijk

U601: Elke gebruikersinteractie die mogelijk is met een muis of een touchscreen, kan ook worden uitgevoerd met een toetsenbord Voldoende

Toelichting

Een fundamenteel aspect van een website/ app die toegankelijk is, is dat deze volledig kan worden bediend met alleen een toetsenbord. Veel alternatieve bedieningsmethoden zijn gebaseerd op toetsenbordopdrachten. Spraakbesturing is bijvoorbeeld ook gedeeltelijk gebaseerd op toetsenbordopdrachten. Voor blinde gebruikers op pc's en Macs is er geen alternatief voor toetsenbordnavigatie.

Toetsenbordnavigatie is gebaseerd op het verplaatsen van de focus tussen interactieve objecten zoals links, knoppen en formuliervelden door op de TAB-toets te drukken. Door spaties, Enter of pijltoetsen te gebruiken, kunt u waarden wijzigen of links/knoppen activeren, afhankelijk van de situatie.

*U kunt knoppen activeren door op de spatiebalk te drukken.

*U kunt een link volgen door op Enter te drukken.

*Selecteer tabbladen en keuzerondjes met de pijltoetsen.

Toetsenbordnavigatie moet ook werken in mobiele websites en apps. Gebruikers met motorische beperkingen hebben met name moeite met touchscreens en gebruiken vaak toetsenborden die via Bluetooth zijn verbonden met de mobiele telefoon.

U603: Modals kunnen gesloten worden door het toetsenbord te gebruiken Voldoende

Toelichting

Zorg voor een "Sluiten" knop in het modale venster. We raden ook aan dat de Esc-toets kan worden gebruikt om het modale venster te sluiten, maar het is niet voldoende om alleen het modale venster te kunnen sluiten met de Esc-toets, je hebt ook een link of knop nodig naast de Esc-toets. Houd er rekening mee dat we aanbevelen dat de Esc-toets wordt geïmplementeerd, maar dit is geen vereiste.

2.1.2 Geen toetsenbord moeilijkheden

U604: Gebruikers kunnen met het toetsenbord door de hele website navigeren zonder vast te komen zitten in een bepaald gebied van de website (bijvoorbeeld een videospeler). Voldoende

Toelichting

Om aan dit criterium te voldoen, moet het onmogelijk zijn om het onderdeel te verlaten met toetsenbordopdrachten. Als je bijvoorbeeld door alle dagen van een maand moet tabben om uit een datumkiezer te komen, is dat vanuit juridisch oogpunt acceptabel, zelfs als het niet erg gebruiksvriendelijk is.

2.1.4 Enkel-teken sneltoetsen

U618: Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken Voldoende

Toelichting

Bij alle sneltoetsen moet de gebruiker ten minste een wijzigingstoets indrukken naast de sneltoets. Bijvoorbeeld, Alt+S is in orde, maar niet alleen S.

2.2.1 Instelbare timing

U614: Vermijd indien mogelijk het gebruik van time-outs of tijdsbeperkingen, of geef de gebruiker de optie om de tijdslimiet te verlengen of te vermijden Onvoldoende

Toelichting

Als er tijdslimieten of time-outs bestaan, moeten gebruikers indien mogelijk in staat zijn om ze uit te schakelen, de tijd te verlengen of de tijdslimieten aan te passen.

Bevindingen per richtlijn

Tijd niet aanpasbaar (sessie - geen waarschuwing)

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

De gebruiker wordt na een bepaalde tijd uitgelogd zonder waarschuwing of mogelijkheid tot verlenging. Zie bijvoorbeeld:

Wanneer je bent ingelogd en je klikt op een link word je soms zonder waarschuwing uitgelogd, zonder dat duidelijk is waarom. Dit probleem komt voor op onder andere de volgende pagina('s):

Account https://nioo.knaw.nl/nl/user

WCAG SC:

2.2.1

EN 301 549:

9.2.2.1, 10.2.2.1, 11.2.2.1

Aceit:

U614

2.2.2 Pauzeren, stoppen, verbergen

U412: Vermijd bewegende, knipperende en scrollende content zoals carrousels en achtergrondvideo's die automatisch starten. Als dergelijke elementen aanwezig zijn, moet het mogelijk zijn om ze te pauzeren. Voldoende

Toelichting

Voor alle bewegende, knipperende of scrollende informatie die automatisch start, langer dan vijf seconden duurt, en parallel wordt gepresenteerd met andere inhoud, is er een mechanisme voor de gebruiker om het te pauzeren, stoppen of verbergen.

De gebruiker heeft de mogelijkheid om bewegende, knipperende of scrollende informatie te pauzeren, te stoppen of te verbergen, wanneer deze informatie:

1. automatisch start;

2. langer dan vijf seconden duurt, en;

3. parallel met andere content wordt getoond,

Tenzij deze bewegende, knipperende of scrollende informatie onderdeel is van een activiteit waar het essentieel voor is.

U431: Content die automatisch ververst, moet pauzeerbaar zijn Voldoende

2.3.1 Minder dan drie flitsen

U413: Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde Voldoende

Toelichting

Je moet altijd vermijden om knipperende inhoud te gebruiken, ongeacht of het zich rechtstreeks op de pagina bevindt of in video's. Als je wel knipperende informatie/objecten hebt, zorg er dan voor dat ze niet met een hogere frequentie knipperen dan 3 keer per seconde. Dit is belangrijk om het risico op epileptische aanvallen bij gebruikers met epilepsie te minimaliseren.

2.4.1 Skip blokken

U608: Er is een snelkoppeling om delen van de pagina te omzeilen, zoals de navigatie en andere repetitieve inhoud Voldoende

Toelichting

Er moet een mogelijkheid zijn om delen van de pagina te omzeilen, zoals navigatie en andere repetitieve inhoud. De beste manier om dit te realiseren is door een skiplink aan te bieden. Met deze link kunnen gebruikers een deel van de website overslaan en direct door naar de unieke content van een website. Een skiplink moet verborgen zijn totdat de gebruiker erdoorheen tabt.

Dit criterium kan ook op andere manieren worden behaald, bijvoorbeeld door het gebruik van landmarks.

U632: De content van de pagina staat binnen een main-element Voldoende

Toelichting

Het main-element wordt gebruikt om de belangrijkste content van de pagina te weergeven. Dit maakt het makkelijker voor blinde gebruikers om de belangrijkste informatie te herkennen.

2.4.2 Paginatitel

U418: Alle webpagina's hebben een beschrijvende titel Onvoldoende

Toelichting

De webpagina moet een titel hebben die het onderwerp of doel beschrijft. Dit is ook van toepassing wanneer het doel van de pagina wijzigt, deze wijziging moet dan ook zichtbaar zijn in de titel van de pagina.

Bevindingen per richtlijn

Pdf titel incorrect

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De titel van het document klopt niet met de inhoud.

Dit probleem komt voor op onder andere de volgende pagina('s):

De bodem pakt uit! https://nioo.knaw.nl/files/2024-11/CSC_flyer.pdf

WCAG SC:

2.4.2

EN 301 549:

9.2.4.2, 10.2.4.2

Aceit:

U418

2.4.3 Volgorde

U609: De volgorde van de focus bij navigatie met een toetsenbord is betekenisvol en logisch Onvoldoende

Toelichting

Om te voldoen aan de criteria van EN 301 549 en WCAG, moet de tabvolgorde betekenis en werking behouden. Dit betekent bijvoorbeeld dat de tabvolgorde niet heen en weer springt tussen twee verschillende complexe onderdelen, of dat de volgorde ervoor zorgt dat een gebruiker het doel van links en knoppen verkeerd begrijpt.

We raden echter aan dat de tabvolgorde ook logisch en consistent is om het voor gebruikers gemakkelijker te maken.

Normaal gesproken betekent dit dat de focus op een voorspelbare manier beweegt van de linkerbovenhoek naar de rechterbenedenhoek. Maar er kunnen situaties zijn waarin uitzonderingen op deze regel zinvol zijn voor de gebruiker.

Dit criterium geldt niet alleen voor de tabvolgorde, maar ook voor andere toetsenbordnavigatie. Een voorbeeld hiervan is wanneer de pijltoetsen worden gebruikt om door een boomstructuur te navigeren. Zelfs dan is het belangrijk dat de volgorde van de onderdelen bruikbaar is. We raden ook aan dat het als logisch wordt ervaren.

Bevindingen per richtlijn

Focusvolgorde niet logisch

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Het verplaatsen van de toetsenbordfocus gebeurt niet logisch. De focus verdwijnt bijvoorbeeld buiten een dialoogvenster, of de focus gaat niet logisch door de volgorde van de content heen, of de focus verdwijnt na interactie met de gebruiker. Zie bijvoorbeeld:

De focus gaat eerst door het onderste stuk van de header in plaats van dat het begint bij de balk waar bijvoorbeeld ‘mijn account’ staat. Dit is visueel verwarrend. Dit probleem komt voor op onder andere de volgende pagina('s):

Alle onderzochte webpagina’s

WCAG SC:

2.4.3

EN 301 549:

9.2.4.3, 10.2.4.3, 11.2.4.3

Aceit:

U609

Verborgen element in tab volgorde

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een visueel en/of aria-hidden element dat nog wel focus krijgt. Zie bijvoorbeeld:

De focus gaat langs alle elementen in de carrousel, ook als die niet zichtbaar zijn. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

WCAG SC:

2.4.3

EN 301 549:

9.2.4.3, 10.2.4.3, 11.2.4.3

Aceit:

U609

2.4.4 Doel van de link (in context)

U432: De linkteksten zijn beschrijvend en maken het mogelijk om het doel van de link te begrijpen binnen de context waarin deze zich bevindt Voldoende

Toelichting

Linkteksten moeten zo beschrijvend mogelijk zijn om alle informatie te geven die de gebruiker nodig heeft om het doel van de link te begrijpen. In sommige situaties kan tekst in dezelfde alinea, lijst, tabelcel of een bijbehorende tabelkop ook worden gebruikt om het doel te beschrijven, maar voor zover mogelijk zou de linktekst alleen alle relevante informatie moeten geven.

2.4.5 Meerdere manieren

U414: Er is meer dan één manier om content te vinden Voldoende

Toelichting

Een manier om aan dit criterium te voldoen, is om het menu aan te vullen met een zoekfunctie. Alle pagina's die geen onderdeel zijn van een proces (zoals een stap in een e-service) moeten op meer dan één manier te vinden zijn.

2.4.6 Koppen en labels

U415: Koppen en labels beschrijven het onderwerp of doel Voldoende

Toelichting

Voor gebruikers om snel een gevoel te krijgen voor waar functies en informatie zich bevinden op een webpagina, is het belangrijk om beschrijvende koppen, labels en knopteksten te hebben.

2.4.7 Toetsenbord begeleiding

U605: Interactieve elementen worden gemarkeerd wanneer ze toetsenbordfocus ontvangen. Onvoldoende

Toelichting

Het is belangrijk voor gebruikers die zien en die navigeren met een toetsenbord om te kunnen zien welk object op elk moment de focus heeft. Dit kan worden gedaan door een omtrek van het object in focus, een onderstreping of omgekeerde kleuren te gebruiken.

Als je kleuren en randen gebruikt om het object met de focus te markeren, moet het contrast tussen de markering en de omgeving, en tussen de markering en objecten zonder focus, minstens 3.0:1 zijn. Om te voldoen aan de criteria van niet-tekstcontrast in WCAG 2.1, WCAG 2.2 en EN 301 549, zie U408. Formeel voldoe je aan dit criterium zolang de focus zichtbaar is, maar als de contrasten niet goed genoeg zijn, zul je niet voldoen aan de contrasteis.

In iOS heb je geen controle over de kleur van de visuele markering. In plaats daarvan kunnen gebruikers kiezen uit 5-6 verschillende kleuren in de instellingen. Je moet ervoor zorgen dat deze instellingen worden ondersteund in de app en kleuren gebruiken op een manier dat minstens een van de mogelijke kleuren een duidelijke visuele indicatie biedt van alle focusbare objecten in de app.

Op Android kun je de kleur van de visuele markering in Android controleren met deze code:

<item name="android:colorControlHighlight">@color/selected_item_focus</item>

Het resultaat moet worden getest, en je moet ervoor zorgen dat de gekozen kleur voldoende contrast heeft tegen de achtergrond in alle situaties.

Bevindingen per richtlijn

Focusindicator niet altijd zichtbaar

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

De focusindicator is niet altijd volledig zichtbaar. Zie bijvoorbeeld:

Wanneer je door de afbeeldingen heen gaat met het toetsenbord, is niet duidelijk waar de focusindicator heen is. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost
Kokerjuffers met ‘plantenhuis’ leven volop in Nederlands water https://nioo.knaw.nl/nl/nieuws/kokerjuffers-met-plantenhuis-leven-volop-in-nederlands-water

Bij de cookievoorkeuren is de focus niet zichtbaar wanneer er je langs de checkboxes gaat. Dit probleem komt voor op onder andere de volgende pagina('s):

Cookies https://nioo.knaw.nl/nl/cookies

WCAG SC:

2.4.7

EN 301 549:

9.2.4.7, 10.2.4.7, 11.2.4.7

Aceit:

U605

2.5.1 Aanwijzergebaren

U611: Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is Voldoende

2.5.2 Aanwijzerannulering

U620: Functionaliteiten worden geactiveerd door mouse-up en niet mouse-down Voldoende

Toelichting

Gebeurtenissen worden geactiveerd bij mouse-up en niet bij mouse-down.

Dit geldt ook voor touch. Een gebeurtenis moet worden geactiveerd wanneer de gebruiker de vinger van het scherm haalt, niet wanneer de gebruiker op het scherm drukt.

2.5.3 Label in Naam

U320: Het label wat gepresenteerd wordt aan hulpsoftware voor interactieve bediening bevat de visuele tekst Voldoende

Toelichting

Als er zichtbare tekst is op een pagina die interactieve functionaliteit omschrijft, moet deze tekst in de omschrijving van deze functionaliteit staan. Zo kan een gebruiker met hulpsoftware de functionaliteit aansturen met spraak.

2.5.4 Bewegingsactivering

U613: Zorg voor een alternatief voor interacties gebaseerd op bewegingsbesturing Voldoende

Toelichting

Als je een functie kunt activeren door te schudden met je smartphone (of een ander apparaat) of door een andere beweging te maken, dan moet het mogelijk zijn om dat gedrag uit te zetten en om de functie op een traditionele manier te activeren.

3.1.1 Taal van pagina

U416: De standaard taal van elke webpagina is gedefinieerd in de code Onvoldoende

Toelichting

Gebruik het lang attribuut van het HTML element.

Bevindingen per richtlijn

Pdf heeft geen taal gedefineerd

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

De pdf heeft geen taal gedefinieerd. Hierdoor kan de schermlezer de pdf niet begrijpen.

Dit probleem komt voor op onder andere de volgende pagina('s):

De bodem pakt uit! https://nioo.knaw.nl/files/2024-11/CSC_flyer.pdf
Vooronderzoek databeheer databeheer NIOO-CEME https://mda.nioo.knaw.nl/docs/reports/vooronderzoek.pdf

WCAG SC:

3.1.1

EN 301 549:

9.3.1.1, 10.3.1.1, 11.3.1.1.1, 11.3.1.1.

Aceit:

U416

3.1.2 Taal van onderdelen

U417: Content in een andere taal dan de standaard taal is geïdentificeerd in de code Onvoldoende

Toelichting

Gebruik het lang-attribuut.

Dit kan worden gebruikt op elk HTML-element, zoals div, p, span, en andere elementen.

Bevindingen per richtlijn

Taal van onderdeel onvoldoende

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is tekst gevonden in de pagina in een andere taal dan die is ingesteld voor de pagina. Deze tekst is ook in de code niet als afwijkend opgemaakt. Zie bijvoorbeeld:

De gehele site kan worden ingesteld op Engels, maar delen van de pagina blijven in het Nederlands. Zoals bijvoorbeeld de kop ‘groepen’ en de specifiekere informatie onder ‘subscriptions’. Dit probleem komt voor op onder andere de volgende pagina('s):
- Account https://nioo.knaw.nl/nl/user
De foutmelding is in de verkeerde taal, die niet overeenkomt met de taal van de pagina. Deze melding komt wanneer je bent ingelogd en het thema wil volgen, maar uiteindelijk wordt je sessie verbroken en word je uitgelogd. Dit probleem komt voor op onder andere de volgende pagina('s):
- Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit

AUv1fa5muYczAAAAAElFTkSuQmCC

WCAG SC:

3.1.2

EN 301 549:

9.3.1.2, 10.3.1.2

Aceit:

U417

Taal van onderdeel onvoldoende

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is tekst gevonden in de pagina in een andere taal dan die is ingesteld voor de pagina. Deze tekst is ook in de code niet als afwijkend opgemaakt. Zie bijvoorbeeld:

Verschillende elementen zoals de navigatie in de carrousel, de links naar de loginpagina en de pauze/volgende knoppen, zijn in het Engels ingesteld, maar niet zo opgemaakt in de code. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

WCAG SC:

3.1.2

EN 301 549:

9.3.1.2, 10.3.1.2

Aceit:

U417

Taal van onderdeel onvoldoende

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is tekst gevonden in de pagina in een andere taal dan die is ingesteld voor de pagina. Deze tekst is ook in de code niet als afwijkend opgemaakt. Zie bijvoorbeeld:

De knoppen ‘previous’ en ‘next’. Dit is een advies, omdat het maar 2 woorden zijn. Echter is het wel beter om deze ook aan te passen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zoeken

B3MChWDw0I54AAAAAElFTkSuQmCC

WCAG SC:

3.1.2

EN 301 549:

9.3.1.2, 10.3.1.2

Aceit:

U417

3.2.1 Focus

U615: Toetsenbordgebruikers kunnen door de pagina tabben zonder onverwachte wijzigingen of onderbrekingen en zonder dat de focus onverwacht wordt verplaatst Voldoende

3.2.2 Invoer elementen

U616: Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging Onvoldoende

Toelichting

Als een gebruiker de instelling van een onderdeel wijzigt — denk aan het aan- of uitvinken van een aankruisvakje — dan mag dat geen contextwijziging veroorzaken, tenzij je vooraf duidelijk meldt wat er zal gebeuren.

Voorbeelden van wat niet te doen is het laden van een nieuwe pagina, of onverwacht de content wijzigen. Als de gebruiker vooraf geinformeerd is over deze gebeurtenissen, is dit acceptabel.

Voorkom het aanpassen van content boven het punt waar de gebruiker op dit moment aan het navigeren is, tenzij het duidelijk is voor de gebruiker dat dit gaat gebeuren.

Bevindingen per richtlijn

Vermijd automatisch updatende zoekresultaten

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Tijdens het invoeren van de zoektermen worden de zoekresultaten en/of -suggesties gelijk aangepast. Dit leidt echter tot problemen bij het gebruik van hulpsoftware. Daarnaast kan dit erg afleidend werken omdat de pagina continu verandert. Het is beter de zoekresultaten of suggesties pas aan te passen als de gebruiker zelf op enter of een knop geklikt heeft.

Dit probleem komt voor op onder andere de volgende pagina('s):

Zoeken

WCAG SC:

3.2.2

EN 301 549:

9.3.2.2, 10.3.2.2, 11.3.2.2

Aceit:

U616

3.2.3 Logische navigatie

U419: Lijsten met links of functies die op meerdere webpagina's worden herhaald, komen voor in dezelfde relatieve volgorde Voldoende

Toelichting

Er kunnen situaties zijn waarin dit verwarrend is voor de gebruiker en waarin het vereiste genegeerd mag worden, maar in de meeste gevallen moet je consistent zijn met de relatieve volgorde van de links/knoppen/functies.

3.2.4 Consistente identificatie

U420: Dezelfde functionaliteit wordt consistent beschreven in de website/ app. Voldoende

Toelichting

Gebruik dezelfde terminilogie door de site heen. Gebruik bijvoorbeeld niet "service" op de ene plek, en "helpdesk" op een andere plek als er wordt gerefereerd aan dezelfde functionaliteit.

Dit geldt ook voor labels binnen formulieren.

3.3.1 Fout identificatie

U315: Alle fouten in formulieren worden beschreven in tekst, waarin wordt uitgelegd wat er mis is. Voldoende

Toelichting

De foutmelding moet aangeven waar de fout zit

Bevindingen per richtlijn

Geen foutidentificatie in tekst

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Één of meerdere invoervelden bevatten geen beschrijving van de fout in tekst.

De Captcha heeft geen foutmelding. Dit probleem komt voor op onder andere de volgende pagina('s):

Nioo birthday https://nioo.knaw.nl/en/form/nioo-birthday-2025

WCAG SC:

3.3.1

EN 301 549:

9.3.3.1, 10.3.3.1, 11.3.3.1.1, 11.3.3.1.

Aceit:

U315

3.3.2 Labels en instructies

U422: Alle website/ app elementen die gebruikersinput vereisen hebben een zichtbare beschrijving Voldoende

Toelichting

In alle situaties waar gebruikers iets moeten selecteren (bijvoorbeeld door op een object op de pagina te klikken) of informatie moeten invoeren, is er een zichtbare tekst die het doel van dat onderdeel uitlegt, inclusief informatie over wat de gebruiker moet invoeren in een formulierenveld en in welk formaat als dat niet duidelijk is voor de gebruiker. Let op: het label moet altijd zichtbaar zijn, het is niet voldoende met een tijdelijke tekst.

U423: De instructies die worden verstrekt voor website/ app-elementen die gebruikersinvoer vereisen, bevatten informatie over wat er moet worden ingevoerd of geselecteerd, en welke formaten moeten worden gebruikt. Onvoldoende

Toelichting

Dit betreft ook informatie waar navigatie voor nodig is, of input die optioneel is.

Bevindingen per richtlijn

Verplicht veld niet (voldoende) gemarkeerd in tekst

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De verplichte invoervelden zijn niet (voldoende) als verplicht gemarkeerd in tekst. Dit moet zowel in tekst als code terug te vinden zijn. Wanneer gebruik gemaakt wordt van een teken, dan moet het gebruik van dit teken ook duidelijk uitgelegd zijn.

Dit probleem komt voor op onder andere de volgende pagina('s):

Request the game of traits game for educational purposes https://nioo.knaw.nl/en/form/request-the-game-of-traits-game-
Nioo birthday https://nioo.knaw.nl/en/form/nioo-birthday-2025

WCAG SC:

3.3.2

EN 301 549:

9.3.3.2, 10.3.3.2, 11.3.3.2

Aceit:

U423

3.3.3 Fout suggestie

U424: Fouten worden beschreven in tekst met informatie over hoe de fout te corrigeren (indien mogelijk). Onvoldoende

Toelichting

Voor gebruikers is het niet alleen belangrijk om te begrijpen dat er iets mis is en waar de fout zich bevindt. Het is ook belangrijk om te begrijpen hoe de fout gecorrigeerd kan worden. In veel situaties is het mogelijk om een educated guess te maken over wat er mis is gegaan. Bijvoorbeeld, als een gebruiker een datum heeft ingevoerd in de verkeerde volgorde (jjjj-mm-dd in plaats van ddmmjj) en het nummer van de dag in de maand hoger is dan 12, zou je de datum kunnen voorstellen die je denkt dat de gebruiker heeft geprobeerd in te voeren.

Onthoud, je mag de door de gebruiker ingevoerde gegevens nooit wijzigen zonder de gebruiker op de hoogte te stellen van wat er is gedaan. Verander nooit automatisch een waarde om in een specifiek bereik te passen als je de gebruiker hier niet van op de hoogte stelt.

Bevindingen per richtlijn

Onvoldoende foutsuggestie

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een invoerveld gevonden waarbij de foutsuggestie ontbreekt of onduidelijk is. Zie bijvoorbeeld:

De fout die er verschijnt wanneer de captcha niet is ingevuld is niet duidelijk genoeg, ook omdat dit bij het veld zelf niet wordt aangegeven. Dit probleem komt voor op onder andere de volgende pagina('s):

Nioo birthday https://nioo.knaw.nl/en/form/nioo-birthday-2025

WCAG SC:

3.3.3

EN 301 549:

9.3.3.3, 10.3.3.3, 11.3.3.3

Aceit:

U424

Onvoldoende suggestie voor verbetering bij foutmelding

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een foutmelding gevonden, zonder goede suggestie voor het verbeteren van gebruikersinvoer.

Er is niet genoeg informatie over wat er precies fout is. Dit probleem komt voor op onder andere de volgende pagina('s):

Biodiversiteit https://nioo.knaw.nl/nl/themas/biodiversiteit

WCAG SC:

3.3.3

EN 301 549:

9.3.3.3, 10.3.3.3, 11.3.3.3

Aceit:

U424

3.3.4 Fout preventie (Juridisch, financieel, gegevens)

U425: Belangrijke formulieren laten de gebruiker gegevens bekijken, bewerken en bevestigen voordat ze worden verzonden. Onvoldoende

Toelichting

Dit geldt voor alle formulieren die juridische verbintenissen of financiële transacties verwerken.

Bevindingen per richtlijn

Onvoldoende foutpreventie

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Fouten bij invoer kunnen niet worden teruggedraaid, of invoer wordt niet gecontroleerd met mogelijkheid tot directe correctie, of gegevens worden niet getoond ter review, bevestiging en correctie voor definitieve verzending. Zie bijvoorbeeld:

Er wordt geen samenvatting gegeven of extra validatie. Dit probleem komt voor op onder andere de volgende pagina('s):

Request the game of traits game for educational purposes https://nioo.knaw.nl/en/form/request-the-game-of-traits-game-

WCAG SC:

3.3.4

EN 301 549:

9.3.3.4, 10.3.3.4, 11.3.3.4

Aceit:

U425

4.1.1 Parsing

U102: Alle markup is volgens de specificatie Voldoende

Toelichting

Belangrijk: Deze vereiste moet als voldaan worden beschouwd voor alle webinterfaces die zijn gebouwd op HTML. De vereiste is ook verwijderd uit WCAG 2.2. We raden nog steeds aan dat de code zoveel mogelijk de standaard volgt, maar het is niet langer een vereiste om aan de wettelijke eisen in Nederland te voldoen.

4.1.2 Naam, rol, waarde

U210: Alle interactieve objecten zijn omschreven naar de gebruiker op een manier zodat het doel voor de gebruiker makkelijk te begrijpen is Onvoldoende

Toelichting

Dit gaat over formulierbesturingselementen, links, knoppen en andere interactieve objecten. Alle elementen waarmee de gebruiker kan communiceren, moeten begrijpelijk zijn voor alle gebruikers. Links moeten gelinkte teksten hebben die het doel van de links uitleggen, knoppen moeten knoppenaanduidingen hebben, formulierbesturingselementen moeten labels hebben, enzovoort. Als dat niet mogelijk is, kun je ook aria-label gebruiken om het object uit te leggen. De informatie moet alle relevante informatie bevatten, zoals naam, rol en waarde. Een voorbeeld is selectievakjes. Het moet mogelijk zijn om te begrijpen of het selectievakje is aangevinkt of niet. Een ander voorbeeld zijn knoppen die containers met informatie uitvouwen. De knop moet worden beschreven zodat gebruikers begrijpen of de container is uitgevouwen of niet. Er zijn verschillende criteria in de checklist die gerelateerd zijn aan dit criterium. Het doel van deze eis is om situaties te dekken die mogelijk niet worden gedekt door andere eisen. Verifieer of dit werkt door de oplossing te testen met schermlezers, zowel op desktop als op mobiel.

Bevindingen per richtlijn

Verkeerd gebruik van aria

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er wordt gebruik gemaakt van WAI-ARIA die niet overeenstemt met de richtlijnen voor het gebruik; het is belangrijk erop te letten dat de rol van een element de gebruikte ARIA-attributen ondersteunt, omdat deze anders niet juist herkend kan worden door hulpsoftware. Zie bijvoorbeeld:

Er wordt gebruik gemaakt van een alt-tekst voor de afbeeldingen, maar er wordt ook gebruik gemaakt van een aria-label waarin deze alt-tekst staat. Dit is overbodig en ook de opmaak van de tekst klopt niet. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost
Contact https://nioo.knaw.nl/nl/contact

De link naar de Engelse site heeft ‘aria-hidden’, maar is wel focusable. Zie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden voor meer informatie. Dit probleem komt voor op onder andere de volgende pagina('s):

Homepagina https://nioo.knaw.nl/

WCAG SC:

EN 301 549:

9.4.1.2, 10.4.1.2, 11.4.1.2.1, 11.4.1.2.

Aceit:

U210

Element met verkeerde rol

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een element gevonden met een verkeerde rol. Zie bijvoorbeeld:

De filterknoppen hebben de rol van een link. Het is hierdoor voor schermlezergebruikers niet duidelijk hoe je deze filters kan uitzetten, omdat er geen onderscheid wordt gemaakt tussen aangeklikt of niet aangeklikt. Zorg voor een alternatief waar er bijvoorbeeld op het kruisje kan worden geklikt of een resetknop. Dit probleem komt voor op onder andere de volgende pagina('s):

Zoeken

WCAG SC:

EN 301 549:

9.4.1.2, 10.4.1.2, 11.4.1.2.1, 11.4.1.2.

Aceit:

U210

Knop zonder naam

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een knop gevonden zonder toegankelijke naam. Zie bijvoorbeeld:

Het kruisje om de geopende foto weg te klikken heeft geen goede naam. In plaats van ‘X’ is ‘Sluiten’ bijvoorbeeld beter. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost
Contact https://nioo.knaw.nl/nl/contact

De afbeeldingen zijn opgemaakt als button, maar deze hebben geen duidelijke naam die uitlegt wat er precies gebeurt wanneer hierop geklikt wordt. Denk bijvoorbeeld aan: klik om te vergroten. Dit probleem komt voor op onder andere de volgende pagina('s):

Lowlands-bezoekers hebben biodiversiteit geboost https://nioo.knaw.nl/nl/nieuws/lowlands-bezoekers-hebben-biodiversiteit-geboost
Contact https://nioo.knaw.nl/nl/contact
Kokerjuffers met ‘plantenhuis’ leven volop in Nederlands water https://nioo.knaw.nl/nl/nieuws/kokerjuffers-met-plantenhuis-leven-volop-in-nederlands-water

WCAG SC:

EN 301 549:

9.4.1.2, 10.4.1.2, 11.4.1.2.1, 11.4.1.2.

Aceit:

U210

Knop zonder naam

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een knop gevonden zonder toegankelijke naam. Zie bijvoorbeeld:

De naam van de knop is niet goed. Dit probleem komt voor op onder andere de volgende pagina('s):

Request the game of traits game for educational purposes https://nioo.knaw.nl/en/form/request-the-game-of-traits-game-

4HyFkDAophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITOhkEIIIYQQQgghhBAyEwophBBCCCGEEEIIITP5fxAehz9SCIJlAAAAAElFTkSuQmCC

WCAG SC:

EN 301 549:

9.4.1.2, 10.4.1.2, 11.4.1.2.1, 11.4.1.2.

Aceit:

U210

U211: Elk iframe element dat wordt gebruikt, heeft een title-attribuut dat de content goed omschrijft Voldoende

Toelichting

Iframes worden gebruikt om inhoud van een andere webpagina weer te geven. Dit wordt vaak gedaan om een videospeler of een andere vorm van applicatie binnen een webpagina te tonen.

Gebruikers die de interface niet kunnen zien, kunnen ervoor kiezen om de inhoud in het iframe weer te geven of te negeren. De titeltekst geeft deze gebruikers informatie om hen te helpen beslissen of ze de inhoud willen weergeven of niet.

U321: Knoppen en links die content in- en uitklappen, gebruiken aria-expanded Onvoldoende

Toelichting

Aria-expanded="true" wordt gebruikt als de content is uitgeklapt.

Aria-expanded="false" wordt gebruikt als de content is ingeklapt.

Bevindingen per richtlijn

Knop zonder status

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een knop met een status gevonden, die niet in de code is opgemaakt. Zie bijvoorbeeld:

De knop heeft een status, maar deze is niet duidelijk genoeg. Er is een naam ‘volgend’ en een description ‘niet meer volgen’ die aangeven wanneer er wat gebeurt met de knop. Dit is niet een correcte manier, een betere manier zou een checkbox-element zijn met een ‘selected’ status. Dit probleem komt voor op onder andere de volgende pagina('s):

Account https://nioo.knaw.nl/nl/user

WCAG SC: