SC 1.3.1 Kop niet als koptekst gemarkeerd in de cookiemelding

In de cookiemelding staat de tekst “Beheer cookie toestemming”. Deze tekst is niet als kop gemarkeerd.

Oplossing

Markeer deze tekst met een heading-element.

SC 1.4.3 Onvoldoende kleurcontrast van tekst

In de cookiemelding staat een knop met witte tekst op een blauwe achtergrond. De contrastverhouding is maar 3,4:1.

Oplossing

Het contrast moet minimaal 4,5:1 zijn.

SC 1.4.4 Zoomen is niet mogelijk in oudere browsers door bepaalde code

In het head-gedeelte van de HTML-code staat op alle pagina’s maximum-scale=1. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

SC 2.4.1 Er is geen skiplink aanwezig

Op alle pagina's ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.

Oplossing:

Voeg 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 2.4.7 Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus is niet zichtbaar op de knop met de tekst “Menu”, die op alle pagina’s voorkomt.

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 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op de homepagina staan de zwarte linkteksten van het hoofdmenu op een rode achtergrond. De contrastverhouding tussen de tekst en de achtergrond is 4,1:1. Dit is te laag.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.1.1 Zoek-icoon heeft geen tekstalternatief

In het menu bovenaan de website staat een link met de tekst ‘Zoeken’, waarmee je een zoekbalk opent. In deze zoekbalk staat een knop met alleen een icoon van een vergrootglas. Dit icoon heeft geen alternatieve tekst.

Bestaat een knop alleen uit een afbeelding? Dan moet je de alternatieve tekst van die afbeelding anders invullen dan bij een gewone informatieve afbeelding. Je moet niet beschrijven wat er te zien is, maar juist wat de functie of het doel is van de knop. Doe je dit niet, dan weet hulpsoftware niet wat de functie van de knop is.

Oplossing:

Je kunt dit doen met een aria-label of met een tekst die visueel verborgen is, maar toegankelijk voor hulpsoftware.

SC 4.1.2 Zoekknop heeft geen toegankelijke naam

Hierdoor is het voor bezoekers die hulpsoftware gebruiken niet duidelijk wat deze knop doet.

Oplossing:

Geef een toegankelijke naam aan de knop. Je kunt dit doen met een aria-label of met een tekst die visueel verborgen is, maar toegankelijk voor hulpsoftware.

SC 2.4.4 Er zijn links met dezelfde tekst maar een andere functie

In het menu bovenaan de website staat een link met de tekst ‘Zoeken’, waarmee je een zoekbalk opent. De link om deze zoekbalk weer te sluiten heeft dezelfde linktekst.

Er zijn dus meerdere links aanwezig in de steekproef met dezelfde tekst, maar een verschillende functie. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden of dezelfde functie hebben. Als het om een andere functie gaat, moet de linktekst ook anders zijn.

SC 4.1.2 Toestand van het geopende paneel wordt niet doorgegeven aan hulpsoftware

In het menu bovenaan de website staat een link met de tekst ‘Zoeken’, waarmee je een zoekbalk opent. In de code van deze link staat niet of deze zoekbalk momenteel open of gesloten is.

Als er een link is die een paneel kan tonen of verbergen, moet hulpsoftware de toestand van dat paneel kunnen bepalen (zichtbaar of verborgen).

Oplossing:

Je kunt hiervoor het aria-expanded-attribuut gebruiken.

SC 1.1.1 Informatieve afbeelding zonder tekstalternatief

SC 1.3.1 Kopjes ontbreken in het menu

Met de knop “Menu” bovenaan de pagina open je een submenu. In dit submenu zijn onder andere de links “Kennis Delen”, “Thema's”, “De Museumvereniging”, “Hulpmiddelen!” en “Speerpunten” kopjes. Ze vertellen namelijk iets over de lijsten met links die eronder staan. Deze relatie is niet in de code vastgelegd.

Oplossing:

Maak voor hulpsoftware duidelijk wat de relatie is tussen deze teksten en de lijsten die eronder staan. De makkelijkste oplossing is om voor de kopjes een heading-element te gebruiken.

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

Met de knop “Menu” bovenaan de pagina open je een submenu. In dit submenu staat een afbeelding met de tekst “Kom alles te weten...”. Deze afbeelding is een link, maar heeft geen tekstalternatief. Hierdoor is de link ontoegankelijk.

De afbeelding is interactief: je kunt erop klikken. In deze gevallen geldt het tekstalternatief van de afbeelding als de inhoud van de link. Het alt-attribuut van deze afbeelding is leeg. Daardoor heeft de link dus geen inhoud (zie ook succescriterium 2.4.4 en 4.1.2).

Oplossing:

Om de link toegankelijk te maken, geef je de afbeelding een tekstalternatief dat het linkdoel beschrijft. Zo weten bezoekers die de afbeelding niet kunnen zien ook waar de link naartoe leidt. De zichtbare tekst op de afbeelding moet in de alt-tekst terugkomen.

SC 2.4.4 Link met een afbeelding, linkdoel is onbekend

Met de knop “Menu” bovenaan de pagina open je een submenu. In dit submenu staat een afbeelding met de tekst “Kom alles te weten...”. Deze afbeelding is een link, maar het alt-attribuut van de afbeelding is leeg (alt=""). Hierdoor is de afbeelding verborgen voor hulpsoftware.

Doordat de afbeelding is verborgen heeft de link geen inhoud, en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

Oplossing:

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

• 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 4.1.2 Link heeft geen toegankelijke naam

Met de knop “Menu” bovenaan de pagina open je een submenu. In dit submenu staat een afbeelding met de tekst “Kom alles te weten...”. Deze afbeelding heeft geen toegankelijke naam.

Hierdoor begrijpen bezoekers die hulpsoftware gebruiken niet wat de bestemming of de functie is van de link.

Oplossing:

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

• 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 1.4.5 Afbeelding met ingesloten tekst

Met de knop “Menu” bovenaan de pagina open je een submenu. In dit submenu staat een afbeelding met de tekst “Kom alles te weten...” .

Als je een tekst als afbeelding plaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen.

Oplossing:

Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding zit gebakken, kunnen ze dit niet doen.

