Rapport:
Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl

Onderzoeker: Mirjam, Swink; Renate, Swink
Datum: 5 januari 2024
Opdrachtgever: Stichting Nederlands Instituut voor Beeld en Geluid

Samenvatting onderzoeksresultaat

De website netwerkdigitaalerfgoed.nl voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 27 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.

De website netwerkdigitaalerfgoed.nl is onderzocht tussen 19 december 2023 en 5 januari 2024. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om de vervolgstappen te bepalen om tot een toegankelijke website te komen.

De meest opvallende bevindingen uit dit onderzoek zijn:
- Er zijn meerdere teksten gevonden die te weinig contrast hebben. Hierdoor zijn deze teksten mogelijk moeilijk te zien voor mensen die slecht zicht hebben of kleurenblind zijn.
- Verschillende links en knoppen hebben geen toegankelijke naam die het doel of de functie omschrijft. Hierdoor zijn de links en knoppen moeilijk te bedienen en begrijpen voor bezoekers die hulpsoftware gebruiken.
- Over de pagina's navigeren via het toetsenbord levert verschillende problemen op, doordat de focus niet naar alle bedienbare elementen gebracht kan worden en er elementen in de focusvolgorde voorkomen die niet op de pagina zichtbaar zijn. Ook ontbreekt een skiplink waarmee herhalende content overgeslagen kan worden, en is het niet altijd zichtbaar waar de focus zich bevindt.

Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.

Scope van de evaluatie

Naam website	netwerkdigitaalerfgoed.nl
Scope van de website	Binnen de scope van het onderzoek valt: Alle pagina's op netwerkdigitaalerfgoed.nl Het aanmeldformulier voor de nieuwsbrief op https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d. Alle PDF's op netwerkdigitaalerfgoed.nl. Buiten de scope van het onderzoek valt: Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website. Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel	WCAG 2.1 niveau AA
Basisniveau van toegankelijkheid ondersteund	Gangbare browsers en hulpsoftware.

Overzicht toetsresultaat

Principe	Voldoende	Onvoldoende
1 Waarneembaar	9	11
2 Bedienbaar	6	11
3 Begrijpelijk	7	3
4 Robuust	1	2
Totaal	23	27

Leeswijzer

Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Bedieningselementen, invoer: Als niet-tekstuele content een bedieningselement is of gebruikersinvoer accepteert, dan heeft ze een naam die het doel ervan beschrijft. (We verwijzen naar succescriterium 4.1.2 voor aanvullende eisen over bedieningselementen en content die gebruikersinvoer accepteren.)
Op tijd gebaseerde media: Als niet-tekstuele content op tijd gebaseerde media is, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content. (We verwijzen naar Richtlijn 1.2 voor aanvullende eisen ten aanzien van media.)
Test: Als niet-tekstuele content een test of oefening is die, als ze door middel van tekst gepresenteerd wordt onjuist zou zijn, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
Zintuiglijk: Als niet-tekstuele content primair is bedoeld om een specifieke zintuiglijke ervaring te creëren, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
CAPTCHA: Als het doel van niet-tekstuele content is om te bevestigen dat content wordt gebruikt door een persoon in plaats van een computer, dan worden tekstalternatieven geleverd die het doel van de niet-tekstuele content identificeren en beschrijven. En er worden alternatieve vormen van CAPTCHA aangeboden gebruikmakend van uitvoermodes voor verschillende soorten van zintuiglijke perceptie om tegemoet te komen aan verschillende functiebeperkingen.
Decoratie, opmaak, onzichtbaar: Als niet-tekstuele content puur decoratief is, slechts voor visuele opmaak wordt gebruikt, of niet aan gebruikers wordt gerepresenteerd, dan wordt het op zo'n manier geïmplementeerd dat het genegeerd kan worden door hulptechnologie.

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, staat in de header het logo van Netwerk Digitaal Erfgoed. Deze is vormgegeven als link met daarin verschillende svg-afbeeldingen. Aan het logo is een toegankelijke naam toegevoegd doormiddel van een aria-label met de tekst 'nde-logo' in het a-element. Maar doordat aan dit element ook het attribuut 'aria-labelledby="header" is toegevoegd, is dit laatste attribuut bepalend voor wat er voorgelezen wordt door hulpsoftware zoals een screenreader. Dat betekent dat alle elementen die in de header te vinden zijn, voorgelezen worden als alternatieve tekst voor het logo. Dit is zeer veel tekst, daarnaast beschrijft het niet welk logo op de afbeelding te zien is. Los dit bijvoorbeeld op door het aria-labelledby attribuut te verwijderen. Pas ook de tekst van het aria-label aan zodat niet de afkorting ('nde', deze afkorting wordt als één woord voorgelezen) maar de volledige tekst die op het logo te zien is (Netwerk Digitaal Erfgoed) wordt voorgelezen. Hier kan aan toegevoegd worden dat de link naar de homepagina leidt maar dit is niet verplicht. Een soortgelijk probleem komt voor bij het logo dat op meerdere pagina's in de footer staat, waarbij als alternatieve tekst alle elementen van de footer voorgelezen worden. Zie succescriterium 2.4.4 en 4.1.2. Verberg daarnaast de svg’s voor hulpsoftware door bijvoorbeeld het aria-hidden attribuut toe te voegen aan aan de svg-elementen, zodat hulpsoftware de afbeeldingen kan negeren (aangezien het aria-label op de link dan wordt voorgelezen).

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, staan in de footer onder 'Volg ons op:' iconen in links die naar verschillende sociale media leiden. Deze worden door hulpsoftware zoals een screenreader voorgelezen met een opsomming van alle items die zich in de footer bevinden. Dit komt doordat op de links 'aria-labelledby="footer" is geplaatst. Hierdoor is het niet duidelijk welke iconen te zien zijn, en ook niet waar de links naartoe leiden. Omdat de iconen in links staan, volstaat een beschrijving van het linkdoel. Verwijder het aria-labelledby attribuut uit de links. Het aria-label dat ook op de links geplaatst is, is voldoende beschrijvend. Wel kan het woord 'link' uit de aria-labels verwijderd worden, dit is dubbele informatie omdat hulpsoftware de elementen zelf al herkent als link. Zie succescriterium 2.4.4 en 4.1.2.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, kan door op 'Zoeken' te klikken een zoekveld met daarbij een icoon (vergrootglas) uitgevouwen worden. Dit icoon staat op een knop (in een button-element). Door hulpsoftware zoals een screenreader wordt deze knop voorgelezen door alle elementen die in de header staan op te sommen. Dit komt doordat op het button-element 'aria-labelledby="header"' staat. Hierdoor kan het voor bezoekers die hulpsoftware zoals een screenreader gebruiken onduidelijk zijn wat de functie van de knop is, en kan deze lastig worden aangesproken door bezoekers die gebruik maken van spraaksoftware. Los dit op door 'aria-labelledby="header"' te verwijderen van het button-element. Op de knop staat ook 'aria-label="Zoeken", dit is voldoende beschrijvend. Zie ook succescriterium 2.5.3 en 4.1.2.

Op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ staan onder de kop 'Nieuws' links met daarin een svg-afbeelding van een pijl. Bijvoorbeeld bij de link 'Geheugen van Nederland'. De afbeelding wordt zichtbaar wanneer de muisaanwijzer naar de link toe wordt gebracht. Sommige browser-screenreader-combinaties herkennen een svg-element als afbeelding. Omdat de afbeelding geen alternatieve tekst heeft wordt alleen het woord 'afbeelding' voorgelezen. In dit geval is dit element decoratief, verberg het daarom voor hulpsoftware, bijvoorbeeld met aria-hidden. Gebruik hiervoor bijvoorbeeld aria-hidden="true". Ditzelfde komt op meerdere plekken voor op de website, een aantal voorbeelden:

Op dezelfde pagina bij de twee svg-afbeeldingen in de links onder 'Digitaal erfgoed zichtbaar'.
Op pagina https://netwerkdigitaalerfgoed.nl/ bij de links onder 'Nieuws', 'Onze vier werkterreinen' en 'Een greep uit onze activiteiten'.
Op pagina https://netwerkdigitaalerfgoed.nl/contact/ bij de iconen die voor de telefoonnummers en e-mailadressen staan.
Op pagina https://netwerkdigitaalerfgoed.nl/agenda/ bij de svg-afbeelding in de link in de kop 'Agenda'.

