SC 1.4.3 Kleurcontrast van tekst is te laag

De knoppen met witte tekst (#FFFFFF) op een grijze achtergrond (#7C7674) hebben onvoldoende contrast als je er met de muis overheen gaat (hover). Het contrast is dan 4,468:1, terwijl het minimaal 4,5:1 moet zijn.

Meer voorbeelden van onvoldoende contrast:

• de knop “Alle cookies accepteren” in de cookiemelding op pagina https://www.museum.nl/nl;
• de knop “Bekijk alle activiteiten” op pagina https://www.museum.nl/nl/zoeken?q=museum;
• de knoppen “Tentoonstellingen & activiteiten – 923” en “Pronkstukken – 779” op pagina https://www.museum.nl/nl/museumkaart;
• de knoppen “Ga onbeperkt naar musea”, “Bestel 'm hier” en “Registreren of verzilveren”.
• Op de homepage https://www.museum.nl/nl valt de witte tekst “Tentoonstelling” ( #FFFFFF) over een foto. Het contrast met de verschillende achtergronden is niet altijd voldoende. Tegen een lichtgrijze achtergrond (#768592) is de contrastverhouding bijvoorbeeld 3,8:1. Tegen een roze achtergrond (#AB6789) is de verhouding 4,2:1. Tegen een bruine achtergrond (#C0A581) is het ook 4,2:1.
• Op pagina https://www.museum.nl/nl/themas staat de witte tekst “Ga als feminist” tegen een lichtgrijze achtergrond (#D8D3D3). De contrastverhouding is hier 1,5:1.

Oplossing:

Tekst die kleiner is dan 18pt (24px) 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.

SC 2.4.1 Er is geen skiplink aanwezig

Alleen op pagina https://www.museumkaart.nl/s/serviceverzoek is een skiplink aanwezig. Op alle andere pagina’s is deze er niet. Er moet een manier zijn om onderdelen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkeren. Hiervoor wordt een skiplink gebruikt. Hiermee kunnen vaste blokken met herhalende inhoud worden overgeslagen. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra deze focus krijgt.

Oplossing:

Voeg aan alle pagina’s een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan. Zorg dat de skiplink:

• de eerste link op de pagina is;
• visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
• naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Op alle pagina’s met artikelen staan decoratieve afbeeldingen, bijvoorbeeld op pagina https://www.museum.nl/nl. Sommige afbeeldingen hebben een alt-tekst, andere niet.

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers door het alt-attribuut leeg te laten.

Oplossing:

Je kunt dit op verschillende manieren bereiken:

• Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
• Voor svg-elementen zorg je dat ze óf een leeg title-element hebben, óf verborgen zijn via aria-hidden=”true”.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

SC 4.1.2 Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op alle pagina’s wordt een cookiemelding getoond. Dit dialoogvenster mist zowel een geschikte 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 het attribuut role="dialog".

SC 2.4.3 De toetsenbordfocus kan uit het dialoogvenster gaan

De toetsenbordfocus gaat op de juiste manier naar het dialoogvenster van de cookiemelding, maar daarna gaat er iets niet goed. Als een bezoeker met zijn toetsenbord door alle interactieve elementen binnen het dialoogvenster heeft genavigeerd, gaat de focus verder op de onderliggende pagina. De focus blijft dus niet binnen het openstaande dialoogvenster. Hierdoor wordt de focusvolgorde onlogisch.

Oplossing:

Zorg dat de toetsenbordfocus binnen het dialoogvenster blijft, totdat de bezoeker dit venster sluit.

SC 2.4.11 Cookiebanner bedekt focus bij inzoomen

Op alle pagina’s wordt de toetsenbordfocus onzichtbaar als een bezoeker inzoomt tot 400% op een scherm met van 1280 bij 1024 pixels. De focus komt dan terecht op elementen die verborgen liggen onder de cookiebanner. Hierdoor zien bezoekers niet meer waar de focus zich bevindt, en dat is verwarrend.

Oplossing:

Zorg ervoor dat de cookiebanner meeschaalt bij inzoomen, zodat de focus zichtbaar is.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Als een bezoeker inzoomt tot 400% bij een schermresolutie van 1280 bij 1024 pixels, verdwijnt in de cookiemelding tekst deels uit beeld. Het gaat om de tekst: “Om je bezoek aan deze site prettig en persoonlijk te maken gebruiken we cookies en vergelijkbare technieken voor gepersonaliseerde”.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 2.5.3 Tekst van het logo staat niet in toegankelijke naam

Het logo bovenaan de pagina bestaat uit de tekst “museum/nl\”. Dit logo is ook een link. De toegankelijke naam van de link is “Homepage”. Die is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet als iemand deze met stembediening wil activeren. Daarvoor spreekt een bezoeker namelijk de zichtbare tekst uit. De hulpsoftware gaat vervolgens af op de toegankelijke naam van de link. Als die niet hetzelfde is als de uitgesproken tekst, weet de software niet welke link wordt bedoeld.

Oplossing:

Voeg een title-element toe aan de SVG "museum/nl". Verwijder het aria-label van de link om het logo.

SC 1.1.1 Logo heeft geen tekstalternatief

Het logo “museum/nl\” is op alle pagina’s een SVG-afbeelding zonder tekstalternatief. Hierdoor kunnen schermlezers de betekenis of functie van het logo niet overbrengen. Informatieve afbeeldingen zoals logo’s moeten altijd een tekstalternatief hebben, zodat bezoekers die de afbeelding niet kunnen zien ook weten wat erop staat.

Oplossing:

Voeg een title-element toe aan de SVG "museum/nl". Verwijder het aria-label van de link om het logo.

SC 2.5.3 Toegankelijke naam van knop is anders dan zichtbare tekst door aria-label

Bovenaan de pagina staat een taalknop met de zichtbare tekst “NL”. De toegankelijke naam van deze knop is “Verander de taal van deze pagina”. Die is ingesteld via het aria-label-attribuut. Dit attribuut overschrijft alle andere methoden voor het benoemen van elementen. Schermlezers en spraakherkenningssoftware gebruiken altijd de naam die in het aria-label staat. Dit wordt de toegankelijke naam genoemd.

Als deze naam afwijkt van de zichtbare tekst, dan zal de tekst die schermlezers voorlezen en die door spraakherkenningssoftware wordt gebruikt, verschillen van wat er op de knop te zien is. Hierdoor kunnen bezoekers de knop niet meer met een stemcommando bedienen. De tekst die ze uitspreken is dan niet hetzelfde als de toegankelijke naam die door de hulpsoftware wordt gebruikt.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. Verander de tekst in het aria-label in "NL, Verander de taal van deze pagina "

SC 2.4.3 Toetsenbordfocus gaat buiten het mobiele menu

Op kleine schermen verschijnt er een menuknop om het mobiele navigatiemenu te openen. Op dit moment kunnen bezoekers met het toetsenbord buiten het mobiele menu navigeren terwijl het menu nog openstaat. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina, terwijl het menu zichtbaar blijft.

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:

1. Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.

SC 2.4.11 Elementen die toetsenbordfocus krijgen vallen onder mobiel menu

Als het mobiele menu openstaat op een klein scherm, valt het over interactieve elementen op de onderliggende pagina heen. Deze elementen kunnen nog steeds toetsenbordfocus krijgen, terwijl ze verborgen zijn onder het menu. Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Als dat niet het geval is, kunnen bezoekers die met het toetsenbord of een schermlezer navigeren in de war raken.

Oplossing:

Je lost dit op een van de volgende manieren op:

1. Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het menu automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat. Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.

SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken

Bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% zijn de links “Contact”, “Over ons”, “Pers”, “Disclaimer” en “Privacy” in het hamburgermenu niet zichtbaar.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Als je inzoomt tot 200% bij een schermresolutie van 1280 bij 1024 pixels raakt de tekst “© Museumvereniging” in het hamburgermenu gedeeltelijk uit beeld.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Als je deze pagina op een scherm van 1280 bij 1024 pixels inzoomt tot 400% zijn in het hamburgermenu de volgende interactieve elementen niet zichtbaar: “Vragen?”, “Mijn Museumkaart”, “NL”, “Contrast”, “Favorieten geselecteerd” en “Aanmelden Museumtips”. Deze elementen raken buiten beeld en kunnen daardoor niet gebruikt worden.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 1.4.3 Kleurcontrast van tekst is te laag

In het hamburgermenu staat bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% een knop met de tekst “NL”. Deze witte tekst (#FFFFFF) staat op een grijze achtergrond (#A4A1A0) als de knop is geselecteerd. De contrastverhouding is in deze toestand 2,6:1 en daarmee te laag.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 1.4.11 Kleurcontrast van informatieve iconen is niet voldoende

Het logo en de informatieve iconen in de sticky header hebben op een klein scherm niet genoeg contrast.

• Witte iconen (#FFFFFF) staan op verschillende achtergronden met onvoldoende contrast. Op pagina’s zoals https://www.museum.nl/nl/vrijheid en https://www.museum.nl/nl/kids staan de witte iconen op een witte achtergrond (#FBFAFA), wat resulteert in een contrastverhouding van 1,0:1.
• Zwarte iconen (#241F1C) staan op donkere of verzadigde achtergronden met een te laag contrast. Op pagina https://www.museum.nl/nl staan zwarte iconen op een zwarte achtergrond (#050504) met een contrast van 1,3:1.
• Op pagina https://www.museum.nl/nl/themas staan de iconen op een blauwe achtergrond (#0F41D2) met een contrast van 2,1:1 en een rode achtergrond (#810000) met een contrast van 1,5:1.

Oplossing:

Zorg dat de iconen voldoende contrast hebben. Het kleurcontrast van dit soort informatieve iconen moet minimaal 3,0:1 zijn.

SC 4.1.3 Aantal geselecteerde favorieten wordt niet automatisch voorgelezen door schermlezers

Op alle pagina's kunnen bezoekers items markeren of verwijderen als favoriet met de knoppen “Markeer als favoriet” of “Verwijder als favoriet”. Bovenaan de pagina wordt het aantal geselecteerde favorieten telkens bijgewerkt in de link met een hart-icoon, bijvoorbeeld: “Favorieten geselecteerd: 1”. Dit getal moet je zien als een statusbericht dat zou moeten worden aangekondigd door schermlezers op het moment dat het verandert. Dit gebeurt nu nog niet.

Oplossing:

Statusberichten moeten automatisch worden voorgelezen door schermlezers zodra ze verschijnen of wijzigen. Dit kun je bereiken door het aria-live=“polite”-attribuut toe te voegen. Zorg dat de tekst van de melding duidelijk is, bijvoorbeeld: “1 favoriet geselecteerd”.

Link naar pagina: Homepagina

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

Op deze pagina is de volgorde van HTML-elementen binnen de blokjes met evenementen onjuist. De afbeelding en de tekst staan boven de kop. De huidige volgorde is: afbeelding, tekst, kop. Als deze artikelen van boven naar beneden worden voorgelezen door een schermlezer, is niet duidelijk welke inhoud bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Ditzelfde probleem komt ook voor

• op pagina https://www.museum.nl/nl/themas, bijvoorbeeld bij “Ga digitaal”,
• op pagina https://www.museum.nl/nl/museumkaart, bijvoorbeeld bij “Huid, Snuit en Bot”
• op pagina https://www.museum.nl/nl/zien-en-doen/evenementen, bijvoorbeeld bij “Art Dumay taxatiedag”.

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 blijven zoals het is.

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op links zoals “Je eigen Museumkaart?”, “6 tentoonstellingen over (on)vrijheid” en “Geef een Museumkaart cadeau”. Dit is het geval bij alle links, behalve bij de knoppen met het hart-icoon. 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.6 Knoppen met dezelfde naam voeren verschillende acties uit

Op deze pagina staan meerdere knoppen met alleen een hart-icoon, zoals "Markeer als favoriet" en "Verwijder als favoriet". Deze knoppen hebben allemaal dezelfde naam, maar ze zijn gekoppeld aan verschillende items.

Voor bezoekers die gebruikmaken van schermlezers is het niet duidelijk op welk object de knop van toepassing is, omdat alle knoppen dezelfde naam hebben. Dit leidt tot verwarring en maakt het moeilijk om effectief te navigeren of een juiste keuze te maken. Ditzelfde probleem komt ook voor op pagina https://www.museum.nl/nl/zoeken?q=museum en op pagina https://www.museum.nl/nl/museumkaart.

Oplossing:

Voeg specifieke context toe aan de toegankelijke naam van de knop. Bijvoorbeeld door het aria-label aan te vullen met de naam van het item: aria-label="Markeer als favoriet [Onderwerp]". Verander de tekst binnen "[]". Op die manier weet een schermlezergebruiker precies op welk object de knop betrekking heeft.

Link naar pagina: Zoekresultaten

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de links met afbeeldingen in de zoekresultaten. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

SC 1.3.1 Huidige filter is alleen visueel aangegeven, maar niet in de code

Eén van de filterknoppen bij de zoekbalk is actief (geselecteerd). Welke dat is, is alleen te zien aan het verschil in achtergrondkleur van de knop. Bijvoorbeeld de knop “Alles – 2324”. Deze informatie is niet vastgelegd in de HTML-code. Hierdoor kunnen schermlezers of andere hulpsoftware niet bepalen welk filter op dat moment actief is.

Dit komt ook voor

• op pagina https://www.museum.nl/nl/museumkaart/faq boven de footer, bijvoorbeeld bij “Meest voorkomende vragen”,
• op pagina https://www.museum.nl/nl/zo-werkt-de-digitale-museumkaart onder de kop “Vragen of hulp nodig?”,
• op pagina https://www.museum.nl/nl/amsterdam-museum-aan-de-amstel onder de carrousel. In de carrousel zie je aan de bolletjes welke slide actief is, maar ook dit is niet vastgelegd in de code.

Oplossing:

Maak de actieve status van de knop ook in de code duidelijk, bijvoorbeeld door:

• Verborgen tekst: voeg visueel verborgen tekst toe binnen de link van de huidige pagina die aangeeft dat dit de huidige pagina is. Bijvoorbeeld <span class=”sr-only”>Geselecteerd</span>.
• aria-current-attribuut: voeg aria-current=”true”

SC 2.4.3 Volgorde toetsenbordfocus is niet logisch

Het selecteren van een filteroptie (zoals “Pronkstukken – 779”) zorgt ervoor dat de toetsenbordfocus onverwachts terugspringt naar de eerste optie in het filter, “Alles – 2324”. De focus zou op een logische volgorde verder moeten gaan vanaf de filteroptie die je net hebt geactiveerd.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links in een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat de volgorde aansluit op de visuele vormgeving van de elementen. Als dat niet gebeurt, wordt het voor bezoekers die alleen een toetsenbord gebruiken moeilijker om door de pagina te navigeren. Dit geldt bijvoorbeeld voor mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.

SC 1.3.1 Relatie tussen elementen in een groep is niet in de code vastgelegd

Onder het zoekveld op deze pagina staat een groep filters die visueel duidelijk bij elkaar hoort. Deze onderlinge samenhang is echter niet terug te vinden in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Ditzelfde komt ook voor

• op pagina https://www.museum.nl/nl/museumkaart/faq, bijvoorbeeld bij “Meest voorkomende vragen” en bij andere knoppen,
• op pagina https://www.museum.nl/nl/zo-werkt-de-digitale-museumkaart onder de kop “Vragen of hulp nodig?”.

Oplossing:

Neem de elementen bijvoorbeeld op in een ul- of nav-element.

SC 4.1.3 Melding over aangepaste zoekresultaten wordt niet automatisch voorgelezen door schermlezers

Met de filters op deze pagina kun je de zoekresultaten aanpassen. Er verschijnt dan een melding zoals “2324 resultaten”, zonder dat de pagina opnieuw wordt geladen. Deze melding is een statusbericht, maar wordt niet aangekondigd door schermlezers omdat deze geen toetsenbordfocus krijgt. Dat is wel de bedoeling, want het gaat om belangrijke informatie voor bezoekers die hulpsoftware gebruiken.

Dit gebeurt ook op pagina https://www.museum.nl/nl/zien-en-doen/evenementen.

Als je op filterknoppen zoals “Alles – 2324” klikt, verschijnt een laad-animatie. Deze animatie geeft aan dat de pagina bezig is met het laden van resultaten en is bedoeld als statusbericht. De animatie is echter niet toegankelijk voor blinde bezoekers, omdat deze niet de juiste rol heeft in de HTML-structuur. Daardoor wordt de informatie die de animatie overbrengt (‘aan het laden’) niet voorgelezen door schermlezers.

Ditzelfde geldt voor de laad-animatie die verschijnt als op de knop “Laad meer” wordt geklikt, en op pagina https://www.museum.nl/nl/zien-en-doen/evenementen voor de opties in de knop “Filters” die een laad-animatie activeren.

Oplossing:

Voeg bijvoorbeeld aria-live="polite" of role="status" toe aan het icoon. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

SC 1.4.3 Kleurcontrast van tekst is te laag

In de zoekresultaten op deze pagina staat de grijze tekst “Musea” (#ADA9B1) op een witte achtergrond (#FBFAFA). De contrastverhouding is 2,2:1 en daarmee te laag. Dit probleem komt voor bij alle zoekresultaten en geldt ook voor de inhoud die wordt getoond onder andere tabbladen.

In de zoekresultaten op deze pagina staat tekst met een locatie, zoals “Edams Museum, Edam”. Deze tekst is grijs (#7C7674) op een witte achtergrond (#FBFAFA). De contrastverhouding is 4,3:1 en daarmee te laag. Dit probleem komt voor bij alle zoekresultaten en geldt ook voor de inhoud die wordt getoond onder andere tabbladen.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 2.4.4 en SC 4.1.2 Link heeft geen toegankelijke naam en dus geen linkdoel

De afbeeldingen in de zoekresultaten onder de koppen “Museum Helmantel” en “Museum Kruithuis” werken als links, maar ze hebben geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming van de link. is

Een blinde bezoeker weet niet waar de links naartoe verwijzen.

Oplossing:

Om dit op te lossen moet je de link content geven. Dat kun je als volgt doen:

• Tekst toevoegen aan het a-element: voeg beschrijvende tekst toe binnen het element.
• aria-label gebruiken: voeg het aria-label-attribuut toe aan de link en plaats hier een beknopte beschrijving van de bestemming in. Zorg dat alle links een duidelijk linkdoel hebben.

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de onduidelijke tekst “Meer informatie”. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn, geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘Meer informatie’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘Meer informatie (over het project)’ of ‘Meer informatie (in onze blog)’.

SC 2.4.3 Focusvolgorde is niet logisch

Als je de pagina opent, start de toetsenbordfocus direct in het zoekveld. Andere belangrijke elementen, zoals het logo en het hoofdmenu, worden overgeslagen. Deze volgorde van toetsenbordfocus is niet logisch. Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links in een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat de volgorde aansluit op de visuele vormgeving van de elementen. Als dat niet gebeurt, wordt het voor bezoekers die alleen een toetsenbord gebruiken moeilijker om door de pagina te navigeren. Dit geldt bijvoorbeeld voor mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg dat de toetsenbordfocus een logische en begrijpelijke volgorde volgt.

Advies bij SC 2.4.4 Links met dezelfde bestemming worden dubbel aangeboden

Het volgende is niet fout, maar een advies om de site nog toegankelijker te maken. Op de pagina staat bij elk zoekresultaat twee keer een link naar dezelfde bestemming. Voor bezoekers met een schermlezer betekent dit dat ze twee keer door exact dezelfde link moeten navigeren. Deze onnodige herhaling maakt het gebruiksgemak minder voor bezoekers met hulpsoftware.

Oplossing:

Combineer de afbeelding en de tekst in één link. Dit vermindert de herhaling en maakt de navigatie duidelijker voor bezoekers met ondersteunende technologie.

Link naar pagina: Museumkaart

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar bij de video onder de kop, en bij de links onder de koppen “Vragen of hulp nodig? Alles wat je wilt weten vind je hier”, “Samen naar het museum”, “Ga naar jonge meesters” en “Museumtips in je mailbox?”.

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 namelijk goed kunnen zien op welke plek van de pagina ze zijn om interactieve elementen te kunnen bedienen.

Oplossing:

Zorg dat de genoemde elementen een duidelijk zichtbare toetsenbordfocus-stijl hebben, door de standaard browser indicator te gebruiken of door zelf een stijl toe te voegen die aan de toegankelijkheidseisen voldoet (voldoende contrast, duidelijk te onderscheiden).

SC 2.4.6 Knoppen met dezelfde tekst hebben een andere functie

Op deze pagina staan meerdere knoppen met deel-iconen die allemaal dezelfde toegankelijke naam “Delen” hebben, terwijl deze knoppen verschillende functies uitvoeren. Dit kan verwarrend zijn voor bezoekers met een schermlezer, omdat niet duidelijk is welke actie elke knop uitvoert. Dit probleem komt ook voor op pagina https://www.museum.nl/nl/zien-en-doen/ en op pagina https://www.museum.nl/nl/kids.

Oplossing:

Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.

SC 2.1.1 Inhoud verschijnt alleen bij focus en is niet toegankelijk voor toetsenbordgebruikers

Sommige teksten op deze pagina worden alleen getoond als je er met de muis overheen gaat. Dit gebeurt onder de kop “Laat je inspireren”. De gedetailleerde teksten over “Pronkstukken”, “Houtgracht” en “Op dit schilderij zie je de Houtgracht in Amsterdam met de Mozes en Aäronkerk, die is voltooid in 1841” verschijnen pas bij hover met de muis. Bij navigatie met het toetsenbord is deze tekst niet beschikbaar, waardoor deze informatie niet toegankelijk is voor bezoekers die alleen het toetsenbord gebruiken.

Oplossing:

Zorg dat alle belangrijke inhoud zowel bij hover als bij toetsenbordfocus beschikbaar is, zodat bezoekers die met het toetsenbord of hulpsoftware navigeren de informatie ook krijgen.

SC 1.3.1 em-element is gebruikt voor opmaak

Onder de kop “Laat je inspireren” is het em-element gebruikt om tekst italic te maken. Het gaat om de teksten “70 x De Avonden, 100 jaar Reve” en “De Avonden (Een winterverhaal)”. Het em-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Daarom mag dit element niet worden gebruikt om alleen een visueel effect te bereiken, zoals schuingedrukte tekst. Dit gebeurt ook op pagina https://www.museum.nl/nl/favorieten bij de tekst “Je hebt nog geen bewaarde musea, tentoonstellingen of activiteiten”.

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

Link naar pagina: Contact

SC 1.3.1 strong-element in plaats van kop-element

Op deze pagina is de tekst “Aangepaste openingstijden rondom feestdagen:” gemarkeerd met het strong-element in plaats van met een kop-element. Het strong-element is niet bedoeld om koppen mee te markeren. Dat moet altijd worden gedaan met een kop-element, zoals h3.

Koppen worden gebruikt om een tekst te structureren. Alleen als ze als kop zijn gemarkeerd met een kop-element, begrijpt hulpsoftware de betekenis ervan. Het strong-element is bedoeld om nadruk te geven aan enkele woorden of een zinsdeel, niet om structuur aan te duiden.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h3 of h4.

Link naar pagina: Log in op Mijn Museumkaart

SC 4.1.2, SC 2.5.3 en SC 2.4.4 Link heeft geen toegankelijke naam, linkdoel onbekend

Het logo “museum/nl\” werkt op deze pagina als een link, maar deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Hierdoor werkt de link ook niet goed als deze met stemcommando’s wordt geactiveerd. De spraaksoftware herkent de link dan niet, omdat de uitgesproken zichtbare tekst niet overeenkomt met de toegankelijke naam.

Ditzelfde probleem komt ook voor op pagina https://www.museum.nl/nl/bestel/kaarten-maken.

Oplossing:

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen:

• <title>-element op de SVG: gebruik hier de zichtbare tekst van het logo
• Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).
• aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link.

SC 3.1.1 Het lang-attribuut ontbreekt

Op deze pagina ontbreekt het lang-attribuut op het html-element. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is. Dit probleem komt ook voor

• op pagina https://www.museum.nl/nl/bestel/kaarten-maken
• op pagina https://e.museumkaart.nl/3/4/1757/1/zXW6Zm_lemMiu44nzLZjU0rQ6N3mWbZEeFZxiwP2uxAJfi3eomyJcp3rhPxYlRQc.

Oplossing:

Zorg dat het lang-attribuut aanwezig is op het html-element, en dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.

SC 1.3.1 label-element is niet gekoppeld aan invoerveld

Op deze pagina staat een formulier. Het label-element met de tekst “E-mailadres” is niet expliciet gekoppeld aan het bijbehorende invoerveld. label-elementen moeten gekoppeld zijn aan de invoervelden waar ze bij horen. Hierdoor krijgt het invoerveld een toegankelijke naam en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker voor bezoekers die gebruikmaken van hulpsoftware of alleen met het toetsenbord navigeren.

Oplossing:

Koppel de label-elementen aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke informatie zoals “E-mailadres” en “Wachtwoord”. Deze velden hebben het attribuut autocomplete="off". Dit voorkomt dat browsers en hulpsoftware bezoekers kunnen helpen bij het automatisch invullen van hun gegevens. Dit maakt het formulier minder toegankelijk en minder gebruiksvriendelijk. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het attribuut autocomplete hebben met een geldige waarde. Hierdoor kunnen browsers en hulpsoftware deze velden automatisch aanvullen. Dit gebeurt ook op pagina https://www.museum.nl/nl/bestel/kaarten-maken.

Oplossing:

Gebruik het autocomplete-attribuut met de juiste waarde voor alle velden waar persoonlijke informatie in moet worden ingevuld. In dit geval is autocomplete="email" passend voor het e-mailadresveld. Meer informatie en de juiste waarden vind je op: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

SC 4.1.3 Foutmeldingen worden niet automatisch voorgelezen aan blinde bezoekers

De foutmeldingen in het formulier op deze pagina zijn niet toegankelijk voor blinde bezoekers als ze verschijnen. Het gaat bijvoorbeeld om de foutmelding “Ongeldige inloggegevens”. Als een bezoeker een fout maakt in het formulier, verschijnt er wel een foutmelding, maar de toetsenbordfocus verplaatst zich op dat moment niet naar de foutmelding. De focus blijft op de knop “versturen” staan. Hierdoor missen blinde bezoekers de foutmelding, omdat schermlezers deze niet automatisch voorlezen zodra deze verschijnt.

Oplossing:

Je lost dit op door aria-live="polite" aan de foutmelding toe te voegen. Het is dan niet nodig om de toetsenbordfocus te verplaatsen.

Link naar pagina Mijn kaarten

SC 1.3.1 – Koptekst is niet als kop gemarkeerd

De naam van de kaarthouder fungeert als kop, maar is niet gemarkeerd met een kop-element. Hierdoor krijgt een blinde bezoeker een andere informatiestructuur gepresenteerd dan een ziende bezoeker.

Oplossing:

Markeer de naam van de kaarthouder met een <h2>-element.

SC 3.1.1 – Het lang-attribuut ontbreekt

Het <html>-element van deze pagina bevat geen lang-attribuut. Hierdoor kan hulpsoftware de taal van de pagina niet correct bepalen.

Oplossing:

Voeg lang="nl" toe aan het <html>-element.

SC 1.4.3 – Onvoldoende kleurcontrast van tekst

Onder de kaarten staat grijze tekst (#7c7674) op een lichtgrijze achtergrond (#fbfafa). Het kleurcontrast bedraagt 4,3:1, terwijl minimaal 4,5:1 vereist is. Zie ook soortgelijke grijze teksten op de pagina “Mijn gegevens”, bijvoorbeeld onder “Facturen”.

Oplossing:

Pas de tekstkleur of achtergrondkleur aan zodat het contrast minimaal 4,5:1 bedraagt.

SC 1.1.1 – Overbodige informatie wordt voorgelezen

Onder het kopje “Zelf regelen” staan knoppen met bijbehorende teksten. De knop en de tekst bevatten dezelfde inhoud, bijvoorbeeld: “museumkaart verlengen museumkaart verlengen”. Hierdoor leest een schermlezer de informatie dubbel voor.

Oplossing:

Voeg aria-hidden="true" toe aan het <label>-element naast de knop om dubbele voorlezing te voorkomen.

SC 1.1.1 – Logo’s worden niet voorgelezen

Deze pagina bevat drie logo’s: één van /museum\ en twee van museum/kaart. Omdat deze informatieve afbeeldingen geen tekstalternatief hebben, worden ze niet voorgelezen door hulpsoftware.

Daarnaast staan er onder de kaarten twee afbeeldingen met witte vinkjes. Dit zijn decoratieve elementen en moeten juist niet worden voorgelezen.

Oplossing:

Voor informatieve SVG-logo’s: voeg een <title>-element toe binnen het SVG-bestand met de beschrijvende tekst van het logo.

Voor decoratieve SVG’s: voeg aria-hidden="true" toe aan het SVG-element.

SC 2.1.1 – Niet-toegankelijke interactieve elementen

Op de pagina staan twee interactieve elementen: “Museumkaart” en “Mijn gegevens”. Deze zijn niet met het toetsenbord te bedienen en missen de juiste semantiek (zoals een knop- of linkrol). Een schermlezergebruiker wordt hierdoor niet geïnformeerd dat deze elementen interactief zijn.

Oplossing:

Gebruik toegankelijke HTML-elementen zoals <a>, <button> of implementeer een toegankelijk tabbedsysteem. Zie bijvoorbeeld het toegankelijke tabs-patroon op WAI ARIA Patterns – Tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

SC 2.4.7 – Focus is niet zichtbaar

De focus is niet zichtbaar op het logo, wat kan leiden tot onbedoelde activering via het toetsenbord of bij gebruik van een schermlezer.

Oplossing:

Verwijder de volgende CSS-regel om de focus zichtbaar te maken: :focus { outline: none; } Je mag ook de zelfgeschreven focusrand toevoegen.

Link naar pagina: Favorieten

SC 2.4.5 Er is maar één manier om een webpagina te vinden

Er is geen tweede manier om deze pagina te vinden. Alle pagina’s die op de website staan, moeten op meerdere manieren toegankelijk zijn. Dit kan bijvoorbeeld via een zoekveld, een sitemap of een inhoudsopgave.

Ook deze pagina’s zijn maar op één manier te vinden:

• https://www.museum.nl/nl/vrijheid, https://e.museumkaart.nl/3/4/1757/1/zXW6Zm_lemMiu44nzLZjU0rQ6N3mWbZEeFZxiwP2uxAJfi3eomyJcp3rhPxYlRQc
• https://www.museumkaart.nl/s/serviceverzoek.

Oplossing:

Zorg dat de pagina’s op meerdere manieren bereikbaar zijn.

SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is

De tekst “Musea” op deze pagina is gemarkeerd met een h2-element, terwijl het geen echte kop is. Het kop-element is hier alleen gebruikt om de tekst groter te maken. Er staat echter geen inhoud onder die bij de kop hoort. Het h2-element is daardoor niet betekenisvol gebruikt. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Bezoekers die schermlezers gebruiken, vertrouwen op koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die in een kop-element wordt geplaatst ook daadwerkelijk de functie van kop of tussenkop heeft.

Oplossing:

Voeg onder het kopje “Musea” een tekstje toe “Nog geen favoriete musea”.

Link naar pagina: Meivakantie

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de onduidelijke tekst “Meer informatie”. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn, geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Dit probleem komt ook voor op pagina https://www.museum.nl/nl/vrijheid.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘Meer informatie’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

Bijvoorbeeld: <a href="#">Meer informatie <span class=sr-only"> over Vier de meivakantie bij Museum Natura Docet"</span></a>

Link naar pagina: Zo werkt de digitale Museumkaart

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Als je op deze pagina inzoomt tot 400% bij een schermresolutie van 1280 bij 1024 pixels, verdwijnt een deel van de tekst “Mis niets met de actuele museumagenda” uit beeld.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 2.1.4 De Youtube-video’s gebruiken letters als sneltoetsen

Op deze pagina staat onder de kop “Zo maak je jouw Museumkaart digitaal” een YouTube-videospeler die gebruikmaakt van sneltoetsen bestaande uit één teken, zoals de ‘k’ om de video te starten of stoppen en de ‘m’ om het geluid uit te zetten. Deze sneltoetsen kunnen botsen met schermlezers. Ze blijven namelijk actief, zelfs 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 voorkomen in de uitgesproken woorden. Ook voor bezoekers die per ongeluk een toets indrukken op het toetsenbord, kan dit onbedoelde acties veroorzaken. Dit gebeurt ook op pagina https://www.museum.nl/nl/amsterdam-museum-aan-de-amstel onder de kop “Amsterdam Museum aan de Amstel”.

Oplossing:

Je lost dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

SC 1.2.3 Video bevat tekst of logo’s waarvoor geen alternatief is

Onder de kop “Zo maak je jouw Museumkaart digitaal” staat een video die instructies laat zien in de vorm van tekst in beeld. Voor deze tekst is geen alternatief. Bezoekers die blind of slechtziend zijn, missen hierdoor belangrijke informatie. Dit komt ook voor op pagina https://www.museum.nl/nl/amsterdam-museum-aan-de-amstel onder de kop “Amsterdam Museum aan de Amstel”.

Oplossing:

Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

SC 1.2.5 De video heeft geen audiobeschrijving, terwijl daar wel ruimte voor is

Onder de kop “Zo maak je jouw Museumkaart digitaal” staat een video die niet voldoet aan succescriterium 1.2.5. Dit criterium vereist een audiodescriptie of een alternatief voor de media (niveau AA). Voor deze video is een audiodescriptie nodig, omdat er voldoende ruimte is binnen de bestaande audiotrack om aanvullende beschrijvingen toe te voegen. Dit komt ook voor op pagina https://www.museum.nl/nl/amsterdam-museum-aan-de-amstel onder de kop “Amsterdam Museum aan de Amstel”.

Oplossing:

Voeg een audiobeschrijving toe aan de video. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Link naar pagina: Amsterdam Museum aan de Amstel

SC 1.4.3 Kleurcontrast van tekst is te laag

Op deze pagina staat witte tekst (#FFFFFF) die te weinig contrast heeft. Bijvoorbeeld de tekstrn in het hoofdmenu, de tekst “Vandaag gesloten”, “Favoriet” en “Delen”. Deze witte teksten staan op een roze achtergrond (#F30CA6) en dat levert een te lage contrastverhouding op van 3,9:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus is niet zichtbaar op de video die onder de kop “Amsterdam Museum aan de Amstel” staat. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals video’s, zodat bezoekers die met het toetsenbord navigeren goed kunnen zien waar ze zich op de pagina bevinden en de video kunnen bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

SC 2.4.3 De focusvolgorde is niet logisch

In de carrousel op deze pagina staat een video die opent in een fullscreen modal venster. Als de video wordt geopend, verplaatst de toetsenbordfocus zich naar de adresbalk in plaats van naar de elementen van de video. Deze volgorde van toetsenbordfocus is niet logisch. De focus moet automatisch verplaatst worden naar het eerste interactieve element binnen het geopende modale venster, zodat bezoekers die met het toetsenbord navigeren de video direct kunnen bedienen.

Oplossing:

Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Na de link “Meer informatie op de museumsite” komt de toetsenbordfocus op deze pagina terecht op interactieve elementen die niet zichtbaar zijn. De toetsenbordfocus mag niet terechtkomen op onzichtbare elementen zoals knoppen, links of invoervelden.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

SC 1.2.2 De automatisch gegenereerde ondertiteling heeft fouten

Onder de kop “Amsterdam Museum aan de Amstel” staat in de carrousel een video met een voice-over. De ondertiteling van deze video is automatisch gegenereerd en daardoor onnauwkeurig. In de video wordt gezegd "in deze ruimte". In de ondertitels staat "in deze sluiten".

Video’s waarin gesproken wordt, moeten altijd voorzien zijn van correcte ondertiteling, zodat bezoekers die de video niet of niet goed kunnen horen toch alle informatie krijgen. De ondertiteling moet exact overeenkomen met wat er gezegd wordt. Automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er fouten in kunnen zitten en interpunctie ontbreekt.

Oplossing:

Zorg dat de ondertiteling van hoge kwaliteit is en exact weergeeft wat wordt gezegd in de video.

SC 1.3.1 strong-element is gebruikt in koptekst

Bij de koppen “Toegang” en “Faciliteiten” op deze pagina is zowel het h-element als het strong-element gebruikt. Het strong-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Daarom mag dit element niet gebruikt worden om alleen een visueel effect te bereiken, zoals vetgedrukte tekst. Het gebruik van strong binnen een kop-element is in dit geval niet functioneel en voegt geen betekenis toe.

Oplossing:

Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.

SC 1.1.1 Icoon “opent in nieuw venster” heeft geen tekstalternatief

De links met de tekst “Route plannen” en “Meer informatie op de museumsite” op deze pagina hebben een icoon dat aangeeft dat de link in een nieuw browsertabblad opent. Dit icoon heeft geen toegankelijke tekstalternatief. Hierdoor weet een blinde bezoeker niet dat deze link een nieuw tabblad zal openen. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer dit kan voorlezen.

Oplossing:

Voeg de informatie dat de link een nieuwe browsertab opent toe als visueel verborgen tekst die wel toegankelijk is voor schermlezers.

SC 1.4.4 Bolletjes-navigatie werkt niet als de bezoeker heeft ingezoomd

Op deze pagina kun je via bolletjes naar verschillende secties scrollen. Dit werkt niet goed bij een zoomniveau van 200% op een schermresolutie van 1280 × 1024 pixels. Alle interactieve elementen en functies moeten bruikbaar blijven wanneer iemand inzoomt, zodat de inhoud ook toegankelijk blijft voor bezoekers met een visuele beperking.

Oplossing:

Zorg dat de bolletjes bruikbaar blijven als de bezoeker heeft ingezoomd.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Als je bij een schermresolutie van 1280 bij 1024 pixels inzoomt tot 400% zijn de knoppen “Volgende” en “Vorige” in de carrousels niet meer zichtbaar of bedienbaar. Hierdoor kunnen bezoekers die sterk inzoomen de inhoud van de carrousel niet volledig gebruiken.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: Vrijheid

Geen bevindignen.

Link naar pagina: Aanmelden-Museumtips

SC 1.3.1 label-element verwijst naar verkeerde id

Het formulier op deze pagina heeft label-elementen met de teksten “E-mailadres” en “Kaartnummer”. Deze labels zijn niet expliciet gekoppeld aan de bijbehorende invoervelden. De labels hebben geen for-attribuut en de bijbehorende invoervelden hebben geenid-attribuut. label-elementen moeten altijd correct gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam en heeft het label een groter klikgebied. Dit maakt het formulier beter bruikbaar en toegankelijker. Bovendien zorgt deze koppeling ervoor dat schermlezers het label voorlezen wanneer een bezoeker direct naar het invoerveld navigeert.

Oplossing:

Koppel de label-elementen aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.

SC 2.5.3 Zichtbare tekst van het label staat niet in de toegankelijke naam

Het formulier op deze pagina heeft invoervelden met zichtbare labels zoals “E-mailadres” en “Kaartnummer”. De toegankelijke naam van deze velden is “typ hier”. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het veld niet met spraak worden bediend. Bezoekers die spraaksoftware gebruiken, geven commando’s door de zichtbare tekst uit te spreken. Als deze tekst niet overeenkomt met de toegankelijke naam, herkent de spraaksoftware het veld niet en kan het niet worden geactiveerd. Dit maakt het formulier minder toegankelijk voor gebruikers die afhankelijk zijn van spraakbediening.

Oplossing:

Het id-attribuut op het <input>-element vervwijst niet naar het "for"-attribuut van het juiste <label>.

SC 2.4.6 Naam van het veld beschrijft niet wat het doet

De invoervelden “E-mailadres” en “Kaartnummer” in het formulier op deze pagina hebben toegankelijke namen die afkomstig zijn van de placeholder-tekst “typ hier”. Deze tekst beschrijft niet duidelijk wat de functie is van het veld. Een blinde bezoeker weet daardoor niet wat er van hen verwacht wordt bij het invullen van het veld. De toegankelijke naam moet altijd duidelijk aangeven wat het doel van het invoerveld is, zodat hulpsoftware deze informatie correct kan overbrengen.

Oplossing:

Het id-attribuut op het <input>-element vervwijst niet naar het "for"-attribuut van het juiste <label>.

SC 2.4.4 Linktekst bevat onleesbare karakters

Op deze pagina bevat de link met de tekst "Terug" een niet-leesbaar vierkant symbool. De tekst van links mag geen symbolen bevatten zoals streepjes, underscores of andere tekens die niet als tekst worden voorgelezen. Dit soort tekens maakt het doel van de link onduidelijk voor bezoekers, vooral voor mensen die een schermlezer gebruiken.

Oplossing:

Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de linktekst duidelijk en beschrijvend is.

SC 3.3.2 Sterretje voor verplicht veld is niet uitgelegd

Op deze pagina staat een formulier. Sommige velden zijn verplicht en hebben een sterretje in het label. Er wordt echter nergens uitgelegd wat dit symbool betekent. Voor bezoekers met een cognitieve beperking kan een toelichting op het sterretje helpen om te begrijpen dat het om een verplicht veld gaat. Zonder uitleg is het niet voor iedereen duidelijk wat het symbool betekent, wat kan leiden tot verwarring of fouten bij het invullen van het formulier.

Oplossing:

Voeg tekst toe die uitlegt wat dit symbool betekent.

SC 2.2.1 Voor de validatie is alleen HTML5-validatie gebruikt

Het formulier op deze pagina gebruikt uitsluitend HTML5-validatie voor alle invoervelden. De foutmeldingen die hierbij verschijnen, verdwijnen te snel, doordat er een tijdslimiet is ingesteld. Hierdoor hebben bezoekers mogelijk niet genoeg tijd om de melding te lezen en te begrijpen wat er misgaat. Dit maakt het formulier minder toegankelijk, bijvoorbeeld voor mensen met een cognitieve of motorische beperking.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

SC 3.3.1 HTML5-foutmeldingen worden getoond

Het formulier op deze pagina gebruikt HTML5-validatie. De standaard HTML5-foutmeldingen worden getoond als je het formulier instuurt met lege velden of onjuiste gegevens. Deze HTML5-foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen op een andere manier, en niet altijd even toegankelijk: de meldingen zijn soms kortaf, onduidelijk of onvolledig. Hierdoor begrijpen bezoekers mogelijk niet wat er fout is gegaan of hoe ze het moeten corrigeren, vooral als zij gebruikmaken van hulpsoftware.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres en telefoonnummer. Deze velden missen het autocomplete-attribuut. Invoervelden voor persoonlijke gegevens moeten het autocomplete-attribuut hebben met een geldige waarde. Hierdoor kunnen browsers en hulpsoftware bezoekers helpen bij het invullen van het formulier, bijvoorbeeld door bekende gegevens automatisch aan te vullen. Dit maakt het formulier gebruiksvriendelijker en toegankelijker.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

Link naar pagina Activiteit

SC 1.4.3 Kleurcontrast van tekst is te laag

Op deze pagina wordt de roze en witte of lichtgrijze kleur gebruikt in teksten en achtergrond. Deze kleurencombinatie zorgt voor onvoldoende kleurcontrast.

Oplossing:

Teksten die zijn kleiner dan 24px en niet vetgedrukt, moeten het contrast van minimaal 4,5:1 hebben. Teksten die groter zijn dan 24 pixels of groter dan 19 pixels en vetgedrukt moeten het contrast van 4,5:1 hebben.

Link naar pagina Museumkids

SC 1.3.1 Decoratieve video is niet verborgen voor schermlezers

Op deze pagina staat onder de kop “Ga kijken, ga doen..” een decoratieve video. De video heeft geen geluid en bevat geen essentiële informatie, maar is momenteel niet verborgen voor schermlezers. Dit kan verwarrend zijn voor blinde bezoekers. Decoratieve video’s moeten daarom verborgen worden voor schermlezers.

Oplossing:

Voeg het attribuut aria-hidden="true" toe aan het video-element of de container ervan. Hierdoor wordt het element genegeerd door schermlezers.

SC 2.2.2 Video speelt automatisch af

Op deze pagina staat onder de kop “Ga kijken, ga doen..” een video die automatisch afspeelt en niet gepauzeerd of gestopt kan worden. Dit kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl zij proberen de tekst op de pagina te lezen. Ditzelfde probleem komt ook voor op pagina https://www.museum.nl/nl/museumkaart.

Oplossing:

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.

Link naar pagina: Maak je Museumkaart

SC 1.1.1 Logo heeft geen tekstalternatief

Onder de kop “Maak je Museumkaart” op deze pagina staat het logo “museum/kaart\” zonder tekstalternatief. Hierdoor kunnen schermlezers de betekenis of functie van het logo niet overbrengen. Informatieve afbeeldingen zoals logo’s moeten altijd een tekstalternatief hebben, zodat bezoekers die de afbeelding niet kunnen zien weten wat deze voorstelt.

Oplossing:

Voeg een title-element toe binnen de SVG en plaats hierin een duidelijke en beknopte beschrijving van het logo.

SC 1.4.11 Kleurcontrast van informatieve iconen is niet voldoende

Als je kaarten toevoegt op deze pagina, wordt een sectie met de tekst “Totaal €153,00 3 Binnen 5 tot 8 dagen thuis bezorgd” zichtbaar. In deze sectie verschijnen bij hover iconen van een prullenbak en een potlood in de kleur grijs (#D3D2D2) op een groene achtergrond (#AFF1D4). De contrastverhouding is 1,2:1, wat lager is dan de vereiste minimale contrastverhouding van 3,0:1 voor grafische elementen die informatie overbrengen.

Oplossing:

Zorg dat de iconen voldoende contrast hebben.

SC 3.3.2 Geen instructie over de schrijfwijze van invoervelden

In het formulier op deze pagina staan invoervelden die een specifiek invoerformaat vereisen. Bijvoorbeeld de invoervelden “Geboortedatum” en “Voorletters”. Het gaat om formats zoals “dd-mm-jjjj”, “L.L”, “Maximaal 10 karakters” of “Maximaal 60 karakters”. De instructies over de vereiste formats zijn echter niet permanent zichtbaar op de pagina. Hierdoor moet een bezoeker verschillende schrijfwijzen uitproberen om te ontdekken hoe de velden ingevuld moeten worden. Dit is ontoegankelijk voor veel bezoekers, vooral voor mensen met een cognitieve beperking of beperkte digitale vaardigheden.

Oplossing:

Zorg dat instructies over de vereiste schrijfwijze altijd zichtbaar zijn buiten het invoerveld, bijvoorbeeld als onderdeel van het label of als begeleidende tekst naast het veld.

SC 1.3.1 label-element verwijst naar verkeerde id

Het label-element met de tekst “Geboortedatum” in het formulier op deze pagina is niet expliciet gekoppeld aan het bijbehorende invoerveld. Het id-attribuut dat nodig is voor deze koppeling staat niet in de code van het invoerveld. label-elementen moeten altijd correct gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier beter bruikbaar en toegankelijker. Daarnaast zorgt de koppeling ervoor dat schermlezers het label kunnen voorlezen als een bezoeker direct naar het invoerveld navigeert.

Oplossing:

Koppel de label-elementen aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.

SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout

Het formulier op deze pagina laat foutmeldingen zien zoals “Vul je initialen in”, “Vul je voornaam in”, “Vul je achternaam in” en “Het format is: dd-mm-jjjj”. Dit zijn instructies en geen echte foutmeldingen. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zit. Vaak bevat zo’n melding een ontkenning, zoals: “Het veld is niet (goed) ingevuld”. Alleen op die manier begrijpen bezoekers dat er iets mis is gegaan en wat ze moeten corrigeren. In de huidige vorm is de melding verwarrend, vooral voor bezoekers die hulpsoftware gebruiken of moeite hebben met het verwerken van instructies.

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld

Het formulier op deze pagina laat foutmeldingen zien zoals “Vul je initialen in”, “Vul je voornaam in”, “Vul je achternaam in” en “Het format is: dd-mm-jjjj”. De relatie tussen deze foutmeldingen en de bijbehorende invoervelden is niet vastgelegd in de code, waardoor hulpsoftware de meldingen niet kan doorgeven aan de bezoeker. Schermlezers slaan in de “formulier”-modus namelijk vaak losse tekst over die tussen invoervelden staat. Daardoor worden de foutmeldingen mogelijk niet voorgelezen.

Ook bij de knop met de tekst “Kies afbeelding” gaat het niet goed met de foutmeldingen. Met deze knop open je een dialoogvenster om een nieuwe afbeelding te selecteren. Als je een ongeschikte afbeelding kiest, verschijnt de melding: “De foto voldoet niet aan de eisen. Probeer het opnieuw met een andere foto.” Ook deze melding is niet geprogrammeerd als statusupdate en wordt daardoor mogelijk niet aangekondigd door schermlezers.

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.4.3 Foutmeldingen hebben te weinig contrast

In het formulier op deze pagina worden de foutmeldingen weergegeven met een rode tekst (#f45757) op een witte achtergrond. De contrastverhouding is 3,3:1 en daarmee te laag. Foutmeldingen moeten, net als andere teksten, voldoen aan de minimale contrasteisen. Voor normale tekst is een minimale contrastverhouding van 4,5:1 vereist, zodat de tekst goed leesbaar is voor bezoekers met een visuele beperking.

Oplossing:

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

SC 4.1.2 Dialoogvenster heeft geen toegankelijke naam

Met de knop “Kies afbeelding” op deze pagina open je een dialoogvenster. Dit venster heeft geen toegankelijke naam, waardoor hulpsoftware niet kan doorgeven welke inhoud het dialoogvenster bevat. Dit gebeurt ook als een kaart is toegevoegd en de pagina wordt herladen. Er verschijnt dan een dialoogvenster met de kop “Wil je verder gaan met je vorige bestelling?”, maar ook dit venster heeft geen toegankelijke naam. Hierdoor is de functie en inhoud van het dialoogvenster niet duidelijk voor bezoekers die schermlezers gebruiken.

Oplossing:

Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.

SC 3.1.2 Toegankelijke namen zijn in het Engels geschreven

Op deze pagina opent de knop met de tekst “Kies afbeelding” een dialoogvenster. In dit venster worden aria-label-attributen gebruikt met Engelstalige tekst, zoals “Close modal”. Deze labels worden door schermlezers uitgesproken volgens de uitspraakregels van de primaire taal van de pagina, die in dit geval Nederlands is. Dit kan verwarrend of onbegrijpelijk zijn voor bezoekers die hulpsoftware gebruiken.Dit gebeurt ook als een kaart is toegevoegd en de pagina wordt herladen. Er verschijnt dan een dialoogvenster met de kop “Wil je verder gaan met je vorige bestelling?”, waarin eveneens aria-label-attributen met Engelse tekst worden gebruikt.

Oplossing:

Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

SC 1.4.1 Toetsenbordfocus wordt alleen met kleur aangegeven, met te laag contrast

Als je op “Kies afbeelding” klikt, opent een dialoogvenster. Je ziet dan de knop “Sleep je foto hier of klik om te uploaden”. Deze knop gebruikt een aangepaste focusindicator: de achtergrondkleur verandert bij toetsenbordfocus. Het gebruik van alleen kleur om focus aan te geven is echter niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is een subtiele kleurverandering vaak niet goed zichtbaar. Ook mensen die met het toetsenbord navigeren moeten duidelijk kunnen zien waar de focus zich op de pagina bevindt. Er moet daarom een goed zichtbare focusindicator aanwezig zijn, bijvoorbeeld in de vorm van een contrasterende rand of omlijning.

Oplossing:

Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

SC 1.1.1 Pijltjes bij accordeon hebben geen tekstalternatief

Op deze pagina staan accordeons: secties waarin verborgen content aanwezig is als er kaarten zijn toegevoegd. Bijvoorbeeld de sectie “Totaal €153,00 3 Binnen 5 tot 8 dagen thuis bezorgd”. Het icoon van een pijltje dat aangeeft dat er uitklapbare inhoud beschikbaar is, heeft geen tekstalternatief. Hierdoor weten schermlezers niet dat er verborgen content aanwezig is. Deze informatie wordt niet aangeboden via een aria-expanded-attribuut of via verborgen tekst die de functie van het icoon uitlegt. Ditzelfde probleem komt ook voor onder de kop “Hulp nodig?”. Ook hier staan uitklapbare secties zonder toegankelijke aanduiding van de verborgen inhoud.

Oplossing:

Je kunt bijvoorbeeld het volgende doen:

• geef het pijltje een tekstalternatief
• voeg verborgen tekst toe die verandert als accordeon opent of sluit
• gebruik een aria-expanded-attribuut

SC 4.1.2 Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op deze pagina staan secties zoals “Totaal €153,00 3 Binnen 5 tot 8 dagen thuis bezorgd”, met verborgen content die zichtbaar wordt wanneer er kaarten zijn toegevoegd. De open of gesloten toestand van deze secties is visueel duidelijk, maar niet in de code vastgelegd. Voor bezoekers die de pagina kunnen zien, is het eenvoudig te herkennen of een sectie is in- of uitgeklapt. Voor blinde of slechtziende bezoekers die een schermlezer gebruiken, is dat niet het geval. Zonder de juiste code, zoals een correct ingesteld aria-expanded-attribuut, kunnen zij deze informatie niet waarnemen. Dit probleem komt ook voor onder de kop “Hulp nodig?” bij de bijbehorende secties.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

SC 2.4.2 Meerdere pagina’s hebben dezelfde title-tekst

Alle pagina's in de mijn-omgeving, bijvoorbeeld https://www.museum.nl/nl/login en https://www.museum.nl/nl/bestel/kaarten-maken hebben allebei dezelfde tekst in het title-element: “Museumkaart”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van die specifieke pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Als meerdere pagina’s dezelfde titel hebben, kan dat verwarrend zijn voor bezoekers. Het maakt de navigatie lastiger, vooral voor gebruikers die meerdere tabbladen open hebben of schermlezers gebruiken.

Oplossing:

Verander de tekst in het title-element van, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

SC 4.1.3 Blinde bezoekers krijgen geen bericht van de foutmelding

Op deze pagina staat een formulier. Als iemand fouten maakt bij het invullen, verschijnt er een foutmelding. Deze foutmelding krijgt geen toetsenbordfocus op het moment dat deze zichtbaar wordt. Daardoor wordt de foutmelding niet automatisch voorgelezen door een schermlezer, en krijgen blinde bezoekers dus geen melding van wat er mis is gegaan. Om dit te voorkomen, moet de focus naar de foutmelding verplaatst worden of moet de foutmelding als statusbericht worden gemarkeerd, zodat hulpsoftware de informatie direct kan doorgeven.

Oplossing:

Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.

Link naar pagina: Service Verzoek

SC 2.5.3 Tekst van het logo staat niet in toegankelijke naam

Het logo op deze pagina heeft de zichtbare tekst “museum/nl\”, en is ook een link. De toegankelijke naam van deze link is “Terug naar de homepage”. Zoals je ziet, komt de toegankelijke naam niet overeen met de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met stemcommando’s wordt geactiveerd. Bezoekers noemen dan de tekst die zij in het logo zien, maar omdat die tekst niet overeenkomt met de toegankelijke naam, herkent het systeem de link niet.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.

SC 1.1.1 Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op pagina https://www.museumkaart.nl/s/serviceverzoek heeft het logo een leeg alt-attribuut. Het title-attribuut dat daar mogelijk is toegevoegd, is geen voldoende alternatief voor een toegankelijke naam.

Oplossing:

Om de links toegankelijk te maken, geef je de afbeeldingen tekstalternatieven die het linkdoel beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke informatie, zoals het e-mailadres. Deze velden hebben geen autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invullen van deze velden, bijvoorbeeld door eerder gebruikte gegevens automatisch aan te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

SC 3.3.2 Instructie bij invoerveld is niet altijd zichtbaar

De velden “Kaartnummer” en “Voornaam” in het formulier op deze pagina hebben instructies zoals “Moet 9 of 10 cijfers zijn” en “Mag geen speciale tekens of cijfers bevatten”. Deze instructies zijn niet permanent zichtbaar op de pagina, maar verschijnen alleen als onderdeel van de foutmelding. Instructies over het juiste invoerformaat moeten altijd vooraf zichtbaar zijn, zodat bezoekers weten wat er van hen verwacht wordt voordat zij het formulier invullen. Als deze informatie pas zichtbaar wordt na een fout, moeten bezoekers het formulier mogelijk meerdere keren proberen, wat verwarrend en ontoegankelijk kan zijn.

Oplossing:

Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in foutmeldingen. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.

SC 1.4.11 De rand van het invoerveld heeft niet genoeg contrast

Het formulier op deze pagina heeft invoervelden met een grijze rand (#C1C2C4) op een witte achtergrond. De contrastverhouding tussen de rand van de invoervelden en de achtergrond is 1,8:1.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

SC 4.1.2 Iframe heeft geen toegankelijke naam

Op deze pagina staat een iframe zonder title-attribuut. Iframes moeten een duidelijke en betekenisvolle beschrijving hebben, die meestal wordt toegevoegd via het title-attribuut. In deze beschrijving moet staan om wat voor type inhoud het gaat (bijvoorbeeld een video of podcast) en waar het inhoudelijk over gaat. Deze informatie is essentieel voor bezoekers die hulpsoftware gebruiken. Op basis van de titel kunnen zij beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Zonder deze beschrijving is het iframe niet toegankelijk voor blinde of slechtziende gebruikers.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

SC 1.1.1 Logo heeft geen alt-attribuut

Het logo “mu/k”, dat is geplaatst met een img-element, heeft geen alt-attribuut. Hierdoor lezen schermlezers nu de bestandsnaam van de afbeelding voor, en dat is niet de bedoeling. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Op die manier weten bezoekers die het logo niet kunnen zien ook wat er op het logo staat.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

SC 1.3.1 strong-element in plaats van kop-element

Op deze pagina is de tekst “Heb je een vraag?” gemarkeerd met een strong-element in plaats van met een kop-element. Het strong-element is niet bedoeld om koppen mee te markeren. Daarvoor moet altijd een kop-element zoals h2 worden gebruikt. Koppen worden gebruikt om structuur aan te brengen in de inhoud van een pagina. Alleen als ze gemarkeerd zijn met een kop-element, kunnen schermlezers en andere hulpsoftware de betekenis van de tekst correct interpreteren. Het strong-element is bedoeld om nadruk te geven aan een woord of zinsdeel, niet om de hiërarchie van de inhoud aan te geven.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

SC 1.3.1 Relatie tussen links in een groep is niet in HTML vastgelegd

In de footer van deze pagina staat een groep links die visueel duidelijk bij elkaar hoort. Deze relatie is niet in de code vastgelegd. 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. Dit gebeurt ook op een klein scherm in het mobiele navigatiemenu, waar links ook als een visuele groep worden weergegeven zonder dat deze relatie in de code is vastgelegd.

Oplossing:

Neem de elementen op in een ul- of nav-element.

SC 4.1.3 Blinde bezoekers krijgen geen bericht van de foutmelding

Op deze pagina staat een formulier. Als er fouten worden gemaakt, verschijnt de foutmelding “Captcha-validatie mislukt. Neem contact op met beheerder.” Deze melding krijgt geen toetsenbordfocus op het moment dat die zichtbaar wordt. Hierdoor wordt de foutmelding niet automatisch voorgelezen door een schermlezer. Om dit toegankelijk te maken, moet de melding focus krijgen of als statusbericht worden gemarkeerd. Alleen dan kunnen schermlezers de foutmelding automatisch voorlezen zodra deze verschijnt.

Oplossing:

Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.

SC 4.1.2 Menuknop heeft niet de juiste rol

De menuknop bovenaan de pagina die verschijnt op een klein scherm, heeft niet de juiste toegankelijke rol en naam. Hierdoor kan hulpsoftware de knop niet herkennen als een interactief element. De juiste rol voor deze menuknop is button, omdat de knop een actie uitvoert: het openen of sluiten van het menu. Als deze rol ontbreekt of onjuist is, kunnen schermlezers of andere hulpmiddelen de knop niet correct identificeren. Dit maakt het menu moeilijker toegankelijk voor mensen die afhankelijk zijn van hulpsoftware. Ook moet de knop een duidelijke toegankelijke naam hebben, zodat het doel van de knop duidelijk is.

Oplossing:

Zorg dat de menuknop de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen.

SC 4.1.2 Menuknop geeft geen informatie over status

Op een klein scherm verschijnt een menuknop om het mobiele navigatiemenu te openen. Deze knop geeft geen informatie over de toestand van het menu (open of gesloten) aan bezoekers die het menu niet kunnen zien en een schermlezer gebruiken.

Oplossing:

Voeg bijvoorbeeld een tekstuele uitleg toe (ingeklapt/uitgeklapt) die je voor ziende bezoekers met CSS verbergt. Of gebruik het aria-expanded-attribuut op de link van het mobiele menu. Dit attribuut moet de waarde "true" krijgen als het menu getoond wordt, en “false" als het menu verborgen is.

Link naar pagina: https://www.museum.nl/nl/pers

Link naar PDF: Financieel verslag 2022

SC 2.4.2 Pdf-document heeft geen titel

In dit pdf-document staat geen titel in de bestandsinstellingen. Zelfs als er een titel op de eerste pagina van het document staat, moet er ook een documenttitel worden ingesteld in de pdf-metadata. Als een pdf wordt geopend in een pdf-lezer (zoals Adobe Acrobat of een browser), wordt zonder ingestelde titel standaard de bestandsnaam getoond, bijvoorbeeld document123.pdf. Door een duidelijke en betekenisvolle titel in te stellen in de documenteigenschappen, wordt deze titel weergegeven in plaats van de bestandsnaam. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan sneller en gemakkelijker bepalen of het document relevant is. Ditzelfde probleem komt ook voor in de pdf Trends in de museum sector.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

SC 1.1.1 Informatieve afbeelding is als achtergrondafbeelding geplaatst

In dit pdf-document zijn op alle pagina’s logo’s toegevoegd als artefact. Schermlezers negeren afbeeldingen die als artefact zijn gemarkeerd. Daardoor zijn ze niet toegankelijk voor bezoekers die de tekst laten voorlezen. Als het logo informatief is, moet het niet als artefact worden gemarkeerd. In plaats daarvan moet het via eenFigure-tag worden toegevoegd en voorzien worden van een duidelijke en betekenisvolle alt-tekst. Zo kunnen bezoekers die hulpsoftware gebruiken begrijpen wat de afbeelding voorstelt.

Oplossing:

Voeg het logo toe met de Figure-tag en geef het een beschrijvende alt-tekst.

SC 1.3.1 In een tabel voor lay-out zijn th-tags gebruikt

Op pagina 24–26 van deze pdf is een datatabel gebruikt om tekst in kolommen weer te geven (een visueel effect). Dat mag niet. Er zijn tags gebruikt die alleen bedoeld zijn voor een datatabel, zoals th-tags. Deze tags mogen niet voorkomen in een tabel voor lay-out. Voor blinde bezoekers die een schermlezer gebruiken, kunnen deze tags verwarrend zijn, omdat ze suggereren dat er een relatie is tussen de informatie in de verschillende cellen. In werkelijkheid is die relatie er niet, waardoor de inhoud verkeerd geïnterpreteerd kan worden.

Oplossing:

Verwijder de th-tags.

SC 1.3.1 Een deel van het document is niet voorzien van codes

In dit pdf-document is maar een deel van de inhoud getagd. Alle content van pagina 10 tot en met 23 is niet getagd. Door het ontbreken van tags in dit deel van het document is het niet mogelijk om te onderzoeken of aan de succescriteria is voldaan die te maken hebben met de pdf-codelaag, zoals semantische koppenstructuur en alternatieve teksten bij afbeeldingen. Als dit probleem wordt opgelost, kunnen er nieuwe toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn. Denk daarbij aan ontbrekende tekstlabels bij formuliervelden of ontbrekende relaties tussen formuliervelden en kolomkoppen. Daarom is het belangrijk dat alle pagina’s volledig en correct getagd zijn.

Oplossing:

Voorzie dit gedeelte van codes die de structuur van het document weergeven.

SC 1.3.1 Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn meerdere koppen visueel opgemaakt als kop, maar niet gemarkeerd met een juiste kop-tag. Voorbeelden hiervan zijn de teksten “Financieel verslag 2022”, “Inhoudsopgave” en “Verslag van het bestuur”. Op deze manier komt de visuele structuur van de inhoud niet overeen met de structuur in de tag-laag van het document. Dit is problematisch voor schermlezers, die afhankelijk zijn van de correcte kopstructuur om snel door het document te kunnen navigeren en de hiërarchie van de informatie te begrijpen. Koppen moeten daarom altijd gemarkeerd worden met semantisch juiste kop-tags, zoals H1, H2 enzovoort.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

SC 1.1.1 Informatieve afbeeldingen hebben automatisch gegenereerde beschrijvingen

Op pagina 24–26 van dit pdf-document staan informatieve afbeeldingen die zijn toegevoegd via een Figure-tag. Deze afbeeldingen hebben automatisch gegenereerde beschrijvingen. De afbeelding op pagina 24 is bijvoorbeeld: “Afbeelding met persoon, poseren, glimlachen Automatisch gegenereerde beschrijving”. Dit is geen goede beschrijving van de afbeelding. Hierdoor missen bezoekers die het document laten voorlezen mogelijk belangrijke inhoud. Informatieve afbeeldingen moeten altijd voorzien zijn van een handmatig geschreven alt-tekst die relevant is voor de context van het document.

Oplossing:

Voeg beschrijvende alt-teksten toe aan deze informatieve afbeeldingen.

SC 1.1.1 Informatieve afbeeldingen hebben geen alt-tekst

In dit pdf-document staan meerdere informatieve afbeeldingen die geen tekstalternatief hebben (alt-tekst). Dit komt voor op pagina’s 24, 25 en 26. Een voorbeeld is de afbeelding op pagina 24 bij “Erik van Ginkel”. Afbeeldingen die met een Figure-tag zijn gemarkeerd, moeten altijd een beschrijving hebben in de vorm van een alt-tekst. De Figure-tag is namelijk bedoeld voor informatieve afbeeldingen. Schermlezers lezen deze alt-tekst voor, zodat blinde bezoekers ook de visuele informatie kunnen begrijpen. Omdat de alt-tekst in dit geval ontbreekt, leest de schermlezer alleen “afbeelding” voor.

Oplossing:

Voeg alt-teksten toe aan deze informatieve afbeeldingen.

SC 2.4.5 Er is maar één manier om pdf-documenten te vinden

De pdf-documenten zijn niet toegankelijk via de zoekfunctie op de website. Er is momenteel dus maar één manier om deze documenten te vinden, namelijk via een link op een andere pagina. Alle pdf-documenten die op de website staan, moeten op meerdere manieren gevonden kunnen worden. Dit kan rechtstreeks via de zoekfunctie, of via een tussenpagina die relevante steekwoorden bevat waarop het pdf-document gevonden kan worden, inclusief een duidelijke link naar het pdf-document zelf. Op die manier kunnen bezoekers — ook met een beperking — de documenten zelfstandig en efficiënt terugvinden.

Oplossing:

Zorg dat de pdf-bestanden op meerdere manieren bereikbaar zijn.

Link naar pagina: Pers

SC 1.1.1 Logo heeft geen alt-tekst

Onder de kop “Een blijvende binding met het publiek” staat het logo “museum vereniging”. Dit logo heeft geen tekstalternatief. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Daarmee geef je dus aan dat de afbeelding puur decoratief is en geen informatie bevat. In dit geval is het logo echter informatief. Door een duidelijke en betekenisvolle alt-tekst toe te voegen, weten bezoekers die het beeld niet kunnen zien wat erop staat. Zonder deze tekst blijft de betekenis van het logo onbekend voor mensen die afhankelijk zijn van hulpsoftware.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Link naar pagina English

SC 3.1.2 en SC 1.1.1 Kwaliteit van de teksten die een schermlezer voorleest

In de HTML van deze pagina staan Nederlandstalige teksten, terwijl de taal van het -element is ingesteld op “en” (Engels). Hierdoor worden Nederlandstalige teksten uitgesproken volgens de Engelse uitspraakregels. Dit probleem kan zich ook voordoen op pagina’s in andere talen. Het betreft onder andere:

• aria-labels
• title-attributen
• alt-teksten

Oplossing:

Wanneer de taalcode van de pagina wordt aangepast, moeten ook deze teksten worden meegewijzigd naar de juiste taal.

Link naar pagina: https://www.museum.nl/nl/pers

Link naar PDF: Trends in de museum sector

SC 1.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document staan geen codes, waardoor de inhoud ontoegankelijk is voor schermlezers. Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Oplossing:

Voeg codes toe aan het document die de structuur van het document weergeven.

SC 1.4.1 Er is alleen kleur gebruikt in legenda bij grafiek

In dit pdf-document staan grafieken waarin informatie wordt overgebracht via kleur. Het gaat bijvoorbeeld om de legenda en de gekleurde balken in de grafiek op pagina 11 onder de kop “De meeste musea (62%) beschouwen zichzelf als een geschiedenismuseum”. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden, zien welke balk bij welke categorie in de legenda hoort.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering om het onderscheid aan te geven.

SC 1.4.3 Kleurcontrast van kleine tekst is te laag

Op pagina’s 15, 16 en 18 van dit pdf-document staat witte tekst (#FFFFFE) op verschillende achtergrondkleuren in een grafiek, met te weinig contrast:

• Op groen (#00AC7F) is de contrastverhouding 2,9:1.
• Op lichtblauw (#4285FF) is de contrastverhouding 3,5:1.
• Op geel (#FFF47A) is de contrastverhouding 1,8:1.
• Op oranje (#FFBB17) en rood (#DB412B) zijn de contrastverhoudingen 1,7:1.
• Op roze (#FF5856) is de contrastverhouding 3,1:1.

Ook op andere pagina’s is het contrast van teksten te laag:

• Op pagina 20 staat gele tekst (#E2BE47) op een lichtblauwe achtergrond ( #CADCEB), met een contrastverhouding van 1,3:1.
• Groene tekst (#23B188) staat op dezelfde lichtblauwe achtergrond (#CADCEB), met een contrastverhouding van 1,9:1.
• Op pagina 24 staat blauwe tekst (#0069A3) op een lichtblauwe achtergrond (#CADCEB), met een contrastverhouding van 4,2:1.
• Gele tekst (#FFBB17) op dezelfde lichtblauwe achtergrond (#CADCEB) heeft een contrastverhouding van 1,2:1.
• Op pagina 26 staat witte tekst (#FFFFFF) op een felgroene achtergrond (#00E091), met een contrastverhouding van 1,7:1.

Oplossing:

Zorg dat het contrast van al deze teksten minimaal 4,5:1 is.

Link naar pagina: Museumkaart

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de links met artikelen. 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 namelijk goed kunnen zien op welke plek van de pagina ze zijn om interactieve elementen te kunnen bedienen.

Oplossing:

Zorg dat de genoemde elementen een duidelijk zichtbare toetsenbordfocus-stijl hebben, door de standaard browser indicator te gebruiken of door zelf een stijl toe te voegen die aan de toegankelijkheidseisen voldoet (voldoende contrast, duidelijk te onderscheiden).

SC 1.3.1 Decoratieve video is niet verborgen voor schermlezers

Op deze pagina staat onder de kop “Ga zoals je bent” een decoratieve video. De video heeft geen geluid en bevat geen essentiële informatie, maar is momenteel niet verborgen voor schermlezers. Dit kan verwarrend zijn voor blinde bezoekers. Decoratieve video’s moeten daarom verborgen worden voor schermlezers. Hetzelfde gebeurt op pagina https://www.museum.nl/nl/museumkaart.

Oplossing:

Voeg het attribuut aria-hidden="true" toe aan het video-element of de container ervan. Hierdoor wordt het element genegeerd door schermlezers.

SC 2.2.2 Video speelt automatisch af

Op deze pagina staat onder de kop “Ga zoals je bent” een video die automatisch afspeelt en niet gepauzeerd of gestopt kan worden. Dit kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl zij proberen de tekst op de pagina te lezen. Ditzelfde probleem komt ook voor op pagina https://www.museum.nl/nl/museumkaart.

Oplossing:

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 1.4.3 Kleurcontrast van tekst is te laag

Veel teksten op de pagina hebben niet genoeg contrast.

• De witte tekst “Ga zelf iets maken” staat deels op verschillende achtergrondkleuren met een onvoldoende contrast. Zo staat de tekst op een lichtroze achtergrond (#D9B5B2) op een foto met een contrastverhouding van 1,9:1.
• De tekst “Ga als feminist” staat op een lichtroze achtergrond (#F8CEDC) met een contrastverhouding van 1,4:1.
• De videotitel “Ga zoals je bent” staat op een grijze achtergrond (#C4C8C9) met een contrastverhouding van 1,7:1 en op een blauwe achtergrond (#C5DCEB) met een contrastverhouding van 1,4:1.

Ditzelfde probleem komt ook voor op pagina https://www.museum.nl/nl/museumkaart, waar de witte tekst “Ga onbeperkt naar het museum met de Museumkaart” over video’s met een lichtblauwe, grijze en roze achtergrond wordt weergegeven. De contrastverhoudingen zijn hier ook te laag.

Oplossing:

Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.

Link naar pagina: FAQ

SC 1.3.1 strong-element is gebruikt voor opmaak

Het strong-element is op deze pagina gebruikt om tekst vetgedrukt te maken. Hele zinnen staan in het strong-element. Bijvoorbeeld:

• de zin “Je fysieke Museumkaart is dan niet meer geldig.” (onder de kop “Meest voorkomende vragen”);
• “Bekijk hier welke musea de Museumkaart verkopen” (onder de kop “Kopen”);
• “Je fysieke Museumkaart is dan niet meer geldig” en “Leer hier hoe de digitale Museumkaart werkt” (onder de kop “Gebruiken”).

Het strong-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Daarom mag dit element niet worden gebruikt om alleen vetgedrukte tekst te tonen. Dit komt ook voor op pagina https://www.museum.nl/nl/zo-werkt-de-digitale-museumkaart onder de kop “Vragen of hulp nodig?”.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

SC 1.4.11 Kleurcontrast van informatieve iconen is niet voldoende

Onder “Meest voorkomende vragen” > “Ik ben mijn Museumkaart kwijt. Wat nu?” staan grijze afbeeldingen met de cijfers “1” en “2” (#ADA9B1) op een witte achtergrond (#FFFFFF). De contrastverhouding is 2,3:1, wat lager is dan de vereiste minimale contrastverhouding van 3,0:1 voor grafische elementen die informatie overbrengen. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn. Dit probleem komt ook voor op pagina https://www.museum.nl/nl/zo-werkt-de-digitale-museumkaart.

Oplossing:

Zorg dat de iconen voldoende contrast hebben.

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Als je een sectie uitklapt (zoals “Meest voorkomende vragen”) en er staat ergens in deze sectie een link, dan gaat er iets mis met de toetsenbordfocus. Als je namelijk vervolgens naar de volgende sectie navigeert (zoals “Digitale Museumkaart”) en daarna de focus terug beweegt met Shift+Tab, gaat de focus naar een element dat niet meer zichtbaar is op het scherm: de link in de niet meer zichtbare sectie.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers deze elementen onbedoeld activeren.

Dit gebeurt ook op pagina https://www.museum.nl/nl/zo-werkt-de-digitale-museumkaart onder de kop “Vragen of hulp nodig?”.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Link naar pagina: Nu te zien

SC 2.5.3 Toegankelijke naam knop is anders dan zichtbare tekst door aria-label

De zichtbare tekst van de knop “Tentoonstellingen & activiteiten” die op deze pagina staat, is geen onderdeel van de toegankelijke naam van die knop. De toegankelijke naam is “Verander de zien en doen categorie” en is ingesteld via het aria-label-attribuut.

Het gebruik van het aria-label-attribuut overschrijft alle andere methoden voor het benoemen van elementen. Schermlezers en spraakherkenningssoftware gebruiken de naam die in het aria-label staat. Dit wordt de toegankelijke naam genoemd. Als deze naam afwijkt van de zichtbare tekst, dan zal de tekst die schermlezers voorlezen en die door spraakherkenningssoftware wordt gebruikt, verschillen van wat er op de knop te zien is. Hierdoor kunnen bezoekers de knop niet meer met stemcommando bedienen. Zij spreken de zichtbare tekst uit, maar omdat deze niet overeenkomt met de toegankelijke naam, herkent de spraaksoftware de knop 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 3.3.2 Keuzelijst (select-element) heeft geen label, omdat eerste optie als label is gebruikt

Op deze pagina staat een select-element dat geen label heeft. De eerste optie “Tentoonstellingen & activiteiten” kan niet dienen als label, omdat deze tekst verdwijnt zodra een andere optie wordt geselecteerd. Hierdoor weten bezoekers niet waar de keuzelijst over gaat. De teksten van de opties zijn in dit geval niet zelfverklarend. Dat zou bijvoorbeeld wel het geval zijn bij opties zoals “januari”, “februari” en “maart”.

Oplossing:

Geef dit element een label dat altijd zichtbaar is.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Met de knop “Filters” op deze pagina open je een dialoogvenster. Als je inzoomt tot 400% met een schermresolutie van 1280 bij 1024 pixels, zijn de filteropties in dit dialoogvenster niet meer zichtbaar of bedienbaar.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 4.1.2 Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Met de knop “Filters” op deze pagina open je een dialoogvenster. Dit dialoogvenster heeft niet de juiste ARIA-rol, en ook 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 4.1.2 Knop heeft geen code die aangeeft dat er een popup opent

Met de knop “Filters” op deze pagina kun je een dialoogvenster openen, maar deze functionaliteit is niet vastgelegd in de code. Hierdoor is het voor hulpsoftware niet duidelijk dat er een nieuw venster wordt geopend als iemand op de knop klikt.

Oplossing:

Voeg het attribuut aria-haspopup="dialog" toe aan de knop. Hierdoor weet hulpsoftware dat je met de knop een dialoogvenster opent.

SC 4.1.2 Sluitknop heeft geen naam

Met de knop “Filters” op deze pagina open je een dialoogvenster. Dit venster heeft een sluitknop. Deze sluitknop heeft geen toegankelijke naam, waardoor schermlezers de functie van de knop niet kunnen overbrengen aan bezoekers. Ook de knop met een pijltje-icoon, die wordt gebruikt om vanuit een van de “Opties” terug te keren naar de filters, heeft geen toegankelijke naam. Hierdoor is de functie van deze knop niet duidelijk voor bezoekers die een schermlezer gebruiken.

Oplossing:

Er zijn meerdere oplossingen om deze knop een naam te geven, bijvoorbeeld via een aria-label.

SC 1.1.1 Knop bestaat alleen uit afbeelding, maar er is geen alternatieve tekst

Met de knop “Filters” op deze pagina open je een dialoogvenster. Hierin staat een knop met een “x”-icoon. Deze knop bestaat alleen uit een afbeelding en heeft geen tekstalternatief. Dat is wel nodig. In dit geval wordt de alternatieve tekst van de afbeelding namelijk gebruikt als toegankelijke naam van de knop. Deze tekst moet daarom niet beschrijven wat er te zien is, maar wat de functie van de knop is. Als dat niet duidelijk is, weet een schermlezer niet wat de knop doet.

Oplossing:

Voeg een beschrijving toe met behulp van het title-element in de svg, een aria-label of tekst die visueel verborgen is maar toegankelijk is voor een schermlezer.

SC 2.4.3 Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

Met de knop “Filters” op deze pagina open je een dialoogvenster. Na het sluiten van dit dialoogvenster keert de toetsenbordfocus niet terug naar het element dat het venster opende of naar het eerstvolgende logische element in de volgorde van de toetsenbordnavigatie. Hierdoor kunnen bezoekers die het toetsenbord gebruiken de focus kwijtraken en niet goed verder navigeren op 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.3 Toetsenbordfocus gaat buiten het dialoogvenster

Met de knop “Filters” op deze pagina open je een dialoogvenster. Op dit moment kan de toetsenbordfocus ontsnappen uit het geopende venster en zich verplaatsen naar de onderliggende pagina. Bij dit soort dialoogvensters moet de toetsenbordfocus correct worden ingesteld. Als het venster actief is, moet de focus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen.

Oplossing:

Je lost dit op door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten op het moment dat de focus eruit gaat.

SC 2.4.11 Elementen die bedekt worden door een dialoogvenster krijgen nog toetsenbordfocus

Met de knop “Filters” op deze pagina open je een dialoogvenster. Dit dialoogvenster bedekt op kleine schermen een deel van de pagina. Interactieve elementen die onder dit dialoogvenster vallen, kunnen nog steeds toetsenbordfocus krijgen, terwijl ze visueel niet zichtbaar zijn. Elementen die toetsenbordfocus kunnen krijgen, moeten altijd zichtbaar zijn. Als dat niet het geval is, kunnen bezoekers die met het toetsenbord of een schermlezer navigeren in de war raken.

Oplossing:

Zorg dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen.

SC 4.1.2 Toestand van de schakelknop is niet vastgelegd in de code

Met de knop “Filters” op deze pagina open je een dialoogvenster. In de sectie “Type” hebben de knoppen “Online”, “Online premium” en “Ter plekke” meerdere toestanden, zoals ingedrukt of niet ingedrukt. Deze toestanden zijn alleen niet in de code vastgelegd. Hierdoor kan hulpsoftware de informatie over de toestand van de knoppen niet doorgeven.

Oplossing:

Zorg dat de toestand van de knop ook in de code is vastgelegd.

SC 4.1.3 Foutmeldingen worden niet automatisch voorgelezen aan blinde bezoekers

Met de knop “Filters” op deze pagina open je een dialoogvenster. In de sectie “Locatie” verschijnt een statusmelding als toegang tot de locatie wordt geweigerd: “We hebben geen toegang tot je locatie. Mogelijk is het delen van locaties uitgeschakeld. Controleer de instellingen voor het delen van je locatie.” Deze melding wordt niet automatisch voorgelezen door schermlezers. De toetsenbordfocus verplaatst zich niet naar de melding, en de melding is ook niet geprogrammeerd als statusupdate. Hierdoor missen blinde bezoekers deze belangrijke informatie.

Oplossing:

Voeg aria-live="polite" of role="alert" toe aan het element waarin de melding verschijnt. Het is dan niet nodig om de toetsenbordfocus te verplaatsen.

SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld

Met de knop “Filters” op deze pagina open je een dialoogvenster. In de sectie “Locatie” staat een zoekveld. Als je hier een ongeldige of onbekende locatie invoert, verschijnt de melding: “Er zijn geen plaatsen gevonden, controleer of de ingevulde plaats goed gespeld is of probeer een plaats in de buurt.” De relatie tussen deze foutmelding en het invoerveld is niet vastgelegd in de code. Daardoor geeft hulpsoftware deze informatie niet door aan de bezoeker. Schermlezers slaan in de “formulier”-modus namelijk vaak losse tekst tussen invoervelden 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 4.1.2 De suggesties voor de zoekfunctie hebben niet de juiste rol

Met de knop “Filters” op deze pagina open je een dialoogvenster. In de sectie “Locatie” staat een zoekveld dat tijdens het typen suggesties toont in een keuzelijst. Dit veld werkt als een combobox-widget. De benodigde ARIA-rollen en -attributen om deze functionaliteit toegankelijk te maken, ontbreken of zijn niet goed toegepast. Hierdoor kunnen schermlezers en andere hulpsoftware niet correct doorgeven hoe het zoekveld werkt en wat de beschikbare opties zijn.

Oplossing:

Om deze zoekbalk toegankelijk te maken doe je het volgende:

• Voeg role="combobox" toe aan het invoerveld (input element) om aan te geven dat het een keuzelijst is.
• Voeg aria-expanded toe aan het invoerveld om de zichtbaarheid van de suggestielijst aan te geven (aria-expanded="true" als de lijst zichtbaar is, aria-expanded="false" als deze verborgen is).
• Er zijn aanvullende ARIA-attributen nodig, zoals aria-controls en aria-activedescendant, om het combobox-patroon volledig toegankelijk te maken. Zie WAI-ARIA APG Combobox voor alle details.

Deze attributen helpen hulpsoftware om de zoekbalk correct te herkennen en te gebruiken als een keuzelijst.