Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website netwerkdigitaalerfgoed.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website netwerkdigitaalerfgoed.nl
Datum 16 mei 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op netwerkdigitaalerfgoed.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 16

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit:
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 een svg-afbeelding. De link heeft op de juiste manier een toegankelijke naam gekregen, hieruit wordt ook duidelijk dat zich hier een afbeelding van het logo bevindt. Daarom kan de svg-afbeelding gezien worden als decoratief en worden verborgen voor hulpsoftware. De svg-afbeelding heeft nu een alt-attribuut gekregen met de tekst 'Netwerk Digitaal Erfgoed', maar een alt-attribuut werkt niet in een svg-element. Een svg-element wordt in sommige browsers door bepaalde hulpsoftware herkend als afbeelding, daarom moet ervoor gezorgd worden dat dit niet gebeurt als de afbeelding decoratief is zoals in dit geval. Verberg de svg-afbeelding voor hulpsoftware door het aria-hidden="true" attribuut aan het svg-element toe te voegen. Een soortgelijk probleem komt voor bij het logo dat op meerdere pagina's in de footer staat.

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

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

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: 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 5: 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 voor bij de laatste zin van het artikel op pagina https://netwerkdigitaalerfgoed.nl/nieuws/dit-zijn-de-belangrijkste-activiteiten-van-de-netwerkagenda-2022/.

Bevinding 6: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit:
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...'. Het label 'Implementatie' staat binnen een ul-element, waardoor hulpsoftware zoals een screenreader voorleest dat zich hier een lijst bevindt. De lijst bevat geen li-elementen (lijst-items). Omdat het in dit geval niet om een opsomming gaat, mag dit niet als een lijst opgemaakt worden. Verwijder ook het ul-element. Ditzelfde komt op meerdere pagina's voor, bijvoorbeeld op pagina https://netwerkdigitaalerfgoed.nl/agenda/, bijvoorbeeld bij het agenda-item 'Zo maak je je website groener' bij het woord 'Zichtbaar'.

Bevinding 7: 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 door de inhoud van de pagina 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:

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 8: Het inschrijfformulier voor de nieuwsbrief, dat in de footer via de knop 'Open inschrijf formulier nieuwsbrief' geopend kan worden, bevat invoervelden waarin 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.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 9: Het inschrijfformulier voor de nieuwsbrief, dat in de footer via de knop 'Open inschrijf formulier nieuwsbrief' geopend kan worden, bevat een afsluitknop (X) waarmee het formulier afgesloten kan worden. Als bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 200% en de bezoeker navigeert over de pagina, komt de witte knop (X) geheel op witte achtergrond te staan, waardoor deze niet zichtbaar is. De contrastverhouding is dan 1:1. Zorg ervoor dat de contrastverhouding altijd minimaal 3:1 is.

2. Bedienbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 10: 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. Zorg dat de focus pas na het uitvouwen van het menu op de menu-items kan vallen.

Bevinding 11: Het inschrijfformulier voor de nieuwsbrief, dat in de footer via de knop 'Open inschrijf formulier nieuwsbrief' geopend kan worden, bevat focusbare elementen zoals links, invoervelden en knoppen. Bezoekers die navigeren via het toetsenbord, komen deze elementen niet in een logische volgorde tegen. De focus gaat eerst naar de invoervelden, dan naar de knop waarmee het inschrijfformulier afgesloten kan worden, en daarna naar de links 'nieuwsbrief' en 'nieuwsbrievenarchief' die visueel bovenaan het formulier staan. Dit komt doordat op de input-elementen in het formulier het tabindex-attribuut met een waarde groter dan nul is geplaatst. Het is beter om het tabindex-attribuut niet te gebruiken om de focusvolgorde te bepalen, en geen tabindex met een waarde groter dan nul te gebruiken. Dat de focusbare elementen in de juiste volgorde staan in HTML (wat hier het geval is), is voldoende. Verwijder het tabindex-attribuut.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

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

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 13: 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.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

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

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 15: Het inschrijfformulier voor de nieuwsbrief, dat in de footer via de knop 'Open inschrijf formulier nieuwsbrief' geopend kan worden, bevat foutmeldingen die na verzending verschijnen bij verplichte velden die niet zijn ingevuld.
Boven het formulier verschijnt de melding 'Er was een probleem met je inzending. Controleer de onderstaande velden.'. Ook bij de betreffende velden komt een foutmelding te staan; 'Dit veld is vereist'. Dat een veld vereist is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3, maar het is geen goede foutidentificatie. Voor een foutidentificatie zijn de teksten van de meldingen onvoldoende beschrijvend. Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld Je e-mailadres is niet ingevuld’.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

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

Onderbouwing van de evaluatie

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

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

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

Geprint: 2025-04-12 03:36:02 v2.4-011