Op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/ staat een carrousel met daarin afbeeldingen die een alternatieve tekst hebben die voorgelezen wordt door hulpsoftware zoals een screenreader. Deze teksten omschrijven niet wat op de afbeelding is te zien. Meerdere afbeeldingen hebben de tekst 'Sfeerbeeld Week van het digitaal erfgoed 2019' en er is een afbeelding met de tekst 'Sfeerbeeld Hackalod 2019'. Omdat de decoratieve afbeeldingen in een carrousel met focusbare elementen staan, moeten deze een alternatieve tekst hebben die omschrijft wat op de afbeelding te zien is. Pas de alternatieve tekst aan, of los dit op door de carrousel te verwijderen en de afbeeldingen voor hulpsoftware te verbergen door bijvoorbeeld het alt-attribuut leeg te laten.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ staat een carrousel met daarin afbeeldingen die zowel een bijschrift als een alternatieve tekst hebben. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen daardoor bij sommige afbeeldingen in de carrousel dezelfde informatie dubbel te horen. Omdat het bijschrift in deze gevallen beschrijft wat op de afbeelding te zien is en de alternatieve tekst geen aanvullende informatie biedt, kan de afbeelding voor hulpsoftware verborgen worden door het alt-attribuut leeg te laten. Een soortgelijk probleem komt voor bij de afbeeldingen in de carrousel op pagina https://netwerkdigitaalerfgoed.nl/en/.

Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ staat bij 'Digitaal Erfgoed Referentie Architectuur (DERA)' een afbeelding met de alternatieve tekst 'Sfeerbeeld Week van het digitaal erfgoed 2019'. Deze tekst omschrijft niet wat op de afbeelding is te zien. Bij een decoratieve afbeelding is het niet nodig om de afbeelding een alternatieve tekst te geven, maar wanneer je dat doet moet de alternatieve tekst wel de afbeelding omschrijven. Los dit probleem bijvoorbeeld op door de decoratieve afbeelding te verbergen voor hulpsoftware met een leeg alt-attribuut. Dezelfde afbeelding met hetzelfde probleem komt op meerdere pagina's voor, bijvoorbeeld op https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/ en https://netwerkdigitaalerfgoed.nl/implementatie/. Een vergelijkbaar probleem komt op meerdere pagina's voor, waaronder op pagina https://netwerkdigitaalerfgoed.nl/nieuws/ .

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/ staat onder de eerste alinea de zin 'English translation, scroll down'. Hiernaast staat een icoon van een hand. Omdat deze in HTML in de tekst is geplaatst wordt deze door hulpsoftware zoals een screenreader voorgelezen als 'Achterkant van hand met omlaag wijzende vinger'. Dit omschrijft wat er op het icoon te zien is, maar het biedt geen aanvullende informatie op de tekst en het voorlezen van deze tekst kan storend werken. Bij een decoratief icoon is het niet nodig dat deze voorgelezen wordt. Plaats om dit op te lossen het icoon als afbeelding op de pagina, en verberg deze voor hulpsoftware door bijvoorbeeld een alt-attribuut toe te voegen en deze leeg te laten.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/big-picture-model/ staat een afbeelding die als bijschrift 'Het afwegingskader van het Big Picture-model' heeft. De afbeelding zelf is verborgen voor hulpsoftware. Omdat de afbeelding informatie biedt die in de tekst niet terug komt, is deze informatie niet beschikbaar voor bezoekers die niet kunnen zien. Los dit bijvoorbeeld op door de informatie op een andere manier (bijvoorbeeld als tekst) op de pagina te plaatsen.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staat een iframe met daarin een Soundcloud-speler ('Podcast Paulus en de Nijs op reis met...'). Hierin zijn drie elementen geplaatst waarop 'aria-role="img" staat, deze elementen hebben via een aria-label een alternatieve tekst gekregen welke voorgelezen wordt door hulpsoftware zoals een screenreader. Deze tekst bestaat uit de titel van de podcast, en beschrijft niet wat er op een afbeelding (die niet daadwerkelijk een afbeelding is) te zien zou zijn. Een bezoeker die gebruik maakt van hulpsoftware zoals een screenreader krijgt hierdoor drie keer achter elkaar de titel te horen, terwijl deze tekst ook al in andere elementen verwerkt is. Het is voor deze elementen niet nodig om voor hulpsoftware herkenbaar te zijn als afbeelding, ook is er geen alternatieve tekst nodig. Daarom kan zowel de aria-role als het aria-label verwijderd worden van deze drie elementen.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-2022.pdf is op pagina 7 een afbeelding te zien waarop het activiteitenplan 2022 is weergegeven. In de codelaag van het document heeft de afbeelding geen tag gekregen. Daardoor is de informatie die op de afbeelding te zien is niet beschikbaar voor bezoekers die hulpsoftware zoals een screenreader gebruiken. Om dit op te lossen kan bijvoorbeeld gekozen worden om de informatie als tekst beschikbaar te maken in het document, en de afbeelding te verbergen voor hulpsoftware door deze te markeren als artifact. Ditzelfde komt voor bij meerdere afbeeldingen in dit document, bijvoorbeeld op pagina 12 en 14.

Advies: Op pagina https://netwerkdigitaalerfgoed.nl/toegankelijkheid/ staat een afbeelding met de alternatieve tekst 'Status toegankelijkheidslabel van Literatuurgeschiedenis. Volg de link voor de volledige toegankelijkheidsverklaring'. In deze alternatieve tekst wordt niet aangegeven wat de status is van de toegankelijkheidsverklaring, deze informatie is wel te zien op de afbeelding. De status van de verklaring is wel te vinden als bezoekers de link volgen, daarom is dit niet af te keuren. Het zou beter zijn als de status van de toegankelijkheidsverklaring wordt vermeld in de alternatieve tekst.

1.2 Op tijd gebaseerde media

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

Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:

Vooraf opgenomen louter-geluid: Er wordt een alternatief geleverd voor op tijd gebaseerde media dat equivalente informatie geeft voor vooraf opgenomen louter-geluid content.
Vooraf opgenomen louter-videobeeld: Er wordt een alternatief geleverd voor op tijd gebaseerde media of een geluidsspoor dat equivalente informatie geeft voor vooraf opgenomen louter-videobeeld content.

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

Uitkomst: Onvoldoende

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Voldoende

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ is er in de video 'Arjanne Nijp, Fries Scheepvaartmuseum deelt haar ervaringen met Geheugen van Nederland' op verschillende plaatsen tekst in beeld. Bijvoorbeeld de tekst en het website-adres vanaf tijdstip 2:16. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Daardoor kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een screenreader niet weten wat er wordt getoond in de video. Zet deze informatie in een transcript om te voldoen aan dit succes criterium. Of maak gebruik van een extra audiospoor om ook te voldoen aan Succes Criterium 1.2.5. Een soortgelijk probleem komt voor bij de video met titel 'Virtual Research Environment - Installation and use' op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/, waar in de eerste en laatste seconden informatie in beeld staat die niet uitgesproken wordt. Ook spreken de sprekers hun naam en functie niet uit, deze zijn wel in beeld te zien.

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ staat een video met de titel 'Arjanne Nijp, Fries Scheepvaartmuseum deelt haar ervaringen met Geheugen van Nederland'. Bij deze video ontbreekt audiodescriptie, waardoor niet alle informatie die te zien is ook beschikbaar is voor bezoekers die niet kunnen zien. Bijvoorbeeld de tekst en het website-adres vanaf tijdstip 2:16. Audiodescriptie is een (extra) audiospoor waarin verteld wordt wat er in beeld te zien is. Voeg een extra audiospoor toe waarin audiodescriptie te horen is.Een soortgelijk probleem komt voor bij de video met titel 'Virtual Research Environment - Installation and use' op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ is de eerste letter van de eerste tekstalinea gescheiden van het woord waar deze bij hoort ('W' en 'elke'). Dit komt doordat de 'W' in een svg-illustratie is geplaatst, welke in een ander element staat dan de rest van de tekst. Voor hulpsoftware zoals een screenreader wordt deze letter apart voorgelezen. Visueel is te begrijpen dat de alinea begint met het woord 'Welke', maar voor bezoekers die de tekst voorgelezen krijgen door een screenreader begint de tekst met de letter 'W', en daarna het woord 'Elke'. Dit kan verwarrend werken. Los dit bijvoorbeeld op door de volledige tekst in hetzelfde element te plaatsen en de illustratie op een andere manier toe te voegen. Een soortgelijk probleem komt op meerdere pagina's voor, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/activiteiten/big-picture-model/ en https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

Op pagina https://netwerkdigitaalerfgoed.nl/404 is de introtekst onder de kop 'Pagina niet gevonden' opgemaakt als kop op kopniveau h2. Omdat het hier niet om een kop gaat, mag deze niet als zodanig opgemaakt worden. Los dit bijvoorbeeld op door de tekst als gewone tekst op te maken (met het p-element), en voor de styling gebruik te maken van de eigenschappen van CSS.

Op pagina https://netwerkdigitaalerfgoed.nl/ komen koppen voor die geen content bevatten. Het gaat om de koppen op kopniveau h3 die in de links staan onder de kop 'Onze vier werkterreinen' (bijvoorbeeld 'Digitaal Erfgoed Houdbaar'). Een kop is bedoeld om bijbehorende content te omschrijven en wanneer een tekst deze functie niet heeft, mag deze niet als kop opgemaakt worden. Maak de tekst op een andere manier op en maak voor de styling gebruik van de eigenschappen van CSS. Ditzelfde komt op meerdere plekken voor, bijvoorbeeld bij de koppen die in de links onder 'Nieuws' staan op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ en de koppen in de links onder 'Wat wij doen' op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/.

Op pagina https://netwerkdigitaalerfgoed.nl/404 staat een lijst met vier lijst-items. Elk lijst-item begint met tekst die visueel als kop te herkennen is, bijvoorbeeld 'ZOEKEN'. Deze tekst is als kop herkenbaar gemaakt door gebruik van hoofdletters en het strong-element. Voor hulpsoftware zoals een screenreader is de tekst op deze manier niet herkenbaar als kop. Los dit op door voor koppen gebruik te maken van het h-element, en voor de styling gebruik te maken van de eigenschappen van CSS. Een soortgelijk probleem komt voor in de Engelstalige tekst op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/, bijvoorbeeld bij de kop 'Cross-domain National Strategy'.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/ is de introtekst van de Engelstalige tekst op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/, onder de kop 'Sweden is actively pursuing..', dikgedrukt gemaakt doormiddel van het strong-element. Het strong-element geeft aan dat tekst, relatief aan de tekst eromheen, belangrijker is. Het mag daarom niet puur voor opmaak gebruikt worden. Maak voor de opmaak gebruik van de eigenschappen van CSS. Ditzelfde komt op meer plekken voor, bijvoorbeeld bij de eerste zin onder de kop 'Toegankelijkheid' op pagina https://netwerkdigitaalerfgoed.nl/toegankelijkheid/, en de laatste zin van het artikel op pagina https://netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/.

