Audit digitale toegankelijkheid van website https://www.rijksmuseum.nl/nl
Samenvatting
Wij hebben de website www.rijksmuseum.nl/nl onderzocht tussen 10 en 28 maart 2025. Op dit moment zijn 24 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 31 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Alle pagina's op de website https://www.rijksmuseum.nl/nl
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 134
Google Chrome, versie 131
Apple Safari, versie 17
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Hoe de schermlezer VoiceOver de homepagina voorleest
SC 1.1.1 en SC 4.1.2 Menuknop is ontoegankelijk
Op sommige pagina’s staat bovenaan de pagina een menuknop met drie horizontale streepjes, de zogenaamde hamburgerknop. Deze knop is ontoegankelijk, omdat:
de afbeeldingen van de hamburger en het kruisje geen tekstalternatief hebben. Dit is nodig om de functie van de knop te beschrijven;
de knop geen toegankelijke naam heeft;
de staat van het mobiele menu niet aan de schermlezer wordt doorgegeven. Als je met een knop een pop-up kunt tonen en verbergen, dan moet hulpsoftware de toestand van deze pop-up (zichtbaar of verborgen) kunnen bepalen.
Je lost dit op dezelfde manier op als bij de hamburgerknop op de homepage. Gebruik een aria-label en het aria-expanded-attribuut.
SC 1.4.3 Tekst op afbeeldingen heeft niet genoeg contrast
Op alle pagina's staat tekst over schilderijen of afbeeldingen heen. In sommige gevallen is het contrast tussen de kleur van de tekst en de achtergrond te laag. Op de homepage staat bijvoorbeeld een tekst onder het kopje "American Photography": "De ontwikkeling van de Amerikaanse beeldcultuur in de volle breedte". Deze witte tekst (#FFFFFF) staat op een grijze achtergrond (#91908E). De contrastverhouding tussen deze kleuren is 3,2:1, terwijl het minimaal 4,5:1 moet zijn.
Voeg een contour of schaduw toe aan de tekst om het contrast met de achtergrond te vergroten.
Plaats de tekst in een kader met een achtergrondkleur die voldoende contrast met de tekst heeft.
Tekst die kleiner is dan 18pt moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 18pt (24px) of 14pt (18,66px) vetgedrukt is dit minimaal 3,0:1. Met een vetgedrukte tekst bedoelen we een tekst die de CSS-eigenschap font-weight:bold of font-weight:700 heeft gekregen.
SC 1.4.3 Tekst van de knop heeft te weinig contrast
De witte tekst (#FFFFFF) heeft niet genoeg contrast op de rode achtergrond (#D55140). De contrastverhouding is 4,1:1.
Deze kleurencombinatie komt op verschillende plekken voor, bijvoorbeeld bij:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
Deze kleur is in de CSS gedefinieerd als “ubPrimaryColor”. Als je deze kleur in de stylesheet aanpast, los je dit contrastprobleem dus direct op alle pagina’s op.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Het menu bovenaan de pagina bestaat uit links met witte tekst en staat op een achtergrond die wisselt per pagina. Op sommige pagina’s is de achtergrond lichtgrijs en op andere pagina’s bijna wit. Het kleurcontrast is in die gevallen onvoldoende. De contrastverhouding tussen wit (#FFFFFF) en grijs (#CAC6BE) is 1,7:1.
De tekst in het menu is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn. Dit kun je bereiken door een achtergrond aan de links toe te voegen of de letters een donkere schaduw te geven.
SC 2.2.2 Video speelt automatisch af
De website bevat video’s die automatisch afspelen en niet gepauzeerd of gestopt kunnen worden. Het kan storend zijn voor mensen met een cognitieve beperking als een video op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.
Voorbeelden van pagina’s met een video die automatisch start:
Er moet een manier zijn waarmee bezoekers dit soort multimedia kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.
SC 2.2.2 Bewegende content kan niet gestopt, gepauzeerd of verborgen worden (carrousel)
Op de website staat een carrousel die elke paar seconden een nieuwe afbeelding toont. Deze carrousel kan niet worden gestopt, gepauzeerd of verborgen.
Bewegende content kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.
Voeg knoppen toe waarmee bezoekers de carrousels kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.
SC 2.4.3 Toetsenbordfocus komt buiten de cookiebanner
De eerste keer dat je de website bezoekt, verschijnt een dialoogvenster voor cookie-instellingen. Als je met het toetsenbord door alle interactieve elementen in deze cookiebanner bent gegaan, kan de toetsenbordfocus uit het venster gaan, terwijl dit wel open blijft. De focus gaat dan naar de onderliggende pagina-inhoud. Bezoekers kunnen zo onbedoeld de onderliggende interactieve elementen activeren.
Oplossing:
Implementeer focus trapping om ervoor te zorgen dat de focus in het dialoogvenster blijft totdat dit wordt gesloten. Zorg dat de bezoeker het venster kan sluiten met een sluitknop of de ESC-toets, of dat het automatisch sluit op het moment dat de toetsenbordfocus het venster verlaat.
SC 4.1.2 Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam
De cookiebanner is geprogrammeerd als een dialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam.
Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.
Oplossing:
Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
SC 1.3.1 <strong>-element is gebruikt in plaats van een kop
Op alle pagina's in het hoofdmenu staat de tekst "Direct naar". Voor deze tekst is het <strong>-element gebruikt in plaats van het juiste kop-element (<h1>-<h6>). Hierdoor herkennen schermlezers en andere hulpsoftware de tekst niet als een koptekst.
Oplossing:
Vervang <strong> door het juiste kop-element (<h2>, <h3>, enz.) en zorg voor een logische kopregelhiërarchie.
Gebruik CSS om kopteksten de gewenste vormgeving te geven.
SC 2.4.6 Koptekst is onduidelijk
In het hoofdmenu staat een kopje met nietszeggende tekst. Het gaat om “Direct naar”.
Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet je ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is.
Oplossing:
Gebruik een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.
SC 2.5.3 Zichtbare tekst ontbreekt in toegankelijke naam van de knop
Als je de website bekijkt op een klein scherm, krijgt de knop met de zichtbare tekst "Language" een aria-label-attribuut met de waarde "Open taalkeuze".
Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.
Oplossing:
Verwijder het aria-label van deze knop.
SC 2.4.4 Logo in het mobiele menu is een link, maar bestemming is onbekend
In het mobiele menu dat je kunt openen met de hamburgerknop, staat het logo van het Rijksmuseum. Deze afbeelding is een link, maar de link heeft geen inhoud.
Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.
Oplossing:
Pas een van deze opties toe om de link meer context te geven:
Alt-tekst: voeg een <title>-element aan de svg toe met de naam van het museum.
aria-label: Voeg een aria-label-attribuut toe aan het <a>-element met de naam van het museum.
Visueel verborgen tekst: voeg beschrijvende tekst toe binnen het <a>-element en verberg deze visueel met CSS, terwijl je de tekst toegankelijk houdt voor schermlezers.
SC 1.1.1 Logo van het museum heeft geen tekstalternatief
Bovenaan de homepage staat het logo van het museum. Deze svg-afbeelding heeft een aria-hidden-attribuut. Dit attribuut zorgt ervoor dat schermlezers het element negeren.
Daarnaast ontbreekt een tekstalternatief voor deze afbeelding.
Oplossing:
Voeg de naam van het museum als tekst toe die alleen zichtbaar is voor schermlezers.
SC 1.4.4, 1.4.10 Tekst van logo verdwijnt uit beeld bij inzoomen tot 200%
In het mobiele menu dat je kunt openen met de hamburgerknop, verdwijnt de tekst van het logo als je inzoomt. Hierdoor gaat informatie verloren. Het gebeurt ook bij de link met de tekst "NU TE ZIEN / American Photography / De eerste grote..." in het menu. Dit is niet de bedoeling. Als je inzoomt tot 200% bij een resolutie van 1280 bij 1024 pixels, moet alle content zichtbaar en leesbaar blijven. Dit geldt dus ook voor de tekst van het logo.
Oplossing:
Zorg ervoor dat deze tekst zichtbaar blijft, of bied een toegankelijk alternatief in de vorm van tekst elders op de pagina.
SC 2.4.11 Focus is onzichtbaar onder sticky footer / header
Als je de website bekijkt op een scherm met een kleinere resolutie, wordt in het menu (drie horizontale lijnen) een deel van de pagina-inhoud verborgen door een sticky header. Interactieve elementen zoals "Pers" krijgen nog steeds toetsenbordfocus, maar de focusindicator is verborgen achter de sticky header.
Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.
Oplossing:
Zorg ervoor dat de sticky header of footer geen interactieve elementen of focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.
SC 2.4.3 Toetsenbordfocus gaat buiten het mobiele menu
Op alle pagina's staat bovenaan de pagina een menuknop. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers uit het mobiele menu navigeren met het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan.
Oplossing:
Bij dit soort menu’s moet je de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen.
Dit kun je op een van de volgende manieren oplossen:
Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.
SC 1.3.1 Relatie tussen links in een groep is niet in HTML vastgelegd
In de footer van deze pagina staan meerdere clusters van links die eruitzien als een groep. Deze groepering is niet vastgelegd in de HTML-structuur. Het gaat bijvoorbeeld om de socialmedia-iconen, de logo's en de links naar juridische documenten ("Algemene voorwaarden", "Privacy", "Cookiebeleid", "Herroepingsrecht").
Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.
Oplossing:
Neem de elementen op in een ul- of nav-element.
SC 1.3.1 Kopteksten zijn niet gemarkeerd als koppen
Boven de logo’s in de footer staan de teksten “Founder” en “Hoofdsponsoren”. Deze teksten leggen uit wat de onderstaande logo’s betekenen. Deze relatie ontbreekt in de HTML omdat deze teksten in een <p>-element zijn opgenomen.
Oplossing:
Om deze relatie duidelijk te maken zet je deze teksten om in een kop-element, bijvoorbeeld een <h3>.
Advies
Gebruik het woord “link” niet in een linktekst of een aria-label en de woorden “logo” of "afbeelding" niet in de alt-tekst van een afbeelding. Als de schermlezer bij een belangrijk element zoals een link, een knop of een afbeelding komt, wordt de functie van het element al voorgelezen. Als je dat woord dan ook nog in de linktekst of de alt-tekst zet, zorgt dat voor onnodige herhaling. In de footer van de website gebeurt dit door het gebruik van een aria-label-attribuut.
SC 1.3.2 Artikelen hebben een onlogische leesvolgorde
Op deze pagina is de volgorde van de HTML-elementen binnen de artikelen onjuist. De huidige volgorde in het artikel "AMSTERDAM 750" is bijvoorbeeld: link, afbeelding, kop en tekst.
Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding, link en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.
Oplossing:
Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, gaat tekst gedeeltelijk verloren.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.1 Huidige stap bestelproces alleen aan kleur te herkennen
Op alle pagina’s van het bestelproces is de huidige stap alleen visueel aangegeven. Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dus niet bij welke stap ze zijn.
Oplossing:
Zorg ervoor dat de huidige stap ook nog op een andere manier te herkennen is, bijvoorbeeld door deze te onderstrepen of vetgedrukt te maken.
SC 1.3.1 De huidige stap wordt niet doorgegeven aan de schermlezer
Op alle vier de pagina’s van het bestelproces is het voor de schermlezer niet duidelijk welke link in de horizontale navigatie met de stappen ( 1 tot 4) een actieve link (de huidige stap) is.
Oplossing:
Dit kan worden opgelost door een verborgen tekst toe te voegen die alleen zichtbaar is voor de schermlezer.
SC 1.1.1 Decoratieve afbeelding niet verborgen voor schermlezer
In alle vier de stappen staat bovenaan de pagina een decoratieve afbeelding met een tekstalternatief. Schermlezers beginnen daardoor elke pagina van dit proces met het voorlezen van de tekst “Een moeder en een dochter kijken naar Delfts Blauw”.
Oplossing:
Laat de alt-tekst bij deze decoratieve afbeelding leeg. Dan negeren schermlezers de afbeelding.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op alle pagina’s van het bestelproces staan de grijze links (#797E82) van de niet-actuele stappen op een donkergrijze achtergrond (#40474F). De contrastverhouding is hier 2,3:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
SC 1.3.1 Visueel zijn er meerdere alinea’s, in de code maar één
Onder de tekst "Entree + rondleiding - Het beste van het Rijksmuseum" in stap 2 is een blok tekst met meerdere paragrafen gemarkeerd als een enkel <p>-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
Oplossing:
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
SC 1.3.1 De geselecteerde dag is niet in de code vastgelegd
Als je in stap 2 een datum selecteert in de kalender, ziet de geselecteerde datum er anders uit dan de rest. Deze informatie is niet in de code vastgelegd. Hetzelfde geldt voor de tijdsloten.
Oplossing:
Zorg dat veranderingen in hoe iets eruitziet (bijvoorbeeld omdat het geselecteerd wordt) ook in de code zichtbaar zijn. Dit doe je bijvoorbeeld met aria of andere attributen. Hierdoor kunnen schermlezers en andere hulpsoftware de informatie doorgeven.
SC 1.4.1 Informatie wordt alleen in kleur overgebracht
Als je in stap 2 een datum selecteert in de kalender, wordt alleen kleur gebruikt om aan te geven welke datum is geselecteerd. Hetzelfde geldt voor de tijdsloten. Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen nu zien of een datum is geselecteerd.
Oplossing:
Zorg dat je naast kleur ook nog een andere visuele indicator gebruikt, zoals een ander patroon of vorm, of een dikkere rand.
SC 2.4.3 Focusvolgorde is niet logisch
Als je in stap 2 de optie “Entree museum" selecteert, opent een kalender. Je verwacht dat de toetsenbordfocus na het selecteren van een datum met het toetsenbord in het volgende scherm met de tijdsloten komt. Dit gebeurt wel, maar de focus is niet zichtbaar omdat het buitenbeeld is. De bedoeling is dat je met de Enter toets de datum selecteert, vervolgens op de Tab-toets drukt om naar de tijdslots te gaan. Binnen de tijdslots gebruik je pijltoetsen om een datum te selecteren. Deze functionaliteit werkt wel, maar is onzichtbaar voor een ziende bezoeker.
De bezoeker met een schermlezer wordt niet naar de tijdslots gestuurd na het selecteren van een datum. De schermlezer leest eerst alle beschikbare dagen voor en vervolgens alle beschikbare tijden.
Oplossing:
Maak de toetsenbordfocus zichtbaar en de focusvolgorde logisch.
SC 4.1.3 Timer wordt niet aangekondigd door schermlezers
In stap 2 is een timer actief. Deze informatie is een statusbericht, maar schermlezers kondigen dit niet als een statusbericht aan.
Oplossing:
Voeg aria-live="polite" toe aan de container met de timer.
SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld
Als je het formulier in stap 3 instuurt met lege velden of onjuiste gegevens, verschijnen de foutmeldingen: "Voornaam moet ingevuld worden", "Achternaam moet ingevuld worden" en/of "E-mailadres moet ingevuld worden". De relatie tussen deze foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan in de "formulier"-modus namelijk vaak losse inhoud die tussen invoervelden in staat over.
Oplossing:
Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
In stap 3 ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie, zoals "Naam", "Achternaam" en "E-mailadres".
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: Input Purposes.
SC 3.1.2 Taalwisseling ontbreekt op anderstalige content
In stap 3 zijn de namen van de landen in het select-element "Land" in het Engels geschreven, zonder taalcode.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Je wilt echter dat de schermlezer bij deze tekst op de taal van deze zin overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.
Oplossing:
Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Als je het formulier in stap 3 instuurt met lege velden of onjuiste gegevens, verschijnen de foutmeldingen: "Voornaam moet ingevuld worden", "Achternaam moet ingevuld worden", en/of "E-mailadres moet ingevuld worden".
Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 3.3.2 Belangrijke instructie is geplaatst als placeholder-tekst
In stap 3 staat het invoerveld “Postcode” met de placeholder-tekst “1071XX”. Dit veld vereist een specifiek format: de postcode moet zonder spatie worden ingevuld. Vul je dit niet goed in, dan verschijnt een foutmelding: “Postcode mag maximaal 6 karakters bevatten”. Het voorbeeld van het format (“1071XX”) is op dit moment niet permanent zichtbaar: het verdwijnt als je begint te typen.
Oplossing:
Plaats deze informatie als een permanent zichtbare tekst boven het invoerveld.
SC 3.3.7 Ingevulde gegevens verdwijnen
In stap 3 staat een formulier. Als je dit formulier instuurt zonder het keuzevakje in de widget "Cloudflare" aan te vinken, verdwijnt alles wat je al had ingevuld, inclusief de correcte gegevens. Zorg ervoor dat de correcte gegevens niet verdwijnen.
Oplossing:
Zorg dat de gegevens die al goed waren blijven staan, zodat een bezoeker ze niet nog een keer hoeft in te vullen.
SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld
Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnen formulieren. Stuur je dit in met lege velden of onjuiste gegevens, dan verschijnen foutmeldingen, bijvoorbeeld "Voer de naam van de kaart in", "Onvolledig veld" of "Voer de vervaldatum in". De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan in de "formulier"-modus namelijk vaak losse inhoud over die tussen invoervelden in staat.
Oplossing:
Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnen formulieren. In de invoervelden voor persoonlijke informatie ("Straat", "Postcode") ontbreekt het autocomplete-attribuut.
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Bij de betaalmethoden "Creditcard" en "Bancontactkaart" in stap 4 staat de grijze tekst (#687282) "Alle velden zijn verplicht tenzij anders aangegeven." op een donkergrijze achtergrond (#343B42). De contrastverhouding is hier 2,3:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
SC 1.4.3 Foutmeldingen hebben te weinig contrast
Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnen formulieren. Stuur je dit in met lege velden of onjuiste gegevens, dan verschijnen foutmeldingen met rode tekst (#D55140) tegen een grijze achtergrond (#343B42). De contrastverhouding is 2,7:1.
Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.
Oplossing:
Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.
SC 3.1.2 Content in het Engels heeft geen taalswitch
Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnt een formulier. Al deze inhoud is in het Engels, maar het lang-attribuut ontbreekt.
Oplossing:
Vertaal de teksten naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers. Of voeg lang=”en” toe aan de container van deze inhoud.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnen formulieren. Als je het formulier instuurt met lege velden of onjuiste gegevens, verschijnen foutmeldingen zoals "Enter the card name”, "Incomplete field” en “Enter the expiry date”.
Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld
Als je het formulier op deze pagina instuurt met lege velden verschijnt een foutmelding, zoals "Vul a.u.b. je naam in". De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers in de "formulier"-modus slaan namelijk vaak losse inhoud over die tussen invoervelden in staat.
Oplossing:
Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Op deze pagina ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie, zoals "E-mail".
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".
SC 4.1.2 fieldset-element met interactieve inhoud heeft geen naam
In het formulier wordt vier keer het fieldset-element gebruikt zonder toegankelijke naam. Dit is wel nodig. Anders kan de schermlezer niet vertellen welke inhoud hierin is opgenomen.
Oplossing:
Gebruik het <legend>-element om fieldsets een naam te geven. Je kunt daarnaast het beste deze vier fieldset-elementen combineren tot één fieldset.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op deze pagina staat een formulier met invoervelden. De contrastverhouding tussen de grijze rand (#CACACA) en de achtergrond van de pagina (#EAEAEA) is 1,4:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 1.4.3 Tekst op knop heeft niet genoeg contrast
Het kleurcontrast tussen de witte tekst en de blauwe achtergrond van de knop is 3,4:1. Logo’s worden gezien als ‘kunstobjecten’ en hoeven daarom niet aan de contrasteisen te voldoen. Voor de knop met een “F” geldt dus een uitzondering. De tekst op de knop ernaast is een gewone tekst, dus deze moet wel voldoen aan de eisen.
Oplossing:
Verhoog het contrast naar minimaal 4,5:1.
SC 2.4.3 Toetsenbordfocus verplaatst niet naar de foutmelding
Als je het formulier op deze pagina instuurt met lege velden, verschijnen foutmeldingen zonder dat de pagina opnieuw wordt geladen. De focus verplaatst echter niet automatisch naar de eerste foutmelding. Dit dwingt toetsenbordgebruikers om achteruit te navigeren met Shift+Tab om de fout te vinden, en dat is niet toegankelijk.
Oplossing:
Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen. Je kunt ook een aria-live region gebruiken.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Als je het formulier op deze pagina instuurt met lege velden, verschijnen foutmeldingen, bijvoorbeeld "Vul a.u.b. je naam in", "Vul a.u.b. je e-mailadres in" en "Vul a.u.b. een wachtwoord in".
Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
De titel van deze pagina ("- Alle Rijksstudio's - Rijksstudio - Rijksmuseum") beschrijft de inhoud van de pagina niet goed.
In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s.
Oplossing:
Zet een duidelijke tekst in het title-element van de pagina, die de inhoud van de pagina beschrijft.
SC 1.4.3 Tekst van de knop heeft te weinig contrast
Op deze pagina staan knoppen met de teksten “Annuleren” en “Kies een nieuwe foto”. De witte tekst van de knop (#ffffff) heeft een contrast van 2,3:1 tegen de grijze achtergrond (#A2ABAD).
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is.
SC 1.3.1 Relatie tussen links in een groep is niet in HTML vastgelegd
Onder de kop "Instellingen" op deze pagina staan links die eruitzien als een groep, maar waarvan de relatie niet is vastgelegd in de code. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.
Oplossing:
Neem de elementen op in een ul- of nav-element.
SC 4.1.2 Invoerveld heeft geen toegankelijke naam
De invoervelden "Naam" en “nr.” op deze pagina hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Het contrast tussen de grijze randen van de invoervelden op deze pagina (#C4C4C4) en de achtergrond van de pagina (#EAEAEA) is 1,4:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 3.3.2 Placeholder-tekst wordt gebruikt als label voor een invoerveld
Op deze pagina staat een invoerveld met de placeholder-tekst “nr”. Deze placeholder-tekst is hier als label gebruikt, maar deze verdwijnt als je begint te typen. Invoervelden moeten een label hebben dat altijd zichtbaar is. Je kunt hier dus niet een placeholder-tekst voor gebruiken.
Oplossing:
Voeg een permanent zichtbaar label toe bij het invoerveld.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Op deze pagina ontbreekt het autocomplete-attribuut bij invoervelden die persoonlijke informatie verzamelen (bijvoorbeeld voornaam, e-mail, telefoonnummer).
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".
SC 2.5.3 Zichtbare tekst van het invoerveld staat niet in de toegankelijke naam
De zichtbare tekst van het invoerveld op deze pagina is “voornaam”, maar de toegankelijke naam is “Naam”.
Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.
Oplossing:
Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
Op deze pagina staat een keuzelijst (select-element) met het label “Voorkeurstaal e-mail”. Dit element heeft geen toegankelijke naam.
Oplossing:
Geef het select-element een toegankelijke naam.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op deze pagina is de toetsenbordfocus niet zichtbaar op de volgende elementen: het select-element naast “Land”, en het select-element naast “Voorkeurstaal e-mail”.
De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus
Na de link “Kies een nieuwe foto” op deze pagina, landt de toetsenbordfocus op een onzichtbaar element.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag
Als de knop “Annuleren” of “Opslaan” op deze pagina toetsenbordfocus krijgt, zie je dat aan een witte focusindicator-rand. Het contrast tussen deze witte rand en de grijze achtergrond is 1,2:1.
Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
Op deze pagina zijn 27 afbeeldingen geplaatst met behulp van een img-element, maar ze hebben geenalt-attribuut. Het gaat bijvoorbeeld om de afbeelding onder het kopje “Collectie” en alle afbeeldingen onder de kop “Kunstwerken”.
Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.
Oplossing:
Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alt-tekst toe.
Je kunt deze afbeeldingen vinden met Axe-tool.
SC 1.3.1 Relatie tussen links in een groep en de voorafgaande tekst is niet in HTML vastgelegd
Op deze pagina staat naast de tekst "Aan de slag met de collectie:" een groep links die visueel een groep vormt, maar waarvan de relatie niet is vastgelegd in de HTML-structuur. Hetzelfde geldt voor de logo's naast de tekst "Collectie Online wordt mede mogelijk gemaakt door".
Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.
Oplossing:
Zet de teksten "Aan de slag met de collectie:" en "Collectie Online wordt mede mogelijk gemaakt door" om in koppen. Zo wordt de relatie tussen deze stukken content duidelijker.
SC 1.4.4 en SC 1.4.10 Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken
Als je de tekst op deze pagina inzoomt tot 200%, zijn de links "Ontdek" en "Vertel je verhaal" niet meer zichtbaar. Dit gebeurt ook bij 400% zoom.
Oplossing:
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% of 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.10 Bij 400% zoom is een horizontale scrollbar aanwezig
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 en inzoomt tot 400%, verschijnt een scrollbalk.
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). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Oplossing:
Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.
SC 2.1.1 Knop kan niet bediend worden met spatiebalk en Enter-toets
Onder het kopje "Kunstwerken" op deze pagina staan knoppen met een "+"-icoon. Deze knoppen zijn niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.
SC 1.4.13 Content die verschijnt bij hover kan niet worden afgesloten
Onder het kopje "Kunstwerken" op deze pagina staan knoppen met een "+"-icoon. Als een bezoeker de muis over deze knoppen beweegt, verschijnt nieuwe inhoud. Deze inhoud bedekt de kunstwerken, maar kan niet met de ESC-toets worden afgesloten.
Oplossing:
Zorg ervoor dat alle inhoud die bij hover of focus verschijnt en informatieve elementen op de pagina bedekt, met de ESC-toets kan worden afgesloten.
SC 2.4.4 en SC 2.5.3 Het is onduidelijk waar de link naar toe verwijst
Onder het kopje "BEZOEKERSVERHALEN" op deze pagina staan kaartjes met afbeeldingen die links zijn naar de detailpagina van een verhaal. De toegankelijke namen van de links beschrijven de bestemming van de links niet duidelijk. Het gaat bijvoorbeeld om de naam "Festoen van vruchten en bloemen Stilleven met bloemen en vruchten Gouden hert." Een blinde bezoeker begrijpt mogelijk niet wat er gebeurt na het activeren van de link. Daarnaast zijn deze link niet met stem te bedienen. Een bezoeker die stembesturing gebruikt om op de website te navigeren, leest de tekst van het kaartje op, maar kan daarmee de link niet activeren.
Oplossing:
De toegankelijke naam van de link moet duidelijk beschrijven wat er gebeurt als je op de link klikt. In plaats van een lijst met namen van kunstwerken moet hier de zichtbare tekst van het kaartje staan: “Beauty in the eye ..”.
Dit kun je bereiken door een aria-label op de link te plaatsen:
<a href=”#” aria-label=”Beauty in the eye of the beholder 18 november 2024 759 kunstwerken”>
Op deze pagina staan 36 afbeeldingen die toegevoegd zijn via het <img>-element en die geen alt-attribuut hebben. Het gaat onder andere om de afbeeldingen onder het kopje "Stel je eigen Eregalerij samen" en naast de kopjes "Probeer de Kunstverkenner" en "Vergelijk je favoriete details".
Hierdoor leest de schermlezer de bestandsnaam van de afbeelding voor. Dit zorgt voor een ontoegankelijke ervaring.
Oplossing:
Geef deze afbeeldingen een alt-attribuut. Je kunt de lijst met deze afbeeldingen vinden met Axe-tool.
SC 4.1.2 Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam
Op deze pagina openen de knoppen met de teksten "Hang kunstwerken op" en "Maak nu" (onder het kopje "Wat verzamel jij?") een dialoogvenster. Bij dit dialoogvenster mist zowel een eigen ARIA-rol als een toegankelijke naam.
Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.
Oplossing:
Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
2.4.3 Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten
Op deze pagina opent de knop met de tekst "Hang kunstwerken op" een dialoogvenster. Na het sluiten van het dialoogvenster gaat de toetsenbordfocus niet terug naar het element dat de knop activeert of naar het volgende logische element in de focusvolgorde van de pagina. De focus begint weer bovenaan de pagina.
Oplossing:
Zorg dat de focus na het sluiten van het venster terechtkomt op het element waarmee het dialoogvenster werd geopend.
SC 2.4.6 Advies: knoppen met dezelfde tekst hebben een andere functie
Op deze pagina staan meerdere knoppen met dezelfde zichtbare tekst: "Maak nu". Deze knoppen hebben echter verschillende functies.
Je kunt met deze knoppen een andere actie uitvoeren. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Het is niet duidelijk welke actie elke knop uitvoert.
Oplossing:
Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.
SC 2.5.3 Zichtbare linktekst komt niet terug in toegankelijke naam
Op deze pagina is de zichtbare tekst van de links, bijvoorbeeld "Japan 8 februari 2025 | 6 kunstwerken", niet opgenomen in de toegankelijke naam "Wereld der Kunsten - 7 Lelies Het meer Kawaguchi". Er zijn meer links met dit probleem. Bijvoorbeeld "fiori ...", "Interessant gemarmerd papier ...".
Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.
Oplossing:
Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Zichtbare tekst op dit element”).
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina staan blokken onder het kopje “Uitgelicht”. De kopjes "Eregalerij", "Japan", "fiori", enzovoorts, zijn niet als kopteksten gemarkeerd.
Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Oplossing:
Markeer koppen altijd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Op deze pagina staan 34 afbeeldingen die zijn geplaatst met een img-element, en die geen alt-attribuut hebben. Het gaat bijvoorbeeld om de afbeelding onder het kopje “Collectie” en alle afbeeldingen onder “Kunstwerken”.
Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.
Oplossing:
Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alt-tekst toe.
Je kunt deze afbeeldingen vinden met de Axe-tool.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina staat een knop om de zoekbalk te openen. Het invoerveld "Verder zoeken" toont een lijst met suggesties. De tekst "Verfijn je zoekopdracht" is niet gemarkeerd als kop.
Blinde bezoekers hebben niets aan een (tussen)kop die fungeert als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen.
Oplossing:
Gebruik een kop-element, zoals <h3> of <h4>.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op deze pagina staat een knop om de zoekbalk te openen. De grijze teksten (#7A7B7D) van de links in de zoektabbladen ("KUNSTWERKEN (1551)", "BIBLIOTHEEK (0)", "BEZOEKERSVERHALEN (39234)") staan op een donkergrijze achtergrond (#212327). De contrastverhouding is 3,7:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Onder het kopje "MAKER" staat een select-element met de grijze tekst "Kwalificaties" (#676768) op een donkergrijze achtergrond (#2B2D2E). De contrastverhouding is te laag: 2,4:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
SC 1.4.4 en SC 1.4.10 Bezoekers die inzoomen tot 200% en tot 400% kunnen niet meer alle functies gebruiken
Als de tekst op deze pagina wordt ingezoomd tot 200% en tot 400%, zijn de links "Ontdek” en "Vertel je verhaal" niet meer zichtbaar.
Oplossing:
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% of 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.10 Bij 400% zoom is een horizontale scrollbar aanwezig
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 en inzoomt tot 400%, verschijnt een scrollbalk.
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). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Oplossing:
Controleer of horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.
SC 2.4.11 Elementen die bedekt worden door het zoekformulier krijgen nog toetsenbordfocus
Op deze pagina staat een knop om de zoekbalk te openen. Als de toetsenbordfocus op het invoerveld "Verder zoeken" landt, opent een lijst met suggesties.
Als de bezoeker verder met de Tab-toets navigeert, gaat de toetsenbordfocus buiten de suggestielijst en komt deze terecht op interactieve elementen op de pagina die op dat moment niet zichtbaar zijn. Dit kan ertoe leiden dat een bezoeker onbedoeld zo’n element activeert.
Oplossing:
Je lost dit op een van de volgende manieren op:
Houd de focus binnen de lijst met suggesties: zorg dat de toetsenbordfocus binnen blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit de lijst met suggesties automatisch: sluit het chatvenster automatisch op het moment dat de focus eruit gaat.
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Onder de kopjes "MAKER", "PLAATS" en "SOORT WERK" staan keuzelijsten (select-elementen). Deze hebben geen toegankelijke naam. Hierdoor zijn de keuzelijsten niet toegankelijk.
Oplossing:
Geef de select-elementen een toegankelijke naam. Dat kan via een aria-label. Plaats hierin de tekst die boven het select-element staat.
SC 3.2.2 Het aanvinken van een element zorgt ervoor dat de pagina opnieuw laadt
Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Als je opties selecteert onder "Te zien in het museum" en "Alleen met afbeelding", laadt de pagina opnieuw. Dit mag niet gebeuren zonder een waarschuwing vooraf.
Oplossing:
Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Je kunt ook een knop toevoegen waarmee de bezoeker zijn keuze kan bevestigen.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, verdwijnen de teksten "Operatie Nachtwacht", "Behandeling Nachtwacht van start", "Structurele behandeling van De Nachtwacht", enz., gedeeltelijk.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.2.2 Ondertitels staan in een andere taal
In de video op deze pagina wordt Engels gesproken, maar de ondertiteling is in het Nederlands. Ondertitels moeten in dezelfde taal zijn als de gesproken taal.
Oplossing:
Voeg ondertiteling in de gesproken taal toe aan deze video.
Op deze pagina staat een carrousel met hoogtepunten. Elke slide bestaat uit een afbeelding met een tekstalternatief, de tekst "Hoogtepunten" plus de beschrijving van het kunstwerk. In de alt-tekst staat de beschrijving nog een keer. Dit zorgt voor een onnodige herhaling.
Oplossing:
Je kunt dit als volgt oplossen:
Gebruik voor <img>`` -elementen een leeg alt-attribuut: alt=""`.
Gebruik aria-hidden="true" om ervoor te zorgen dat schermlezers decoratieve afbeeldingen negeren.
SC 1.3.1 Citaat is onjuist gemarkeerd als kop
Als je op de knop "Kom meer te weten over je bezoek" op deze pagina hebt geklikt, verschijnen citaten. Deze citaten zijn gemarkeerd als kop.
Dit is niet de correcte manier om een citaat te markeren, omdat je zo de structuur van de inhoud niet juist weergeeft aan bezoekers met een schermlezer. De citaten zijn immers geen koppen.
Oplossing:
Gebruik de juiste HTML-elementen voor citaten:
<blockquote>: Voor langere citaten die een eigen alinea vormen.
<q>: Voor kortere citaten binnen een zin.
Pas eventueel CSS-stijlen toe om het citaat visueel op te laten vallen.
SC 1.2.1 Video zonder geluid heeft geen transcriptie
Op deze pagina staat een video zonder geluid waarin wordt getoond hoe de restauratie is verlopen. Deze video is niet toegankelijk voor blinde bezoekers.
Oplossing:
Maak deze informatie toegankelijk voor blinde bezoekers door een uitgeschreven tekst (transcriptie) toe te voegen. Zet deze tekst naast of onder de video op de pagina, zodat het duidelijk is dat het een beschrijving van de video-inhoud is.
In de bestandseigenschappen van dit PDF-document is geen titel ingesteld.
Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een PDF opent in een PDF-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk. Maar als je een documenttitel in de PDF-metadata instelt, 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.
Los het op in Adobe Acrobat:
Open het PDF-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Beschrijving.
Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Voorbereidingsdocument voor scholen".
Klik op OK en sla het bestand op.
SC 1.1.1 Informatieve afbeeldingen hebben geen alt-tekst
Dit PDF-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Dit komt op alle pagina’s voor.
Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen 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.
Oplossing:
Voeg alt-teksten toe aan deze informatieve afbeeldingen. De auteur van dit document mag zelf bepalen of de afbeeldingen decoratief of informatief zijn. Het logo bovenaan het document is sowieso een informatieve afbeelding en moet een tekstalternatief krijgen.
SC 1.1.1 Alt-teksten van sommige afbeeldingen zijn niet correct
In dit PDF-document staan 6 afbeeldingen waarbij het pad naar de afbeelding als tektalternatief is ingesteld. Dit is niet correct. Een aantal andere afbeeldingen hebben automatisch gegenereerde alt-tekst, bijvoorbeeld “Afbeelding met tekst Automatisch gegenereerde beschrijving”. Dit is ook niet goed.
Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen.
Oplossing:
Zorg dat de alt-teksten duidelijk beschrijven wat op de afbeeldingen te zien is.
SC 1.3.1 Kop niet gemarkeerd als een echte kop
In dit document staat op pagina 2 de tussenkop “Rondleiding in het hoofdgebouw”. Deze tekst is niet gemarkeerd als kop.
Oplossing:
Gebruik een heading-tag.
SC 1.3.1 Lijst is niet als lijst gemarkeerd
In dit PDF-document staat op pagina 4 een lijst met 4 items. De juiste opmaak ontbreekt.
Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen.
Oplossing:
Markeer de lijst met een L- en Li-tags.
SC 1.3.2 Leesvolgorde van de tags is niet logisch
In dit PDF-document is de leesvolgorde niet logisch.
Schermlezers lezen een PDF-document in de volgorde van de tags die in de codelaag staan. Als deze tags niet in een logische volgorde staan, is de leesvolgorde dus niet logisch en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.
Oplossing:
Zorg dat de volgorde van de tags logisch is.
SC 1.4.3 Kleurcontrast van kleine tekst is te laag
In het PDF-document staat de grijze tekst "Krijgen jullie een rondleiding die ... De Teekenschool" (#808080) op een witte achtergrond (#FFFFFF). De contrastverhouding is 3,9:1.
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is.
SC 1.3.3 Instructie verwijst naar een visueel aspect
In dit document staat op pagina 3 de tekst “Op deze foto zie je waar je uitkomt als je met de lift gaat:”.
Deze tekst verwijst naar een visuele locatie, die mensen die de PDF niet kunnen zien mogelijk niet begrijpen.
Oplossing:
Beschrijf deze informatie in tekst.
SC 1.3.1 Gegevenstabel gebruikt voor opmaak in PDF
In dit PDF-document zijn gegevenstabellen gebruikt voor lay-out.
Gegevenstabellen mogen alleen worden gebruikt om gegevens op een zinvolle manier te structureren, niet voor visuele opmaak. Wanneer deze tabellen verkeerd worden gebruikt voor opmaak, kunnen screenreaders de inhoud verkeerd interpreteren, wat leidt tot verwarring voor gebruikers die afhankelijk zijn van hulpsoftware.
Je herkent een gegevenstabel aan de aanwezigheid van th-tags. Deze tags mogen niet voorkomen in een tabel die voor lay-out is gebruikt.
Oplossing:
Gebruik goede semantische markup voor het structureren van de inhoud, zoals koppen, paragrafen en lijsten, in plaats van tabellen voor de opmaak.
Op deze pagina staan secties met inhoud die kan worden in- en uitgeklapt, zogenaamde accordeons. De vragen waarmee je de antwoorden kunt uitklappen, hebben niet de rol van kop.
De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.
Oplossing:
Voeg een kop-element toe waarin het button-element staat. De volgorde is belangrijk:
<h3>Kan ik mijn ticket omboeken naar een ander moment? <button aria-expanded=”false”> Open Kan ik mijn ticket omboeken naar een ander moment?</button></h3>
SC 1.3.1 <strong>-element is gebruikt in plaats van een kop
Op deze pagina staat het kopje "PRIVACYBELEID". Deze kop is met een <strong>-element gemarkeerd. Hierdoor kunnen schermlezers en andere hulpsoftware de tekst niet herkennen als een kop.
Oplossing:
Vervang <strong> door het juiste kop-element (<h2>, <h3>, enz.) en zorg voor een logische kopregelhiërarchie. Gebruik CSS voor de styling.
SC 1.4.3 Foutmeldingen hebben te weinig contrast
Als je het formulier op deze pagina instuurt met onjuiste gegevens, zie je foutmeldingen in rode tekst (#FF0000) tegen een grijze achtergrond (#40474F). De contrastverhouding is 2,4:1. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.
Oplossing:
Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.
SC 2.2.1, SC 3.3.1, SC 3.1.2 Voor de foutmeldingen is alleen HTML5-validatie gebruikt
Op deze pagina staat een formulier waarbij HTML5-validatie is gebruikt voor de invoervelden "Voornaam", "Achternaam", "E-mail" en andere invoervelden.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier:
De melding blijft te kort staan.
De foutmeldingen zijn onvolledig.
De foutmeldingen worden niet altijd in de taal van de website getoond.
Oplossing:
Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op deze pagina staan naast de verplichte velden rode sterretjes (#FF0000) op een grijze achtergrond (#40474F). De contrastverhouding is 2,4:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Op deze pagina ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie (bijvoorbeeld Voornaam, Achternaam, E-mail).
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".
SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus
Op deze pagina komt de toetsenbordfocus op een onzichtbaar element na het invoerveld “Ik heb een vraag over:”.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, valt de volgende tekst gedeeltelijk weg: "Veelgestelde vragen tickets & bezoek".
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 3.1.2 Toegankelijke naam van de knop is in het Engels
Naast de knop met de tekst “Zoek” op deze pagina staat een knop met een kruisje. De toegankelijke naam van deze knop is ‘close’.
Deze naam wordt voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).
Oplossing:
Vertaal deze tekst naar het Nederlands, zodat de tekst correct wordt uitgesproken door schermlezers.
SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet
Op deze pagina staat een carrousel met een pijltje om vooruit of achteruit door verhalen te bladeren. De toegankelijke naam van de knop is "arrow". Deze naam beschrijft de functie van de knop niet. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
Oplossing:
Voeg een Nederlandse tekst toe die deze knop goed beschrijft.
SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus
Als je deze pagina bekijkt op een klein scherm, komt de toetsenbordfocus na de knop met vergrootglas terecht op een onzichtbaar interactief element. De focus mag nooit terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 en inzoomt tot 400%, worden sommige teksten onleesbaar. Dit zie je bijvoorbeeld aan de bovenkant van de website als het filter "Tentoonstellingen" is gekozen. Dan valt de tekst “Ode aan 750 jaar Amsterdam, Verwacht” deels weg.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.3.1 Kop-element is gebruikt voor tekst die geen kop is
Op deze pagina staat de knop "Lees meer over de tentoonstelling". Deze knop opent inhoud met citaten. Deze citaten zijn geen koppen, maar ze zijn wel gemarkeerd met een <h2>-element, waarschijnlijk om de letters groter te maken.
Het kop-element (h2) is hier niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h2-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.
Oplossing:
Verwijder het h2-element en gebruik een ander element, zoals een blockquote-element. De gewenste stijl kun je met CSS toevoegen.
Voldoet of niet van toepassing: 24
Voldoet niet: 31
