Issues:
Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: 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).

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

Bevinding 3: 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.

Bevinding 4: 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'.

Bevinding 5: 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.

Bevinding 6: 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/.

Bevinding 7: 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/ .

Bevinding 8: 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.

Bevinding 9: 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.

Bevinding 10: 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.

Bevinding 11: 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.

Bevinding 12: 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)

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

Bevinding 13: 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. Hiervoor is geen media-alternatief, zoals een transcript, voor aanwezig. Voeg deze toe.

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

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

Bevinding 14: 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.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 15: 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 over succescriterium 1.3.1 Info en relaties

Bevinding 16: 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/.

Bevinding 17: 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.

Bevinding 18: 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/.

Bevinding 19: 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'.

Bevinding 20: 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/.

Bevinding 21: 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'.

Bevinding 22: 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'.

Bevinding 23: 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.

Bevinding 24: 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.

Bevinding 25: 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.

Bevinding 26: 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)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 27: 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)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 28: 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.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 29: 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.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 30: 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...'.

Bevinding 31: 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.

Bevinding 32: 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.

Bevinding 33: 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/.

Bevinding 34: 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/.

Bevinding 35: 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.

Bevinding 36: 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.

Bevinding 37: 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.

Bevinding 38: 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.

Bevinding 39: 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.

Bevinding 40: 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.

Bevinding 41: 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.

Bevinding 42: 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)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 43: 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.

Bevinding 44: 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.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 45: 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 niet inzoomen. Laat deze instelling weg.

Bevinding 46: 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.

Bevinding 47: 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.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 48: 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.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 49: 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.

Bevinding 50: 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.

Bevinding 51: 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.

Bevinding 52: 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/.

Bevinding 53: 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/.

Bevinding 54: 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.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 55: 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)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 56: 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)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 57: 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/.

Bevinding 58: 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.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 59: 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.

Bevinding 60: 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)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 61: 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.

Bevinding 62: 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.

Bevinding 63: 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)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 64: 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.

Bevinding 65: 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.

Bevinding 66: 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.

Bevinding 67: 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.

Bevinding 68: 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.

Bevinding 69: 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/.

Bevinding 70: 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.

Bevinding 71: 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 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.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 72: 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.

Bevinding 73: 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.

Bevinding 74: 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.

Bevinding 75: 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.

Bevinding 76: 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.

Bevinding 77: 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/.

Bevinding 78: 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.

Bevinding 79: 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.

Bevinding 80: 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.

Bevinding 81: 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.

Bevinding 82: 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.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 83: 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)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 84: 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.

Bevinding 85: 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.

Bevinding 86: 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.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 87: 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.

Bevinding 88: 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.

Bevinding 89: 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. 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.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 90: 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").

Bevinding 91: 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)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 92: 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/.

Bevinding 93: 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.

Bevinding 94: 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.

Bevinding 95: 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 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.

Bevinding 96: 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'. Biedt interactieve elementen aan in de hoofdtaal van de pagina, in dit geval Nederlands.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 97: 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)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 98: 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.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 99: 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.

Bevinding 100: 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.

Bevinding 101: 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.

Bevinding 102: 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.

Bevinding 103: 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 2.4.4.

Bevinding 104: 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.

Bevinding 105: 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.

Bevinding 106: 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/.

Bevinding 107: 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)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 108: 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

• Homepagina:
  https://netwerkdigitaalerfgoed.nl/
• Contact:
  https://netwerkdigitaalerfgoed.nl/contact/
• Zoekresultaten:
  https://netwerkdigitaalerfgoed.nl/?s=Schrijver
• Podcast:
  https://netwerkdigitaalerfgoed.nl/nieuws/podcast-paulus-en-de-nijs-op-reis-met-marieke-van-erp-met-je-neus-naar-schilderijen-kijken/
• Video 1:
  https://netwerkdigitaalerfgoed.nl/zichtbaar/
• Toegankelijkheid:
  https://netwerkdigitaalerfgoed.nl/toegankelijkheid/
• 404-pagina:
  https://netwerkdigitaalerfgoed.nl/404
• Wie wij zijn:
  https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/
• Wie wij zijn sub:
  https://netwerkdigitaalerfgoed.nl/wie-wij-zijn/organisatie/#sectoren-partijen
• Wat wij doen:
  https://netwerkdigitaalerfgoed.nl/wat-wij-doen/
• Nieuws:
  https://netwerkdigitaalerfgoed.nl/nieuws/
• Agenda:
  https://netwerkdigitaalerfgoed.nl/agenda/
• Agenda item:
  https://netwerkdigitaalerfgoed.nl/agenda/introductiecursus-oral-history/
• PDF pagina 1 (en infographic):
  https://netwerkdigitaalerfgoed.nl/activiteiten/big-picture-model/
• PDF 1:
  https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2021/01/IP-2020-4-Duurzame-toegankelijkheid-Marlene-Rooseman.pdf
• PDF pagina 2:
  https://netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/
• PDF 2:
  https://netwerkdigitaalerfgoed.nl/wp-content/uploads/2022/01/Netwerk-Digitaal-Erfgoed-Activiteitenplan-2022.pdf
• Engels 1:
  https://netwerkdigitaalerfgoed.nl/en/
• Kaart:
  https://netwerkdigitaalerfgoed.nl/activiteiten/manifest-netwerk-digitaal-erfgoed/
• Inschrijven nieuwsbrief:
  https://netwerkdigitaalerfgoed.us11.list-manage.com/subscribe?u=cec5c474f2bd6d8651ff822e1&id=f0107ce56d
• Aan de slag-implementatie:
  https://netwerkdigitaalerfgoed.nl/implementatie/
• Video 2:
  https://netwerkdigitaalerfgoed.nl/activiteiten/preserveringstools/
• Engels 2:
  https://netwerkdigitaalerfgoed.nl/nieuws/zweden-maakt-werk-van-een-toekomstgerichte-nationale-strategie-digitaal-erfgoed/

Ondersteunende technieken

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

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.