SC 2.4.3 Mobiel menu krijgt niet direct toetsenbordfocus

Als je tot 200% inzoomt op de website met een schermresolutie van 1280 bij 1024 pixels, verschijnt een menuknop met drie horizontale lijnen (hamburger-icoon). Hiermee open je het mobiele navigatiemenu. De toetsenbordfocus verplaatst eerst naar andere elementen op de pagina, voordat de items uit dit mobiele menu bereikt worden. Dit is geen logische volgorde. De toetsenbordfocus moet direct naar het navigatiemenu gaan.

Oplossing:

Zorg ervoor dat de toetsenbordfocus direct naar de menu-items verplaatst op het moment dat het menu is geopend.

SC 1.1.1 Informatief icoon heeft geen tekstalternatief

Als je tot 200% inzoomt op de website met een schermresolutie van 1280 bij 1024 pixels, verschijnt een menuknop met drie horizontale lijnen (hamburger-icoon). In dit menu staat de link “Museumnetwerken”. Dit menu-item heeft een icoontje dat aangeeft dat hier een submenu aanwezig is. Dit icoon heeft geen tekstalternatief.

Oplossing:

• Geeft deze link een verborgen tekst in een span-element waarin staat dat hier een submenu aanwezig is
• Geef de link een aria-expanded-attribuut

SC 4.1.2 Menuknop heeft geen toegankelijke naam

Als je tot 200% inzoomt op de website met een schermresolutie van 1280 bij 1024 pixels, verschijnt een menuknop met drie horizontale lijnen (hamburger-icoon). Deze knop heeft op dit moment geen toegankelijke naam. Dit geldt ook voor de sluitknop die verschijnt als het menu is geopend.

Oplossing:

Zorg dat de knop een toegankelijke naam krijgt, en dat deze naam de functie ervan beschrijft. Zorg ook dat de naam mee verandert als de functie van de knop verandert (“menu openen” of “menu sluiten”).

SC 1.3.1 en SC 4.1.2 Elementen die toetsenbordfocus kunnen krijgen zijn verborgen met aria-hidden

De link "Linkedin" in de footer is verborgen voor schermlezers met behulp van aria-hidden.

Het is niet toegestaan om interactieve elementen te verbergen voor schermlezers. Een blinde bezoeker moet toegang hebben tot dezelfde informatie en functionaliteit als een ziende bezoeker. Daarnaast kunnen deze elementen nog steeds focus krijgen. Dit is verwarrend voor bezoekers die met de Tab-toets navigeren.

Oplossing:

Verwijder het aria-hidden-attribuut van de link “Linkedin”.

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

Onder het label “Blijf op de hoogte” in de footer staat een invoerveld. De foutmelding voor dit veld is: "Dit veld is vereist."

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Oplossing:

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

SC 1.4.11 De rand van het invoerveld heeft niet genoeg contrast