Op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d staat in het formulier een groep selectievakjes (checkboxes). Boven deze groep staat de tekst 'Type instelling'. Deze tekst is nu niet gekoppeld aan de groep selectievakjes. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen. Hetzelfde geldt voor het selectievakje onder 'Toestemming'.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staan onder 'Gerelateerd nieuws' verschillende links, bijvoorbeeld 'Implementatie 16 november 2023 Podcast...'. Binnen het link-element (<a>) staat een lijst (<ul> <li>) met één item, 'Implementatie'. Het gaat hier niet daadwerkelijk om een lijst, maar doordat het op deze manier is opgemaakt wordt dit door hulpsoftware zoals een screenreader wel zo voorgelezen. Dat kan verwarrend werken. Het lijst-element mag alleen gebruikt worden om opsommingen weer te geven. Maak het element op een andere manier op, bijvoorbeeld als gewone tekst. Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld:

Op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten', hier gaat het bijvoorbeeld om het woord 'Zichtbaar' in de links.
Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ onder 'Wat wij doen', bijvoorbeeld 'Houdbaar'.
Op pagina https://netwerkdigitaalerfgoed.nl/agenda/, bijvoorbeeld bij het agenda-item 'Introductiecursus Oral History' bij het woord 'Zichtbaar'.

De PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen door hulpsoftware. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, wat de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-2022.pdf komen verschillende toegankelijkheidsproblemen voor in de codelaag (tags), waardoor het document niet goed geïnterpreteerd kan worden door hulpsoftware zoals een screenreader. Los dit op door correcte tags toe te voegen in de codelaag van het document. Een aantal problemen zijn:

Op pagina 3 staat in de inhoudsopgave de tekst 'Bijlage 1- Samenwerking in het netwerk 19', maar de bijbehorende link staat in de tekst 'Bijlage 2 - Borging van resultaten 23'. De link die hoort bij laatstgenoemde tekst staat op een leeg deel van de pagina. Hierdoor is de juiste link lastig te vinden voor bezoekers die navigeren via het toetsenbord.
Er staan lege tags in het document, dat kan verwarrend zijn voor bezoekers die hulpsoftware zoals een screenreader gebruiken. Verwijder lege tags.
De koppen in de tekst, zoals '1. Inleiding' op pagina 5, zijn opgemaakt als links in plaats van koppen. Daardoor is de koppenstructuur niet goed te bepalen. Ook staan in de tekst koppen die visueel te herkennen zijn (zoals '1. Implementaties' op pagina 9), maar doordat deze niet met de juiste tags zijn opgemaakt worden deze niet als kop voorgelezen. Maak voor koppen gebruik van de h-tag.
Op pagina 8 staat een lege tabel welke visueel onzichtbaar is maar wel voorgelezen wordt. Verwijder de tabel. Dit komt op meerdere pagina's voor.
Op pagina 9 staat onder '1. Implementaties' een tekst die is opgemaakt als tabel. Het gaat hier niet om een tabel, dus deze tekst moet op andere wijze opgemaakt worden. Dit komt op meerdere pagina's voor.
Op pagina 14 staat boven Figuur 2 een alinea met tekst, doordat deze geen tag heeft gekregen wordt deze niet voorgelezen. Op meerdere pagina's komt content voor die geen tag heeft gekregen. Voor hulpsoftware is het nodig dat alle content met de juiste tag gemarkeerd is.
Op pagina 16 staat een tabel bij Figuur 3, in deze tabel zijn de kopcellen niet op de juiste wijze verbonden aan de datacellen. Daardoor is de informatie in de tabel voor bezoekers die schermvoorleessoftware gebruiken niet te begrijpen. Ook komen er lege datacellen voor in de tabel. Zorg ervoor dat de tabel op de juiste manier opgemaakt wordt.

Advies: Op verschillende pagina's wordt niet op de juiste manier gebruik gemaakt van een koppenstructuur. Voor gebruikers van een screenreader is een kopstructuur belangrijk, omdat een lijst van koppen opgevraagd kan worden en op die manier genavigeerd kan worden. Zorg voor een goede koppenstructuur, die begint bij een kopniveau h1 voor de titel van de pagina, kopniveau h2 voor de koppen, kopniveau h3 voor de tussenkoppen, etcetera. Sla hierbij geen koppen over.

Een aantal voorbeelden van een onjuiste koppenstructuur zijn:

Op pagina https://netwerkdigitaalerfgoed.nl/ ontbreekt een kop op kopniveau h1.
Op meerdere pagina's ontbreekt een kop op kopniveau 2, bijvoorbeeld op pagina https://netwerkdigitaalerfgoed.nl/?s=Schrijver.
Op meerdere pagina's volgt een kop op kopniveau h3 een kop op kopniveau h1 op, waarna een kop op kopniveau h2 volgt.

Advies: Op de pagina waar de bezoeker zich kan inschrijven voor de nieuwsbrief, https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, komen geen koppen voor in de tekst. Het h1-element is wel gebruikt om het logo dat boven het formulier staat op te maken, maar omdat deze geen tekst bevat wordt dit element niet als kop geïnterpreteerd door hulpsoftware. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader en die navigeren aan de hand van koppen, is het hierdoor lastig om te bepalen wat de bedoeling van de pagina is. Ook uit de tekst waarmee de content begint, wordt niet meteen duidelijk dat hierop een formulier volgt waar de bezoeker zich kan inschrijven voor de nieuwsbrief, terwijl dit visueel wel te begrijpen is. Los dit op door een kop toe te voegen waaruit dit duidelijk wordt, maak deze kop op met het h1-element. Verwijder het h1-element van het logo.

1.3.2 Betekenisvolle volgorde (Niveau A)

Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevindingen: Op paginahttps://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staan links (<a>) onder 'Gerelateerd nieuws', bijvoorbeeld 'Podcast 16 november 2023, podcastgast Sanneke Huisman..' In deze link staan verschillende elementen, als eerste een tag, daarna een afbeelding, dan een datum met nog een tag, en daarna een kop. Doordat de kop achteraan komt in deze volgorde, is het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader onduidelijk dat de gegevens die hiervóór staan bij deze kop horen. Een kop beschrijft bijbehorende content, daarom is het belangrijk dat de kop vooraan staat en daardoor als eerste voorgelezen wordt. Wijzig de volgorde van de verschillende elementen die in de link staan, zodat de kop vooraan staat. Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten' en op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ bij de links onder 'Wat wij doen'.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/ staat onder de eerste alinea de tekst 'English translation, scroll down' met daarbij een icoon waarop een hand te zien is die naar beneden wijst. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader en die navigeren via het toetsenbord, weten mogelijk niet waar zij moeten zijn om deze instructie op te volgen. Zorg ervoor dat er bij verwijzing naar de vertaalde tekst geen gebruik gemaakt wordt van zintuiglijke informatie (zoals locatie). Los dit bijvoorbeeld op door op deze plek een link te plaatsen waarmee de bezoeker naar de aangewezen plek op de pagina kan gaan, of verwijs naar een punt later op de pagina.

