Rapport:
Audit digitale toegankelijkheid website e-depot.drentsarchief.nl

Uitkomst: Onvoldoende

Bevindingen: Op pagina e-depot.drentsarchief.nl/ staat op de zoek-knop 'E-depot' een icoon waarop een vergrootglas te zien is. Dit icoon maakt de knop visueel herkenbaar als zoek-knop. Doordat het icoon geen alternatieve tekst heeft, is voor bezoekers die het icoon niet kunnen zien mogelijk onduidelijk wat de functie van de knop is. Los dit bijvoorbeeld op door een visueel verborgen tekst (een screenreader only tekst) te plaatsen op de pagina of door gebruik te maken van een aria-label op het button-element. Ditzelfde probleem komt voor bij het zoekveld in de header op meerdere pagina's, bijvoorbeeld e-depot.drentsarchief.nl/contactgegevens/ en e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/.

Het PDF document 'Evaluatieverslag E-depot, pilot informatieplattegrond gemeente Meppel' dat op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ te vinden is, kan worden gedownload door de bezoeker. Het document bevat verschillende afbeeldingen die niet op de juiste manier voor hulpsoftware zijn verborgen, of die geen goede alternatieve tekst hebben. Los dit op door decoratieve afbeeldingen te verbergen door deze als artefact te markeren in de codelaag, en de informatieve afbeeldingen een beschrijvende alternatieve tekst te geven. Afbeeldingen waarbij problemen voorkomen:

• Vanaf pagina 3 staat op elke pagina het logo van 'Drents archief'. Deze afbeelding heeft geen tag. Tag het logo op pagina 3 als afbeelding en geef deze een beschrijvende tekst. Verberg eventueel de logo's op de volgende pagina's.
• Op pagina 7 staat de afbeelding 'Uitvoering stappenplan'. Tag deze afbeelding en voeg een duidelijke beschrijvende tekst toe, of verberg de afbeelding en maak de informatie die op de afbeelding te zien is op andere wijze beschikbaar in het document (bijvoorbeeld door deze als gewone tekst toe te voegen).
• Op pagina 11 heeft de afbeelding van het cirkeldiagram 'Vernietiging in applicaties' een beschrijvende alternatieve tekst. Na de alternatieve tekst wordt echter ook de legenda voorgelezen waarin de kleuren verklaard worden. Dit kan verwarrend werken en doordat de cirkeldiagram in de alternatieve tekst goed beschreven is, is de legenda decoratief. Verberg deze daarom voor hulpsoftware.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina e-depot.drentsarchief.nl/over-ons/ is de alinea met introtekst onder 'Over ons' dikgedrukt gemaakt door middel van het strong-element. Het strong-element is bedoeld om enkele woorden nadruk te geven, maar niet voor een hele alinea. Maak gebruik van de eigenschappen van CSS om de introtekst te stylen.

Op pagina e-depot.drentsarchief.nl/contactgegevens/ is de tekst 'Wie zijn het e-depotteam van het Drents Archief?' als kop herkenbaar gemaakt door deze dikgedrukt te maken met het strong-element. Voor hulpsoftware zoals een screenreader is de tekst niet herkenbaar als kop, omdat deze niet met de juiste code is opgemaakt. Maak de kop op met bijvoorbeeld het h2-element, en maak voor de styling gebruik van de eigenschappen van CSS.

Op de homepagina e-depot.drentsarchief.nl/ staat een kop (op kopniveau h5) met daarin de link 'Demo Archief'. Deze kop bevat geen content. In HTML staan onder deze kop een aantal lege of onzichtbaar gemaakte div-elementen. Daarop volgt de content die in de footer staat, waardoor het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader lijkt alsof de kop deze beschrijft, wat niet klopt. De functie van een kop is het beschrijven van de bijbehorende content, als een element deze functie niet heeft mag deze niet als kop zijn opgemaakt. Los dit bijvoorbeeld op door de link 'Demo Archief' als link op de pagina te plaatsten, en het h5-element te verwijderen. Zie succescriterium 2.4.6.

Op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ staat de kop op kopniveau h5 'Drents-archief-evaluatierapport-pilot-2022'. Deze kop bevat geen content omdat deze direct opgevolgd wordt door een kop op hetzelfde kopniveau ('Beschrijving'). Zorg ervoor dat elke kop content bevat die door deze kop beschreven wordt, als deze content begint met een nieuwe kop kan deze opgemaakt worden op het volgende kopniveau. Ditzelfde komt voor bij meerdere koppen op de pagina, zoals bijvoorbeeld 'Betrokkene' en 'Onderwerp'. Op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ komt op dezelfde plek hetzelfde probleem voor.