Onder de tekst "Blijf op de hoogte" in de footer staat een e-mailveld. De contrastverhouding tussen de lichtgrijze rand (#E6E6E6) en de achtergrond van de pagina is 1,2:1.

Oplossing:

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

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

Het zichtbare label boven het e-mailveld in de footer is "Blijf op de hoogte", terwijl de toegankelijke naam van het input-element "E-mailadres" is.

Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

SC 1.3.1 Visueel meerdere alinea’s, in de code maar één

Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

SC 2.4.6 Koptekst is onduidelijk

In de footer staat een kop met de nietszeggende tekst “Snel naar”.

Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet je ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is.

Oplossing:

Gebruik een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Link naar pagina: Homepagina

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

Als je de homepage bekijkt met een scherm van 1280 bij 1024 pixels en inzoomt tot 200%, loopt de zwarte tekst bovenaan de pagina over de afbeelding en wordt onleesbaar. Dit is ook een issue onder succescriterium 1.4.3 (Contrast).

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels. Deze tekst is groter dan 24px, daarom moet het contrast ook bij inzoomen nog minimaal 3,0:1 zijn.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan zwarte teksten op een rode achtergrond, bijvoorbeeld de tekst "Financiën" onder het kopje "Kennisbank". De contrastverhouding is hier te laag: 4,1:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder het kopje "5 speerpunten voor een toekomstbestendige museumsector" staan grijze linkteksten (#B3B3B3) op een witte achtergrond. Het gaat bijvoorbeeld om de link "Financieel gezonde sector". De contrastverhouding is hier te laag: 2,1:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.3.1 em-element is gebruikt voor opmaak

Onder het kopje "5 speerpunten voor een toekomstbestendige museumsector" staat een carrousel. In de slides van de carrousel wordt het em-element gebruikt om tekst italic te maken, zonder betekenis. Dit gebeurt bijvoorbeeld bij de tekst “Financieel gezonde sector”.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

SC 2.5.3 Zichtbare linktekst komt niet terug in toegankelijke naam

Onder het kopje "5 speerpunten voor een toekomstbestendige museumsector" staat een carrousel. De slides werken als links. Deze links zijn niet met stem te bedienen omdat de zichtbare teksten niet in de toegankelijke namen van de links voorkomen. Bij de eerste slide is de toegankelijke naam bijvoorbeeld "Aanjager van een gezonde sector".

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan.

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Onder het kopje "5 speerpunten voor een toekomstbestendige museumsector" staat een carrousel. In deze carrousel zijn decoratieve afbeeldingen opgenomen. Al deze decoratieve afbeeldingen hebben het tekstalternatief “Home” en zijn niet verborgen voor schermlezers. Hetzelfde probleem komt op deze pagina voor bij afbeeldingen onder het kopje "Evenementen en activiteiten".

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

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 1.3.1 strong-element is gebruikt in koptekst

Op deze pagina staat het kopje "Trends in de museumsector". In deze kop worden het h3-element en het strong-element beide gebruikt.

Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Oplossing:

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

SC 4.1.2 Naam van de groep beschrijft niet wat de groep doet

Onder het kopje "5 speerpunten voor een toekomstbestendige museumsector" staat een carrousel. Elke slide heeft role=”group” gekregen. Deze rol vraagt om een toegankelijke naam. Die naam bestaat momenteel uit de cijfers "1/2". Deze tekst beschrijft de betekenis van de slide niet goed. Een blinde bezoeker weet daardoor niet wat hier staat. Hetzelfde probleem komt op deze pagina voor onder het kopje "Kennisbank".

Oplossing:

Voeg tekst toe die deze groep goed beschrijft.

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de tekst "Bekijk alles". Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘bekijk alles’ of ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst “Bekijk alles” aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

Onder de kop “Nieuws uit de sector” op deze pagina staan artikelen. De volgorde van de HTML-elementen binnen de artikelen is onjuist: de afbeeldingen staan boven de koppen. De huidige volgorde is: tag (bijvoorbeeld "Nieuws"), afbeelding, kop, tekst.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder de kop "Nieuws uit de sector" op deze pagina staan afbeeldingen. De tekstalternatieven van de afbeeldingen zijn hetzelfde als de tekst van de koppen onder de afbeeldingen (bijvoorbeeld "Aangescherpte regels voor invoer van cultuurgoederen in de EU"). Hetzelfde probleem komt op deze pagina voor bij de afbeeldingen onder het kopje "Evenementen en activiteiten" en onder het kopje "Kennisbank".

Deze afbeeldingen dragen geen andere informatie over dan al in de linkteksten staat. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

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

Onder het kopje "Evenementen en activiteiten" op deze pagina staat een groep berichten. In deze berichten zijn teksten als "Workshop digitale strategie: hier begin je!" geen koppen, maar ze zijn wél gemarkeerd met een h3-element, waarschijnlijk om de letter groter te maken. Hetzelfde probleem komt op deze pagina voor onder het kopje "Kennisbank".

Het kop-element (h3) is hier niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element. Je kunt de h3-elementen wel laten staan als je de datums onder deze elementen zet.

Link naar pagina: Medewerkers

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

Onder de kop “Medewerkers” op deze pagina staat een lijst met personen. De volgorde van de HTML-elementen binnen het blokje van elk persoon is onjuist: de afbeeldingen staan boven de koppen. De huidige volgorde is: afbeelding, kop, tekst.

Als je deze blokjes van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk blokje. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

In de footer van deze pagina staat een gele link met de tekst "Routebeschrijving" (#FFE693) op een groene achtergrond (#1AAB80). De contrastverhouding is te laag: 2,4:1.

In het hoofdmenu verandert de kleur van de linktekst naar groen als een bezoeker de muis eroverheen beweegt (hover). De contrastverhouding met de witte achtergrond wordt dan 3,2:1. Ook op hover moet tekst voldoende contrast hebben.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn, ook bij hover.

SC 1.3.1 strong-element is gebruikt voor opmaak

Onder het kopje "Contactgegevens" onderaan deze pagina wordt het strong-element gebruikt om tekst vetgedrukt te maken. Bijvoorbeeld bij “Routebeschrijving”.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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

Link naar pagina: Privacyverklaring

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan de zwarte linkteksten van het hoofdmenu op een blauwe achtergrond. De contrastverhouding is hier 4,0:1, dit is te laag.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat onder het kopje "Privacyverklaring" een decoratieve afbeelding. De alternatieve tekst is "Privacyverklaring".

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Laat het alt-attribuut bij deze afbeelding leeg.

Link naar pagina: Achter de Museumcijfers: Digitalisering

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan de zwarte linkteksten van het hoofdmenu op een blauwe achtergrond. De contrastverhouding is 4,0:1 en daarmee te laag.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder de kop "Achter de Museumcijfers:Digitalisering" staat een afbeelding. Het tekstalternatief van de afbeelding is hetzelfde als de kop boven deze afbeelding. Deze afbeelding is decoratief. Hetzelfde probleem komt op deze pagina voor onder het kopje "Nieuws".

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

SC 1.3.1 em-element is gebruikt voor opmaak

Onder het kopje "Achter de Museumcijfers:Digitalisering" op deze pagina is het em-element gebruikt om de tekst “Interview met Thijs Wesselink” italic te maken.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

SC 1.3.1 strong-element is gebruikt voor opmaak

Onder het kopje "Achter de Museumcijfers:Digitalisering" op deze pagina is het strong-element gebruikt om hele zinnen vet te maken.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

Op deze pagina is de volgorde van de HTML-elementen binnen artikelen onjuist, met afbeeldingen boven koppen. De huidige volgorde is: tag (bijvoorbeeld "Nieuws"), afbeelding, datum, kop.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

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

Onder het kopje "Nieuws" op deze pagina staan artikelen. In deze artikelen zijn teksten als "3 vragen aan... museumcollega's" geen kop, maar wel met een h3-element gemarkeerd. Waarschijnlijk is dit gedaan om de letter groter te maken.

Het kop-element (h3) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder de afbeeldingen in de artikelen onder “Nieuws” staan grijze teksten (#808080) op een witte achtergrond. Bijvoorbeeld de tekst "11 maart 2025". De contrastverhouding is te laag: 3,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

Link naar pagina: Vacatures

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

De groene link "Vacatures" (#1EAA80) in het hoofdmenu staat op een witte achtergrond. De contrastverhouding is hier te laag: 2,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 3.2.2 select-element zorgt ervoor dat de pagina opnieuw laadt en de focus zich verplaatst

Oplossing:

Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Je kunt ook een knop toevoegen waarmee de bezoeker zijn keuze kan bevestigen.

SC 4.1.2 Keuzelijst heeft geen toegankelijke naam

Onder de tekst "89 vacatures" op deze pagina staan keuzelijsten (select-elementen). Deze keuzelijsten hebben geen toegankelijke naam. Hulpsoftware kan daardoor niet overbrengen wat deze elementen doen.

Oplossing:

Geef de select-elementen toegankelijke namen.

SC 1.4.3 Het contrast van de placeholder-tekst is kleiner dan 4,5:1

Onder de tekst "89 vacatures" op deze pagina staan keuzelijsten (select-elementen). De grijze placeholder-teksten in de keuzelijsten hebben een te laag contrast tegen de witte achtergrond: 1,6:1.

Oplossing:

Zorg dat de placeholder-teksten een contrast van minstens 4,5:1 tegen de achtergrond hebben.

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder de tekst "89 vacatures" op deze pagina staan afbeeldingen. De tekstalternatieven van de afbeeldingen zijn hetzelfde als de teksten van de koppen.

Deze afbeeldingen dragen geen andere informatie over dan al in de linkteksten staat. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

Link naar pagina: Congres over de Governance Code Cultuur

SC 1.3.1 Er staan twee koppen van hetzelfde niveau direct onder elkaar

Op deze pagina staat de kop "Werk jij in de culturele ....." met niveau h3. Deze kop wordt direct gevolgd door een andere h3-kop ("Schrijf je in").

Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element.

Oplossing:

Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.

SC 1.3.1 strong-element is gebruikt voor opmaak

Onder het kopje "Schrijf je in" wordt het strong-element gebruikt om hele zinnen vetgedrukt te maken.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder de kop "Agenda" staan afbeeldingen. De tekstalternatieven van deze afbeeldingen zijn hetzelfde als de koppen.

Deze afbeeldingen dragen geen andere informatie over dan al in de linkteksten staat. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

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

Onder de kop "Agenda" staan events. In deze blokken zijn teksten (bijvoorbeeld "Workshop digitale strategie: hier begin je!") geen koppen, maar ze zijn wél gemarkeerd met een h3-element. Waarschijnlijk is dit gedaan om de letter groter te maken.

Het kop-element (h3) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element.

Link naar pagina: Login

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina landt de toetsenbordfocus na de link met het logo op een onzichtbaar interactief element.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Hetzelfde probleem wordt waargenomen op deze pagina na het invoerveld "Wachtwoord".

Oplossing:

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

SC 1.4.11 De rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat een invoerveld onder het label "E-mailadres". De contrastverhouding tussen de lichtoranje rand (#FFE3D0) en de achtergrond van de pagina is 1,2:1. Ook bij de andere invoervelden op deze pagina is het contrast van de randkleur te laag.

Oplossing:

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

SC 1.4.3 Contrast van tekst is te laag bij hover

De linkteksten "Wachtwoord vergeten" en "Registreren" op deze pagina hebben onvoldoende kleurcontrast wanneer je de muis eroverheen beweegt. De contrastverhouding is 1,7:1, wat lager is dan het vereiste minimum van 4,5:1 voor normale tekst.

Interactieve elementen moeten in alle toestanden voldoende contrast hebben, dus ook als de muis erover beweegt (hover).

Oplossing:

Zorg dat de link ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond.

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

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, valt een deel van de volgende tekst weg: "E-mailadres", "Wachtwoord", "Onthoud mij", "Wachtwoord vergeten | Registreren".

Oplossing:

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

Link naar pagina: Registreren

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina landt de toetsenbordfocus na de link met het logo op een onzichtbaar interactief element.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

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

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

De roze linktekst "Dashboard" (#D369FF) staat op een lichtoranje achtergrond (#FFE3D0). De kleurcontrastverhouding is hier te laag: 2,4:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 4.1.2 Keuzelijst heeft geen toegankelijke naam

Onder de tekst "Nieuwe gebruiker aanmaken" staat op deze pagina een keuzelijst (select-element) met het label "Museum". De keuzelijst heeft geen toegankelijke naam.

Oplossing:

Geef het select-element een toegankelijke naam.

SC 1.4.3 Het contrast van de placeholder-tekst is kleiner dan 4,5:1

Onder de tekst "Museum" in het formulier op deze pagina staat een keuzelijst (select-element). De grijze placeholder-tekst in dit element heeft een contrastverhouding van 2,8:1 tegen de witte achtergrond.

Oplossing:

Zorg dat de placeholder-tekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina bevat invoervelden voor persoonlijke informatie. Bij deze velden ontbreekt het 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 invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

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

SC 2.4.3 Toetsenbordfocus verplaatst niet naar de foutmelding

Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, worden er foutmeldingen getoond zonder dat de pagina opnieuw laadt. De focus wordt op dat moment niet automatisch verplaatst naar de eerste foutmelding. Dit dwingt toetsenbordgebruikers om achteruit te navigeren met Shift+Tab om de fout te vinden, wat inefficiënt is.

Oplossing:

Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen.

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

De foutmelding "Museum waarde is verplicht", en vergelijkbare foutmeldingen bij de andere velden, zijn meer instructies dan echte foutmeldingen. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Oplossing:

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

SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld

Als je een fout maakt in het formulier verschijnt er een foutmelding bij het betreffende veld, bijvoorbeeld "Museum waarde is verplicht". De relatie tussen deze foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan als ze in de "form"-modus worden gebruikt namelijk vaak de losse inhoud tussen invoervelden over, waardoor de foutmelding niet op tijd wordt voorgelezen.

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.3 Foutmeldingen worden niet automatisch voorgelezen aan blinde bezoekers

De foutmeldingen bij het formulier op deze pagina zijn niet toegankelijk voor blinde bezoekers op het moment dat ze verschijnen.

Als een bezoeker fouten maakt in het formulier, verschijnen er foutmeldingen. De toetsenbordfocus verplaatst op dat moment niet naar de foutmelding, maar blijft op de knop “versturen” staan. Hierdoor missen blinde bezoekers de foutmeldingen. Schermlezers lezen de foutmelding nu namelijk niet automatisch voor als 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.

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

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400% valt een deel van de volgende tekst weg: "Nieuwe gebruiker aanmaken", "Accountgegevens", "Vul de accountgegevens in om mee te werken.....".

Oplossing:

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

Link naar pagina: Word lid

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder de kop"Word lid" staat een afbeelding. De alternatieve tekst van de afbeelding is hetzelfde als de kop boven deze afbeelding.

Deze afbeelding draagt geen andere informatie over dan al in de linkteksten staat. Daarom kun je deze als decoratief beschouwen.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

SC 1.3.1 em-element is gebruikt voor opmaak

Onder de kop "Type lidmaatschappen" op deze pagina is het em-element in gebruikt om teksten italic te maken.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

SC 1.3.1 em-element is gebruikt in koptekst

Sommige koppen op deze pagina zijn met het heading-element gemarkeerd, maar bevatten ook een em-element. Bijvoorbeeld de kop "Meer over volwaardig lidmaatschap".

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (schuingedrukt).

Oplossing:

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

SC 4.1.2 In de accordeons is een verkeerde rol gebruikt

Onder de koppen "Meer over gelieerde instellingen" en "Meer over kringen" staan accordeons. Deze zijn onjuist geïmplementeerd met behulp van de ARIA-rol tablist. tablist is niet geschikt voor accordeons, omdat een tablijst heel anders werkt.

Kies je toch voor de rol tablist, dan zou je ook alle functies van een tablijst op de juiste manier moeten programmeren. Dat botst met het feit dat dit geen tablijst is, maar een accordeon. Bij een tablijst moet je bijvoorbeeld aangeven welke tab actief is, terwijl je bij een accordeon aangeeft welke secties open of dicht zijn. Ook moet je andere toetsenbordbediening instellen voor een tablijst. Omdat niet alle functies voor een tablijst zijn geprogrammeerd, is dit onderdeel ook als tablijst niet toegankelijk.

Oplossing:

Je kunt beter een ARIA-oplossing speciaal voor accordeons gebruiken. Zie de pagina https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion voor meer informatie. Andere oplossingen zijn ook mogelijk.

SC 1.3.1 De accordeon heeft geen koppen of de rol van kop is overschreven

Onder de koppen "Meer over gelieerde instellingen" en "Meer over kringen" staan accordeons. De elementen die verborgen inhoud openen en sluiten de rol hebben niet de rol van kop, en dit moet wel.

De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen namelijk dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Oplossing:

Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven.

Link naar pagina: De Digitale Wegwijzer

SC 1.3.1 strong-element is gebruikt voor opmaak

Onder de kop "De digitale wegwijzer" is het strong-element gebruikt om de tekst “Eerste hulp bij digitale transformatie” vetgedrukt te maken.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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

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

De afbeeldingen van plusjes in de zijkolom onder de kop "Introductie" werken als links, maar ze hebben geen tekstalternatief. Daardoor hebben de links geen inhoud, en zijn ze ontoegankelijk (zie ook succescriterium 2.4.4 en 4.1.2).

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 wat de links doen.

SC 2.4.4 Link met een afbeelding, linkdoel is onbekend

De afbeeldingen van plusjes in de zijkolom onder de kop "Introductie" werken als links, maar ze hebben geen tekstalternatief. Deze links hebben geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

Oplossing:

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

• 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 4.1.2 Link heeft geen toegankelijke naam

De afbeeldingen van plusjes in de zijkolom onder de kop "Introductie" werken als links, maar ze hebben geen tekstalternatief. Daardoor hebben de links geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Oplossing:

Verwijder het aria-label of pas de waarde aan.

SC 1.3.1 Visueel meerdere alinea’s, in de code maar één

Onder "Best practice" staat een tekst op een gekleurde achtergrond. Deze tekst bestaat uit meerdere alinea’s, kopjes en lijsten. In de HTML is al deze tekst ten onrechte gemarkeerd als een enkel p-element.

Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

SC 1.4.5 Tekst opgenomen in een afbeelding

Op de afbeelding “Best practice” staat tekst. Als je een tekst als afbeelding plaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen.

Oplossing:

Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding zit ingebakken, kunnen ze dit niet doen.

SC 1.3.1 Opsomming is niet opgebouwd met het HTML-element ul of ol

Onder de kop "Deze data zijn vervolgens verrijkt ..:" staat een lijst met 3 items. Deze lijst is niet als lijst gemarkeerd in de code. Dit komt ook voor bij andere teksten in de gekleurde kaders.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

SC 1.3.1 Kop is niet gemarkeerd als koptekst

Onder andere de koppen “Doelstelling”, “Het resultaat”, “Wat is fotogrammetrie?” zijn niet als kop gemarkeerd.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die fungeert als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen.

Oplossing:

Gebruik een kop-element, zoals h3 of h4.

SC 1.3.1 strong- of em-element is gebruikt als alternatief voor koppen

Op deze pagina worden strong- en em-elementen gebruikt als alternatief voor echte koppen. Dit komt bijvoorbeeld voor bij de teksten "Wat is digitale transformatie?", "Waarom is digitale transformatie belangrijk?", "Wat is de digitale wegwijzer?" en "Hoe werk je ermee?".

Als koptekst niet als kop is opgemaakt, kan hulpsoftware het niet als kop herkennen. Een blinde bezoeker heeft koppen nodig om de inhoud van de pagina te begrijpen en van kop naar kop te navigeren.

Oplossing:

Gebruik de heading-elementen h1 - h6.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan blauwe teksten op een lichtblauwe achtergrond. De contrastverhouding tussen de tekst en de achtergrond is te laag: 2,9:1. Een voorbeeld hiervan is de tekst “In de collectie van het Centraal Museum bevindt zich een unieke 18e-eeuwse scheepsglobe, in kwetsbare …”. Ook staan er rode teksten op een lichtrode achtergrond. De contrastverhouding is hier 3,1:1. Een voorbeeld is de tekst “Digitaal collectiebeheer is het organiseren, bewaren en toegankelijk maken van erfgoed via gespecialiseerde software…”.

Ten slotte zijn er lichtoranje linkteksten, zoals “Factum Foundation for Digital Technology in Preservation”, op een lichtblauwe achtergrond. Hier is de contrastverhouding 1,1:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 2.4.11 Elementen die toetsenbordfocus krijgen vallen onder mobiel menu

Als je de pagina bekijkt op een klein scherm, verandert het hoofdmenu in een mobiel menu en verschijnt aan de onderkant van de pagina een knop voor de in-pagina-navigatie. Deze knop bedekt de inhoud van de pagina, waardoor interactieve elementen die focus krijgen niet meer in beeld zijn.

Oplossing:

Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.

Link naar pagina: Het nieuwe Handboek functie-indeling is er!

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

De gele tekst "Gea Wold, Senior Beleidsadviseur Werkgeverszaken" staat op deze pagina op een witte achtergrond. De contrastverhouding is te laag: 2,1:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.3.1 Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de koppen “Het nieuwe handboek is:”, “Wie hebben er meegedacht?” en “Meer informatie over het Handboek functie-indeling:” niet als kop gemarkeerd.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die de functie heeft van kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen.

Oplossing:

Gebruik een kop-element, zoals h3 of h4.

SC 1.3.1 em-element is gebruikt voor opmaak

Onder het kopje "Trainingen" op deze pagina is het em-element gebruikt om tekst italic te maken.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

SC 2.4.6 Naam van de groep beschrijft niet wat de groep doet

Onder het kopje "Nieuws" staat een carrousel. Elke slide heeft een toegankelijke naam, bijvoorbeeld "1/3", maar deze naam beschrijft de functie niet duidelijk genoeg. Een blinde bezoeker weet daardoor niet wat deze groep precies doet.

Oplossing:

Voeg tekst toe die deze groep goed beschrijft.

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

De volgorde van de HTML-elementen binnen artikelen onder de kop "Nieuws" is onjuist, met afbeeldingen boven koppen. De huidige volgorde is: tag (bijvoorbeeld "Nieuws"), afbeelding, datum, kop.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

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

Onder de kop “Nieuws” op deze pagina staan artikelen. In deze artikelen zijn teksten onder de afbeeldingen geen koppen, maar ze zijn wél gemarkeerd met een h3-element. Waarschijnlijk om de letter groter te maken. Het gaat bijvoorbeeld om de tekst "Aangescherpte regels voor invoer van cultuurgoederen in de EU".

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element.

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Onder het kopje "Nieuws" op deze pagina staan decoratieve afbeeldingen, die toch een tekstalternatief hebben. Het tekstalternatief voor de eerste afbeelding is bijvoorbeeld "Aangescherpte regels voor invoer van cultuurgoederen in de EU".

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Laat het alt-attribuut leeg.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder het kopje "Nieuws" op deze pagina staan groene teksten op een witte achtergrond. Bijvoorbeeld de tekst "20 mei 2025". De contrastverhouding van deze teksten is te laag: 3,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.4.11 Kleurcontrast van informatieve iconen is niet voldoende

De stippen waarmee je schakelt tussen slides onder het kopje "Nieuws" hebben niet genoeg contrast. De gele iconen die niet actief zijn hebben een contrastverhouding van 1,1:1 tegen de witte achtergrond. Dit is lager dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen.

Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.

Oplossing:

Zorg dat de iconen voldoende contrast hebben.

Link naar pagina: Museumkaart

SC 1.3.1 Er staan twee kopregels van hetzelfde niveau direct onder elkaar

De kop “Het lijkt zo’n simpel kaartje…..” op h3-niveau wordt direct gevolgd door de kop “Van wie is de kaart en wie heeft er baat bij?”, die ook niveau h3 heeft. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element.

Oplossing:

Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.

SC 1.3.1 Visueel meerdere alinea’s, in de code maar één

Onder de tekst die begint met "Van wie is de kaart en wie heeft er baat bij?" op deze pagina staat een kader met de titel "Doelstelling". In dit kader zijn tekstblokken met meerdere paragrafen ten onrechte gemarkeerd als een enkel p-element.

Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina bevatten meerdere links onduidelijke teksten zoals losse getallen, bijvoorbeeld "1".

Linkteksten die meerdere keren op een pagina voorkomen, te weinig context bieden of nietszeggend zijn, geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

SC 1.3.1 strong-element is gebruikt voor opmaak

Onder de koppen “Hoe werkt de kaart?” en “Aan welke knoppen kunnen we draaien om de kaart succesvol te houden?” is het strong-element gebruikt om hele zinnen vet te maken. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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

Link naar pagina: Diverse sector

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Onder de koppen "Aanjager van een diverse sector" en "Meewerken aan een diverse museumsector" op deze pagina staan decoratieve afbeeldingen. Het tekstalternatief van deze afbeeldingen is "Diverse sector".

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Laat het alt-attribuut bij deze afbeeldingen leeg.

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

Onder de kopjes "Meewerken aan een diverse museumsector" en "Kennisbank" op deze pagina staan blokjes met berichten. In deze berichten zijn de teksten onder de afbeeldingen geen kopjes, maar ze zijn wél gemarkeerd met een h3-element. Waarschijnlijk is dit gedaan om de letter groter te maken. Het gaat bijvoorbeeld om de teksten "Collectie & Informatie", "Presentatie & Educatie” en "Knisper: toegankelijke audiogidsen voor musea".

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan zwarte teksten, bijvoorbeeld "Doe mee met het Museumnetwerk" op een blauwe achtergrond. De contrastverhouding van deze en vergelijkbare teksten op deze pagina is te laag: 3,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Onder de koppen "Nieuws" en "Kennisbank" staan decoratieve afbeeldingen die een tekstalternatief hebben. Het tekstalternatief voor de eerste afbeelding is bijvoorbeeld "Samen Digitaal Veilig: hét platform voor digitale veiligheid".

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit bereik je door geen tekstalternatief op te geven.

Oplossing:

Laat het alt-attribuut bij deze afbeeldingen leeg.

SC 1.4.11 Kleurcontrast van informatieve iconen is niet voldoende

De stippen waarmee je schakelt tussen slides onder het kopje "Nieuws" hebben niet genoeg contrast. De grijze iconen die niet actief zijn hebben een contrastverhouding van 1,4:1 tegen de lichtblauwe achtergrond. Dit is lager dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen.

De iconen van pijlen om te schakelen tussen slides hebben ook te weinig contrast. Het blauwe actieve pictogram heeft tegen de lichtblauwe achtergrond een contrastverhouding van 2,9:1.

Oplossing:

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

SC 2.5.8 Klikgebied van de knoppen bij de carrousel is niet groot genoeg

Als je deze pagina bekijkt op een klein scherm krijgt de carrousel onder het kopje "Nieuws" knoppen om te navigeren tussen slides. Deze knoppen voldoen niet aan de minimale eisen voor de grootte van interactieve elementen. De gecombineerde hoogte, breedte en ruimte rondom elke knop is minder dan 24 CSS pixels.

De oppervlakte waarop geklikt kan worden (het ‘doelgebied’) bij knoppen, links en andere interactieve elementen moet groot genoeg zijn. Anders is het voor bezoekers met een motorische beperking lastig om op het goede element te klikken.

Oplossing:

Elementen moeten óf een oppervlakte hebben van minimaal 24 bij 24 CSS-pixels, óf voldoende uit elkaar geplaatst zijn. Om te bepalen of klikbare elementen ver genoeg uit elkaar staan, teken je een denkbeeldige cirkel met een diameter van 24 pixels in het midden van het doelgebied. Deze cirkel mag op geen enkele plek (de cirkel van) een ander doelgebied raken.

SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag

Als je deze pagina bekijkt op een klein scherm krijgt de carrousel onder het kopje "Nieuws" knoppen om te navigeren tussen slides. Als deze knoppen toetsenbordfocus krijgen, is dit zichtbaar door een lichtblauwe focusrand. De contrastverhouding tussen deze focusrand en de blauwe achtergrond is 1,4:1.

Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Link naar pagina: https://museumvereniging.nl/museumkaart/

Link naar pdf: Meerwaarde-Museumkaart.pdf

SC 2.4.2 Pdf-document heeft geen titel

Dit pdf-document heeft geen titel in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

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.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document ontbreken codes, waardoor de inhoud niet toegankelijk 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 3.1.1 De taal is verkeerd ingesteld

In de metadata van dit pdf-document is de taal ingesteld op "English" (en). Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker.

Oplossing:

Verander de code in “nl”.

SC 1.4.3 Kleurcontrast van grote tekst is te laag

In dit pdf-document staat de witte tekst "Meerwaarde Museumkaart" op pagina 1 op een lichtblauwe achtergrond. De contrastverhouding is te laag: 1,8:1.

Oplossing:

Zorg dat het contrast minimaal 3,0:1 is.

SC 1.4.1 Alleen kleur gebruikt in legenda bij grafiek

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Link naar pagina: https://museumvereniging.nl/nieuws/het-nieuwe-handboek-functie-indeling-is-er/

Link naar pdf: FAQ-voor-medewerkers_handboek-functie-indeling_29-augustus.pdf

SC 2.4.2 Pdf-document heeft geen titel

Dit pdf-document heeft geen titel in de bestandseigenschappen.

Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

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.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document ontbreken codes, waardoor de inhoud niet toegankelijk 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 3.1.1 De taal is niet ingesteld in de metadata

In de metadata van deze pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Geavanceerd.
4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
5. Klik op OK en sla het bestand op.

Link naar pagina: Je hebt gezocht naar

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

Onder "Je zocht naar:" staat een knop met een vergrootglas. Deze afbeelding heeft geen tekstalternatief. Als de knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop.

Oplossing:

Voeg een aria-label toe met het woord “Zoeken”.

SC 4.1.2 Link heeft geen toegankelijke naam

Onder "Je zocht naar:" staat een knop met een vergrootglas. Deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.

Oplossing:

Voeg een aria-label toe met het woord “Zoeken”.

SC 1.4.3 Placeholder-tekst hebben te weinig contrast

De placeholder-tekst in de zoekbalk onder het kopje "Je zocht naar:" heeft onvoldoende contrast. De contrastverhouding tussen de groene placeholder-tekst en de witte achtergrond is 2,9:1.

Oplossing:

Vergroot het contrast tussen de placeholder-tekst en de achtergrondkleur, zodat het minimaal 4,5:1 is.

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

Op deze pagina is de zichtbare tekst van de zoekbalk "Je zocht naar:" terwijl de toegankelijke naam van het invoer-element "Zoeken" is.

Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

SC 2.4.4 Linktekst is niet duidelijk genoeg

In de zoekresultaten staan links met pijltjes. De toegankelijke namen van deze links zijn "Lees verder". Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees verder’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

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

SC 2.4.4 De paginering heeft niet voldoende linktekst

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "pagina”.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder de resultaten op deze pagina staat een paginering. Het witte nummer van de huidige pagina heeft op de groene achtergrond een te laag contrast: 2,9:1.

Bovendien hebben de blauwe nummers van niet-actieve pagina's een te laag contrast tegen de grijze achtergrond: 2,6:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

Link naar pagina: Nieuws

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

In het hoofdmenu op deze pagina staat de groene link "Nieuws" op een witte achtergrond. De contrastverhouding is te laag: 2,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 1.1.1 Zoek-icoon heeft geen tekstalternatief

Onder de kop "Nieuws" op deze pagina staat een zoekbalk. Naast de zoekbalk staat een knop met een icoon van een vergrootglas dat geen alternatieve tekst heeft.

Bestaat een knop alleen uit een afbeelding? Dan moet je de alternatieve tekst van die afbeelding anders invullen dan bij een gewone informatieve afbeelding. Je moet niet beschrijven wat er te zien is, maar juist wat de functie of het doel is van de knop. Doe je dit niet, dan weet een schermlezer niet wat de functie van de knop is.

Oplossing:

Je kunt dit doen met een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

SC 4.1.2 Zoekknop heeft geen toegankelijke naam

Onder de kop "Nieuws" op deze pagina staat een zoekbalk. Naast de zoekbalk staat een knop met een icoon van een vergrootglas, die geen toegankelijke naam heeft. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet.

Oplossing:

Geef de knop een toegankelijke naam. Je kunt dit doen met een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

SC 1.4.3 Placeholder-teksten hebben te weinig contrast

Onder de kop "Nieuws" op deze pagina staat een zoekbalk. De placeholder-tekst van de zoekbalk heeft niet genoeg contrast. Deze lichtgrijze tekst (#C7C7C7) heeft een contrastverhouding van 1,6:1 tegen de witte achtergrond. Ook de placeholder-tekst van het select-element op deze pagina heeft dit probleem.

Oplossing:

Vergroot het contrast tussen de placeholder-tekst en de achtergrondkleur, zodat het minimaal 4,5:1 is.

SC 1.4.11 De rand van het zoekveld heeft een te laag contrast

Onder de kop "Nieuws" op deze pagina staat een zoekbalk. De achtergrond van de balk (#ffffff) heeft niet genoeg contrast tegen de achtergrond van de sectie (#D2EEE6). De lichtgroene rand heeft op de witte achtergrond een contrastverhouding van 1,2:1. Dit is te laag, het moet minimaal 3,0:1 zijn. Ook de rand van het select-element heeft dit probleem.

Oplossing:

Zorg dat het contrast tussen de rand van de zoekbalk en het select-element en de achtergrond minimaal 3,0:1 is.

SC 4.1.2 <select>-element heeft geen toegankelijke naam

Onder de kop "Nieuws" op deze pagina staat een keuzelijst (select-element). De toegankelijke naam ontbreekt. Hulpsoftware weet niet wat dit element doet.

Oplossing:

Geef het select-element een toegankelijke naam.

SC 3.2.2 select-element zorgt dat de pagina opnieuw laadt en de focus wordt verplaatst

Op deze pagina zorgt het select-element onder de kop "Nieuws" ervoor dat de pagina herlaadt als je een optie selecteert. De focus begint dan weer bovenaan de pagina. Dit mag niet zomaar gebeuren. Dit select-element staat op meerdere pagina's.

Oplossing:

Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Je kunt ook een knop toevoegen waarmee de bezoeker zijn keuze kan bevestigen.

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

Op deze pagina is de volgorde van HTML-elementen binnen artikelen onjuist, met afbeeldingen boven koppen. De huidige volgorde is: tag (bijvoorbeeld "Nieuws"), afbeelding, kop, tekst.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

SC 1.1.1 Alternatieve tekst zorgt voor herhaling van tekst

Onder het zoekveld op deze pagina staan artikelen met afbeeldingen. Elke afbeelding staat binnen een link. De tekstalternatieven van de afbeeldingen zijn hetzelfde als de teksten van de koppen eronder.

Deze afbeeldingen dragen geen andere informatie over dan al in de linkteksten staat. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

SC 2.4.4 Paginering heeft onvoldoende linktekst

Bij links in de paginering ontbreekt context. Het gaat om links als “1”, “2”, “3”. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn.

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "pagina”.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder de resultaten op deze pagina staat een paginering. Het witte nummer van de huidige pagina heeft op de groene achtergrond een te laag contrast: 2,9:1.

Bovendien hebben de nummers van niet-actieve pagina's een te laag contrast tegen de grijze achtergrond: 2,6:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

Link naar pagina: Museumkaart voor instellingen tastbaar middel om herstel te bevorderen

SC 1.3.1 strong-element en em-element zijn gebruikt in koptekst

Op deze pagina staat de kop "De Museumkaart maakt al sinds 1981 museumbezoek toegankelijk voor een ...". Deze kop is gemarkeerd met een heading-element, maar ook het strong-element en em-element zijn gebruikt.

Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt). Hetzelfde geldt voor het em-element, dat je niet mag gebruiken om alleen een tekst italic te maken.

Oplossing:

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

SC 4.1.2 In de accordeon zijn verkeerde rollen gebruikt

Kies je toch voor de rol tablist, dan zou je ook alle functies van een tablijst op de juiste manier moeten programmeren. Dat botst met het feit dat dit geen tablijst is, maar een accordeon. Bij een tablijst moet je bijvoorbeeld aangeven welke tab actief is, terwijl je bij een accordeon aangeeft welke secties open of dicht zijn. Ook moet je andere toetsenbordbediening instellen voor een tablijst. Omdat niet alle functies voor een tablijst zijn geprogrammeerd, is dit onderdeel ook als tablijst niet toegankelijk.

Oplossing:

Je kunt beter een ARIA-oplossing speciaal voor accordeons gebruiken. Zie de pagina Accordion voor meer informatie. Andere oplossingen zijn ook mogelijk.

SC 1.3.1 De accordeon heeft geen koppen

Onder de tekst "De Museumkaart maakt al sinds 1981 museumbezoek toegankelijk voor een...." staan accordeons, in- en uitklapbare blokken tekst. De elementen die deze verborgen inhoud openen en sluiten hebben niet de rol van kop, en dat moet wel.

De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen namelijk dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Oplossing:

Markeer deze teksten als koppen.

SC 1.3.1 em-element is gebruikt voor opmaak

Onder de tekst "De Museumkaart maakt al sinds 1981 museumbezoek toegankelijk voor een...." staan accordeons, in- en uitklapbare blokken tekst. In deze accordeons is het em-element gebruikt om tekst italic te maken.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Boven de kop "Positieve impact Museumbezoek op (mentale) gezondheid" op deze pagina staan afbeeldingen. Onder deze afbeeldingen staan grijze (#808080) teksten op een witte achtergrond. Deze hebben een te lage contrastverhouding: 3,9:1. Ook onder het kopje "Positieve impact Museumbezoek op (mentale) gezondheid" is het contrast van de teksten te laag.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

SC 2.4.6 Het type content in het iframe is niet beschreven in het title-attribuut

Op deze pagina staat een iframe waarvan het title-attribuut de volgende tekst bevat: "Pilot Museumkaart voor instellingen: Erik Scherder huis x Van Gogh Museum". In deze tekst ontbreekt een beschrijving van het type inhoud.

In het title-attribuut moet staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

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

Onder de kop "Bekijk de video" op deze pagina staat een video. In de video zijn op verschillende momenten teksten en logo's in beeld waarvoor geen audiobeschrijving aanwezig is, bijvoorbeeld rond 0:03 en 0:50. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

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

De video op deze pagina voldoet niet aan succescriterium 1.2.5, dat een audiobeschrijving of een media-alternatief voor video's vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor.

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.

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

Op deze pagina staat een Youtube-videospeler. De speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.

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.3.2 Artikelen hebben een onlogische leesvolgorde

Onder de kop “Nieuws” op deze pagina staan artikelen. De volgorde van de HTML-elementen binnen de artikelen is onjuist, met afbeeldingen boven koppen. De huidige volgorde is: tag (bijvoorbeeld "Nieuws"), afbeelding, datum, kop.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

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

Onder de kop “Nieuws” op deze pagina staan artikelen. In deze artikelen zijn teksten als "Museumcongres en Museumweek 2025" geen kop, maar ze zijn wél gemarkeerd met een h3-element. Waarschijnlijk is dit gedaan om de letter groter te maken.

Het kop-element (h3) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder de afbeeldingen in de artikelen onder “Nieuws” staan grijze teksten (#808080) op een witte achtergrond. Bijvoorbeeld de tekst “25 maart 2025”. De kleurcontrastverhouding is te laag: 3,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.