1.3.4 Weergavestand (Niveau AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Informatie over succescriterium 1.3.4 Weergavestand

Uitkomst: Voldoende

1.3.5 Identificeer het doel van de input (Niveau AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

Het invoerveld een doel dient dat is geïdentificeerd in de paragraaf Inputdoelen voor Componenten van de Gebruikersinterface; en
De content wordt geïmplementeerd met behulp van technologieën die ondersteuning bieden bij het identificeren van de verwachte betekenis van formulier-invoergegevens.

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d staat een formulier waar de bezoeker onder andere het eigen e-mailadres, voornaam en achternaam kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor het e-mailadres autocomplete="email". Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

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.

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Voldoende

1.4.2 Geluidsbediening (Niveau A)

Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Voldoende

1.4.3 Contrast (minimum) (Niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1;
Incidenteel: Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis.
Woordmerken: Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/ staat onder de kop 'Nieuws' een oranje (HEX #FA5200) blok met daarin de witte tekst 'Enquête', en daaronder een kop ('Mogen we je..') met witte tekstkleur. Het contrast tussen de tekst en de achtergrond is te laag. De contrastverhouding is 3.3:1 waar deze minimaal 4.5:1 moet zijn. Ditzelfde komt voor in het oranje blok op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ bij de tekst die begint met 'De principes in het manifest worden...'.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ staat in het oranje blok een link 'Lees meer over de Nationale Strategie Digitaal Erfgoed'. De witte tekstkleur heeft onvoldoende contrast met de oranje (HEX #E14900) achtergrond. De contrastverhouding is 4:1 waar deze minimaal 4.5:1 moet zijn.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ staat onder de kop 'Ondertekenaars' een kaart waarop via een knop gekozen kan worden tussen 'NL' en 'Caribisch deel NL'. De niet-actieve knop heeft een grijs (HEX #8B94AC) lettertype en heeft een te laag contrast met de witte achtergrond. De contrastverhouding is 3:1 waar deze minimaal 4.5:1 moet zijn.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staat bij elk nieuwsbericht onder de kop 'Gerelateerd nieuws' een datum, bijvoorbeeld '16 november 2023'. De grijze (HEX #8690A7) tekstkleur van deze datum heeft onvoldoende contrast met de lichte (HEX #F6F6F6) achtergrond. De contrastverhouding is 2.9:1 waar deze minimaal 4.5:1 moet zijn. Ditzelfde komt op meerdere pagina's voor bij de nieuwsberichten onder de kop 'Gerelateerd nieuws', bijvoorbeeld op pagina https://netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/ en https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/ staat bij elk nieuwsbericht onder de kop 'Nieuws' een datum, bijvoorbeeld '18 december 2023'. De grijze (HEX #8B94AC) tekstkleur van deze datum heeft onvoldoende contrast met de witte achtergrond. De contrastverhouding is 3:1 waar deze minimaal 4.5:1 moet zijn. Ditzelfde komt voor bij de nieuwsberichten onder de kop 'Nieuws' op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/. Ditzelfde komt voor bij de nieuwsberichten onder de kop 'Laatste nieuws' op pagina https://netwerkdigitaalerfgoed.nl/implementatie/ en onder de kop 'Gerelateerd nieuws' op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/ staan in de groene (HEX #A0DC78) vlakken, bijvoorbeeld onder de kop 'Inspiratie opdoen', blauwgekleurde (HEX #0A3DFA) links in de tekst. Het contrast tussen deze kleuren is te laag. De contrastverhouding is 4.2:1 waar deze minimaal 4.5:1 moet zijn.

Wanneer op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d het formulier ingestuurd wordt terwijl verplichte velden nog niet of foutief zijn ingevuld, komt onder de betreffende velden de foutmelding 'Voer alstublieft een waarde in' te staan. Het oranje (HEX #E85C41) lettertype heeft hierbij onvoldoende contrast met de lichtblauwe (HEX #F1F4FF) achtergrond. De contrastverhouding is 3.1:1 waar deze minimaal 4.5:1 moet zijn.

Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, moet de bezoeker het selectievakje 'I'm not a robot' aanvinken. Als de bezoeker dit doet en vervolgens ongeveer een minuut wacht, verloopt dit vinkje. De tekst met instructie 'Verification expired. Check the checkbox again' verschijnt bij het selectievakje. Deze rode (HEX #FF0000) tekst heeft onvoldoende contrast met de grijze (HEX #F9F9F9) achtergrond. De contrastverhouding is 3.8:1 waar deze minimaal 4.5:1 moet zijn.

Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, verschijnt de foutmelding 'Captcha mislukt...' wanneer de bezoeker zonder het selectievakje aan te vinken op de knop 'Voeg mij toe aan de lijst' heeft geklikt. De roodgekleurde (HEX #E85C41) foutmelding heeft onvoldoende contrast met de lichtblauwe (HEX #F1F4FF) achtergrond. De contrastverhouding is 3.1:1 waar deze minimaal 4.5:1 moet zijn.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf heeft op de eerste pagina de tekst 'Duurzame toegankelijkheid | Marlene Rooseman' op bepaalde punten onvoldoende contrast met de achtergrond. Bijvoorbeeld het laatste deel, waar de witte tekst op gele (HEX #FADE89) achtergrond staat. De contrastverhouding is hier 1.3:1 waar deze minimaal 4.5:1 moet zijn.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf staat op de eerste pagina de kop 'Digitaal archiveren is slimme keuzes maken' in een roze (HEX #F47C78) lettertype op een witte achtergrond. De contrastverhouding is 2.6:1 waar deze minimaal 3:1 moet zijn.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf is op de derde pagina de afbeelding 'Big Picture-model' te zien. Hierin komen verschillende contrastproblemen voor. Zo staat de witte tekst onder 'Technologisch' op blauwe (HEX #3A90A5) achtergrond en hier is de contrastverhouding 3.6:1, en staat de witte tekst 'Impactanalyse' op een blauwe (HEX #80AEDD) achtergrond en is hierbij de contrastverhouding 2.3:1. De contrastverhouding moet minimaal 4.5:1 zijn.

In de PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-2022.pdf staat op pagina 14 een figuur waarin grijze (HEX #80859C) tekst op een witte achtergrond staat. De contrastverhouding is 3.6:1 en dat is te laag, deze moet minimaal 4.5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scalable=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen, bijvoorbeeld op Android apparaten, niet inzoomen. Laat deze instelling weg.

Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ kan de bezoeker via de 'Filter'-knop een filter instellen. Wanneer bij een schermgrootte van 1280x1024px wordt ingezoomd vanaf 125%, zijn de filters (die zijn opgemaakt als links) niet meer te bedienen met de muis. Wanneer op de 'Filter'-knop geklikt wordt is wel het submenu 'Kies een domein of onderwerp' te zien en kunnen de links wel via het toetsenbord bediend worden, maar via de muis is het alleen mogelijk om te klikken op content die achter het submenu verborgen is. Zorg ervoor dat bij het inzoomen alle functionaliteit behouden blijft. Een soortgelijk probleem doet zich voor op pagina https://netwerkdigitaalerfgoed.nl/nieuws/ en https://netwerkdigitaalerfgoed.nl/agenda/, ook hier is de 'Filter'-knop niet meer goed bedienbaar bij inzoomen.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:

Aanpasbaar: De afbeelding van tekst kan visueel aangepast worden aan de eisen van de gebruiker;
Essentieel: Een specifieke weergave van tekst is essentieel voor de informatie die wordt overgebracht.

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende

1.4.10 Reflow (Niveau AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels;
Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels.

Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staat een podcast met de naam 'Podcast Paulus en De Nijs op reis met Marieke van Erp'. De podcast-speler van Soundcloud bevat verschillende knoppen. De knop 'Soundcloud' en 'Share', verdwijnen uit beeld wanneer bij een schermgrootte van 1280x1024px wordt ingezoomd vanaf 300%. Ook het laatste deel van de progressbar, waarop te zien is hoe ver de podcast is afgespeeld en waar door de bezoeker opmerkingen geplaatst kunnen worden bij specifieke tijdpunten, verdwijnt uit beeld. Daardoor is de podcast-speler deels niet te bedienen met de muis. Zorg ervoor dat alle content van de pagina zichtbaar blijft bij inzoomen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Componenten van de gebruikersinterface: Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;
Grafische objecten: Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Voldoende

1.4.12 Tekstafstand (Niveau AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

Regelhoogte (regelafstand) naar minstens 1,5 keer de lettergrootte;
Afstand tussen alinea's naar minstens 2 keer de lettergrootte;
Letterafstand (spatieren van letters) naar minstens 0,12 keer de lettergrootte;
Spatieren van woorden naar minstens 0,16 keer de lettergrootte.

Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevindingen: Wanneer wordt ingezoomd tot 400% bij een schermgrootte van 1280x1024px en de regelhoogte, alinea- en tekstafstand worden gewijzigd naar de waarden zoals beschreven voor dit succescriterium, vallen op verschillende pagina's gegevens buiten beeld. Bijvoorbeeld het laatste deel van een aantal e-mailadressen op pagina https://netwerkdigitaalerfgoed.nl/contact/, https://netwerkdigitaalerfgoed.nl/zichtbaar/ en https://netwerkdigitaalerfgoed.nl/toegankelijkheid/. Zorg ervoor dat alle content in beeld blijft.

1.4.13 Content bij hover of focus (Niveau AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

Sluiten: Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt;
Aanwijsbaar: Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt;
Aanhouden: De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is.

Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Voldoende

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevindingen: Wanneer een bezoeker voor de eerste keer op de website komt, is een cookiemelding te zien. Hierin staan twee knoppen die zijn opgemaakt als links, 'Accepteren' en 'Cookie voorkeuren'. Deze links zijn niet focusbaar en daardoor niet te bereiken en bedienen via het toetsenbord. Ditzelfde geldt voor de knop waarmee de cookiemelding afgesloten kan worden (X). Zorg ervoor dat deze elementen bereikbaar en bedienbaar zijn via het toetsenbord.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, kan een zoekfunctie uitgevouwen worden door met de muis op 'Zoeken' te klikken in de header. Het is niet mogelijk om deze functionaliteit (het uitvouwen van de zoekfunctie) te bereiken en bedienen met het toetsenbord, omdat zowel het element met de tekst 'Zoeken' als het icoon (svg-afbeelding waarop een vergrootglas te zien is) niet focusbaar zijn. Ditzelfde geldt voor de sluitknop, waarop een svg-afbeelding (X) te zien is, die op dezelfde plek verschijnt wanneer het zoekformulier uitgevouwen is. Hierdoor is het ook niet mogelijk is om het formulier via het toetsenbord weer in te vouwen. Zorg ervoor de zoekfunctie ook uitgevouwen en ingevouwen kan worden door bezoekers die navigeren via het toetsenbord. Maak de elementen focusbaar en bedienbaar door deze bijvoorbeeld op te maken als knoppen.

Wanneer bezoekers op pagina's (bijvoorbeeld https://netwerkdigitaalerfgoed.nl/) inzoomen vanaf 125% bij een schermgrootte van 1280 bij 1024 pixels, vouwt het menu samen onder een menuknop (hamburgermenu). Bezoekers die navigeren via de muis kunnen het hamburgermenu openen door erop te klikken, maar voor gebruikers die navigeren via het toetsenbord is dit niet mogelijk. Het element is niet focusbaar en bedienbaar via het toetsenbord. Los dit op door het hamburgermenu bijvoorbeeld op te maken als knop (met het button-element), hier een duidelijke naam aan te geven en te zorgen dat de status van de knop (ingevouwen of uitgevouwen) correct aan hulpsoftware wordt doorgegeven (gebruik bijvoorbeeld aria-expanded of een vergelijkbare techniek). Zie ook succescriterium 2.4.3. en 4.1.2.

Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ kan de bezoeker op onderwerp filteren via de knop 'Filter'. De lijsten met filter-opties zijn via het toetsenbord te bereiken en te bedienen, maar de uitvouwbare knop zelf is dat niet. Dit is voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader verwarrend. Voor hen is niet bekend dat zich hier een uitvouwbare knop bevindt waaronder filter-opties te vinden zijn, waardoor de filter-opties niet als zodanig begrepen kunnen worden. Los dit op door de filterknop bijvoorbeeld op te maken als knop (met het button-element), hier een duidelijke naam aan te geven en te zorgen dat de status van de knop (ingevouwen of uitgevouwen) correct aan hulpsoftware wordt doorgegeven (gebruik bijvoorbeeld aria-expanded of een vergelijkbare techniek). Zie ook succescriterium 2.4.3. en 4.1.2.
Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld pagina https://netwerkdigitaalerfgoed.nl/nieuws/ en https://netwerkdigitaalerfgoed.nl/agenda/.

Op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/ staat een carrousel van afbeeldingen, hierin staan knoppen waarmee de bezoeker kan navigeren naar de volgende of vorige afbeelding. Bezoekers die navigeren via het toetsenbord kunnen de knoppen lastig bedienen, omdat deze niet focusbaar zijn. Dit komt doordat 'tabindex="-1"' is toegevoegd aan de knoppen. Alle bedienbare elementen moeten bereikbaar zijn voor de bezoeker, zorg ervoor dat de focus naar deze knoppen gebracht kan worden. Ditzelfde komt voor op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ en https://netwerkdigitaalerfgoed.nl/en/.

Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ staan onder 'Ondertekenaars' de links 'Toon in lijst' en 'Toon op kaart'. Via deze links kan de bezoeker kiezen hoe de gegevens weergegeven worden. Doordat deze links niet focusbaar zijn, is het voor bezoekers die navigeren via het toetsenbord lastig om van deze functionaliteit gebruik te maken. Zorg ervoor dat deze links via het toetsenbord bereikbaar en bedienbaar zijn. Ditzelfde geldt voor de links 'NL' en 'Caribisch deel NL', die op de kaart te zien zijn.

2.1.2 Geen toetsenbordval (Niveau A)

Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Voldoende

2.1.4 Enkel teken sneltoets (Niveau A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

Uitzetten: Er is een mechanisme beschikbaar waarmee de sneltoets kan worden uitgezet;
Opnieuw toewijzen: Er is een mechanisme beschikbaar om de sneltoets opnieuw toe te wijzen aan één of meerdere niet-afdrukbare tekens (bijvoorbeeld Ctrl, Alt, enz.);
Alleen actief bij focus: De sneltoets voor een component van de gebruikersinterface is alleen actief wanneer de betreffende component de focus heeft.

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ staat een YouTube-video met de titel 'Arjanne Nijp, Fries Scheepvaartmuseum deelt haar ervaringen met Geheugen van Nederland'. Deze YouTube-videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat bezoekers die afhankelijk zijn van spraaksoftware in de weg kan staan. Zij zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Ditzelfde komt voor bij de video met titel 'Virtual Research Environment - Installation and use', die op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/ staat.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:

Uitzetten: De gebruiker kan de tijdslimiet uitzetten voordat die wordt bereikt; of
Aanpassen: De gebruiker mag de tijdslimiet aanpassen voordat deze is verstreken over een bereik van ten minste tien keer de standaardinstelling; of
Verlengen: De gebruiker wordt gewaarschuwd voor de tijd afloopt en krijgt ten minste 20 seconden om de tijdslimiet met een eenvoudige handeling te verlengen (bijvoorbeeld, "druk op de spatiebalk"), en de gebruiker mag de tijdslimiet ten minste tien keer verlengen; of
Real-time uitzondering: De tijdslimiet is onderdeel van een realtime gebeurtenis (een veiling bijvoorbeeld) en er is geen alternatief voor de tijdslimiet mogelijk; of
Essentiële uitzondering: De tijdslimiet is essentieel en verlenging zou de activiteit ongeldig maken; of
20 uur uitzondering: De tijdslimiet is langer dan 20 uur.

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevindingen: Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, moet de bezoeker het selectievakje 'I'm not a robot' aanvinken. Als de bezoeker dit doet en vervolgens ongeveer een minuut wacht, verdwijnt het vinkje en verschijnt er een foutmelding. Voor sommige bezoekers is er hierdoor mogelijk niet voldoende tijd om het proces van de aanmelding af te ronden. Voor tijdslimieten geldt dat de bezoeker die moet kunnen uitzetten, aanpassen of verlengen. Voeg een mechanisme toe dat dit mogelijk maakt.

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:

Bewegen, knipperen, scrollen: Voor bewegende, knipperende of scrollende informatie die (1) automatisch start, (2) langer dan vijf seconden duurt, en (3) parallel met andere content wordt getoond, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen, tenzij de beweging, knippering of scrolling, onderdeel is van een activiteit waar ze essentieel is en
Automatisch actualiserend: Voor elke soort automatisch actualiserende informatie die (1) automatisch start en (2) parallel met andere content wordt gepresenteerd, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen of de frequentie van de actualisering in te stellen, tenzij de automatische actualisering onderdeel is van een activiteit waar ze essentieel is.

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/ staat onder de tekst bij de kop 'Missie van het Netwerk Digitaal Erfgoed' een carrousel die automatisch naar de volgende afbeelding verspringt. Er is geen mechanisme aanwezig waarmee deze beweging gepauzeerd of gestopt kan worden. Door de bewegende content, hebben sommige bezoekers moeite met het lezen en bekijken van de stilstaande content op de pagina. Ook kan bewegende content voor sommige bezoekers lichamelijke klachten veroorzaken zoals bijvoorbeeld duizeligheid of misselijkheid. Zorg ervoor dat bezoekers de beweging kunnen stoppen of pauzeren, of verwijder de carrousel en plaats de content op andere manier op de pagina. Ditzelfde komt voor op pagina https://netwerkdigitaalerfgoed.nl/en/ en https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/.

Op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ staat naast de kop 'Digitaal erfgoed zichtbaar' een bewegende illustratie. Deze wordt automatisch afgespeeld door een vimeo-videospeler. Er is geen mechanisme aanwezig waarmee de bezoeker het beeld kan stilzetten door deze te pauzeren of stoppen. Voor sommige bezoekers kan dit problemen opleveren. Zorg ervoor dat bezoekers het bewegende beeld kunnen pauzeren of stopzetten.

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Uitkomst: Voldoende

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, is geen mechanisme beschikbaar waarmee content die op elke pagina voor komt overgeslagen kan worden (skiplink). Dit gaat bijvoorbeeld om het menu. Voeg een link toe waarmee een bezoeker direct naar de eerste unieke inhoud van de pagina kan springen. Deze skiplink is de eerste link op de pagina en mag standaard visueel verborgen zijn. Zorg dat de link zichtbaar wordt wanneer een bezoeker hier via het toetsenbord de focus naartoe brengt.

Advies: Op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ staan onder 'Ondertekenaars' gegevens die in een lijst of op een kaart weergegeven kunnen worden. De gegevens bestaan onder andere uit focusbare knoppen als voor 'Toon op kaart' is gekozen, en uit links als voor 'Toon in lijst' is gekozen. Een bezoeker die navigeert via het toetsenbord moet door al deze knoppen of links heen met de tab-toets, voordat de focus op het volgende item op de pagina valt. Omdat het om een lange lijst met knoppen of links gaat en een bezoeker die met de muis navigeert deze gegevens in één keer kan overslaan, is het beter als er een mechanisme wordt toegevoegd waarmee dit onderdeel ook via het toetsenbord overgeslagen kan worden.

2.4.2 Paginatitel (Niveau A)

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevindingen: De paginatitel van de pagina waarop de bezoeker zich kan inschrijven voor de nieuwsbrief, https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, bevat alleen de naam van de organisatie (Netwerk Digitaal Erfgoed). Omdat de paginatitel het eerste is wat voorgelezen wordt door hulpsoftware zoals een screenreader, is het duidelijker als ook de titel van de unieke pagina voorgelezen wordt. Voeg deze toe aan de paginatitel zodat deze vóór de naam van de organisatie staat.

De PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Advies: De PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-2022.pdf heeft een documenttitel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevindingen: Als een bezoeker voor de eerste keer op de website komt, is een cookiemelding te zien. Deze staat onderaan de pagina en staat over een deel van de content heen. Voor bezoekers die inzoomen, bijvoorbeeld in verband met slechtziendheid, wordt een groter deel van de pagina bedekt door de cookiemelding. Daarom is het belangrijk dat de cookiemelding vooraan staat in de focusvolgorde, zodat de bezoeker deze als eerste weg kan klikken. Nu moet een bezoeker die navigeert via het toetsenbord door de hele pagina heen voordat de focus hierop valt. Zorg ervoor dat de cookiemelding als eerste de focus krijgt.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, komt een bezoeker die navigeert via het toetsenbord in het menu langs alle submenu-items die op dat moment niet zichtbaar zijn op de pagina. Het gaat bijvoorbeeld om de submenu-items van het menu-item 'Aan de slag'. Voor bezoekers die geen gebruik maken van hulpsoftware zoals een screenreader en wel kunnen zien, levert dit verwarring op omdat zij niet weten waar de focus zich bevindt op het moment dat deze op een item valt dat op dat moment niet zichtbaar is. Ditzelfde geldt voor de submenu-items in het invouwbare menu dat te vinden is wanneer de pagina op een kleiner scherm bekeken wordt of wanneer ingezoomd wordt op de pagina. Daarnaast krijgt ook het mobiele menu toetsenbordfocus, ook als de bezoeker niet in de mobiele weergave of ingezoomde weergave is. Zorg ervoor dat de focus alleen op elementen kan vallen als deze zichtbaar zijn op de pagina.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, valt de focus in de header bij navigatie via het toetsenbord op het zoekformulier en bijbehorende knop, ook op het moment dat deze niet zichtbaar zijn. Voor bezoekers die gebruik maken van de muis worden deze elementen zichtbaar nadat op het element 'Zoeken' in de header geklikt is. Zorg ervoor dat deze elementen geen focus kunnen krijgen als deze niet zichtbaar zijn op de pagina.

Wanneer bezoekers op pagina's (bijvoorbeeld https://netwerkdigitaalerfgoed.nl/) inzoomen vanaf 125% bij een schermgrootte van 1280 bij 1024 pixels, vouwt het menu samen onder een menuknop (hamburgermenu). Het menu en de menu-items zijn op dat moment niet zichtbaar op de pagina. Een bezoeker die navigeert via het toetsenbord gaat via de tab-toets toch door alle elementen van het menu heen, maar kan op dat moment niet zien waar de focus zich bevindt. Zorg ervoor dat elementen die niet zichtbaar zijn op de pagina, geen focus kunnen krijgen. Los dit op door het hamburgermenu bereikbaar en bedienbaar te maken via het toetsenbord, en zorg dat de focus pas na het uitvouwen van het menu op de menu-items kan vallen. Zie ook succescriterium 2.1.1 en 4.1.2.

Wanneer bezoekers op pagina's (bijvoorbeeld https://netwerkdigitaalerfgoed.nl/) inzoomen vanaf 125% bij een schermgrootte van 1280 bij 1024 pixels, vouwt het menu samen onder een menuknop (hamburgermenu). Wanneer dit hamburgermenu uitgevouwen is, kan een bezoeker de focus via het toetsenbord verplaatsen naar elementen op de pagina die achter het menu staan en daardoor op dat moment niet zichtbaar zijn. Zorg ervoor dat de focus pas het menu kan verlaten nadat deze is ingevouwen.

Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ kan de bezoeker op onderwerp filteren via de knop 'Filter'. Bezoekers die navigeren via het toetsenbord gaan via de tab-toets door alle filter-opties heen, ook als deze op dat moment niet zichtbaar zijn op de pagina. Daardoor is het voor hen lastig te bepalen waar zij zich bevinden op de pagina. Los dit bijvoorbeeld op door de filterknop bereikbaar en bedienbaar te maken via het toetsenbord, en zorg dat de focus pas na het uitvouwen van het menu op de menu-items kan vallen. Zie ook succescriterium 2.1.1 en 4.1.2. Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld pagina https://netwerkdigitaalerfgoed.nl/nieuws/ en https://netwerkdigitaalerfgoed.nl/agenda/.

Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staat een podcast in een iframe met een titel die begint met 'Podcast Paulus en De Nijs op reis met..' Wanneer een bezoeker die navigeert via het toetsenbord zich met de tab-toets vooruit over de pagina beweegt, valt de focus in de podcast-speler eerst op de 'play'-knop. Daardoor hoort de bezoeker de titel van het iframe niet en is lastig te bepalen waar de 'play'-knop bij hoort. Wanneer de bezoeker vanaf een andere positie met de tab-toets achteruit beweegt over de pagina, valt de focus wel eerst op het iframe en is de titel correct te horen. Zorg ervoor dat de focus in de focusvolgorde ook eerst op het iframe valt wanneer de bezoeker zich vooruit over de pagina beweegt.

2.4.4 Linkdoel (in context) (Niveau A)

Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevindingen: Wanneer een bezoeker voor de eerste keer op de website komt, is een cookiemelding te zien. Hierop staan twee knoppen, 'Accepteren' en 'Cookievoorkeuren'. In het link-element van deze links is geen linkdoel gedefinieerd, waardoor de links nergens naartoe leiden. Hulpsoftware zoals een screenreader herkent de elementen wel als links en leest deze als zodanig voor. Hierdoor kan verwarring ontstaan, een bezoeker kan bijvoorbeeld denken dat een pagina over Cookie-voorkeuren geopend wordt na het klikken op de link met de tekst 'Cookie voorkeuren'. Voeg om dit op te lossen een linkdoel toe in het link element, of maak deze elementen op een andere manier op (bijvoorbeeld als knop). Let er daarbij op dat de functionaliteit van het element overeen komt met de tekst die erop staat. Zie succescriterium 4.1.2.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, staat in de header het logo van Netwerk Digitaal Erfgoed. Deze is vormgegeven als link naar de homepagina, met daarin verschillende svg-afbeeldingen. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het doel van de link niet duidelijk. Dit komt doordat op het link-element het attribuut 'aria-labelledby="header"' staat. Hierdoor worden alle elementen die in de header staan voorgelezen. De bezoeker weet dan niet dat hier het logo te zien is en dat de link naar de homepagina leidt. Verwijder om dit op te lossen het aria-labelledby attribuut van het a-element, en pas de tekst van het aria-label aan zodat deze de tekst van het logo bevat. Voeg hier eventueel aan toe dat de link naar de homepagina leidt, maar dit is niet verplicht omdat aangenomen kan worden dat algemeen bekend is dat het logo naar de homepagina linkt. Een soortgelijk probleem komt voor bij de link met het logo dat op meerdere pagina's in de footer staat, waarbij als alternatieve tekst alle elementen van de footer voorgelezen worden. Zie ook succescriterium 1.1.1 en 4.1.2.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, staan in de footer onder 'Volg ons op:' iconen in links die naar verschillende sociale media leiden. Deze links hebben allemaal dezelfde linktekst, waardoor voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet kunnen onderscheiden dat deze naar een ander doel leiden en wat het doel van de links is. Dit komt doordat op de links 'aria-labelledby="footer" is geplaatst, en hierdoor alle elementen die in de footer staan worden voorgelezen. Verwijder om dit op te lossen het aria-labelledby attribuut uit de links. Het aria-label dat ook op de links geplaatst is, volstaat. Wel kan het woord 'link' uit de aria-labels verwijderd worden, dit is dubbele informatie omdat hulpsoftware de elementen zelf al herkent als link. Zie succescriterium 1.1.1 en 4.1.2.

Op pagina https://netwerkdigitaalerfgoed.nl/agenda/ staat in de kop 'Agenda' een link die door 'aria-labelledby="content" voorgelezen wordt met een opsomming van alle elementen van de content van de pagina. Ook is op de link 'role="button"' gezet. Hierdoor is het voor bezoekers die hulpsoftware zoals een screenreader gebruiken niet duidelijk wat de functie of het doel van dit element is. Verwijder het 'aria-labelledby'- en 'role'-attribuut, zodat het element voor hulpsoftware herkenbaar is als link en het aria-label 'rss-feed' voorgelezen wordt. Zie succescriterium 4.1.2.

Op pagina https://netwerkdigitaalerfgoed.nl/?s=Schrijver staan onder de kop '2 resultaten voor Schrijver' vijf links waarmee de bezoeker de zoekresultaten kan filteren. Uit de linktekst wordt dit doel niet duidelijk, waardoor een bezoeker die niet kan zien en gebruik maakt van hulpsoftware zoals een screenreader mogelijk kan denken dat de links zoekresultaten zijn. Voeg een tekst toe (deze hoeft niet visueel aanwezig te zijn op de pagina) die wordt voorgelezen door een screenreader en waarmee het doel van de links (het filteren van de zoekresultaten) duidelijk wordt.

Onderaan op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ staat een navigatiemechanisme dat bestaat uit links die eruit zien als knoppen met daarop het paginanummer. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader horen alleen dit paginanummer, waarmee voor hen mogelijk onduidelijk is dat zij zich binnen een navigatiemechanisme bevinden. Pas de linktekst aan zodat het doel van de links duidelijk wordt, bijvoorbeeld door het woord 'Pagina' toe te voegen. Dit geldt ook voor de links met de tekst 'Volgende' en 'Vorige'. Ditzelfde komt voor op pagina https://netwerkdigitaalerfgoed.nl/nieuws/.

Op pagina https://netwerkdigitaalerfgoed.nl/en/ staan onder 'National heritage institutions' logo's die zijn opgemaakt als links naar de betreffende organisaties, bijvoorbeeld 'KB nationale bibliotheek'. Deze link heeft via een aria-label een Engelstalige toegankelijke linktekst gekregen ('national library'), maar de tekst op de afbeelding komt niet in de alternatieve tekst voor. Daardoor kan het voor een bezoeker die deze tekst door een screenreader voorgelezen krijgt onduidelijk zijn dat het hier om een link naar de website van 'KB nationale bibliotheek' gaat. Wijzig de tekst van het aria-label zodat het voor de bezoeker duidelijk is waar de link naartoe leidt. Verwijder ook 'role="button"' van de link, zodat hulpsoftware kan herkennen dat het om een link gaat. Ditzelfde geldt voor de overige links met logo's op deze plek. Zie ook succescriterium 4.1.2.

Advies: Als op pagina https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ onder 'Ondertekenaars' gekozen wordt voor 'Toon in lijst', zijn artikelen te zien waarin verschillende links staan. Bij meerdere artikelen komt dezelfde link dubbel voor, maar met een andere linktekst. Bijvoorbeeld onder 'Drenthe, Erfgoednetwerk Emmen'. Omdat de ene link de tekst 'Nieuwsbericht' heeft en de andere link 'ErfgoedNetwerk Emmen onderschrijft manifest', kan het voor een bezoeker onduidelijk zijn dat deze links hetzelfde doel hebben. Los dit bijvoorbeeld op door de link met de tekst 'Nieuwsbericht' te verwijderen, en deze tekst op andere manier op te maken.

Advies: Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/ staan onder 'Gerelateerd nieuws' links. In het link-element (<a>) van deze links staan verschillende elementen die tekst bevatten, zoals de alt-tekst van de afbeelding, de teksten die als lijst-items zijn toegevoegd en een koptekst. Deze teksten worden geheel voorgelezen en vormen samen een lange linktekst. Uit deze linktekst wordt wel duidelijk waar de bezoeker terecht komt bij het volgen van de link, maar door de lengte van de tekst kan het toch lastig zijn om (snel) te navigeren. Kort de tekst in zodat bijvoorbeeld alleen de koptekst te horen is. Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten' en op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ bij de links onder 'Wat wij doen'. Een soortgelijk probleem doet zich voor op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/ bij de link 'Verbinden zit in ons DNA', waar zowel de kop als de alinea geheel als linktekst voorgelezen wordt.

Advies: De zoekresultaten op pagina https://netwerkdigitaalerfgoed.nl/?s=Schrijver zijn opgemaakt als links. In het link-element van een zoekresultaat staat zowel een koptekst als een gewone tekst, deze worden volledig voorgelezen door hulpsoftware zoals een screenreader. Dit maakt de linktekst erg lang. Het is beter om de linktekst te beperken tot bijvoorbeeld de koptekst, hieruit wordt voldoende duidelijk naar welk zoekresultaat de link leidt.

Advies: Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ kan via de knop 'Filter' een lijst met links geopend worden. In deze lijst staat een link met de naam 'Aggregation'. Deze link leidt naar een pagina met dummietekst. Omdat dit voor alle bezoekers onduidelijkheid kan scheppen en niet alleen voor bezoekers met een functiebeperking, wordt dit niet afgekeurd. Toch is het beter voor de toegankelijkheid en gebruikerservaring in het algemeen, als dit niet-bestaande filter wordt verwijderd of vervangen.

2.4.5 Meerdere manieren (Niveau AA)

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Voldoende

2.4.6 Koppen en labels (Niveau AA)

Koppen en labels beschrijven het onderwerp of doel.

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d staat een formulier waarin een invoerveld staat met daarbij het label 'Untitled'. Uit dit label kan de bezoeker niet afleiden welke invoer verwacht wordt in dit veld. Een label moet een duidelijke omschrijving geven van het bijbehorende element. Pas de tekst van het label aan.

2.4.7 Focus zichtbaar (Niveau AA)

Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, is de focus niet zichtbaar wanneer deze zich op de elementen in de header (het logo met link naar de homepagina, de menu-items, de zoekfunctie) bevindt. Daardoor is het voor bezoekers die navigeren via het toetsenbord en die geen gebruik maken van hulpsoftware zoals een screenreader, niet duidelijk waar de focus zich bevindt. Zorg ervoor dat het altijd duidelijk is waar de focus zich bevindt, bijvoorbeeld door een duidelijke focusrand toe te voegen aan de elementen. Ditzelfde geldt voor de submenu-items in het invouwbare menu dat te vinden is wanneer de pagina op een kleiner scherm bekeken wordt of wanneer ingezoomd wordt op de pagina.

Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, moet de bezoeker het selectievakje 'I'm not a robot' aanvinken en klikken op de knop 'Voeg mij toe aan de lijst'. Het is niet zichtbaar als deze knop focus heeft. Zorg dat de knop een duidelijke focusrand heeft op het moment dat de focus hierop staat.

Op verschillende pagina's staan elementen die geen focusrand krijgen wanneer de focus er via het toetsenbord naartoe gebracht wordt. Daardoor is het voor bezoekers die navigeren via het toetsenbord en die geen gebruik maken van hulpsoftware zoals een screenreader, niet duidelijk waar de focus zich op dat moment bevindt. Zorg ervoor dat het altijd duidelijk is waar de focus zich bevindt, bijvoorbeeld door een duidelijke focusrand toe te voegen aan de elementen. Een aantal voorbeelden van elementen die een focusrand missen:

De links onder 'Een greep uit onze activiteiten' op pagina https://netwerkdigitaalerfgoed.nl/.
De links naar het telefoonnummer en e-mailadres bij de contactpersonen op pagina https://netwerkdigitaalerfgoed.nl/contact/.
De links onder 'Activiteiten' en onder 'Nieuws' op pagina https://netwerkdigitaalerfgoed.nl/zichtbaar/.

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

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.

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Uitkomst: Niet aanwezig

2.5.2 Aanwijzerannulering (Niveau A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

Geen down-event: Het down-event van de aanwijzer wordt niet gebruikt om enig onderdeel van de functie uit te voeren;
Afbreken of ongedaan maken: De functie wordt voltooid door het up-event en er is een mechanisme beschikbaar om de functie af te breken voordat deze wordt voltooid of om de functie ongedaan te maken als deze is voltooid;
Up reversal: Met het up-event wordt elk resultaat van het voorgaande down-event ongedaan gemaakt;
Essentieel: Het voltooien van de functie met het down-event is essentieel.

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Uitkomst: Voldoende

2.5.3 Label in naam (Niveau A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, wordt een formulierveld met daarbij de knop 'Zoeken' uitgevouwen wanneer in de header op 'Zoeken' geklikt wordt. De knop waarop een icoon van een vergrootglas te zien is en waarmee de zoekopdracht uitgevoerd kan worden, heeft echter niet de naam 'Zoeken'. Dit komt doordat op het button-element 'aria-labelledby="header"' staat en de naam daardoor bestaat uit een opsomming van alle elementen die in de header staat. Voor bezoekers die gebruik maken van spraaksoftware is het hierdoor lastig om gebruik te maken van de functionaliteit van de knop. Om dit op te lossen kan 'aria-labelledby="header"' van het button-element verwijderd worden. Het aria-label met de tekst 'Zoeken' dat op deze knop staat voldoende. Zie ook succescriterium 1.1.1. en 4.1.2.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, wordt een formulierveld uitgevouwen wanneer in de header op 'Zoeken' geklikt wordt. Het invoerveld in dit formulier heeft als titel 'search', wat niet overeen komt met de tekst die zichtbaar is als placeholder in het invoerveld ('Zoeken'). Hierdoor kunnen bezoekers die gebruik maken van spraakgestuurde navigatie het veld niet of moeilijker bedienen. Pas de toegankelijke naam daarom aan.

2.5.4 Bewegingsactivering (Niveau A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

Ondersteunde interface: De beweging wordt gebruikt om de functionaliteit te bedienen via een door toegankelijkheid ondersteunde interface;
Essentieel: De beweging is essentieel voor de functie en wanneer de reactie op de beweging wordt uitgeschakeld, wordt de activiteit ongeldig gemaakt.

Informatie over succescriterium 2.5.4 Bewegingsactivering

Uitkomst: Niet aanwezig

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

De standaard menselijke taal van elke webpagina kan door software bepaald worden.

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevindingen: Op de pagina waar de bezoeker zich kan inschrijven voor de nieuwsbrief, https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, ontbreekt een taalaanduiding van de inhoud van de pagina. Daardoor is het voor hulpsoftware zoals een screenreader niet duidelijk in welke taal de pagina voorgelezen moet worden. Los dit op door een lang-attribuut met de landcode toe te voegen aan het HTML-element (lang="nl-NL").

In de eigenschappen van PDF https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.1.2 Taal van onderdelen (Niveau AA)

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/ staat een Engelstalige tekst vanaf de kop 'Sweden is actively pursuing a forward-looking National Digital Heritage Strategy'. Omdat de taalaanduiding van de pagina Nederlands is (lang="nl-NL"), leest hulpsoftware zoals een screenreader de Engelstalige tekst met een Nederlandse uitspraak uit. Voeg aan het element waarin de Engelstalige tekst staat een taalaanduiding toe (lang="en"). Ditzelfde komt ook voor bij de gehele content van pagina https://netwerkdigitaalerfgoed.nl/en/.

Op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d staat boven de knop 'Abonneren' een Engelstalige tekst van Mailchimp. Omdat deze taal afwijkt van de taal op de rest van de pagina, moet een taalcode (lang="en") toegevoegd worden aan de tekst zodat deze met de juiste uitspraak voorgelezen kan worden door hulpsoftware zoals een screenreader. Een betere oplossing zou zijn om de tekst te wijzigen naar een Nederlandstalige tekst.

Op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/ staat een carrousel waarbij de algemene naam 'carrousel navigation' is, de knoppen om naar een vorige of volgende slide te gaan de naam 'prev' en 'next' hebben, en de slides zelf de naam 'slide X of X' (waarbij X getallen zijn). Biedt interactieve elementen aan in de hoofdtaal van de pagina.

3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.

Informatie over succescriterium 3.2.1 Bij focus

Uitkomst: Voldoende

3.2.2 Bij input (Niveau A)

Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende

Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Voldoende

3.2.4 Consistente identificatie (Niveau AA)

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Voldoende

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d het formulier verzenden terwijl niet alle verplichte velden zijn ingevuld, verschijnt een foutmelding met de tekst 'Hieronder staan fouten'. Visueel is te begrijpen welke invoervelden dit betreft, omdat deze een rode rand hebben gekregen en de instructie 'Voer alstublieft een waarde in' eronder staat. Voor bezoekers die niet kunnen zien en gebruik maken van hulpsoftware zoals een screenreader is het lastig te begrijpen wat er fout is gegaan en welke invoervelden dit betreft. Dit komt doordat de informatie niet programmatisch aan de invoervelden gekoppeld is (waardoor het niet duidelijk is of de melding bij bovenstaand of onderstaand invoerveld hoort) en zintuiglijke informatie ('hieronder') niet begrijpelijk is voor mensen die niet kunnen zien. Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld 'Je e-mailadres' is niet ingevuld’. Let hierbij ook op het kleurcontrast van de foutmelding, zie hiervoor succescriterium 1.4.3.

3.3.2 Labels of instructies (Niveau A)

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Voldoende

Bevindingen: Advies: In het formulier op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d zijn sommige velden verplicht. Om welke velden dit gaat is niet te herkennen voordat het formulier verzonden is. Dit kan voor alle bezoekers onhandig zijn (en niet alleen voor bezoekers met een functiebeperking) en wordt daarom niet op toegankelijkheid afgekeurd. Wel is het beter om verplichte velden als zodanig herkenbaar te maken, bijvoorbeeld door het gebruik van een asterisk (*) en het plaatsten van een aria-required attribuut op deze velden.

3.3.3 Foutsuggestie (Niveau AA)

Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Voldoende

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)

Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:

Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Uitkomst: Niet aanwezig

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Voldoende

4.1.2 Naam, rol, waarde (Niveau A)

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevindingen: Wanneer een bezoeker voor de eerste keer op de website komt, is een cookiemelding te zien. Hierop staan twee knoppen, 'Accepteren' en 'Cookievoorkeuren'. Omdat deze elementen als links zijn opgemaakt met het a-element, worden deze als zodanig herkend en voorgelezen door hulpsoftware zoals een screenreader. Dit kan verwarrend werken, omdat deze elementen niet als link werken maar als knop. Bovendien hebben de elementen een verschillende naam maar dezelfde functionaliteit, waardoor verwarring kan ontstaan. Maak deze elementen op een andere manier op (bijvoorbeeld met het button-element), zodat hulpsoftware kan bepalen wat de functionaliteit is van de elementen. Zorg er hierbij voor dat de toegankelijke naam van de elementen overeenkomt met de functionaliteit. Zie succescriterium 2.4.4.

In de cookiemelding die te zien is als de bezoeker voor de eerste keer op de website komt, staat een knop (X) waarmee de cookiemelding afgesloten kan worden. Deze is niet opgemaakt als knop en voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet als zodanig herkenbaar omdat alleen de tekst 'klikbaar' te horen is. Ook is de knop niet focusbaar en bedienbaar. De knop heeft dezelfde functie als de de knop 'Accepteren'. Geef de knop een label waaruit dit duidelijk wordt en maak de knop op met het button-element, of verwijder de knop om dit op te lossen.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, staat in de header het logo van Netwerk Digitaal Erfgoed. Deze is vormgegeven als link met daarin verschillende svg-afbeeldingen. Aan de link waarin het logo staat is zowel 'aria-label' als 'aria-labelledby' toegevoegd. Hierbij wordt door hulpsoftware zoals een screenreader prioriteit gegeven aan 'aria-labelledby', waardoor als alternatieve tekst van het logo alle elementen van de header voorgelezen worden. Dit is niet de bedoeling. Verwijder het aria-labelledby attribuut en pas het aria-label aan. Een soortgelijk probleem komt voor bij het logo en de iconen in de links naar verschillende sociale media die in de footer staan, waarbij als alternatieve tekst alle elementen van de footer voorgelezen worden. Zie ook succescriterium 1.1.1, en 2.4.4.

Op meerdere pagina's, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, wordt een formulierveld met daarbij de knop 'Zoeken' uitgevouwen wanneer in de header op 'Zoeken' geklikt wordt. Door hulpsoftware zoals een screenreader wordt de 'Zoeken'-knop voorgelezen door alle elementen die in de header staan op te sommen. Dit komt doordat op het button-element dat bij het formulierveld staat (waarop een icoon van een vergrootglas te zien is), 'aria-labelledby="header"' staat. Hierdoor kan het voor bezoekers die hulpsoftware zoals een screenreader gebruiken onduidelijk zijn wat de functie van de knop is, en kan deze lastig worden aangesproken door bezoekers die gebruik maken van spraaksoftware. Los dit op door 'aria-labelledby="header"' te verwijderen van het button-element. Op de knop staat ook 'aria-label="Zoeken", dit is voldoende beschrijvend. Zie ook succescriterium 1.1.1. en 2.5.3.

In het menu dat op meerdere pagina's te zien is, bijvoorbeeld https://netwerkdigitaalerfgoed.nl/, heeft het menu-item 'Aan de slag' een submenu. Het menu-item is opgemaakt als lijst-item waarop een aria-label met de tekst 'Open submenu' is gezet. Deze tekst wordt echter niet voorgelezen door hulpsoftware zoals een screenreader. Ook is het attribuut role="open submenu" op dit element geplaatst, maar dit is geen geldige waarde voor dit attribuut. Zorg dat het menu-item op andere manier wordt opgemaakt zodat het submenu uitgevouwen en ingevouwen kan worden via het toetsenbord, en maak bijvoorbeeld gebruik van aria-expanded om de huidige staat van het submenu (ingevouwen of uitgevouwen) duidelijk te maken. Ditzelfde geldt voor ditzelfde menu-item in het invouwbare menu dat te vinden is wanneer de pagina op een kleiner scherm bekeken wordt of wanneer wordt ingezoomd op de pagina.

Wanneer bezoekers op pagina's (bijvoorbeeld https://netwerkdigitaalerfgoed.nl/) inzoomen vanaf 125% bij een schermgrootte van 1280 bij 1024 pixels, vouwt het menu samen onder een menuknop (hamburgermenu). Deze knop is niet toegankelijk vormgegeven. Voor bezoekers die navigeren via het toetsenbord is het niet mogelijk de knop te bereiken en te bedienen omdat deze niet focusbaar en functioneel is. Hierdoor kunnen zij het menu niet openen en kunnen zij niet zien dat de focus door alle menu-items heen gaat. Voor bezoekers die navigeren via het toetsenbord en daarnaast gebruik maken van hulpsoftware zoals een screenreader, is bij deze knop de tekst 'sluiten' te horen, terwijl voor hen niet duidelijk is waar deze tekst bij hoort. Los dit op door het hamburgermenu bijvoorbeeld op te maken als knop (met het button-element), hier een duidelijke naam aan te geven en te zorgen dat de status van de knop (ingevouwen of uitgevouwen) correct aan hulpsoftware wordt doorgegeven (gebruik bijvoorbeeld aria-expanded of een vergelijkbare techniek). Zie ook succescriterium 2.1.1 en 2.4.3.

Op pagina https://netwerkdigitaalerfgoed.nl/wat-wij-doen/ kan de bezoeker op onderwerp filteren via de knop 'Filter'. De lijsten met filter-opties zijn via het toetsenbord te bereiken en te bedienen, maar de uitvouwbare knop zelf is dat niet. Dit is voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader verwarrend. Voor hen is niet bekend dat zich hier een uitvouwbare knop bevindt waaronder filter-opties te vinden zijn, waardoor de filter-opties niet als zodanig begrepen kunnen worden. Los dit op door de filterknop bijvoorbeeld op te maken als knop (met het button-element), hier een duidelijke naam aan te geven en te zorgen dat de status van de knop (ingevouwen of uitgevouwen) correct aan hulpsoftware wordt doorgegeven (gebruik bijvoorbeeld aria-expanded of een vergelijkbare techniek). Zie ook succescriterium 2.1.1 en 2.4.3.
Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld pagina https://netwerkdigitaalerfgoed.nl/nieuws/ en https://netwerkdigitaalerfgoed.nl/agenda/.

Op pagina https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/organisatie/#sectoren-partijen staan onder 'Nationale erfgoedinstellingen als dragende partijen' verschillende logo's die linken naar de betreffende websites. Door hulpsoftware zoals een screenreader worden deze links voorgelezen als knoppen in plaats van links, waardoor het voor de bezoeker niet duidelijk is dat een andere website geopend wordt. Dit komt doordat op het link-element role="button" is geplaatst. Om dit op te lossen kan de rol verwijderd worden, hulpsoftware herkent het a-element op correcte wijze als link. Ditzelfde komt voor op pagina https://netwerkdigitaalerfgoed.nl/en/ onder 'National heritage institutions'.

4.1.3 Statusberichten (Niveau AA)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevindingen: Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d, moet de bezoeker het selectievakje 'I'm not a robot' aanvinken. Als de bezoeker dit doet en vervolgens ongeveer een minuut wacht, verloopt dit vinkje. De tekst met instructie 'Verification expired. Check the checkbox again' verschijnt bij het selectievakje. Deze tekst is Engelstalig en daardoor mogelijk niet door iedereen te begrijpen. Daarnaast wordt deze tekst niet voorgelezen door hulpsoftware zoals een screenreader, omdat het op het element waar deze in staat het attribuut 'aria-hidden="true" staat. Vervang deze melding door een Nederlandstalige melding en zorg dat deze door hulpsoftware voorgelezen wordt zonder dat de bezoeker de focus naar de melding hoeft te brengen.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bij dit onderzoek is de volgende software gebruikt:

Chrome, versie 119
Firefox, versie 119
NVDA, versie 2023.1
Acrobat PRO DC

Bronnen

Website Accessibility Conformance Evaluation Methodology (WCAG-EM) Overview
www.w3.org/WAI/eval/conformance (Engels)
Web Content Accessibility Guidelines (WCAG) 2.1 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG21-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.

Rapport: Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl

Samenvatting onderzoeksresultaat

Scope van de evaluatie

Overzicht toetsresultaat

Leeswijzer

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

1.2 Op tijd gebaseerde media

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

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

1.3.2 Betekenisvolle volgorde (Niveau A)

1.3.3 Zintuiglijke eigenschappen (Niveau A)

1.3.4 Weergavestand (Niveau AA)

1.3.5 Identificeer het doel van de input (Niveau AA)

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

1.4.2 Geluidsbediening (Niveau A)

1.4.3 Contrast (minimum) (Niveau AA)

1.4.4 Herschalen van tekst (Niveau AA)

1.4.5 Afbeeldingen van tekst (Niveau AA)

1.4.10 Reflow (Niveau AA)

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

1.4.12 Tekstafstand (Niveau AA)

1.4.13 Content bij hover of focus (Niveau AA)

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

2.1.2 Geen toetsenbordval (Niveau A)

2.1.4 Enkel teken sneltoets (Niveau A)

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

2.4.2 Paginatitel (Niveau A)

2.4.3 Focus volgorde (Niveau A)

2.4.4 Linkdoel (in context) (Niveau A)

2.4.5 Meerdere manieren (Niveau AA)

2.4.6 Koppen en labels (Niveau AA)

2.4.7 Focus zichtbaar (Niveau AA)

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

2.5.2 Aanwijzerannulering (Niveau A)

2.5.3 Label in naam (Niveau A)

2.5.4 Bewegingsactivering (Niveau A)

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

3.1.2 Taal van onderdelen (Niveau AA)

3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

3.2.2 Bij input (Niveau A)

3.2.3 Consistente navigatie (Niveau AA)

3.2.4 Consistente identificatie (Niveau AA)

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

3.3.2 Labels of instructies (Niveau A)

3.3.3 Foutsuggestie (Niveau AA)

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

4.1.2 Naam, rol, waarde (Niveau A)

4.1.3 Statusberichten (Niveau AA)

Onderbouwing van de evaluatie

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bronnen

Rapport:
Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl