Rapport:
Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld 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 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 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 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 netwerkdigitaalerfgoed.nl/ bij de links onder 'Nieuws', 'Onze vier werkterreinen' en 'Een greep uit onze activiteiten'.
• Op pagina netwerkdigitaalerfgoed.nl/contact/ bij de iconen die voor de telefoonnummers en e-mailadressen staan.
• Op pagina netwerkdigitaalerfgoed.nl/agenda/ bij de svg-afbeelding in de link in de kop 'Agenda'.

Op pagina 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 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 netwerkdigitaalerfgoed.nl/en/.

Op pagina 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 netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/ en netwerkdigitaalerfgoed.nl/implementatie/. Een vergelijkbaar probleem komt op meerdere pagina's voor, waaronder op pagina netwerkdigitaalerfgoed.nl/nieuws/ .

Op pagina netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-… 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 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 netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-… 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 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… staat een podcast. Hiervoor is geen media-alternatief, zoals een transcript, voor aanwezig. Voeg deze toe.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina 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 netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/activiteiten/big-picture-model/ en netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

Op pagina 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 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 netwerkdigitaalerfgoed.nl/zichtbaar/ en de koppen in de links onder 'Wat wij doen' op pagina netwerkdigitaalerfgoed.nl/wat-wij-doen/.

Op pagina 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 netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-…, bijvoorbeeld bij de kop 'Cross-domain National Strategy'.

Op pagina netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-… is de introtekst van de Engelstalige tekst op pagina netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-…, 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 netwerkdigitaalerfgoed.nl/toegankelijkheid/, en de laatste zin van het artikel op pagina netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/.

Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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 netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten', hier gaat het bijvoorbeeld om het woord 'Zichtbaar' in de links.
• Op pagina netwerkdigitaalerfgoed.nl/wat-wij-doen/ onder 'Wat wij doen', bijvoorbeeld 'Houdbaar'.
• Op pagina netwerkdigitaalerfgoed.nl/agenda/, bijvoorbeeld bij het agenda-item 'Introductiecursus Oral History' bij het woord 'Zichtbaar'.

De PDF netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-… 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 netwerkdigitaalerfgoed.nl/ ontbreekt een kop op kopniveau h1.
• Op meerdere pagina's ontbreekt een kop op kopniveau 2, bijvoorbeeld op pagina netwerkdigitaalerfgoed.nl/.
• 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, netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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.

Uitkomst: Onvoldoende

Bevindingen: Op netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten' en op pagina netwerkdigitaalerfgoed.nl/wat-wij-doen/ bij de links onder 'Wat wij doen'.

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-… 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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: www.w3.org/tr/wcag21/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina 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 netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ bij de tekst die begint met 'De principes in het manifest worden...'.

Op pagina 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 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 netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/ en netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-….

Op pagina 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 netwerkdigitaalerfgoed.nl/zichtbaar/. Ditzelfde komt voor bij de nieuwsberichten onder de kop 'Laatste nieuws' op pagina netwerkdigitaalerfgoed.nl/implementatie/ en onder de kop 'Gerelateerd nieuws' op pagina netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/.

Op pagina 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 netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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 netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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 netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-… 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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 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 netwerkdigitaalerfgoed.nl/nieuws/ en netwerkdigitaalerfgoed.nl/agenda/, ook hier is de 'Filter'-knop niet meer goed bedienbaar bij inzoomen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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 niet inzoomen. Laat deze instelling weg.

Op pagina netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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.

Op pagina 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 netwerkdigitaalerfgoed.nl/nieuws/ en netwerkdigitaalerfgoed.nl/agenda/, ook hier is de 'Filter'-knop niet meer goed bedienbaar bij inzoomen.

Uitkomst: Voldoende

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 netwerkdigitaalerfgoed.nl/contact/, netwerkdigitaalerfgoed.nl/zichtbaar/ en netwerkdigitaalerfgoed.nl/toegankelijkheid/. Zorg ervoor dat alle content in beeld blijft.