Op pagina e-depot.drentsarchief.nl/ staat onder 'Verfijn de selectie' een lijst met keuzevakjes. De lijst waarin de keuzevakjes zijn opgemaakt, bevat daarnaast ook de link 'toon 3 meer'. Deze link staat in een p-element dat binnen het ul-element staat. Binnen een lijst-element (<ul>) mogen alleen lijst-items (<li>) voorkomen en geen andere elementen. Verplaats de link in HTML zodat deze buiten de lijst staat. Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/.

Als op pagina e-depot.drentsarchief.nl/ is geklikt op 'toon 3 meer' verschijnen keuzevakjes die als lijst-items (<li>) zijn opgemaakt. Deze lijst-items staan in HTML in een div-element, waardoor het correcte parent-element ontbreekt en deze door hulpsoftware niet goed geïnterpreteerd kunnen worden. Maak de lijst-items op een andere manier op, zodat deze binnen een ul-element staan. Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/.

Het PDF document 'Evaluatieverslag E-depot, pilot hybride archieven Borger-Odoorn' dat op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ te vinden is, kan worden gedownload door de bezoeker. Het document is niet toegankelijk voor bezoekers die gebruik maken van hulpsoftware. Dit komt doordat de PDF niet is 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 codelaag zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Het PDF document 'Evaluatieverslag E-depot, pilot informatieplattegrond gemeente Meppel' dat op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ te vinden is, kan worden gedownload door de bezoeker. Het document bevat verschillende toegankelijkheidsproblemen voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. Dit komt doordat niet alle elementen van de juiste tag zijn voorzien in de codelaag. Los dit op door de codelaag aan te passen en de juiste tags toe te voegen. Een aantal voorbeelden van problemen die in het document voorkomen:

• Op pagina 5 is de tekst onder 'Definitie van een informatieplattegrond' getagd als een lijst-item. Omdat het hier niet om een opsomming of lijst gaat, kan het verwarrend werken dat het als zodanig voorgelezen wordt.
• Op pagina 2 zijn de lijsten niet correct getagd. De lijst onder 'Aanbevelingen gemeente Meppel' staat getagd onder het achtste lijst-item van de lijst die erboven staat. Dit kan verwarring opleveren over de structuur van de lijsten en over het onderwerp waar de lijst-items bij horen.

- Op verschillende pagina's zijn koppen opgemaakt als images. De opmaak van deze elementen is correct, semantische tags zijn gebruikt en de daadwerkelijke tekst op de afbeelding is aangegeven. Echter, het is beter om geen afbeeldingen van tekst te gebruiken. Zet daarom de tekst op de afbeeldingen als gewone tekst op de pagina.

Advies: Op verschillende pagina's wordt niet op de juiste manier gebruik gemaakt van een koppenstructuur. Voor bezoekers die gebruik maken van hulpsoftware zoals 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 e-depot.drentsarchief.nl/ worden de kopniveaus h3 en h4 overgeslagen.
• Op pagina e-depot.drentsarchief.nl/ worden de kopniveaus h2 en h3 overgeslagen.
• Op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ worden de kopniveaus h2, h3 en h4 overgeslagen.

Opmerking: Verschillende PDF's op de website zijn niet toegankelijk, bijvoorbeeld de PDF die te downloaden is vanaf pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/. Voor de inhoud van een archief gelden speciale regels, niet alles in een archief hoeft toegankelijk te zijn. Controleer of de inhoud van het archief echt toegankelijk moet zijn aan de hand van de informatie op digitoegankelijk.nl/aan-de-slag/tips/inhoud-van-archieven. Hierop kan de toegankelijkheidsverklaring eventueel worden aangepast.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In het PDF document 'Evaluatieverslag E-depot, pilot informatieplattegrond gemeente Meppel' dat op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ te vinden is, staat op pagina 11 een cirkeldiagram 'Vernietiging in applicaties'. De informatie die hierin te zien is, is alleen aan de kleur herkenbaar. Voor sommige bezoekers (die bijvoorbeeld kleurenblind zijn) is de informatie daardoor niet af te lezen. Zorg dat de informatie op meer manieren dan alleen door kleur wordt overgebracht.

