Issues:
Audit digitale toegankelijkheid website van Beeld en geluid

(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: Bovenaan de website https://www.beeldengeluid.nl/ is het logo geïmplementeerd als een link met een SVG-element zonder tekstalternatief. Dit maakt het logo ontoegankelijk voor schermlezers, omdat de naam van het merk of de organisatie niet wordt voorgelezen. Om dit op te lossen, kan een <title>-element binnen de SVG worden toegevoegd met een beschrijving zoals "Beeld en Geluid Logo", of kan een aria-label aan de link zelf worden toegevoegd, bijvoorbeeld aria-label="Beeld en Geluid Logo". Als alternatief kan visueel verborgen tekst binnen de link worden geplaatst die de volledige logo-tekst plus het woord 'logo' bevat. Alle decoratieve SVG- of span-elementen binnen de link moeten dan worden gemarkeerd met aria-hidden="true" om te voorkomen dat ze onnodig worden voorgelezen door schermlezers. Zie ook succescriterium 2.4.4. en 4.1.2.

Bevinding 2: Op pagina https://www.beeldengeluid.nl verschijnt bij het eerste bezoek een cookiebanner. In het venster met cookie-instellingen staat linksboven het logo met de zichtbare tekst “BEELD&GELUID”. De alternatieve tekst van dit logo is momenteel "Company Logo". De alternatieve tekst bevat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Pas de alternatieve tekst aan zodat de volledige tekst van het logo erin staat: “BEELD&GELUID”.

Bevinding 3: Op pagina https://www.beeldengeluid.nl bevat de carrousel onder het hoofdmenu afbeeldingen die via een img-element zijn toegevoegd, maar waarbij het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, mag dit attribuut leeg blijven met alt="". Dit zorgt ervoor dat hulpsoftware kan afleiden dat dit gaat om een afbeelding die genegeerd kan worden. Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten. Ditzelfde probleem komt ook voor onder de kop “Nu & binnenkort”.

Bevinding 4: Op pagina https://www.beeldengeluid.nl staat onder het onderdeel “Uitgelicht” bij de links “Encryptie van de 17e eeuw tot nu”, “TILT” en “Meer video's” een icoon dat aangeeft dat de link in een nieuw browsertabblad opent. Dit icoon heeft echter geen tekstalternatief, waardoor schermlezers niet kunnen melden dat de link in een nieuw tabblad opent. Dit is belangrijke informatie en moet als tekst beschikbaar zijn, zodat hulpsoftware dit kunnen aankondigen aan bezoekers. Voeg deze informatie toe als visueel verborgen tekst of als alternatief tekst voor het pictogram, zodat het toegankelijk wordt voor schermlezers.

Bevinding 5: Op pagina https://www.beeldengeluid.nl/zoeken zijn er filters met links. Wanneer een filter wordt geselecteerd, wordt er een sluit-icoon (“x”) aan de link toegevoegd en verandert de functie van de link van "filter selecteren" naar "filter verwijderen". Dit icoon heeft echter geen alternatieve tekst en de toegankelijke naam van de link wordt niet bijgewerkt om deze functiewijziging weer te geven. Hierdoor begrijpen schermlezers mogelijk niet dat de link nu dient om het filter te verwijderen in plaats van het te selecteren. Zorg ervoor dat het icoon een duidelijke alternatieve tekst krijgt en dat de toegankelijke naam van de link wordt aangepast zodra de functie verandert, zodat hulpsoftware deze verandering correct kunnen communiceren.

Bevinding 6: Op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal verschijnt er, wanneer een filter wordt geselecteerd in de zoekfunctie, een knop met de naam van het filter en een sluit-icoon (“x”). Dit icoon heeft geen alternatieve tekst. Hoewel het visueel duidelijk is dat het klikken op deze knop het filter verwijdert, is dit niet zichtbaar in de HTML-structuur. Zorg ervoor dat dit icoon een passende alternatieve tekst krijgt, zodat hulpsoftware deze functie correct kan aankondigen aan bezoekers.

Bevinding 7: Op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal staat onder de kop "Digitaal lesmateriaal" een knop met de tekst “Vak”. Op deze knop staat een decoratieve afbeelding, en het title-element van deze afbeelding bevat de tekst "Layer 1". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan door het title-element leeg te laten of volledig weg te laten bij SVG-afbeeldingen.

Bevinding 8: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht staat onder "Over Merel Wielaert" een afbeelding met logo’s die een leeg alt-attribuut heeft. Deze afbeelding is informatief omdat ze de aanwezigheid of identiteit van organisaties of merken overbrengt. Informatieve afbeeldingen moeten een tekstalternatief hebben zodat schermlezers de informatie die de afbeeldingen overbrengen kunnen doorgeven. Een leeg alt-attribuut verbergt de afbeelding voor hulpsoftware, waardoor deze informatie ontoegankelijk is voor blinde bezoekers. Voeg een alternatieve tekst toe met alle zichtbare tekst van de logo’s, plus het woord 'logo', in het alt-attribuut zodat de informatie toegankelijk is voor alle bezoekers.

Bevinding 9: In het PDF-document op http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf staat op elke pagina een logo zonder alternatieve tekst. Ditzelfde probleem komt ook voor op pagina's 1, 54, 60 en andere, waar informatieve afbeeldingen geen tekstalternatief hebben. Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Hulpsoftware leest de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg alt-teksten toe aan deze informatieve afbeeldingen.

Bevinding 10: In het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf staat op pagina 1 een logo zonder alternatieve tekst. Ook hier moet een passende alt-tekst worden toegevoegd, zodat hulpsoftware de inhoud correct kan communiceren aan alle bezoekers.

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 11: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht worden meerdere podcasts gepresenteerd. Voor deze audiobestanden zijn echter geen transcripties beschikbaar. Er moet een alternatief zijn voor bezoekers die het geluid niet kunnen horen, zoals een volledig uitgeschreven tekst (transcriptie). Dit is belangrijk voor mensen die doof of slechthorend zijn, zodat ook zij toegang hebben tot de inhoud van de podcasts. Deze transcripties kunnen direct bij de audiobestanden worden geplaatst, eventueel visueel verborgen, waarbij de tekst met een link zichtbaar kan worden gemaakt. De transcripties mogen ook op een aparte pagina of in een toegankelijke PDF staan, zolang de link naar de pagina of PDF direct bij de audiobestanden staat.

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

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

Bevinding 12: Op pagina https://www.beeldengeluid.nl/ staat onder "Beeld & Geluid" een video met een voice-over. Hoewel er ondertiteling aanwezig is, is deze automatisch gegenereerd in de verkeerde taal (Engels) en onnauwkeurig. Video's waarin gesproken wordt, moeten altijd nauwkeurige ondertiteling hebben, zodat bezoekers die de video niet (goed) kunnen horen ook alle informatie krijgen. Deze ondertiteling moet exact overeenkomen met de gesproken tekst, inclusief correcte punctuatie en zonder fouten. De automatisch gegenereerde ondertiteling voldoet hier niet aan. Ditzelfde probleem doet zich voor op pagina https://www.beeldengeluid.nl/en onder "We are Sound & Vision".

Bevinding 13: Op pagina https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals staat een video met gesproken tekst, maar ondertiteling ontbreekt volledig. Voeg ondertiteling toe aan deze video, zodat bezoekers die de video niet (goed) kunnen horen ook alle informatie tot zich kunnen nemen.

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://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals wordt een video gepresenteerd onder de kop "Collectie voor makers en professionals". In deze video verschijnt het logo op tijdstip 03:10. Bezoekers die blind of slechtziend zijn, missen hierdoor belangrijke visuele informatie. Om deze informatie toegankelijk te maken, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo's en teksten. Een andere optie is het plaatsen van een geschreven tekst (media-alternatief), maar om te voldoen aan succescriterium 1.2.5 moet er in ieder geval een audiobeschrijving beschikbaar zijn.

Bevinding 15: Op pagina https://www.beeldengeluid.nl/onderwijs/mediacollectie, in de buurt van de kop “Digitaal Lesmateriaal”, doet zich hetzelfde probleem voor. Ook hier moet een audiobeschrijving worden toegevoegd, zodat visuele informatie correct kan worden gecommuniceerd aan bezoekers met een visuele beperking.

Bevinding 16: Op pagina https://www.beeldengeluid.nl/bezoek/locatieverhuur wordt een video gepresenteerd die belangrijke visuele informatie bevat. Tussen 0:13 en 1:47 toont de video informatieve tekst, en op 1:55 worden een logo en andere informatieve tekst weergegeven. Ook hier ontbreekt een audiodescriptie of media-alternatief, waardoor blinde en slechtziende bezoekers geen toegang hebben tot deze visuele informatie. Voeg een audiodescriptie toe of zorg voor een schriftelijk alternatief, zodat alle bezoekers toegang hebben tot dezelfde informatie.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 17: De video’s op de pagina’s https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals, https://www.beeldengeluid.nl/onderwijs/mediacollectie en https://www.beeldengeluid.nl/bezoek/locatieverhuur voldoen niet aan succescriterium 1.2.5, dat vereist dat video’s een audiodescriptie bevatten (niveau AA). Specifiek deze video’s hebben een audiodescriptie nodig, aangezien er voldoende ruimte is binnen het bestaande audiokanaal om deze toe te voegen.
Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 18: Op alle pagina’s, zoals https://www.beeldengeluid.nl, bevatten de hoofdmenulinks submenu’s. De teksten in deze submenu’s zijn echter niet opgemaakt als koppen. Onder het menu “Onderwijs” staan bijvoorbeeld teksten zoals “Over Beeld & Geluid Onderwijs” en “Profielwerkstuk-inspiratie” die niet als koppen zijn gemarkeerd. Voor blinde bezoekers is het belangrijk dat deze teksten als koppen worden gemarkeerd, omdat hulpsoftware koppen gebruikt om de inhoud van een pagina te scannen of snel naar een specifieke sectie te navigeren. Zet deze teksten om in heading-elementen om de structuur en toegankelijkheid te verbeteren.

Bevinding 19: Op alle pagina’s, zoals https://www.beeldengeluid.nl, zijn in de footer de teksten “Sociale media”, “Locatie” en “Openingstijden” niet opgemaakt als koppen. Deze teksten fungeren als sectiekoppen en moeten daarom ook met heading-elementen worden gemarkeerd, zodat ze door hulpsoftware correct worden herkend en genavigeerd.

Bevinding 20: Op pagina https://www.beeldengeluid.nl staat onder het hoofdmenu de tekst “Museum”, maar deze is niet opgemaakt als kop. Ditzelfde probleem doet zich voor op pagina https://www.beeldengeluid.nl/zoeken, met teksten zoals “Filters”, “Content type” en “Datum”. Ook deze teksten moeten worden gemarkeerd als koppen om de toegankelijkheid te verbeteren.

Bevinding 21: Op pagina https://www.beeldengeluid.nl staat onder het hoofdmenu een carrousel met puntnavigatie om tussen de slides te wisselen. De actieve knop ziet er visueel anders uit dan de knoppen die niet actief zijn. Deze informatie ontbreekt echter in de HTML-structuur, waardoor bezoekers met een schermlezer geen toegang hebben tot deze belangrijke context. Dit kan worden opgelost door ARIA-technieken te gebruiken, zoals aria-current="true" of een verborgen tekst die aangeeft welke knop momenteel actief is.

Bevinding 22: Op pagina https://www.beeldengeluid.nl/contact zijn teksten zoals “Particulier”, “Zakelijk”, “Groepsbezoek” en andere onjuist opgemaakt met het strong-element in plaats van met correcte kop-elementen, zoals h3. Het strong-element is bedoeld om nadruk te geven aan enkele woorden of een zinsdeel, niet om koppen te markeren. Kop-elementen geven de structuur van de pagina aan en helpen hulpsoftware de inhoud van een pagina te begrijpen en te navigeren. Markeer deze teksten daarom correct met kop-elementen om de toegankelijkheid te verbeteren.

Bevinding 23: Op pagina https://www.beeldengeluid.nl/contact staat onder "Hilversum" een tekstblok dat begint met “Particulier” en meerdere alinea’s bevat. Dit hele blok is onjuist opgemaakt als één enkel p-element. Visueel bestaat deze tekst uit meerdere alinea’s, maar de HTML-structuur geeft dit niet correct weer. Zorg ervoor dat elke alinea in een eigen p-element is geplaatst, zodat de structuur in de code overeenkomt met de visuele presentatie.

Bevinding 24: Op pagina https://www.beeldengeluid.nl/contact, onder de kop "De collectie bekijken bij Beeld & Geluid Hilversum", wordt het strong-element onjuist gebruikt voor opmaakdoeleinden. Hele zinnen zijn in een strong-element geplaatst om ze vet weer te geven. Dit is niet de juiste manier om tekst visueel te accentueren, omdat het strong-element een semantische betekenis heeft: het geeft aan dat de tekst extra nadruk verdient. Voor puur visuele opmaak moet CSS worden gebruikt. Ditzelfde probleem doet zich voor op pagina https://www.beeldengeluid.nl/collectie en op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier onder de kop "Mediaworkshop en museumbezoek boeken".

Bevinding 25: Op pagina https://www.beeldengeluid.nl/toegankelijkheid, onder "Beeld & Geluid in Hilversum", bevindt zich een sectie met verborgen content. De elementen waarmee deze verborgen content wordt geopend en gesloten, hebben niet de rol van een kop gekregen. De teksten waarmee delen van een accordeon kunnen worden ingeklapt en uitgeklapt, dienen als koppen voor die delen en moeten daarom correct worden gemarkeerd met een kop-element, zoals h4 of h5. Dit zorgt ervoor dat hulpsoftware deze secties correct kan herkennen en navigeren. Markeer deze teksten als kop of zorg ervoor dat hun rol als kop niet wordt overschreven.

Bevinding 26: Op pagina https://www.beeldengeluid.nl/zoeken wordt onder de zoekresultaten bij de paginering het huidige paginanummer visueel onderscheiden, maar deze aanduiding ontbreekt in de HTML-code. Hierdoor kan een schermlezer deze informatie niet correct doorgeven aan bezoekers. Dit kan worden opgelost door een verborgen tekst aan de link toe te voegen, of door gebruik te maken van het aria-current-attribuut om de actieve pagina aan te geven.

Bevinding 27: Op pagina https://www.beeldengeluid.nl/zoeken is het actieve (huidige) filter visueel anders dan de niet-actieve filters, maar dit onderscheid ontbreekt in de HTML-code. Dit betekent dat hulpsoftware niet kan doorgeven welke filter momenteel actief is. Dit kan worden opgelost door gebruik te maken van het aria-current="true"-attribuut of door een verborgen tekst toe te voegen aan het actieve filter, zodat de status correct wordt gecommuniceerd aan alle bezoekers.

Bevinding 28: Op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier toont het formulier foutmeldingen zoals “Kies een locatie a.u.b.” voor een groep keuzerondjes en “Kies aub een onderwijsniveau” voor een andere groep. Deze foutmeldingen zijn echter niet programmatisch gekoppeld aan de invoervelden, waardoor hulpsoftware deze relaties niet kan doorgeven aan de bezoekers. Dit kan worden opgelost door bij elk input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de bijbehorende foutmelding. Dit zorgt ervoor dat bezoekers die hulpsoftware gebruiken ook de context van de foutmeldingen begrijpen.

Bevinding 29: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht komen koppen voor zoals “Persvrijheidslezing 2025 (Engels)”, “Persvrijheidslezing 2025 (Engels gesproken)” en andere. In deze koppen worden zowel het heading-element als het strong-element gebruikt. Dit is niet de juiste toepassing van het strong-element, omdat dit element een semantische betekenis heeft en niet alleen bedoeld is voor visuele opmaak. Gebruik CSS voor vetgedrukte tekst en zorg dat de koppen correct zijn gemarkeerd met alleen heading-elementen, zodat de structuur voor hulpsoftware duidelijk blijft.

Bevinding 30: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht is de tekst “I believe that ..” onjuist opgemaakt met een h3-element om de lettergrootte te vergroten. Dit is niet de juiste toepassing van een kop-element, omdat deze tekst geen echte kop vormt en geen inhoud introduceert. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina, zodat bezoekers die hulpsoftware gebruiken, de opbouw van de pagina kunnen begrijpen. Gebruik voor deze tekst een p-element in plaats van een h3-element, zodat de semantiek van de pagina correct blijft. De styling kan worden aangepast in bijvoorbeeld CSS.

Bevinding 31: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht, onder de kop "Speech", wordt het em-element onjuist gebruikt voor opmaakdoeleinden. Voorbeelden hiervan zijn: “Publicatiedatum: 15 april 2025”, “I believe that … in journalism”, “Publicatiedatum: 3 mei 2025” en andere. Het em-element heeft een semantische waarde en is bedoeld voor tekst die extra nadruk moet krijgen. Dit element mag niet worden gebruikt om tekst alleen visueel te accentueren (cursief). Gebruik hiervoor CSS, zodat de semantische structuur van de pagina behouden blijft.

Bevinding 32: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief is in het eerste formulier de groep selectievakjes niet correct gegroepeerd met semantische HTML-elementen. Hoewel er visueel een label (“Ik wil graag mails ontvangen over:”) boven de selectievakjes staat, is dit label niet programmatisch gekoppeld aan de groep. Dit betekent dat hulpsoftware deze context niet correct kan doorgeven aan bezoekers. Gebruik een fieldset-element om de groep selectievakjes te omhullen en een legend-element voor het groepslabel. Dit zorgt ervoor dat de structuur correct wordt herkend door schermlezers, waardoor de samenhang van de keuzes duidelijk is voor alle bezoekers.

Bevinding 33: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief, onder "Nieuw: een e-mailcadeautje op je verjaardag!", is een alinea onjuist opgemaakt met een em-element. Dit probleem komt ook voor op pagina https://www.beeldengeluid.nl/collectie, onder de kop “De collectie bekijken bij Beeld & Geluid”. Het em-element heeft een semantische betekenis en is bedoeld voor tekst die daadwerkelijk extra nadruk nodig heeft, niet voor visuele opmaak zoals cursieve tekst. Gebruik hiervoor CSS, zodat de semantische structuur correct blijft.

Bevinding 34: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief staat onder de kop "Meer nieuwsbrieven" een lijst met vijf items, maar deze is niet correct opgemaakt als lijst. Tekst die visueel als een opsomming wordt gepresenteerd, moet ook als zodanig in de HTML-structuur worden gemarkeerd. Gebruik hiervoor een ul-element voor een lijst met bullets of een ol-element voor een genummerde lijst. Dit zorgt ervoor dat hulpsoftware correct kan aangeven dat het om een lijst gaat en het aantal items kan voorlezen, zodat bezoekers met een visuele beperking weten hoeveel items er in de lijst staan.

Bevinding 35: Op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal, onder “Digitaal lesmateriaal”, worden de knoppen in de submenu’s die geopend worden via “Vak” en “Niveau” visueel als een groep gepresenteerd. Deze groepering is echter niet terug te zien in de HTML-structuur. Als het voor ziende bezoekers duidelijk is dat een groep knoppen bij elkaar hoort, moet deze structuur ook in de HTML-code worden opgenomen. Gebruik bijvoorbeeld een ul- of ol-element om de knoppen logisch te groeperen, zodat hulpsoftware deze relatie correct kan overbrengen aan de gebruikers.

Bevinding 36: Op pagina https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals volgt een kop van niveau 3 direct op een andere kop van hetzelfde niveau, namelijk “COLLECTIE GEBRUIKEN” en “TARIEVEN”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, is één van de koppen niet correct gebruikt. Dit verstoort de logische structuur van de pagina en kan verwarrend zijn voor bezoekers die hulpsoftware gebruiken om de inhoud te scannen. Voeg tussen deze koppen inhoud toe of overweeg om een van de koppen te verwijderen als deze alleen visueel bedoeld is. Ditzelfde probleem doet zich ook voor op pagina's https://www.beeldengeluid.nl/collectie en https://www.beeldengeluid.nl/onderwijs/mediacollectie.

Bevinding 37: Op pagina https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals staan onder de kop “Snel naar...” teksten zoals “COLLECTIE GEBRUIKEN”, “TARIEVEN” en andere. Deze teksten zijn geen echte koppen, maar zijn onjuist opgemaakt met h3-elementen om de lettergrootte te vergroten. Dit is niet de juiste manier om tekst visueel te accentueren, omdat kop-elementen bedoeld zijn om structuur te geven aan de inhoud van een pagina, niet voor opmaak. Gebruik in plaats daarvan een p-element of een span-element voor de gewenste visuele stijl, en voeg de benodigde styling toe via CSS. Dit voorkomt dat hulpsoftware deze teksten als koppen behandelt en de structuur van de pagina verkeerd interpreteert.
Ditzelfde probleem doet zich ook voor op pagina https://www.beeldengeluid.nl/collectie en pagina https://www.beeldengeluid.nl/onderwijs/mediacollectie, waar kop-elementen zijn gebruikt om tekst groter of vetgedrukt weer te geven zonder dat ze daadwerkelijk de functie van kop of tussenkop hebben. Verwijder deze onjuiste kop-elementen en gebruik CSS voor de gewenste visuele styling.

Bevinding 38: In het PDF-document op http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf zijn alle koppen niet correct opgemaakt als koppen. Op pagina 2 staan bijvoorbeeld “SCHERPER EN BREDER” en “COLLECTIEPLAN BEELD EN GELUID 2019”, op pagina 4 “INHOUD” en op pagina 5 “COLLECTIEBELEID”. Deze teksten zien er visueel uit als koppen, maar zijn in de PDF niet gemarkeerd met H-tags, waardoor schermlezers deze teksten niet correct als koppen herkennen. Dit kan navigatieproblemen veroorzaken voor blinde bezoekers, omdat de structuur van de inhoud niet overeenkomt met de visuele presentatie. Vervang de P-tags door H-tags, zodat de tag-structuur overeenkomt met de visuele structuur van het document. Ditzelfde probleem is ook zichtbaar in het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf, bijvoorbeeld op pagina 11 bij “Vier strategische thema's”, “Elf concrete doelstellingen” en andere pagina's.

Bevinding 39: In het PDF-document op http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf missen pagina’s zoals 3, 11 en 14 voetnoten met de vereiste Reference- en/of Note-tags. Zonder deze tags kunnen voorleessoftware en andere hulpmiddelen de voetnoten niet correct koppelen aan hun verwijzingen in de hoofdtekst. Dit kan verwarrend zijn voor gebruikers van schermlezers, omdat de voetnoten dan als losse, niet-gerelateerde tekst worden voorgelezen. Voeg de ontbrekende Reference- en Note-tags toe om de relatie tussen de verwijzingen en voetnoten correct vast te leggen.

Bevinding 40: Het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf is slechts gedeeltelijk getagd. Pagina’s zoals 5–10 en 12–13 missen de nodige tagging, waardoor delen van de inhoud niet correct worden herkend door hulpsoftware. Dit geldt ook voor het navigatiemenu bovenaan elke pagina, zoals te zien op pagina 4 en 11. Omdat deze delen niet getagd zijn, kunnen ze niet volledig worden onderzocht op toegankelijkheidsproblemen, zoals ontbrekende tekstlabels voor formuliervelden of de relatie tussen formuliervelden en kolomkoppen. Dit kan leiden tot verdere problemen die momenteel onzichtbaar zijn. Zorg ervoor dat alle inhoud correct wordt getagd, inclusief koppen, alternatieve teksten en andere semantische elementen, zodat de volledige structuur voor alle bezoekers toegankelijk is.

Bevinding 41: In het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf bestaat de inhoudsopgave op pagina’s 2 en 3 visueel uit één tabel, maar is in de code opgebouwd uit meerdere losse tabellen, waarbij elke rij als een aparte tabel is gemarkeerd. Dit maakt het voor schermlezers moeilijk om de relatie tussen rijen te begrijpen en de inhoud efficiënt te navigeren. Dit probleem kan worden opgelost door alle rijen samen in één enkele tabelstructuur te plaatsen, zodat de relatie tussen de kolomkoppen en rijen correct wordt weergegeven in de codelaag van de PDF.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 42: Op pagina https://www.beeldengeluid.nl/, onder “Uitgelicht”, is de volgorde van HTML-elementen binnen de artikelen onjuist. Momenteel staan de afbeeldingen en teksten boven de koppen, met de structuur: afbeelding, tekst, kop, tekst. Dit zorgt ervoor dat de inhoud niet logisch wordt voorgelezen door schermlezers, waardoor het voor bezoekers met een visuele beperking onduidelijk kan zijn welke afbeelding en datum bij welk artikel horen. Dit kan worden opgelost door de inhoud die bij een bepaalde kop hoort (zoals afbeeldingen en tekst) in de code direct onder die kop te plaatsen. Dit zorgt voor een logische leesvolgorde, zonder dat de visuele presentatie van de pagina hoeft te worden aangepast. Een alternatieve oplossing is om de afbeeldingen bij de artikelen als decoratief te markeren door de alt-tekst leeg te laten (alt="" op het img-element). Hierdoor worden de afbeeldingen genegeerd door schermlezers, en blijft de focus van de voorleessoftware op de kopteksten en bijbehorende tekstinhoud. Ditzelfde probleem doet zich ook voor op pagina https://www.beeldengeluid.nl/onderwijs/mediacollectie en op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal, waar de volgorde van de HTML-elementen eveneens inconsistent is. Pas ook hier de structuur aan om de toegankelijkheid te verbeteren.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 43: Op alle pagina’s, zoals https://www.beeldengeluid.nl/, ontbreekt in de footer onder de kop “Blijf op de hoogte” bij het formulier met het invoerveld voor persoonlijke informatie “E-mailadres” het attribuut autocomplete. Invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres of telefoonnummer, moeten het attribuut autocomplete hebben. Dit zorgt ervoor dat browsers en hulpsoftware deze velden automatisch kunnen invullen, wat de toegankelijkheid en gebruiksvriendelijkheid verbetert. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Dit helpt bezoekers om hun gegevens sneller en foutloos in te vullen. Op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden bevat het formulier ook invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres en telefoonnummer, maar ontbreekt ook hier het attribuut autocomplete. Ditzelfde probleem doet zich voor op pagina’s https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier en https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief, waar deze velden ook ontbreken. Voeg het autocomplete-attribuut toe aan deze velden met de juiste waarden, zoals: voor e-mailadressen: autocomplete="email", voor achternamen: autocomplete="family-name" en voor telefoonnummers: autocomplete="tel". Meer informatie over de correcte waarden voor het autocomplete-attribuut is te vinden op de W3C-website: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 44: In het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf wordt op pagina 10 in diagrammen uitsluitend kleur gebruikt om informatie over te brengen. Zie bijvoorbeeld roze, grijs en andere kleuren in de legenda. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 45: Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. In deze banner staat roze tekst (HEX #FF00BC) “Cookies settings” op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,5:1. Voor teksten die kleiner zijn dan 24px en niet vetgedrukt, moet de minimale contrastratio 4,5:1 zijn om leesbaar te zijn voor bezoekers met een visuele beperking. Dit probleem komt ook voor in het venster met cookie-instellingen bij de link “View our policy”. De tekstkleur of achtergrondkleur moet worden aangepast om te voldoen aan de minimale contrastvereisten. Zie pagina https://www.beeldengeluid.nl.

Bevinding 46: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief heeft de roze tekst “Privacy statement” een contrastverhouding van 3,5:1 ten opzichte van de achtergrond. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn om goed leesbaar te zijn voor alle bezoekers. Ook hier moet de tekstkleur of achtergrondkleur worden aangepast.

Bevinding 47: In het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf komen meerdere combinaties voor met onvoldoende kleurcontrast. Op pagina 2 heeft de blauwe tekst (HEX #06C7EF) op witte achtergrond, zoals bij “VOORWOORD”, een contrastverhouding van 2,0:1. Op pagina’s 7 en 8 komt dezelfde blauwe tekst voor op een grijze achtergrond (HEX #EBECF6) met een contrastverhouding van 1,7:1. Verder wordt grijze tekst (HEX #969B9F) op witte achtergrond gebruikt op pagina’s 5, 6, 9 en 10, met een contrastverhouding van 2,8:1. Op pagina’s 58 en 79 staat kleine witte tekst op een roze achtergrond (HEX #FF00BC) met een contrastverhouding van 3,5:1. Ook staat er op pagina 11 witte tekst “Zone 'informeren'” in een afbeelding, die onvoldoende contrast biedt. Op sommige pagina’s, zoals 5 en 6, wordt bovendien blauwe tekst direct over afbeeldingen geplaatst, wat de leesbaarheid verder vermindert omdat de achtergrond oneffen is en de tekst daardoor moeilijk te onderscheiden kan zijn. Alle tekst moet een contrastratio hebben van minimaal 3,0:1 voor grote tekst en 4,5 voor kleine tekst om te voldoen aan de toegankelijkheidsrichtlijnen.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 48: Op pagina https://www.beeldengeluid.nl/ staat in het submenu “Collectie” de link “Aanvragen voor privégebruik”. Wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, zijn deze link en de tekst eronder niet zichtbaar. Dit betekent dat bezoekers die gebruikmaken van zoomfuncties om de leesbaarheid te verbeteren, geen toegang hebben tot deze inhoud.

Bevinding 49: Op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden staat onder “Gegevens aanbieder” een formulier met een invoerveld voor “Soort drager”. Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, is de placeholder in dit veld niet volledig zichtbaar. Dit zorgt ervoor dat bezoekers mogelijk niet kunnen zien welke informatie ze in dit veld moeten invoeren, wat de toegankelijkheid vermindert. Ook dit probleem is in strijd met succescriterium 1.4.10 en moet worden opgelost door de lay-out flexibel te maken, zodat de inhoud volledig zichtbaar blijft bij het inzoomen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 50: Op alle pagina’s, zoals https://www.beeldengeluid.nl, verschijnt er een schuifbalk wanneer ze worden bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Dit beperkt de toegankelijkheid voor bezoekers die sterk moeten inzoomen om de inhoud te kunnen lezen. Alleen elementen zoals tabellen, betekenisvolle afbeeldingen en kaarten mogen horizontaal scrollen, omdat dit soms nodig is om de volledige inhoud te kunnen begrijpen. Zorg ervoor dat alle andere tekst binnen het scherm past zonder horizontaal te hoeven scrollen, zodat de inhoud correct wordt weergegeven en toegankelijk blijft.

Bevinding 51: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is de link “Onderwijs” in het hoofdmenu niet volledig zichtbaar en niet bedienbaar wanneer de website wordt bekeken op een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%. Dit betekent dat bezoekers mogelijk geen toegang hebben tot belangrijke navigatielinks wanneer ze sterk inzoomen, wat de gebruiksvriendelijkheid aanzienlijk vermindert.

Bevinding 52: Wanneer de pagina https://www.beeldengeluid.nl/ wordt bekeken op een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%, zijn de puntnavigatie en de pauzeknop in de carrousel onder het hoofdmenu niet zichtbaar en niet bedienbaar. Dit belemmert de navigatie en de controle over de carrousel, waardoor belangrijke functies niet toegankelijk zijn voor bezoekers die deze zoomniveaus gebruiken.

Bevinding 53: Op pagina https://www.beeldengeluid.nl/zoeken zijn de koppen in de zoekresultaten niet volledig zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%. Dit maakt het moeilijk voor bezoekers om de resultaten te scannen en snel de juiste informatie te vinden.

Bevinding 54: Op pagina https://www.beeldengeluid.nl/toegankelijkheid is de koptekst “Digitoegankelijkheidsverklaring” niet volledig zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%. Dit beperkt de toegang tot belangrijke informatie over de digitale toegankelijkheid van de website.

Bevinding 55: Op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden, onder “Gegevens aanbieder”, is de placeholder onder “Soort drager” niet volledig zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%. Dit kan verwarrend zijn voor bezoekers die niet kunnen zien welke informatie verwacht wordt in dit veld, wat het invullen van formulieren lastiger maakt.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 56: Op pagina https://www.beeldengeluid.nl staat in het submenu “Collectie” een zoekveld. De link met het vergrootglasicoon heeft onvoldoende kleurcontrast ten opzichte van de achtergrond. Het witte icoon op de roze achtergrond (HEX #FF7ADD) heeft een contrastverhouding van 2,3:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1 voor grafische elementen zoals iconen. Zorg dat het contrast van iconen en andere grafische elementen minimaal 3,0:1 is, zodat ze duidelijk zichtbaar zijn voor bezoekers met een verminderd gezichtsvermogen.

Bevinding 57: Op pagina https://www.beeldengeluid.nl/zoeken staat in de paginering een link naar de huidige pagina met een blauwe rand op een witte achtergrond. De contrastverhouding tussen de blauwe rand (HEX #06C7EF) en de witte achtergrond is 2,0:1. Dit maakt het voor bezoekers met een verminderd gezichtsvermogen moeilijk om de link te onderscheiden, vooral wanneer de rand de belangrijkste visuele indicator is voor interactiviteit. De randkleur moet worden aangepast of de dikte van de rand moet worden vergroot om de zichtbaarheid te verbeteren en te voldoen aan de minimale contrastvereiste van 3,0:1.

Bevinding 58: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief staan formulieren met invoervelden. De contrastverhouding tussen de grijze rand (HEX #C7C7C7) en de witte achtergrond van de pagina is 1,7:1. Dit is lager dan de minimale vereiste contrastverhouding van 3,0:1 voor randen van interactieve elementen, zoals invoervelden. Verhoog het contrast van de randkleur, zodat de invoervelden duidelijker zichtbaar en beter toegankelijk zijn.

Bevinding 59: In het PDF-document op https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf staan op pagina 10 grafieken. In de legenda heeft de grijze kleur (HEX #969BA0) op witte achtergrond een te lage contrastverhouding van 2,8:1. Ook de lichtblauwe kleur (HEX #05C8F0) op witte achtergrond heeft een te lage contrastverhouding van 2,0:1. Het contrast tussen informatieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben om aan de toegankelijkheidsrichtlijnen te voldoen.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 60: In de footer op de website https://www.beeldengeluid.nl/ wordt de tekst onder de kop "Blijf op de hoogte" (placeholder en knop “AANMELDEN”) gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 61: Op pagina https://www.beeldengeluid.nl/bezoek/locatieverhuur staat onder “Locatieverhuur” een link met de tekst "Cookie instellingen" die verschijnt wanneer cookies niet zijn geaccepteerd. Deze link is niet toegankelijk via het toetsenbord, omdat het a-element geen href-attribuut heeft. Zonder href beschouwen browsers het als een niet-navigeerbaar element, waardoor het niet in de tabvolgorde wordt opgenomen en niet via het toetsenbord bereikbaar of activeerbaar is. Dit beperkt de toegankelijkheid voor bezoekers die alleen met een toetsenbord navigeren. Om dit op te lossen, moet een geldig href-attribuut worden toegevoegd aan het a-element, bijvoorbeeld href="#" als tijdelijke oplossing, of het element moet worden vervangen door een button-element als het bedoeld is om een actie uit te voeren in plaats van navigatie.

Bevinding 62: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht staat een link met de tekst “Delen” die niet toegankelijk is via het toetsenbord. Ook hier ontbreekt het href-attribuut in het a-element, waardoor dit element niet in de tabvolgorde wordt opgenomen en niet bedienbaar is met alleen het toetsenbord. Voeg een geldig href-attribuut toe om de link volledig toegankelijk te maken, of vervang het element door een button als de functie puur interactief is en geen navigatie naar een andere pagina betreft.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 63: De pagina https://www.beeldengeluid.nl/bezoek/locatieverhuur bevat een YouTube-videospeler die gebruikmaakt van toetscombinaties met één teken.
De Youtube-speler gebruikt sneltoetsen, zoals de 'k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 64: Op alle pagina’s, zoals https://www.beeldengeluid.nl, bevat het formulier in de footer onder de kop “Blijf op de hoogte” alleen HTML5-validatie voor het invoerveld “Ontvang de nieuwsbrief!”. Deze foutmeldingen worden echter niet door alle browsers en schermlezers consistent ondersteund. Elke browser toont de meldingen anders en vaak op een manier die niet volledig toegankelijk is. Bijvoorbeeld, de foutmelding kan te kort zichtbaar zijn of niet duidelijk worden voorgelezen door schermlezers, waardoor bezoekers met een visuele beperking belangrijke feedback kunnen missen. Voeg daarom altijd zelf foutmeldingen toe aan het formulier met duidelijke tekst die correct is gekoppeld aan de invoervelden, bijvoorbeeld met het aria-describedby-attribuut. Dit zorgt voor een consistente en toegankelijke gebruikerservaring, ongeacht de browser of hulpsoftware die wordt gebruikt.

Bevinding 65: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief bevatten de formulieren alleen HTML5-validatie voor de invoervelden "E-mail" en "Voornaam". Ook hier moeten aangepaste foutmeldingen worden toegevoegd, zodat de validatie-informatie duidelijk en toegankelijk is voor alle bezoekers. Controleer ook of er nog meer formulieren op de website zijn die dit probleem hebben, zodat alle invoervelden correct worden gevalideerd.

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 66: Wanneer de pagina https://www.beeldengeluid.nl/ wordt bekeken op een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%, is de pauzeknop in de carrousel onder het hoofdmenu niet zichtbaar en niet bedienbaar. Hierdoor kan de automatisch bewegende achtergrond niet gepauzeerd worden. Voor sommige bezoekers is de pagina hierdoor niet goed toegankelijk, bijvoorbeeld bezoekers bij wie bewegende content misselijkheid veroorzaakt. Zorg dat bewegende content altijd gepauzeerd, gestopt of verborgen kan worden (ook bij inzoomen).

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 67: Het PDF-document op http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf heeft geen titel ingesteld in de documenteigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-instellingen een documenttitel ingesteld worden. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de PDF-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 68: Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt de pagina-inhoud, en als de toetsenbordfocus daar niet direct naartoe gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten zonder helemaal naar beneden te tabben. Dit kan verwarrend en frustrerend zijn voor gebruikers die afhankelijk zijn van toetsenbordnavigatie. Zorg ervoor dat de focus automatisch naar de cookiebanner gaat zodra deze verschijnt, zodat de bezoeker de banner eenvoudig kan sluiten. Zie pagina https://www.beeldengeluid.nl.
Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. Op dit moment kan de toetsenbordfocus echter het cookievenster verlaten en zich verplaatsen naar de onderliggende pagina-inhoud. Dit zorgt ervoor dat gebruikers onverwachts naar elementen buiten de banner kunnen navigeren, terwijl ze de banner nog niet hebben gesloten. Dit kan worden opgelost door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Zo blijft de focusvolgorde logisch en consistent en worden onbedoelde interacties voorkomen.

Bevinding 69: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is er een hoofdmenu met een submenu dat als volledig scherm opent. Wanneer dit menu geopend is, kan de toetsenbordfocus na het laatste menu-item doorgaan naar interactieve elementen op de onderliggende pagina. Dit doorbreekt de logische focusvolgorde en kan verwarrend zijn voor toetsenbordgebruikers. Zorg ervoor dat de focus in het menu blijft totdat de gebruiker het menu sluit, zodat de navigatieconsistentie behouden blijft.

Bevinding 70: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is er een zoekveld dat wordt geactiveerd via een zoekknop in het bovenste menu. Wanneer de zoekbalk wordt geopend en daarna weer gesloten, blijft de toetsenbordfocus op het (nu verborgen) zoekveld staan na de zoekknop. Dit zorgt ervoor dat de focus op een onzichtbaar element terechtkomt, wat verwarrend kan zijn en de logische navigatievolgorde verstoort. De toetsenbordfocus mag niet terechtkomen op verborgen interactieve elementen, omdat dit onverwachte interacties kan veroorzaken en de toegankelijkheid vermindert. Zorg ervoor dat de focus naar een zichtbaar en interactief element verplaatst wordt zodra het zoekveld gesloten is.

Bevinding 71: Op pagina https://www.beeldengeluid.nl, wanneer een toetsenbordgebruiker achterwaarts navigeert vanaf de sectie onder “Nu & binnenkort”, komen de elementen onder het hoofdmenu in de carrousel, zoals de links “Spoelt terug”, de knop “Lees meer” en de puntnavigatieknoppen, in beeld terwijl ze visueel verborgen zijn. Dit zorgt ervoor dat de toetsenbordfocus op elementen terechtkomt die niet zichtbaar zijn, wat verwarrend is voor gebruikers die volledig afhankelijk zijn van toetsenbordnavigatie maar die wel kunnen zien. Voor hen is op dat moment niet duidelijk waar zij zich bevinden op de pagina. Verberg deze elementen volledig voor toetsenbordgebruikers wanneer ze visueel verborgen zijn, bijvoorbeeld met display: none of aria-hidden="true".

Bevinding 72: Op pagina https://www.beeldengeluid.nl gebruikt de carrousel onder het hoofdmenu puntnavigatie om tussen de slides te wisselen. Wanneer een punt via het toetsenbord wordt geactiveerd, verplaatst de focus zich naar de volgende punt in plaats van naar de inhoud van de zojuist zichtbare slide. Dit is geen logische focusvolgorde, omdat gebruikers die navigeren met het toetsenbord nu achterwaarts moeten navigeren om bij de inhoud van de geselecteerde slide te komen. Zorg ervoor dat de toetsenbordfocus direct naar de inhoud van de bijbehorende slide gaat na het activeren van een punt, zodat de navigatie intuïtief blijft en bezoekers gemakkelijk door de inhoud kunnen bladeren.

Bevinding 73: Op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier, op een klein scherm, komt de focus terecht op onzichtbare elementen in de broodkruimelnavigatie. Dit kan worden opgelost door onzichtbare elementen volledig te verbergen voor toetsenbordgebruikers, zodat de focus alleen op zichtbare, interactieve elementen terechtkomt.

Bevinding 74: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht komt de toetsenbordfocus terecht op onzichtbare elementen na de knop “Delen”. Dit zorgt ervoor dat gebruikers onverwachts op verborgen knoppen kunnen belanden, wat de navigatie verstoort en de toegankelijkheid vermindert. Zorg ervoor dat deze elementen volledig verborgen zijn voor de toetsenbordfocus.

Bevinding 75: Op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden, wanneer een formulier wordt ingediend, verschijnt er een banner met de kop “Bedankt voor je aanbieding!”. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. Bovendien kan de focus de banner verlaten en naar de onderliggende paginainhoud bewegen, waardoor gebruikers de context van de banner kunnen verliezen. Zorg ervoor dat de focus automatisch naar de banner gaat zodra deze verschijnt en dat de focus binnen de banner blijft totdat deze wordt gesloten, zodat de toegankelijkheid behouden blijft.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 76: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is het logo bovenaan opgesplitst in twee verschillende links. Geen van beide links biedt een beschrijvende tekst over de bestemming. Hierdoor kunnen bezoekers die hulpsoftware gebruiken niet bepalen waar elke link naartoe leidt, wat de navigatie verwarrend kan maken. Dit probleem kan worden opgelost door het logo samen te voegen tot één enkele link met een duidelijke en toegankelijke naam. Dit zorgt ervoor dat de bestemming van de link helder is voor alle gebruikers. Zie ook succescriterium 1.1.1 en 4.1.2.

Bevinding 77: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staan in de footer drie links met logo’s die geen toegankelijke naam hebben. Dit betekent dat deze links geen herkenbaar doel hebben voor gebruikers van hulpsoftware, waardoor de context en bestemming van deze links onduidelijk blijven. Dit kan worden opgelost door tekst toe te voegen aan het a-element of door een aria-label te gebruiken, zoals aria-label="Beeld & Geluid op Instagram", om de bestemming duidelijk te maken. Dit zorgt ervoor dat alle links een duidelijk linkdoel hebben en eenvoudig te begrijpen zijn voor alle bezoekers.

Bevinding 78: Op pagina https://www.beeldengeluid.nl/zoeken ontbreekt het aan voldoende context bij de pagineringslinks. Terwijl gebruikers met normaal zicht begrijpen dat "1", "2", "3", enzovoort paginanummers vertegenwoordigen, is dit niet altijd duidelijk voor gebruikers met een verminderde gezichtsvermogen of voor gebruikers van schermlezers. Dit kan worden verbeterd door de linkteksten aan te vullen met een visueel verborgen label, zoals “pagina 1”, “pagina 2”, enzovoort. Hierdoor wordt de betekenis van deze links duidelijker voor bezoekers die afhankelijk zijn van schermlezers.

Bevinding 79: Op pagina https://www.beeldengeluid.nl/onderwijs/mediacollectie gebruiken meerdere links de tekst “Meer info”. Deze tekst is te vaag en beschrijft de bestemming van de link niet voldoende, wat voor verwarring kan zorgen bij gebruikers met cognitieve beperkingen of voor degenen die schermlezers gebruiken. Linkteksten zoals “Meer info” geven geen duidelijke aanwijzing over de bestemming, vooral als ze meerdere keren op een pagina voorkomen. Dit kan worden opgelost door de linktekst te verduidelijken, bijvoorbeeld door “Meer info” aan te vullen met de specifieke titel of context van de bestemming, zoals “Meer info over digitale lesmaterialen”. Als dit visueel te veel ruimte inneemt, kan de aanvullende tekst visueel verborgen worden met behulp van CSS, zodat de link voor alle gebruikers duidelijk is zonder de visuele vormgeving te verstoren.

Bevinding 80: Op pagina https://www.beeldengeluid.nl/bezoek/locatieverhuur gebruiken meerdere links de tekst “BEKIJK HET AANBOD”. Ook hier is de linktekst te algemeen en biedt deze onvoldoende context over de bestemming. Zorg ervoor dat de linktekst specifieker is, bijvoorbeeld “Bekijk het aanbod voor evenementen” of “Bekijk het aanbod voor zakelijke verhuur”, zodat de context direct duidelijk is voor alle bezoekers.

Bevinding 81: Op pagina https://www.beeldengeluid.nl/organisatie/jaarverslagen staan meerdere links met dezelfde tekst “bekijk online” en “download (PDF)”, maar deze links verwijzen naar verschillende bestemmingen. Dit kan verwarrend zijn voor bezoekers, vooral voor gebruikers van schermlezers die vaak een lijst van links opvragen om snel door een pagina te navigeren. Zorg ervoor dat links met dezelfde tekst ook naar dezelfde bestemming leiden, of pas de linktekst aan zodat duidelijk is welke versie of welk document de bezoeker zal openen, bijvoorbeeld “Bekijk online – Jaarverslag 2024” of “Download (PDF) – Jaarverslag 2024”.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 82: Op alle pagina’s, zoals https://www.beeldengeluid.nl, zijn er meerdere zoekvelden met verschillende toegankelijke namen. Het zoekveld in het bovenste menu heeft de toegankelijke naam "Typ een zoekopdracht", terwijl een ander zoekveld in het submenu de naam "Zoek in deze categorie" heeft. De naam "Typ een zoekopdracht" is mogelijk niet betekenisvol voor alle gebruikers, omdat het niet duidelijk maakt wat er precies gezocht zal worden of wat de reikwijdte van de zoekopdracht is. Daarentegen is "Zoek in deze categorie" een duidelijke en beschrijvende naam, die aangeeft dat de zoekopdracht beperkt zal zijn tot de huidige categorie. Toegankelijke namen moeten altijd duidelijk en beschrijvend zijn, zodat gebruikers weten wat er van hen verwacht wordt bij het invoeren van zoektermen.

Bevinding 83: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staat onderaan een "GEEF FEEDBACK" knop die een modaal venster opent. Deze knop heeft een "x" sluitknop, maar de toegankelijke naam van deze knop is “undefined”. Dit betekent dat schermlezers niet correct kunnen aankondigen dat deze knop bedoeld is om het venster te sluiten. Dit probleem kan worden opgelost door een duidelijke naam toe te voegen, zoals aria-label="Sluit feedbackvenster", zodat gebruikers duidelijk weten wat deze knop doet. Ditzelfde probleem doet zich voor na het klikken op de knop “Algemene feedback over de website”, waar ook een sluitknop zonder correcte toegankelijke naam aanwezig is.

Bevinding 84: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staat onderaan een "GEEF FEEDBACK" knop die een modaal venster opent. In dit venster, nadat er op "Algemene feedback over de website" is geklikt, verschijnt een enquête met de vraag "Allereerst; wat vind je van onze website?". De toegankelijke namen voor de keuzerondjes met smiley-iconen zijn echter “1”, “2” en andere. Deze namen beschrijven de functie van de keuzerondjes niet nauwkeurig, wat voor verwarring kan zorgen bij bezoekers die schermlezers gebruiken. Dit kan worden opgelost door de tekst “1”, “2” en andere te vervangen door meer beschrijvende teksten, zoals “Erg slecht”, “Slecht”, “Neutraal”, “Goed” en “Erg goed”. Hierdoor wordt de context duidelijker voor alle bezoekers, ongeacht de gebruikte technologie.

Bevinding 85: Op alle pagina’s met broodkruimelnavigatie, zoals https://www.beeldengeluid.nl/toegankelijkheid, heeft de broodkruimelnavigatie een toegankelijke naam “breadcrumb-label”. Deze naam bevat de overbodige tekst “-label”, die geen extra informatie toevoegt en kan worden verwijderd. Gebruik in plaats daarvan een simpelere en duidelijkere naam zoals “Broodkruimelnavigatie” of “Navigatiepad” om de toegankelijkheid te verbeteren.

Bevinding 86: Op pagina https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals, onder de kop "Collectie voor makers en professionals", staat een iframe met het titelattribuut "B&G Collectietrailer Master H264". Dit titelattribuut beschrijft niet duidelijk het type inhoud van het iframe. Iframes moeten een betekenisvolle beschrijving hebben in hun title-attribuut, zodat bezoekers met een schermlezer weten welk type inhoud ze kunnen verwachten. In dit geval is een betere titel bijvoorbeeld “Video: Collectietrailer Beeld & Geluid” of “Video over collectiemateriaal voor makers en professionals”. Dit helpt blinde bezoekers om te beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Bevinding 87: Wanneer het formulier op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden wordt ingevuld, verschijnt er een banner met de kop "Bedankt voor je aanbieding!". De sluitknop in dit venster heeft de toegankelijke naam “✕”, wat de functie ervan niet duidelijk beschrijft. Hierdoor weten gebruikers van schermlezers niet dat deze knop bedoeld is om de banner te sluiten. De toegankelijke naam van een knop moet duidelijk de functie ervan beschrijven, zoals “Sluiten” of “Bericht sluiten”, in plaats van alleen een symbool of icoon weer te geven. Dit kan worden opgelost door een aria-label toe te voegen, zoals aria-label="Sluiten", of door visueel verborgen tekst toe te voegen die de functie van de knop beschrijft.

Bevinding 88: In de tweede stap van het formulier op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier verschijnt een banner met de tekst “Inzending opgeslagen…”. De sluitknop in dit venster heeft ook de toegankelijke naam “✕”, wat de functie ervan niet duidelijk beschrijft. Ook hier moet een duidelijke toegankelijke naam worden toegevoegd, zodat alle gebruikers de functie van de knop begrijpen.

Bevinding 89: Op pagina https://www.beeldengeluid.nl/toegankelijkheid, onder "Beeld & Geluid in Hilversum," zijn er secties met verborgen inhoud die geopend kunnen worden met een knop. Deze knoppen bevatten symbolen zoals "+" en "–" in hun toegankelijke namen, omdat deze via pseudo-elementen worden toegevoegd. Bijvoorbeeld, de knop “Is er rekening gehouden met slechtziende bezoekers?” heeft de toegankelijke naam “+ Is het museum ook rolstoeltoegankelijk? –”. Dit kan verwarrend zijn voor schermlezergebruikers, omdat de symbolen belangrijk kunnen lijken voor het aangeven of de sectie open of gesloten is. Om de duidelijkheid en voorspelbaarheid te verbeteren, moet decoratieve of niet-essentiële inhoud uit de toegankelijke naam worden verwijderd. Dit kan door pseudoelementen met aria-hidden="true" te markeren of door ervoor te zorgen dat deze symbolen geen tekstinhoud toevoegen voor hulpsoftware.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 90: Op pagina https://www.beeldengeluid.nl/toegankelijkheid, onder "Beeld & Geluid in Hilversum," zijn er secties met verborgen inhoud die geopend of gesloten kunnen worden met knoppen. Bij het navigeren met het toetsenbord is de focusindicator op deze knoppen niet zichtbaar. Dit betekent dat bezoekers die met het toetsenbord navigeren niet kunnen zien welk element momenteel de focus heeft, wat verwarrend kan zijn en de toegankelijkheid vermindert. De toetsenbordfocus moet altijd duidelijk zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden, zodat gebruikers weten waar ze zich bevinden op de pagina en wanneer ze op Enter kunnen drukken om een knop of link te bedienen. Dit probleem doet zich ook voor op pagina https://www.beeldengeluid.nl/contact/veelgestelde-vragen, waar de focusindicator op vergelijkbare knoppen ontbreekt.

Bevinding 91: Op pagina https://www.beeldengeluid.nl/collectie is de focusindicator niet zichtbaar op de knoppen onder “Snel naar...” en “Toegang tot de collectie”, en op de secties met verborgen inhoud onder “De collectie bekijken bij Beeld & Geluid”. Dit betekent dat toetsenbordgebruikers geen visuele terugkoppeling krijgen wanneer ze door deze secties navigeren, wat de bruikbaarheid en toegankelijkheid van de pagina beperkt. Zorg ervoor dat alle knoppen en interactieve elementen een duidelijke focusindicator hebben, bijvoorbeeld met een contrasterende rand, een schaduw of een achtergrondkleurverandering.

Bevinding 92: Op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier is de focusindicator niet zichtbaar op de keuzerondjes (radiobuttons) in het formulier. Dit kan verwarrend zijn voor gebruikers die met het toetsenbord navigeren, omdat ze mogelijk niet weten welke optie momenteel is geselecteerd. Voeg een duidelijke focusstijl toe aan deze keuzerondjes, zodat ze zichtbaar worden wanneer ze de focus hebben, bijvoorbeeld door een rand of achtergrondkleur toe te voegen die duidelijk contrasteert met de omliggende elementen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 93: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staan in de footer drie links met logo’s, zoals "ANBI". Deze links hebben geen toegankelijke namen, waardoor ze niet correct kunnen worden geactiveerd met spraakbesturing. Voeg de zichtbare tekst toe aan de toegankelijke naam van deze links, bijvoorbeeld aria-label="ANBI", zodat bezoekers deze links correct kunnen activeren met stemcommando’s. Plaats de zichtbare tekst bij voorkeur vooraan in de toegankelijke naam om de herkenning te verbeteren.

Bevinding 94: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is er een hoofdmenu met een submenu. Wanneer dit submenu wordt geopend, verschijnt er een knop "Sluiten" bovenaan de pagina. De toegankelijke naam van deze knop is echter “Close navigation”, die afkomstig is van het aria-label. Dit komt niet overeen met de zichtbare tekst op de knop, waardoor spraakbesturing mogelijk niet werkt. Pas het aria-label aan zodat de toegankelijke naam dezelfde tekst bevat als de zichtbare tekst op de knop, bijvoorbeeld aria-label="Sluiten", zodat bezoekers de knop correct kunnen bedienen met stemcommando’s.

Bevinding 95: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staat onderaan de knop “Geef feedback”. De toegankelijke naam van deze knop is echter “Usabilla Feedback Button”, die afkomstig is van het aria-label. Dit komt niet overeen met de zichtbare tekst op de knop, waardoor spraakbesturing niet goed zal werken. Zorg ervoor dat de toegankelijke naam van deze knop overeenkomt met de zichtbare tekst, bijvoorbeeld aria-label="Geef feedback", zodat bezoekers deze knop correct kunnen activeren met stemcommando’s.

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 96: In de metadata van het PDF-document op http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf is de taal ingesteld op “English” (en). Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker. Verander de code in “nl”.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 97: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is er een hoofdmenu met een submenu dat geopend kan worden. Wanneer dit submenu geopend is, verschijnt er bovenaan de pagina een knop met de tekst "Sluiten". De toegankelijke naam van deze knop is echter in het Engels: “Close navigation”. Omdat de primaire taal van de pagina Nederlands is, zullen schermlezers deze tekst proberen uit te spreken volgens de Nederlandse uitspraakregels, wat verwarrend kan zijn. Dit probleem kan worden opgelost door het aria-label naar het Nederlands te vertalen, bijvoorbeeld naar “Sluiten navigatie”, zodat de knop correct wordt aangekondigd door schermlezers. Ditzelfde probleem doet zich voor met de knop “Geef feedback” onderaan de pagina, waarvan de toegankelijke naam momenteel “Usabilla Feedback Button” is. Ook deze naam moet worden aangepast naar het Nederlands, bijvoorbeeld “Geef feedback”, om consistent te blijven met de primaire taal van de pagina.

Bevinding 98: Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. Deze banner is in het Engels, maar er is geen afwijkende taalcode ingesteld. Dit betekent dat schermlezers de tekst in de banner proberen voor te lezen met de Nederlandse uitspraakregels, wat kan leiden tot verwarring. Voeg een lang="en"-attribuut toe aan de banner om ervoor te zorgen dat de tekst correct wordt uitgesproken. Of vertaal de tekst van de cookiemelding zodat deze overeenkomt met de taal van de pagina.

Bevinding 99: Op alle pagina’s met broodkruimelnavigatie, zoals https://www.beeldengeluid.nl/toegankelijkheid, heeft de broodkruimelnavigatie een toegankelijke naam “breadcrumb-label” in het Engels. Ook deze naam moet naar het Nederlands worden vertaald, bijvoorbeeld naar “Broodkruimelnavigatie” of “Navigatiepad”, zodat de structuur van de pagina correct wordt voorgelezen door schermlezers.

Bevinding 100: Op pagina https://www.beeldengeluid.nl/en staat in de footer een link met de tekst “Nederlands”. De toegankelijke naam van deze link is in het Engels (“View this website in: Nederlands”), maar de taalcode is ingesteld op Nederlands. Dit zorgt voor een inconsistente taalervaring voor bezoekers die schermlezers gebruiken. Verander de taalcode bij dit element naar Engels (lang="en") om ervoor te zorgen dat de tekst correct wordt uitgesproken.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 101: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staat in de footer onder de kop “Blijf op de hoogte” een formulier waarin HTML5-validatie wordt gebruikt. Dit formulier toont de standaard HTML5-foutmeldingen wanneer het formulier wordt ingediend met lege of onjuiste gegevens. Deze foutmeldingen worden echter niet door alle browsers en schermlezers consistent ondersteund. Sommige browsers tonen de meldingen kort en onvolledig, terwijl andere ze helemaal niet correct voorlezen. Dit kan verwarrend zijn voor bezoekers met een visuele beperking, omdat ze mogelijk niet begrijpen wat er fout is gegaan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier, zodat de meldingen duidelijk en consistent zijn voor alle gebruikers. Controleer ook of er nog meer formulieren op de website zijn die dit probleem hebben, zodat overal dezelfde, toegankelijke foutmeldingen worden gebruikt.

Bevinding 102: Op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden toont het foutbericht in het formulier de melding “Het veld Achternaam is verplicht” voor het veld “Achternaam”. Dit is een instructie en geen echte foutmelding. Een goede foutmelding moet duidelijk maken dat er een fout is gemaakt en waar de fout zich bevindt, meestal met een ontkenning erin, zoals “Het veld is niet (goed) ingevuld” of “Vul uw achternaam in”. Dit geeft de gebruiker directe feedback over wat er mis is gegaan en hoe dit kan worden opgelost. Ditzelfde probleem doet zich voor op de pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier, waar de foutmeldingen ook meer als instructies worden gepresenteerd in plaats van als duidelijke foutmeldingen.

Bevinding 103: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief wordt HTML5-validatie gebruikt in de formulieren, die de standaard HTML5-foutmeldingen weergeeft wanneer het formulier wordt ingediend met lege of onjuiste gegevens. Ook hier moeten aangepaste foutmeldingen worden toegevoegd, zodat gebruikers duidelijk en direct begrijpen wat er fout is gegaan en hoe ze het probleem kunnen oplossen. Voeg bijvoorbeeld foutmeldingen toe die specifiek aangeven welk veld niet correct is ingevuld en waarom, zoals “Vul een geldig e-mailadres in” in plaats van de algemene melding “Dit veld is verplicht”.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 104: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is het logo bovenaan opgesplitst in twee verschillende links die beide een toegankelijke naam missen. Dit betekent dat gebruikers van schermlezers de bestemming of functie van deze links niet kunnen begrijpen, omdat de naam ontbreekt. Dit kan worden opgelost door het logo samen te voegen tot één enkele link met een duidelijke toegankelijke naam, zodat de link correct wordt aangekondigd door schermlezers en de navigatie voor alle bezoekers duidelijker wordt. Zie ook succescriterium 1.1.1 en 2.4.4.

Bevinding 105: Op alle pagina’s, zoals https://www.beeldengeluid.nl, hebben de hoofdmenu links submenu’s, maar de code geeft niet aan of het submenu open of gesloten is. Dit kan verwarrend zijn voor gebruikers van hulpsoftware, omdat de staat van het submenu niet wordt aangegeven. Gebruik hiervoor het aria-expanded-attribuut om de zichtbaarheid van het submenu correct aan te geven. Bijvoorbeeld, een link die een submenu opent kan worden gemarkeerd met aria-expanded="false" wanneer het submenu gesloten is, en aria-expanded="true" wanneer het submenu is geopend. Let er wel op dat dit attribuut alleen actief blijft zolang de focus op de link blijft. Als de focus verplaatst, kan een verborgen tekst worden toegevoegd om de staat van het submenu te communiceren, zodat de toegankelijkheid behouden blijft.

Bevinding 106: Op alle pagina’s, zoals https://www.beeldengeluid.nl, staan in de footer drie links met logo’s die geen toegankelijke naam hebben. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie van deze links is. Voeg een duidelijke toegankelijke naam toe, bijvoorbeeld aria-label="ANBI", aria-label="Privacyverklaring" en aria-label="Cookiebeleid", zodat de bestemming van deze links helder is voor alle bezoekers.

Bevinding 107: Op alle pagina’s, zoals https://www.beeldengeluid.nl, is er een zoekbalk die wordt geactiveerd door een zoekknop in het bovenste menu. In deze zoekbalk bevindt zich een knop met een vergrootglasicoon om een zoekopdracht in te dienen, maar deze knop heeft geen toegankelijke naam. Hierdoor kunnen schermlezergebruikers de functie van de knop niet bepalen, wat de bruikbaarheid vermindert. Voeg een toegankelijke naam toe, zoals aria-label="Zoeken", zodat duidelijk is wat de functie van de knop is. Ditzelfde probleem doet zich voor bij de “X” knop die verschijnt wanneer er tekst in de zoekbalk wordt ingevoerd. Ook deze knop heeft een toegankelijke naam nodig, zoals aria-label="Zoekopdracht verwijderen", zodat de functie van de knop duidelijk is voor alle gebruikers.

Bevinding 108: Op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal staat een zoekbalk onder “Digitaal lesmateriaal”. In deze zoekbalk is er een vergrootglas knop die geen toegankelijke naam heeft. Hierdoor kunnen schermlezers de functie van de knop niet correct aankondigen, wat verwarrend kan zijn voor gebruikers die afhankelijk zijn van hulpsoftware. Voeg een toegankelijke naam toe aan deze knop, bijvoorbeeld aria-label="Zoeken", zodat duidelijk is dat deze knop bedoeld is om een zoekopdracht in te dienen. Ditzelfde probleem doet zich voor met de “X” knop die verschijnt wanneer er tekst in de zoekbalk wordt ingevoerd. Voeg ook hier een duidelijke toegankelijke naam toe, zoals aria-label="Zoekopdracht verwijderen".

Bevinding 109: Op pagina https://www.beeldengeluid.nl is er een zoekbalk die wordt geactiveerd door een zoekknop in het bovenste menu. Deze zoekbalk biedt suggesties in een dropdownlijst terwijl de gebruiker typt, wat functioneert als een combobox. Echter, de noodzakelijke ARIA-rol ontbreekt. Voeg role="combobox" toe aan het invoerveld om de semantische structuur correct te definiëren voor schermlezers. Daarnaast moet het aria-expanded-attribuut worden toegevoegd om de toestand van de dropdownlijst aan te geven, bijvoorbeeld aria-expanded="false" wanneer de lijst is verborgen en aria-expanded="true" wanneer de lijst zichtbaar is. Er zijn meer attributen nodig om dit element volledig toegankelijk te maken, zoals aria-controls om de relatie met de dropdownlijst aan te geven en aria-autocomplete="list" om aan te geven dat de lijst gesuggereerde zoekresultaten bevat. Zie de richtlijnen voor comboboxes op de W3C-website voor een volledige lijst van vereiste attributen: Combobox ARIA Pattern.

Bevinding 110: Op pagina https://www.beeldengeluid.nl, onder de kop "Nu & binnenkort," is er een groep artikelen. Elk artikel heeft een link die geen toegankelijke naam heeft, waardoor gebruikers van schermlezers niet kunnen bepalen wat de bestemming of functie van de link is. Voeg toegankelijke namen toe aan deze links, bijvoorbeeld aria-label="Lees meer over [artikelnaam]", zodat de bestemming van de link duidelijk is voor alle bezoekers.

Bevinding 111: Op pagina https://www.beeldengeluid.nl/toegankelijkheid worden secties met verborgen inhoud beheerd door een knop die altijd aria-expanded="false" heeft, zelfs wanneer het paneel geopend is. Daarnaast heeft de inhoud van het paneel altijd aria-hidden="true", ongeacht de zichtbaarheid ervan. Dit zorgt ervoor dat schermlezers niet correct kunnen bepalen of het paneel geopend of gesloten is en mogelijk geen toegang kunnen krijgen tot de zichtbare inhoud. De status van interactieve componenten zoals deze moet dynamisch worden bijgewerkt om de huidige toestand correct te communiceren naar hulpsoftware. Zorg ervoor dat het aria-expanded-attribuut van de knop dynamisch wordt bijgewerkt naar true wanneer het paneel open is en naar false wanneer het gesloten is. Verwijder ook het aria-hidden-attribuut van de paneelinhoud wanneer het zichtbaar is, zodat de inhoud correct wordt aangekondigd door schermlezers.

Bevinding 112: Op pagina https://www.beeldengeluid.nl/zoeken, op een klein scherm, opent een knop “Filter” een dialoogvenster. Dit dialoogvenster mist zowel een juiste ARIA-rol als een toegankelijke naam. Hierdoor kunnen schermlezers niet correct aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is, wat verwarrend kan zijn voor gebruikers die afhankelijk zijn van ondersteunende technologieën. Dit kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud, bijvoorbeeld aria-label="Filterinstellingen", en role="dialog", zodat de context van het element correct wordt gecommuniceerd.

Bevinding 113: Wanneer het formulier op pagina https://www.beeldengeluid.nl/collectie/materiaal-aanbieden wordt ingevuld, verschijnt er een banner met de kop “Bedankt voor je aanbieding!”. Deze banner is geïmplementeerd met een div met role="contentinfo". De contentinfo-rol is bedoeld voor het identificeren van footer-inhoud die informatie over de site of pagina bevat, en niet voor modale dialoogvensters of pop-ups. Hierdoor kunnen hulpsoftware het dialoogvenster mogelijk niet correct aankondigen, en begrijpen gebruikers mogelijk niet de functie ervan of dat het hun aandacht vereist. Om dit dialoogvenster toegankelijk te maken, gebruik role="dialog" (of role="alertdialog" als het om een belangrijk bericht gaat) op het container-element, zodat de functie van het venster correct wordt herkend door schermlezers. Ditzelfde probleem doet zich voor op de pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier, op de tweede stap van het formulier, waar een vergelijkbare banner verschijnt.

Bevinding 114: Op pagina https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal, onder “Digitaal lesmateriaal”, openen de knoppen “Vak” en “Niveau” extra inhoud, maar de HTML geeft niet aan of de extra inhoud open of gesloten is. Voor bezoekers die de pagina kunnen zien, is dit duidelijk, maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken, ontbreekt deze cruciale informatie. Dit kan worden opgelost door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden. Wanneer een sectie geopend is, moet dit attribuut op true staan (aria-expanded="true") en wanneer de sectie gesloten is, op false (aria-expanded="false"). Dit zorgt ervoor dat de staat van de sectie correct wordt gecommuniceerd naar alle gebruikers, ongeacht hun visuele mogelijkheden.

Bevinding 115: Op pagina https://www.beeldengeluid.nl/onderwijs/mediacollectie, nabij de kop “Media in je les”, staat een iframe zonder een title-attribuut. Iframes moeten altijd een betekenisvolle beschrijving hebben in hun title-attribuut, zodat gebruikers van schermlezers weten wat voor type inhoud ze kunnen verwachten en waar het inhoudelijk over gaat. Een geschikt title-attribuut zou bijvoorbeeld kunnen zijn title="Video: Media in je les", of title="Podcast: Media in je les", afhankelijk van de inhoud van het iframe. Dit helpt blinde bezoekers om te beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Bevinding 116: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht staat een link met de tekst “Delen”. Het a-element voor deze link dient als een knop, maar heeft geen href-attribuut, terwijl het aria-expanded-attribuut wordt gebruikt. Zonder een href-attribuut wordt het a-element door browsers en sommige hulpsoftware behandeld als een generiek element, waardoor ARIA-attributen niet correct worden verwerkt. Om dit op te lossen, voeg een geldig href-attribuut toe aan het a-element, bijvoorbeeld href="#" voor een tijdelijke oplossing, of verander het element naar een button-element (<button>) als het bedoeld is om een actie uit te voeren in plaats van navigatie.

Bevinding 117: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht staan elementen binnen de podcast met onjuiste rollen. Bijvoorbeeld, achtergrondafbeeldingen hebben aria-role="img" in plaats van het correcte role="img". Daarnaast hebben progressiebalken een niet-bestaande rol “bar”, wat niet correct is volgens de ARIA-specificatie. Gebruik in plaats daarvan role="progressbar" voor progressiebalken, zodat schermlezers deze elementen correct herkennen en aankondigen.

Bevinding 118: Op pagina https://www.beeldengeluid.nl/kennis/blog/persvrijheid-belicht, in de podcasts, verschijnt er een link met de tekst “Leave a comment at X:XX” wanneer een bezoeker met de muis onder de voortgangsbalk beweegt. Deze link heeft geen toegankelijke naam, waardoor schermlezers de functie van de link niet kunnen bepalen. Daarnaast ontbreekt er een href-attribuut, waardoor het element niet als een echte link wordt herkend. Voeg een geldig href-attribuut toe en zorg ervoor dat de link een duidelijke toegankelijke naam heeft, zoals aria-label="Laat een reactie achter bij X:XX", zodat de functie van de link duidelijk is voor alle gebruikers.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 119: Op pagina https://www.beeldengeluid.nl/zoeken wijzigen de filters de zoekresultaten dynamisch zonder dat de pagina opnieuw wordt geladen, waardoor een bericht zoals “840 resultaten” verschijnt. Dit bericht is een statusbericht, maar wordt momenteel niet automatisch aangekondigd door schermlezers omdat het geen toetsenbordfocus ontvangt en geen correcte ARIA-attributen heeft. Statusberichten zoals deze moeten automatisch worden voorgelezen door schermlezers zodra ze verschijnen of veranderen, zodat gebruikers met een visuele beperking direct op de hoogte zijn van de bijgewerkte resultaten. Dit kan worden opgelost door role="status" toe te voegen aan het element dat het statusbericht bevat. Dit zorgt ervoor dat de inhoud automatisch wordt voorgelezen door schermlezers zodra deze wordt bijgewerkt, zonder dat de focus hoeft te verplaatsen. Dit verbetert de toegankelijkheid aanzienlijk voor gebruikers die afhankelijk zijn van schermlezers.

Bevinding 120: Op pagina https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief, onder de koppen "Meld je aan voor de nieuwsbrief" en "Nieuw: een e-mailcadeautje op je verjaardag!", verschijnt het statusbericht "Bedankt voor je aanmelding! Je ontvangt een …. webredactie@beeldengeluid.nl." na het indienen van het formulier, zonder dat de pagina opnieuw wordt geladen. De toetsenbordfocus wordt echter niet naar dit bericht verplaatst, waardoor schermlezers het mogelijk niet automatisch aankondigen. Om dit probleem op te lossen, voeg je aria-live="polite" of role="status" toe aan het element dat het statusbericht bevat. Dit zorgt ervoor dat schermlezers het bericht automatisch voorlezen zodra het verschijnt, zonder dat de focus hoeft te verplaatsen. Meer informatie over role="status" en de juiste implementatie hiervan is te vinden op de W3C-website: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

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://www.beeldengeluid.nl/
• Contact:
  https://www.beeldengeluid.nl/contact
• Toegankelijkheid:
  https://www.beeldengeluid.nl/toegankelijkheid
• Pagina niet gevonden:
  https://www.beeldengeluid.nl/404
• Home | The Netherlands Institute for Sound & Vision:
  https://www.beeldengeluid.nl/en
• Collectie:
  https://www.beeldengeluid.nl/collectie
• Zoeken:
  https://www.beeldengeluid.nl/zoeken
• Materiaal aanbieden:
  https://www.beeldengeluid.nl/collectie/materiaal-aanbieden
• Mediaworkshop en museumbezoek boeken:
  https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier
• Podcastserie: persvrijheid belicht:
  https://www.beeldengeluid.nl/kennis/blog/podcastserie-persvrijheid-belicht
• Collectie voor makers en professionals:
  https://www.beeldengeluid.nl/collectie/collectie-voor-makers-en-professionals
• Meld je aan voor de nieuwsbrief:
  https://www.beeldengeluid.nl/meld-je-aan-voor-de-nieuwsbrief
• Veelgestelde vragen:
  https://www.beeldengeluid.nl/contact/veelgestelde-vragen
• Media in je les:
  https://www.beeldengeluid.nl/onderwijs/mediacollectie
• Digitaal lesmateriaal:
  https://www.beeldengeluid.nl/onderwijs/digitaal-lesmateriaal
• Locatieverhuur:
  https://www.beeldengeluid.nl/bezoek/locatieverhuur
• Collectieplan_BeeldenGeluid:
  http://files.beeldengeluid.nl/pdf/Collectieplan_BeeldenGeluid.pdf
• Jaarverslagen:
  https://www.beeldengeluid.nl/organisatie/jaarverslagen
• Jaarverslag 2024:
  https://files.beeldengeluid.nl/pdf/Jaarverslag_2024_publiek_4-4-25.pdf

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• 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.