Uitkomst: Voldoende

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 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 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 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 netwerkdigitaalerfgoed.nl/nieuws/ en netwerkdigitaalerfgoed.nl/agenda/.

Op pagina 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 netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/ en netwerkdigitaalerfgoed.nl/en/.

Op pagina 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina 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 netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/ staat.

Uitkomst: Onvoldoende

Bevindingen: Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina 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 netwerkdigitaalerfgoed.nl/en/ en netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/.

Op pagina 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld 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 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.

Uitkomst: Onvoldoende

Bevindingen: De paginatitel van de pagina waarop de bezoeker zich kan inschrijven voor de nieuwsbrief, netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-… 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.

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 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 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 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 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 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 netwerkdigitaalerfgoed.nl/nieuws/ en netwerkdigitaalerfgoed.nl/agenda/.

Op pagina netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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.

Op pagina netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… staat een podcast met een titel die begint met 'Podcast Paulus en De Nijs op reis met..'. Hierin komt een bezoeker die navigeert via het toetsenbord een lijst met twintig items (bestaande uit links naar andere podcasts) tegen. Deze lijst is niet zichtbaar op de pagina, en moet daarom verwijderd worden uit de focusvolgorde.

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 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 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 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 netwerkdigitaalerfgoed.nl/ 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 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 netwerkdigitaalerfgoed.nl/nieuws/.

Op pagina 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 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 netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-… 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 netwerkdigitaalerfgoed.nl/zichtbaar/ onder 'Activiteiten' en op pagina netwerkdigitaalerfgoed.nl/wat-wij-doen/ bij de links onder 'Wat wij doen'. Een soortgelijk probleem doet zich voor op pagina 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 netwerkdigitaalerfgoed.nl/ 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 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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.

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld 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 netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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 netwerkdigitaalerfgoed.nl/.
• De links naar het telefoonnummer en e-mailadres bij de contactpersonen op pagina netwerkdigitaalerfgoed.nl/contact/.
• De links onder 'Activiteiten' en onder 'Nieuws' op pagina netwerkdigitaalerfgoed.nl/zichtbaar/.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina's, bijvoorbeeld 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 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.

Op pagina 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. Hierdoor is de link niet te bedienen voor bezoekers die gebruik maken van spraakgestuurde navigatie. Wijzig de tekst van het aria-label zodat de zichtbare naam voorkomt in de toegankelijke naam.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina waar de bezoeker zich kan inschrijven voor de nieuwsbrief, netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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 netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-… is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

Uitkomst: Onvoldoende

Bevindingen: Op pagina netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-… 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 netwerkdigitaalerfgoed.nl/en/.

Op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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 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.

Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, moet de bezoeker het selectievakje met label 'I'm not a robot' aanvinken. Omdat de tekst van dit label Engelstalig is, is deze mogelijk niet door iedereen te begrijpen. Vervang de tekst door Nederlandstalige tekst.

Op meerdere pagina's, bijvoorbeeld netwerkdigitaalerfgoed.nl/, wordt een formulierveld uitgevouwen wanneer in de header op 'Zoeken' geklikt wordt. Het invoerveld in dit formulier heeft als titel 'search'. Biedt interactieve elementen aan in de hoofdtaal van de pagina, in dit geval Nederlands.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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.

Uitkomst: Voldoende

Bevindingen: Advies: In het formulier op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe 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.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

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

Op pagina 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 2.4.4.

In het menu dat op meerdere pagina's te zien is, bijvoorbeeld 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 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 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 netwerkdigitaalerfgoed.nl/nieuws/ en netwerkdigitaalerfgoed.nl/agenda/.

Op pagina netwerkdigitaalerfgoed.nl/wie-wij-zijn/organisatie/ 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 netwerkdigitaalerfgoed.nl/en/ onder 'National heritage institutions'.

Uitkomst: Onvoldoende

Bevindingen: Na het invullen van het formulier en klikken op de knop 'Abonneren' op pagina netwerkdigitaalerfgoed.us11.list-manage.com/subscribe, 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.