Advies: Op pagina e-depot.drentsarchief.nl/toegankelijkheid/ staat een e-mailadres dat is opgemaakt als link (e-depot@drentsarchief.nl). De link is alleen te onderscheiden doordat deze een andere kleur heeft dan de omliggende tekst, waardoor voor sommige mensen lastig te herkennen is dat hier een link staat. Dit wordt niet op toegankelijkheid afgekeurd, omdat het kleurcontrast met de omliggende tekst wel voldoende is. Toch zijn links beter herkenbaar als deze op meerdere manieren te onderscheiden zijn, bijvoorbeeld door deze te onderstrepen. Ditzelfde komt voor op pagina e-depot.drentsarchief.nl/over-ons/ onder de kop 'Meer weten?'.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina e-depot.drentsarchief.nl/contactgegevens/ staat in de header een zoekveld waarin de placeholdertekst 'zoek in' staat. Het grijze (HEX #AAAAAA) lettertype heeft onvoldoende contrast met de witte achtergrond. De contrastverhouding is 2.3:1 waar deze minimaal 4.5:1 moet zijn. Ditzelfde komt op meerdere pagina's voor in het zoekveld, bijvoorbeeld op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ en e-depot.drentsarchief.nl/.

In het PDF document 'Evaluatieverslag E-depot, pilot informatieplattegrond gemeente Meppel' dat op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ te vinden is, staat op pagina 7 de afbeelding 'Uitvoering stappenplan'. Hierin zijn de nummers 1 tot en met 7 in een wit lettertype op een grijze (HEX #C0C3C7) achtergrond te zien. Het contrast is te laag. De contrastverhouding is 1.7:1 waar deze minimaal 4.5:1 moet zijn.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: 'maximum-scale=1.0'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Als de bezoeker op onder andere pagina e-depot.drentsarchief.nl/ inzoomt tot 110% bij een schermgrootte van 1280 bij 1024 pixels verdwijnt de knop 'terug naar boven' (deze staat in de footer) uit beeld. Als de bezoeker verder inzoomt tot 125%, verdwijnt ook de menuknop 'Mijn favorieten' en een deel van de tekst op de pagina uit beeld. Zorg dat alle content in beeld blijft bij inzoomen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: 'maximum-scale=1.0'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Uitkomst: Onvoldoende

Bevindingen: In het PDF document 'Evaluatieverslag E-depot, pilot informatieplattegrond gemeente Meppel' dat op pagina e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ te vinden is, staat op pagina 11 de afbeelding 'Vernietiging in applicaties'. Hierin zijn verschillende kleuren te zien die onvoldoende contrast hebben met de witte achtergrond. De gele (HEX #FFC000) kleur heeft een contrastverhouding van 1.6:1, de groene (HEX #70AD47) kleur heeft een contrastverhouding van 2.7:1 en de blauwe (HEX #5B9BD5) kleur heeft een contrastverhouding van 2.9:1. Zorg ervoor dat de contrastverhouding overal minimaal 3:1 is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als de bezoeker op onder andere pagina e-depot.drentsarchief.nl/ bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 175%, vouwt het menu samen onder een menuknop (hamburgermenu). Het is niet mogelijk om via het toetsenbord de focus naar dit menu te brengen. Daardoor is het menu lastig te bereiken en te bedienen door bezoekers die afhankelijk zijn van navigatie via het toetsenbord. De menuknop wordt op de pagina ingeladen via de CSS en het ::before en ::after pseudo-element. Los dit bijvoorbeeld op door de menuknop in HTML te plaatsen als knop met het button-element. Zie succescriterium 4.1.2.

Op onder andere pagina e-depot.drentsarchief.nl/ wordt de zoekfunctie samengevouwen onder de knop 'Zoek in e-depot' als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 175%. Het is niet mogelijk om via het toetsenbord de focus naar deze knop te brengen. De knop is in HTML opgemaakt als klikbaar div-element. Los dit bijvoorbeeld op door het div-element focusbaar te maken, of maak de knop op met het button-element. Zie succescriterium 4.1.2.

Op pagina e-depot.drentsarchief.nl/ staat voor 'Filters' een klikbare afbeelding waarop een icoon van een afvalbak te zien is. Deze fungeert als knop waarmee het filter verwijderd kan worden. Voor bezoekers die navigeren via het toetsenbord is het lastig om dit element te bereiken en te bedienen, doordat deze niet focusbaar is. Ook staat er 'aria-hidden' op. Los dit bijvoorbeeld op door de klikbare afbeelding op een andere manier op te maken, bijvoorbeeld door dit als knop (button) in HTML te plaatsen en de knop een goede toegankelijke naam te geven. Zie succescriterium 4.1.2.

Op pagina e-depot.drentsarchief.nl/ staan onder 'Verfijn de selectie' keuzevakjes. Bij elk keuzevakje is dezelfde naam te zien, deze bestaat uit de tekst 'drents-archief-eva'. Bezoekers kunnen de muisaanwijzer naar de tekst toe brengen om de volledige titel van het zoekresultaat te zien, maar voor bezoekers die navigeren via het toetsenbord is dit niet mogelijk. Voor deze bezoekers zijn de zoekresultaten hierdoor niet te onderscheiden. Dit komt doordat de tekst in het label-element van de keuzevakjes 'drents-archief-eva' is, en de volledige titel van het document alleen in een title-attribuut is toegevoegd. Los dit op door de teksten in het label-element bij de keuzevakjes aan te passen, bijvoorbeeld door deze te laten beginnen met de unieke tekst van het document (bijvoorbeeld 'Pilot videotulen 2021 gemeente Emmen'). Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/. Zie succescriterium 4.1.2.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina ontbreekt een mechanisme waarmee content die op elke pagina herhaald wordt (zoals bijvoorbeeld het menu). Dit kan opgelost worden door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

Uitkomst: Onvoldoende

Bevindingen: De paginatitel van de homepagina e-depot.drentsarchief.nl/ is '| Drents Archief'. Deze titel beschrijft de unieke pagina onvoldoende. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen als eerste de paginatitel te horen als ze op een pagina komen, daarom is het belangrijk dat hieruit afgeleid kan worden om welke pagina het gaat. Pas de paginatitel aan, zodat hierin eerst de naam van de unieke pagina en daarna de naam van de organisatie staat.

Het PDF document 'Evaluatieverslag E-depot, pilot hybride archieven Borger-Odoorn' dat op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ te vinden is, kan worden gedownload door de bezoeker. Dit document 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.

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina e-depot.drentsarchief.nl/ is de afbeelding die in de header staat verborgen voor hulpsoftware, maar door 'tabindex="0"' is deze wel focusbaar gemaakt. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen de tekst 'leeg' voorgelezen als de focus naar dit element wordt gebracht, ziende bezoekers die navigeren via het toetsenbord zien niet waar de focus zich bevindt als deze op dit element valt. Los dit op door het 'tabindex="0"' attribuut te verwijderen.

Op pagina e-depot.drentsarchief.nl/ kan de bezoeker de weergavestijl van de zoekresultaten aanpassen via drie knoppen die gegroepeerd zijn. Aan het element waarin de knoppen staan is de tekst 'toon selectie als: lijst, tabel, tegel' toegevoegd. Deze tekst is visueel niet zichtbaar op de pagina, maar door 'tabindex="0"' is de tekst wel focusbaar gemaakt. Voor bezoekers die wel kunnen zien maar afhankelijk zijn van navigatie via het toetsenbord, kan dit verwarrend werken. Zorg ervoor dat elementen die niet zichtbaar zijn, geen focus kunnen krijgen. Ditzelfde komt voor op pagina e-depot.drentsarchief.nl/ en e-depot.drentsarchief.nl/archive. Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/, waar de knoppen waarmee de weergavestijl aangepast kan worden zijn samengevoegd in een span-element met de tekst 'toon metadata'. Zie succescriterium 2.4.7.

Op pagina e-depot.drentsarchief.nl/ staat onder de kop '8 totale resultaten' een div-element waarin een leeg p-element staat dat focusbaar is gemaakt met 'tabindex="0"'. Omdat het hier om een leeg element gaat, kan het voor bezoekers die navigeren via het toetsenbord (zowel bezoekers die kunnen zien als zij die dat niet kunnen) verwarrend zijn als de focus hierop valt. Verwijder 'tabindex="0"' van dit element, of verwijder het element.

Op onder andere pagina e-depot.drentsarchief.nl/ wordt het menu samengevouwen onder een uitvouwbare menuknop (hamburgermenu) als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 175%. Als dit menu wordt uitgevouwen kan de bezoeker via het toetsenbord de focus verplaatsen naar elementen die buiten het uitgevouwen menu op de pagina staan. Omdat het uitgevouwen menu de content van de pagina deels bedekt kan de bezoeker niet zien waar de focus zich bevindt als deze staat op een element dat achter het menu staat. Zorg dat de focus pas uit het uitgevouwen menu verplaatst kan worden nadat deze weer ingevouwen is.

Nadat op pagina e-depot.drentsarchief.nl/ onder 'Verfijn de selectie' is gedrukt op de link 'toon 3 meer', springt de focus naar het eerste zoekresultaat als de bezoeker op de tab-toets drukt. Om de drie extra keuzevakjes die verschijnen na het volgen van de link te bereiken moet de bezoeker terug navigeren. Pas de focusvolgorde hier aan, zodat de focus na het volgen van de link naar het eerste nieuw verschenen keuzevakje springt. Hetzelfde probleem komt voor op pagina e-depot.drentsarchief.nl/.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina (bijvoorbeeld e-depot.drentsarchief.nl/) staat in het menu een link naar 'Mijn favorieten'. Via het title-attribuut heeft deze link de toegankelijke naam 'Mijn favorieten' gekregen, maar het title-attribuut wordt overschreven door het icoon dat binnen het a-element is geplaatst via CSS. Daardoor is voor sommige bezoekers die gebruik maken van hulpsoftware zoals een screenreader het doel van de link onduidelijk. Het wordt niet aangeraden om gebruik te maken van het title-attribuut voor de toegankelijke namen van elementen. Maak om dit op te lossen bijvoorbeeld gebruik van een aria-label om de link een toegankelijke naam te geven. Op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ komt ditzelfde voor bij de link 'download'. Zie succescriterium 4.1.2.

Als op onder andere pagina e-depot.drentsarchief.nl/ bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 250%, is te zien dat de link (visueel vormgegeven als knop) 'Blader door de collecties' in de header verandert. De tekst is niet langer visueel te zien, deze is vervangen door een icoon waarop een archiefmap te zien is. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader heeft op dat moment de link geen linktekst meer. De tekst in de link (in een span-element) 'Blader door de collecties' wordt niet alleen visueel maar ook voor hulpsoftware verborgen bij inzoomen. Doordat er geen linktekst is gaat hulpsoftware zelf op zoek naar een naam en wordt een deel van de URL voorgelezen: 'Archive'. Voor bezoekers kan dit verwarring scheppen over het doel van de link. Zorg dat de tekst ook door hulpsoftware kan worden voorgelezen als deze visueel van de pagina verdwijnt. Maak bijvoorbeeld gebruik van een aria-label. Zie succescriterium 4.1.2.

Op pagina e-depot.drentsarchief.nl/ staat boven de zoekresultaten de link 'draai volgorde om' (visueel herkenbaar aan een icoon met een omhoog wijzend driehoekje). Via het title-attribuut heeft deze link de naam 'draai volgorde om' gekregen, maar het title-attribuut wordt overschreven door het icoon wat in het a-element is geplaatst. Ook voor bezoekers die van deze hulpsoftware gebruik maken en een lijst van links opvragen om op die manier te navigeren, is de naam van de link niet terug te vinden. Daarnaast werkt de link niet, visueel is te zien dat de zoekresultaten ongewijzigd in de lijst blijven staan, voor bezoekers die niet kunnen zien is dit lastig te bepalen. Los dit op door te zorgen dat de link werkt, en voeg een toegankelijke naam toe, bijvoorbeeld via een aria-label op het a-element.

Op pagina e-depot.drentsarchief.nl/ staan achter het filter onder 'Filters' twee links die eruit zien als afbeeldingen ('Bewerk filter' en 'Verwijder filter'). De links hebben een naam gekregen via het title-attribuut, maar het title-attribuut wordt overschreven door de iconen die binnen de a-elementen zijn geplaatst. Ook voor bezoekers die van deze hulpsoftware gebruik maken en een lijst van links opvragen om op die manier te navigeren, is de naam van de links niet terug te vinden. Los dit bijvoorbeeld op door de link op een andere manier een toegankelijke naam te geven, bijvoorbeeld door gebruik te maken van het aria-label-attribuut.

Uitkomst: Voldoende

Bevindingen: Opmerking: Op de website is alleen een zoekfunctie voor het archief aanwezig. Verder kunnen alle andere pagina's op de website bereikt worden via het hoofdnavigatiemenu en de links in de footer op elke pagina. Het zou beter zijn voor de toegankelijkheid om een zoekfunctie voor de hele website toe te voegen of gebruik te maken van een sitemap.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina e-depot.drentsarchief.nl/ staat een kop (op kopniveau h5) met daarin de link 'Demo Archief'. In HTML staan onder deze kop een aantal lege of onzichtbaar gemaakte div-elementen. Daarop volgt de content die in de footer staat. Visueel is aan de styling af te leiden dat het om een footer gaat, maar voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is dat niet duidelijk. Daardoor lijkt het voor deze bezoekers alsof de h5-kop de content van de footer beschrijft, wat niet klopt. Los dit bijvoorbeeld op door de link 'Demo Archief' als link op de pagina te plaatsten, en de h5-kop te verwijderen. Zie succescriterium 1.3.1.

Op pagina e-depot.drentsarchief.nl/ staan onder 'Verfijn de selectie' keuzevakjes. Bij elk keuzevakje is dezelfde naam te zien, deze bestaat uit de tekst 'drents-archief-eva'. Dit is ook de tekst die wordt voorgelezen door hulpsoftware zoals een screenreader, waardoor het voor bezoekers die hier gebruik van maken niet mogelijk is om de zoekresultaten te onderscheiden. Ook bezoekers die kunnen zien kunnen niet in één oogopslag zien om welk zoekresultaat het gaat, zij zien dit pas als zij de muisaanwijzer er naartoe brengen (doordat deze via een title-attribuut aan het label-element is toegevoegd). Voor bezoekers die wel kunnen zien en navigeren via het toetsenbord is het niet mogelijk de volledige naam te zien te krijgen. Los dit op door de tekst van het label-element aan te passen, bijvoorbeeld door deze te laten beginnen met de unieke tekst van het document (bijvoorbeeld 'Pilot videotulen 2021 gemeente Emmen'). Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/. Zie succescriterium 2.1.1.

Op elke pagina staat in de zoekfunctie een knop waarop de tekst 'E-depot' met daarnaast een afbeelding van een vergrootglas staat. Visueel is hierdoor herkenbaar dat deze knop gebruikt kan worden om een zoekopdracht uit te voeren. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader wordt bij de knop alleen de tekst 'E-depot' voorgelezen, maar hieruit wordt de functie van de knop niet duidelijk. Zorg ervoor dat de informatie die visueel wordt overgebracht ook beschikbaar is voor bezoekers die gebruik maken van hulpsoftware. Los dit bijvoorbeeld op door de afbeelding met het vergrootglas (die via CSS ingeladen wordt) een alternatieve tekst te geven. Zie succescriterium 1.1.1.

Op pagina e-depot.drentsarchief.nl/ is boven de zoekresultaten een keuzemenu te zien waarmee de bezoeker de zoekresultaten kan sorteren op relevantie op datum. Dit keuzemenu heeft via een aria-label het label 'Volgorde' gekregen. Deze tekst beschrijft het keuzemenu onvoldoende. Daarnaast kan het verwarrend werken dat op het keuzemenu een link volgt met de tekst 'draai volgorde om', waarbij het label 'Volgorde' wellicht beter zou passen. Een oplossing zou zijn om de tekst van het aria-label aan te passen, bijvoorbeeld naar 'Sorteer zoekresultaten'. Ditzelfde komt voor op pagina e-depot.drentsarchief.nl/ en e-depot.drentsarchief.nl/archive.

Op pagina e-depot.drentsarchief.nl/ staan onder 'Verfijn de selectie' keuzevakjes. Bij elk keuzevakje is dezelfde naam te zien, deze bestaat uit de tekst 'drents-archief-eva'. Dit is ook de tekst die wordt voorgelezen door hulpsoftware zoals een screenreader, waardoor het voor bezoekers die hier gebruik van maken niet mogelijk is om de zoekresultaten te onderscheiden. Ook bezoekers die kunnen zien kunnen niet in één oogopslag zien om welk zoekresultaat het gaat, zij zien dit pas als zij de muisaanwijzer er naartoe brengen (doordat deze via een title-attribuut aan het label-element is toegevoegd). Voor bezoekers die wel kunnen zien en navigeren via het toetsenbord is het niet mogelijk de volledige naam te zien te krijgen. Los dit op door de tekst van het label-element aan te passen, bijvoorbeeld door deze te laten beginnen met de unieke tekst van het document (bijvoorbeeld 'Pilot videnotulen 2021 gemeente Emmen'). Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/. Zie succescriterium 2.1.1.

Uitkomst: Onvoldoende

Bevindingen: Op pagina e-depot.drentsarchief.nl/ is de tekst '8 totale resultaten' en 'in gehele e-depot' focusbaar, maar als de focus hierop valt is dat niet zichtbaar. Voor bezoekers die wel kunnen zien en navigeren via het toetsenbord is het daardoor niet zichtbaar waar de focus zich bevindt. Los dit bijvoorbeeld op door dit element niet focusbaar te maken (door 'tabindex="0"' te verwijderen), of door een duidelijk zichtbare focusrand toe te voegen. Een soortgelijk probleem doet zich voor op pagina e-depot.drentsarchief.nl/ en e-depot.drentsarchief.nl/archive ('E-depot' en 'leeg')

Op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ staat boven het PDF document metadata in een grijs vlak. De verschillende koppen die hierin staan zijn focusbaar gemaakt met het 'tabindex="0"' attribuut, maar wanneer de focus op deze koppen valt is dat niet zichtbaar. Voor bezoekers die wel kunnen zien en navigeren via het toetsenbord is het daardoor niet zichtbaar waar de focus zich bevindt. Voeg om dit op te lossen een duidelijk zichtbare focusrand toe. Ditzelfde geldt voor het p-element met de tekst 'Type: bestand In map' dat boven het grijze vlak staat.

Op pagina e-depot.drentsarchief.nl/ kan de bezoeker de weergavestijl van de zoekresultaten aanpassen via drie knoppen die gegroepeerd zijn. Als de focus valt op het span-element waarin deze knoppen staan, is dat niet zichtbaar. Voor bezoekers die wel kunnen zien maar navigeren via het toetsenbord is het daardoor niet duidelijk waar de focus zich bevindt. Los dit bijvoorbeeld op door dit element niet focusbaar te maken (door 'tabindex="0"' te verwijderen), of door een duidelijk zichtbare focusrand toe te voegen. Ditzelfde komt voor op pagina e-depot.drentsarchief.nl/ en e-depot.drentsarchief.nl/archive. Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/, waar de knoppen waarmee de weergavestijl aangepast kan worden zijn samengevoegd in een span-element met de tekst 'toon metadata'. Zie succescriterium 2.4.3.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's (bijvoorbeeld) e-depot.drentsarchief.nl/ is de taalaanduiding Engels (lang="en-GB"). De pagina's zijn echter in het Nederlands. Hierdoor kan sommige hulpsoftware zoals een screenreader de pagina's in sommige browsers niet met de juiste uitspraak voorlezen. Pas de taalcodering aan naar lang="nl".

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina (bijvoorbeeld e-depot.drentsarchief.nl/) staat in het menu een link naar 'Mijn favorieten'. Deze link heeft geen naam, waardoor voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader het doel van de link niet af te leiden is. Er is een title-attribuut met de tekst 'Mijn favorieten' toegevoegd aan de link, maar het title-attribuut wordt overschreven door het icoon dat binnen het a-element is geplaatst. Voeg een linktekst toe in het a-element, of maak gebruik van een aria-label om de link een toegankelijke naam te geven. Op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ komt ditzelfde voor bij de link 'download'. Zie succescriterium 2.4.4.

In de footer van elke pagina (bijvoorbeeld e-depot.drentsarchief.nl/) staat een knop (opgemaakt als een link met 'role="button"') waarmee de bezoeker terug naar boven kan springen op de pagina. De knop heeft geen naam, waardoor de functie van de knop voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader onduidelijk is. Op het a-element is een title-attribuut met de tekst 'terug naar boven' toegevoegd, maar het title-attribuut wordt overschreven door het icoon dat staat binnen het a-element. De naam van de knop hoeft niet visueel zichtbaar te zijn op de pagina (ziende bezoekers kunnen de titel van de knop zien door de muisaanwijzer er naartoe te brengen), maar moet wel door hulpsoftware voorgelezen kunnen worden. Maak om dit op te lossen bijvoorbeeld gebruik van een aria-label.

Op pagina e-depot.drentsarchief.nl/ staat voor 'Filters' een klikbare afbeelding waarop een icoon van een afvalbak te zien is. Deze fungeert als knop waarmee het filter verwijderd kan worden. Het element heeft echter niet alle functionaliteit van een knop en op het i-element waarin de functionaliteit via de CSS is toegevoegd staat 'aria-hidden="true"'. Hierdoor is deze voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet goed te bereiken, herkennen en bedienen. Ook voor bezoekers die navigeren via het toetsenbord is het element lastig te bereiken en te bedienen, omdat deze niet focusbaar is. Los dit bijvoorbeeld op door dit element op een andere manier op te maken, bijvoorbeeld door dit als knop (button) in HTML te plaatsten en de knop een goede toegankelijke naam te geven. Zie succescriterium 2.1.1.

Op pagina e-depot.drentsarchief.nl/ staan boven de zoekresultaten drie knoppen waarmee de weergavestijl van de zoekresultaten gewijzigd kan worden. Het span-element waarin de knoppen staan heeft als tekst 'toon selectie als: lijst, tabel, tegel' gekregen, maar omdat deze beschrijving niet aan de individuele knoppen verbonden is beschrijft de tekst deze onvoldoende. De knop die bij de huidige weergave hoort (bijvoorbeeld 'lijst') heeft de naam 'actieve view'. Deze naam beschrijft de knop onvoldoende. De knoppen die niet bij de huidige weergave horen (bijvoorbeeld 'tabel' en 'tegel') hebben helemaal geen naam. Aan de knoppen is een title-attribuut met de tekst 'lijst', 'tabel' of 'tegel' toegevoegd, maar het title-attribuut wordt overschreven door het visuele icoon van deze knoppen, waardoor deze tekst niet altijd te horen is voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. Ook de tekst die is toegevoegd aan het element waarin de knoppen staan ('toon selectie als: lijst, tabel, tegel') volstaat niet als toegankelijke naam, omdat deze niet aan de individuele knoppen verbonden is. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het mogelijk om een lijst van knoppen op te vragen en op die manier te navigeren, in deze lijst zijn de knoppen als 'zonder label' te zien. Omdat de weergavestijl ook voor bezoekers die niet kunnen zien verandert via deze knoppen, is het belangrijk dat deze via hulpsoftware goed geïnterpreteerd kunnen worden. Voeg de tekst die in het title-attribuut staat ook op andere wijze toe aan de knop, maak bijvoorbeeld gebruik van een aria-label. Ditzelfde probleem komt op meerdere pagina's voor, bijvoorbeeld op pagina e-depot.drentsarchief.nl/archive en e-depot.drentsarchief.nl/. Een soortgelijk probleem komt voor op pagina e-depot.drentsarchief.nl/archief/IO_6ebea50e-4df3-4e2f-bc47-354283db9bdc/ en e-depot.drentsarchief.nl/archief/IO_2481d1cf-1a5d-4895-8619-fcbe51bbf113/ bij de knoppen 'Metadata aan zijkant', 'Metadata aan bovenzijde' en 'Metadata aan onderzijde', waarbij het span-element waarin deze knoppen staan de tekst 'toon metadata' heeft.

Als de bezoeker op onder andere pagina e-depot.drentsarchief.nl/ bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 175%, vouwt het menu samen onder een menuknop (hamburgermenu). De menuknop wordt op de pagina ingeladen via de CSS en het ::before pseudo-element. De knop heeft geen naam en is niet focusbaar, waardoor deze voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader lastig te bereiken, herkennen en bedienen is. Los dit bijvoorbeeld op door de menuknop in HTML te plaatsen als knop met het button-element. Zie succescriterium 2.1.1.

Als op onder andere pagina e-depot.drentsarchief.nl/ bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 250%, is te zien dat de link (visueel vormgegeven als knop) 'Blader door de collecties' in de header verandert. De tekst is niet langer visueel te zien, deze is vervangen door een icoon waarop een archiefmap te zien is. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader heeft op dat moment de link geen linktekst meer, waardoor de naam en de rol van dit element lastig af te leiden is. De tekst in de link (in een span-element) 'Blader door de collecties' wordt niet alleen visueel maar ook voor hulpsoftware verborgen bij inzoomen. Doordat er geen linktekst is gaat hulpsoftware zelf op zoek naar een naam en wordt een deel van de URL voorgelezen: 'Archive'. Voor bezoekers kan dit verwarring scheppen over het doel van de link. Zorg dat de tekst ook door hulpsoftware kan worden voorgelezen als deze visueel van de pagina verdwijnt. Maak bijvoorbeeld gebruik van een aria-label. Zie succescriterium 2.4.4.

Op onder andere pagina e-depot.drentsarchief.nl/ wordt het de zoekfunctie samengevouwen onder de knop 'Zoek in e-depot' als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 175%. Deze knop is in HTML niet opgemaakt als knop met het button-element, maar als klikbaar div-element. Hierdoor heeft het element niet alle functionaliteit die bij een knop hoort (de knop is niet focusbaar) en is het voor hulpsoftware niet goed te herkennen als knop. Voeg om dit op te lossen het attribuut 'role="button"' aan het div-element toe en maak deze focusbaar, of maak de knop op met het button-element. Zie succescriterium 2.1.1.

Opmerking: Het zoekveld in de header, bijvoorbeeld op pagina e-depot.drentsarchief.nl/, is gekoppeld aan het visueel verborgen label 'zoek in'. Dit label is verborgen voor hulpsoftware via de CSS eigenschap display: none;, waardoor het zoekveld geen toegankelijke naam heeft. In plaats daarvan krijgt het zoekveld nu een toegankelijke naam via de placeholdertekst. Dit is niet de ideale manier om een zoekveld een toegankelijke naam te geven. Beter is om de display: none; te verwijderen van het label-element en deze op een toegankelijke manier visueel te verbergen (bijvoorbeeld door het buiten de schermweergave te plaatsen).

Uitkomst: Voldoende