Rapport:
Audit digitale toegankelijkheid website Beeld en geluid

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

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.

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.

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: 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".

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.

Uitkomst: Onvoldoende

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

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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: 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 “Bezoek” staan bijvoorbeeld teksten “Open van dinsdag t/m zondag, van 10:00 tot 17:00 uur” is 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.

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.

Op pagina https://www.beeldengeluid.nl/onderwijs/workshops/aanvraagformulier, onder de kop "Mediaworkshop en museumbezoek boeken", 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.

Op pagina https://www.beeldengeluid.nl/toegankelijkheid, onder "Veelgestelde vragen over toegankelijkheid", 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.

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.

Op pagina https://www.beeldengeluid.nl/onderzoek/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.

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.

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

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

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

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

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

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.

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.

Uitkomst: Onvoldoende

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

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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.

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.

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.

Uitkomst: Onvoldoende

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

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.

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.

Uitkomst: Onvoldoende

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

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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).

Uitkomst: Onvoldoende

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

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: 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 focuslogica consistent en worden onbedoelde interacties voorkomen.

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.

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.

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. Verberg deze elementen volledig voor toetsenbordgebruikers wanneer ze visueel verborgen zijn, bijvoorbeeld met display: none of aria-hidden="true".

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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="Ministerie van Onderwijs Cultuur en Wetenschap", om de bestemming duidelijk te maken. Dit zorgt ervoor dat alle links een duidelijk linkdoel hebben en eenvoudig te begrijpen zijn voor alle bezoekers.

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.

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.

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.

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

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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.

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 "Collectietrailer Beeld & Geluid". 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.

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.

Uitkomst: Onvoldoende

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

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s, zoals https://www.beeldengeluid.nl, wordt bovenaan het logo weergegeven met de tekst “Beeld & Geluid”. De toegankelijke naam van deze link is “Sound & Vision - Visit Home”, terwijl de zichtbare tekst aanwezig is. Dit betekent dat de link niet kan worden bediend door stemgestuurde systemen, omdat de tekst die gebruikers uitspreken om de link te activeren niet overeenkomt met de toegankelijke naam. Zorg ervoor dat de toegankelijke naam van deze link overeenkomt met de zichtbare tekst, bijvoorbeeld aria-label="Beeld & Geluid", zodat de link correct wordt herkend door schermlezers en spraakgestuurde systemen.

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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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”.

Uitkomst: Onvoldoende

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

Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. Deze banner is in het Engels, maar er is geen 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.

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.

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 naar Engels (lang="en") om ervoor te zorgen dat de tekst correct wordt uitgesproken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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.

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

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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.

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.

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.

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.

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.

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.

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.

Op pagina https://www.beeldengeluid.nl/onderzoek/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.

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.

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.

Uitkomst: Onvoldoende

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

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.