Audit digitale toegankelijkheid van website https://www.kis.nl/
Samenvatting
Wij hebben de website https://www.kis.nl/ onderzocht tussen 10 en 25 maart 2025. Op dit moment zijn 30 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 25 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 134
Google Chrome, versie 131
Apple Safari, versie 17
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op alle pagina's van de website wordt voor teksten en knoppen de kleurencombinatie groen (#01A75C) en wit (#FFFFFF) gebruikt. In de footer gaat het bijvoorbeeld om de tekst die begint met "Houd zicht op integratie" en de tekst "E-mailadres", op de pagina Home om de tekst "Video" en de knop "Lees meer" en op de pagina Thema's om de tekst die begint met "Op deze website vind je kennis". De contrastverhouding van deze kleuren is 3,1:1.
Ook de kleurencombinatie roze (#F15EA5) en wit (#FFFFFF) wordt op de website gebruikt voor teksten. Op de pagina Home bijvoorbeeld bij de tekst "Praktische kennis ontwikkelen en toepassen", op de pagina Contact bij de tekst die begint met "Zit je met een vraag", en op de pagina Database antidiscriminatie-interventies bij de tekst die begint met "In deze database zijn interventies". De contrastverhouding van deze kleuren is 3,0:1.
Oplossing:
Deze teksten zijn kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers
Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Op dit moment leest de schermlezer de alternatieve teksten nog voor.
Oplossing:
Je kunt een afbeelding op verschillende manieren voor schermlezers verbergen. Een svg-element kun je bijvoorbeeld verbergen door het title-element weg te laten.
SC 2.4.4 Linktekst bevat onleesbare karakters
Op de website staan links die onleesbare tekens bevatten, zoals underscores en streepjes. Op de pagina Overzicht subsidies en fondsen voor Sinti en Roma gaat het bijvoorbeeld om de link "Overzicht fondsen - landelijk". Deze heeft de toegankelijke naam “Overzicht fondsen - landelijk icon_arrow-right--small” Op de pagina Wat is polarisatie? gaat het om links zoals "Bekijk deze publicatie", met de toegankelijke naam “Bekijk deze publicatie icon_arrow-right”. Op de pagina Gelijkwaardige kwaliteit voor iedereen: Stappenplan voor een gelijkwaardige en inclusieve zorg- en dienstverlening komt het voor bij de links “Download deze publicatie”, die hebben de toegankelijke naam “Download deze publicatie icon_arrow-bottom--small”.
De tekst van links mag geen symbolen bevatten zoals streepjes, underscores en andere. Deze karakters maken het doel van de link onduidelijk.
Oplossing:
Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de linktekst duidelijk en beschrijvend is.
SC 1.4.4, SC 1.4.10, SC 2.4.1 Als je inzoomt tot 200% of 400% gaat informatie verloren
Als je op de website inzoomt tot 200% of 400%, is de skiplink met de tekst "Overslaan en naar de inhoud gaan" niet meer zichtbaar omdat de ‘sticky header’ de link overlapt.
Oplossing:
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% of 400% op een scherm van 1280 bij 1024 pixels.
SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers
Op een klein scherm verschijnt bovenaan de pagina een menuknop met een icoon van drie horizontale lijnen. Het icoon heeft de alternatieve tekst "icon_hamburger". Als je erop klikt, verandert het icoon in een kruis met de alternatieve tekst "icon_close".
De title-elementen van de iconen geven de menuknop nu zijn toegankelijke naam. Maar deze is al gegeven door een span-element met verborgen tekst. De iconen moeten daarom verborgen worden voor schermlezers. Doordat er een title aanwezig is, leest de schermlezer deze tekst nu voor als alternatieve tekst voor de iconen, terwijl dat niet nodig is.
Oplossing:
De alt-tekst komt van het <title> element van de svg. Verwijder dit element.
SC 4.1.2 De toestand van het menu wordt niet goed doorgegeven
Op een klein scherm verschijnt een menuknop bovenaan de pagina met een icoon van drie horizontale lijnen. De open of gesloten toestand van het menu is visueel duidelijk, maar wordt niet correct doorgegeven aan schermlezers. Deze knop heeft nu de attributen aria-selected en aria-expanded, maar aria-selected moet hier niet worden gebruikt. Om aan te geven of het menu open of gesloten is, gebruik je alleen aria-expanded. Het aria-selected-attribuut is bedoeld voor items in een selecteerbare groep, zoals tabbladen of opties in een keuzelijst, niet voor dit soort toggle-knoppen. Onjuist gebruik van ARIA-attributen kan bezoekers met een schermlezer in verwarring brengen.
Oplossing:
Gebruik alleen aria-expanded en zorg dat de waarde (true of false) correct wordt bijgewerkt op basis van de toestand van het menu.
SC 2.4.6 Knopnaam bevat onleesbare tekens
Op een klein scherm verschijnt bovenaan de pagina een menuknop met een icoon van drie horizontale lijnen. De toegankelijke naam van de knop is "icon_hamburger Menu". Als je erop klikt, verandert de knop in een kruis met de toegankelijke naam "icon_close Menu". Deze namen bevatten niet-leesbare tekens zoals underscores.
Knoptekst mag geen symbolen bevatten zoals streepjes, underscores of andere speciale tekens, omdat deze het doel van de link onduidelijk maken.
Oplossing:
Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de knoptekst duidelijk en beschrijvend is.
SC 2.4.3 Toetsenbordfocus gaat buiten het mobiele menu
Als je de website bekijkt op een klein scherm, verschijnt er een menuknop bovenaan de pagina. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verplaatst dan naar de onderliggende pagina terwijl het menu open 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:
Houd de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.
SC 2.4.11 Elementen die toetsenbordfocus krijgen vallen onder mobiel menu
Als je de website op een klein scherm bekijkt met het mobiele menu geopend, overlapt het menu interactieve elementen op de onderliggende pagina die nog wel toetsenbordfocus kunnen krijgen. Dit gebeurt op alle pagina’s. Op de pagina Home kan de focus bijvoorbeeld komen op interactieve elementen in een iframe onder de kop "Wat doet Kennisplatform Inclusief Samenleven?", zoals de link naar het logo en de link "Wat doet Kennisplatform Inclusief Samenleven?” Op de pagina Vraag en antwoord komt de focus terecht op het select-element "Hoofdthema" en de knop "Filter". Deze onderliggende elementen kunnen dus nog steeds toetsenbordfocus krijgen, ook al worden ze verborgen door het menu.
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.
Oplossing:
Je lost dit op een van de volgende manieren op:
Houd de focus binnen het mobiele menu: zorg dat de toetsenbordfocus binnen het menu blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het mobiele menu automatisch: sluit het menu 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.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Als je de website bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, zijn de volgende interactieve elementen in het geopende hamburgermenu niet zichtbaar en bedienbaar: "Zoeken", "Vraag en antwoord", "Over ons", "Contact".
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 2.4.6 Koptekst is onduidelijk
In de footer van alle pagina’s staat de visueel verborgen kop "Voet" die de inhoud die erop volgt niet duidelijk beschrijft.
Een koptekst moet duidelijk maken wat bezoekers kunnen verwachten van de inhoud eronder. Algemene of vage koppen geven onvoldoende context, vooral voor schermlezers. Gebruikers van schermlezers vertrouwen op koppen om snel de structuur van een pagina te begrijpen en relevante informatie te vinden. Een nietszeggende koptekst maakt navigatie moeilijker en vermindert de toegankelijkheid van de website.
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.
SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is
In de footer van alle pagina’s zijn teksten als "Discriminatie", "Diversiteitsbeleid", "Europese arbeidsmigranten" en andere onjuist gemarkeerd met een <h3>-element.
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 2.4.7 Toetsenbordfocus is niet zichtbaar
In de footer van alle pagina’s is de toetsenbordfocus niet zichtbaar bij de links “Colofon“ “Disclaimer“ en “Privacy.“
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.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
In de footer van alle pagina’s ontbreekt het autocomplete-attribuut bij het invoerveld "E-mailadres".
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: Input Purposes.
SC 3.1.2 Taalwisseling ontbreekt op anderstalige content
In de footer van alle pagina’s verschijnt een foutmelding als je het veld "E-mailadres" verkeerd invult, bijvoorbeeld zonder apenstaartje (@). Het gaat om de tekst: “The email address xxx is not valid. Use the format user@example.com." Deze foutmelding staat in het Engels, maar er is geen taalcode toegepast. Hetzelfde probleem komt voor in het formulier op de pagina Stel een vraag.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Je wilt echter dat de schermlezer bij deze tekst op de taal van deze zin overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.
Oplossing:
Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.
De link "Lees meer" onder de kop "Voor een stabiele samenleving met ruimte voor verschil" op de homepage heeft de toegankelijke naam "Lees meer over ", die is gegeven via een aria-label. Deze tekst beschrijft de bestemming van de link niet.
Linkteksten die nietszeggend zijn (zoals 'lees meer') geven bezoekers 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 ons)’.
SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is
Op de homepage zijn de teksten die naast de kop “Thema’s” staan onjuist gemarkeerd met een <h3>-element. Het gaat bijvoorbeeld om de teksten "Jeugd en opvoeding", "Werk" en "Intercultureel vakmanschap".
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op de homepage is de toetsenbordfocus niet zichtbaar bij de volgende link: “Alle thema's“.
SC 2.5.3 Zichtbare linktekst komt niet terug in toegankelijke naam
Op de homepage staat een link met de zichtbare tekst "Alle thema's". De toegankelijke naam van deze link is "Ga naar de thema pagina," die afkomstig is van het aria-label.
Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.
Oplossing:
Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan.
1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In de video op de homepage onder "Wat doet Kennisplatform Inclusief Samenleven?" staan lichtgrijze teksten ( #EBEBEB) "Late bekij..." en "Delen" op een grijze achtergrond (#B8B8B8). De contrastverhouding met sommige delen van de achtergrond is 1,7:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.2.3 Video bevat tekst of logo’s waarvoor geen alternatief is
Op deze pagina staat een video onder het kopje "Wat doet Kennisplatform Inclusief Samenleven?". De video toont op verschillende momenten tekst en logo's waarvoor geen alternatief is (bijvoorbeeld rond 1:44 minuten). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Hetzelfde probleem komt voor op pagina Wat is polarisatie. De video op deze pagina bevat tekst en logo's rond 1:44 minuten.
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 Criterium 1.2.5, dat ofwel audiobeschrijving ofwel 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. Hetzelfde probleem komt voor op pagina Wat is polarisatie.
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.4.6 Beschrijving in title-attribuut van iframe is niet uniek of betekenisvol
Op deze pagina staat een iframe met de titel "YouTube video player". Deze titel is niet duidelijk.
Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in 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 blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
Oplossing:
Verander de tekst van het title-attribuut van de iframe zodat duidelijk is welk type inhoud elk iframe bevat, en waar het inhoudelijk over gaat.
SC 2.1.4 De YouTube-video gebruikt letters als sneltoetsen.
Deze pagina bevat een Youtube-videospeler die sneltoetsen met één letter gebruikt, 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 (Engels).
SC 2.4.4 Logo is een link, maar bestemming is onduidelijk
Het logo in de videospeler onder het kopje "Wat doet Kennisplatform Inclusief Samenleven?", dat ook een link is, heeft de toegankelijke naam "Photo image of Redactie KIS". Deze naam wordt gegeven via een aria-label. Deze tekst maakt het doel van de link niet duidelijk. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.
Oplossing:
Wijzig het aria-label om een beknopte en betekenisvolle toegankelijke naam aan de link te geven.
SC 1.4.3 Contrast van tekst is te laag bij toetsenbordfocus
Onder de kop "Thema's" op deze pagina staat de link "Algemeen". Deze tekst heeft onvoldoende contrast op het moment dat deze toetsenbordfocus krijgt. De huidige contrastverhouding is 1,1:1. Hetzelfde probleem komt op andere pagina’s voor, bijvoorbeeld:
De toetsenbordfocus is niet zichtbaar op het select-element "Hoofdthema" op deze pagina, en op alle links in de accordeons.
SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers
Naast de accordeon-knoppen op deze pagina staat een "+" of "-”-icoon, afhankelijk van of de accordeon is uitgeklapt of niet. Een voorbeeld is de knop "Wat moet ik wel en niet doen bij het tegengaan van discriminatie?". De alternatieve tekst van deze iconen is "icon_minus".
Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. De schermlezer begrijpt de stand van het accordion door het aria-expanded-attribuut op de knop.
Hetzelfde probleem komt voor op pagina Communicatie.
SC 4.1.2 De status van de knop van het accordeon wordt niet correct aangegeven.
De accordeon "Filter dit overzicht" op deze pagina heeft een aria-expanded-attribuut om de toestand aan te geven (open of dicht). De toestand wordt echter onjuist aangegeven. Het aria-expanded-attribuut heeft false als de accordeon open is en true als deze gesloten is. Hetzelfde probleem komt voor op pagina
Database antidiscriminatie-interventies.
Oplossing:
Het aria-expanded-attribuut moet de waarde true krijgen als de accordeon open is en false als deze gesloten is.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Bij het formulier op deze pagina met de invoervelden "Voornaam", "Achternaam", "E-mailadres" en "Telefoonnummer" ontbreekt het autocomplete-attribuut op de velden waar persoonlijke gegevens worden gevraagd.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnt bovenaan het formulier een lijst met de berichten: "Vraag is een verplicht veld", "E-mailadres is een verplicht veld".
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 foutmeldingen aan, zodat de bezoeker weet wat er fout is.
Onder het kopje "Overzicht subsidies en fondsen voor Sinti en Roma" op deze pagina is het em-element gebruikt om de tekst "Auteurs: Daphne van Eden en Judith Khajavi-Zijlstra" 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.4 Linktekst is niet duidelijk genoeg
Op deze pagina staan onder de kopjes "Daphne van Eden" en "Judith Khajavi" links als "Stuur een e-mail". Uit de toegankelijke naam van deze links is onduidelijk naar welke persoon ze verwijzen.
Oplossing:
Zorg dat het duidelijk is waar een link naartoe leidt, bijvoorbeeld door tekst als "Stuur een e-mail" aan te vullen met de naam van de persoon. Als het visueel duidelijk is bij welke sectie de link hoort, kan deze extra tekst visueel verborgen worden. Bijvoorbeeld "Stuur een e-mail (Daphne van Eden)".
SC 1.3.2 Artikelen staan in een onlogische leesvolgorde
Op deze pagina is de volgorde van de HTML-elementen binnen artikelen onjuist, omdat de woorden "Discriminatie" boven de koppen staan. De huidige volgorde is: het woord "Discriminatie", de kop en dan andere elementen.
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.3.1 Actieve (geselecteerde) links in filters worden alleen visueel aangegeven
Als je een optie selecteert in de filters, bijvoorbeeld "Huidskleur" of "Sport", is visueel te zien dat de optie is geselecteerd. Deze informatie is niet in de code vastgelegd. Bezoekers die afhankelijk zijn van schermlezers hebben daardoor geen toegang tot deze informatie.
Oplossing:
Zorg voor een alternatieve manier om deze informatie over te brengen, zodat slechtziende of blinde bezoekers het ook kunnen begrijpen. Voeg bijvoorbeeld visueel verborgen tekst toe aan de link naar het actieve filter.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gevonden en beschreven.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In de videospeler op deze pagina staat de lichtgrijze tekst ( #EBEBEB) "Link kopiër..." op een grijze achtergrond ( #B1B1B1). De contrastverhouding met sommige delen van de achtergrond is te laag: 1,8:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 2.4.6 Het type content in het iframe is niet beschreven in het title-attribuut
Deze pagina bevat een iframe met een title-attribuut dat de volgende tekst bevat: "Wat is polarisatie en wat kun je er tegen doen?". Hierin ontbreekt het type content.
Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in 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 blinde bezoekers 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.2 De automatisch gegenereerde ondertiteling heeft fouten
Op deze pagina staat een video met een voice-over. Ondertiteling is aanwezig, maar deze is automatisch gegenereerd en daarom onnauwkeurig.
Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.
Oplossing:
Zorg dat de ondertiteling van hoge kwaliteit is en exact weergeeft wat wordt gezegd in de video.
SC 2.4.4 Logo is een link, maar bestemming is onbekend
Het logo in de videospeler, dat ook een link is, heeft de toegankelijke naam "Photo image of Redactie KIS". Deze naam maakt het doel van de link niet duidelijk.
SC 2.4.4 Linktekst is niet duidelijk genoeg
Op deze pagina staan meerdere links met de vage tekst "Bekijk deze publicatie". Deze tekst beschrijft de bestemming van de link niet duidelijk genoeg. Dit kan verwarrend zijn, vooral voor bezoekers met cognitieve beperkingen en bezoekers die afhankelijk zijn van schermlezers.
SC 1.1.1 img-element heeft geen alt-attribuut
Op deze pagina staat een afbeelding onder de tekst "Ron van Wonderen". Deze afbeelding is geplaatst met een img-element, maar heeft geen alt-attribuut.
Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alt-tekst toe.
SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag
De toetsenbordfocus op de link "Universele Verklaring van de Rechten van de Mens" op deze pagina is deze zichtbaar door een roze achtergrond ( #BB2876). De contrastverhouding tussen deze focus-achtergrondkleur en de bruine achtergrond van de sectie (#A06709) is 1,2:1. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
SC 2.4.4 Linktekst is niet duidelijk genoeg
Op deze pagina staan meerdere links met de vage tekst "Download deze publicatie". Deze tekst beschrijft de bestemming van de link niet duidelijk. Dit kan verwarrend zijn, vooral voor bezoekers met cognitieve beperkingen en bezoekers die afhankelijk zijn van schermlezers.
SC 1.1.1 Alt-tekst van informatieve afbeelding is niet betekenisvol
Op deze pagina staan boven de tekst die begint met "Communiceer geen negatieve sociale norm ..." twee informatieve afbeeldingen: screenshots van artikelen. De alternatieve tekst voor beide is "valkuil: negatieve sociale norm”. Deze tekst beschrijft de afbeeldingen niet volledig en is niet uniek voor elk van de afbeeldingen.
Afbeeldingen die informatie overdragen moeten een unieke en betekenisvolle alt-tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven.
Oplossing:
Voeg een beschrijvende en beknopt alternatieve tekst toe aan het alt-attribuut van beide afbeeldingen.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Bij het formulier op deze pagina met invoervelden voor persoonlijke informatie (bijvoorbeeld "Voornaam", "Achternaam", "Postcode" en andere) ontbreekt het autocomplete-attribuut.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnt een lijst met berichten, zoals "Aanhef is een verplicht veld" en "Voornaam is een verplicht veld".
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 foutmeldingen aan, zodat de bezoeker weet wat er fout is.
SC 3.1.2 Taalwisseling ontbreekt op anderstalige content
Op deze pagina verschijnt een foutmelding als je het veld "E-mailadres" verkeerd invult, bijvoorbeeld zonder apenstaartje (@). Het gaat om de tekst: “The email address xxx is not valid. Use the format user@example.com." Deze foutmelding staat in het Engels, maar er is geen taalcode toegepast. Hetzelfde probleem komt voor in het formulier op de pagina Stel een vraag.
SC 3.3.2 Placeholder-tekst is gebruikt als instructie voor invoerveld
Op deze pagina zijn er twee invoervelden voor "E-mail" die gebruikmaken van placeholder-tekst. Het eerste veld "E-mail" in het hoofdformulier heeft de placeholder-tekst "Bij een zakelijke aanmelding je persoonlijk werkmailadres, bij een prive aanmelding je prive mailadres." Het tweede invoerveld "E-mail" dat wordt getoond als je het keuzerondje "Zakelijk" selecteert, heeft de placeholder-tekst: "Het algemene e-mailadres van de organisatie (niet persoonlijk werkmailadres)."
Invoervelden moeten instructies hebben die altijd zichtbaar zijn. Placeholder-tekst kan niet dienen als instructies omdat deze tekst verdwijnt als de bezoeker begint met typen. Een invoerveld zonder zichtbare instructies kan mensen in verwarring brengen omdat ze niet weten wat ze precies moeten invoeren.
Oplossing:
Voeg een instructie toe in de vorm van een tekst.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina zijn de teksten in tooltips niet gemarkeerd als koppen. Bij "Aanhef" staat bijvoorbeeld een tooltip met een "?" icoon. Als je de muisaanwijzer boven de tekst houdt, wordt de tekst "Aanhef" visueel weergegeven als een kop, maar in de code is deze niet als koptekst gemarkeerd.
Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
SC 1.4.11 Contrast van icoon op tooltip is te laag
Op deze pagina heeft het icoon in tooltips onvoldoende kleurcontrast.
Het witte vraagteken (#FFFFFF) heeft op de grijze achtergrond (#BBBBBB) een contrastverhouding van 1,9:1. Bijvoorbeeld in de tooltips bij "Aanhef" en "Ik meld mij aan voor het blad Movisies".
Oplossing:
Zorg voor een minimaal contrast van 3,0:1.
SC 1.4.3 Contrast van tekst is te laag bij toetsenbordfocus
De link "leveringsvoorwaarden van Movisie" in de tooltip bij "Ik ga akkoord met de voorwaarden" op deze pagina heeft onvoldoende contrast als deze toetsenbordfocus krijgt. De huidige contrastverhouding is 3,4:1.
Oplossing:
Vergroot het contrast tussen de link met focus en de achtergrond naar minimaal 4,5:1.
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%, zijn de invoervelden gedeeltelijk verborgen. Dit is vooral te zien bij het select-element "Land", waar het icoon van een pijl niet zichtbaar is, waardoor het voor bezoekers onduidelijk is dat het element extra inhoud opent. Het gebeurt ook bij de placeholder-teksten in de velden "E-mail". Als de bezoeker met het toetsenbord door het formulier navigeert, worden teksten als "Voorbeeld KIS formulier", "Vul het formulier hieronder in en meld je direct aan voor" en "Volg deze training/bijeenkomst" afgesneden.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gevonden en beschreven.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gevonden en beschreven.
In de bestandseigenschappen van dit PDF-document is geen titel ingesteld.
Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een PDF opent in een PDF-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, 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:
Open het PDF-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Beschrijving.
Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld:
"Rapport: Bevolkingscijfers 2023".
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:
Voorzie het document van codes die de structuur van het document weergeven.
SC 1.4.3 Kleurcontrast van kleine tekst is te laag
In dit PDF-document zijn er meerdere problemen met het kleurcontrast van tekst tegen de achtergrond. Bijvoorbeeld:
Op pagina 1 heeft de paarse tekst "Oorzaken, verschijningsvormen en aanpakken" (#712B87) op de blauwe achtergrond (#659BD1) een contrastverhouding van 2,9:1.
Op dezelfde pagina heeft de witte tekst "UTRECHT, MEI 2020" (#FFFFFF) op de blauwe achtergrond (#659BD1) een contrastverhouding van 2,9:1.
Op pagina 3 heeft blauwe tekst ( #659BD1) zoals "1.1 Aanleiding voor het onderzoek" op de lichtgrijze achtergrond (#F2F2F3) een contrastverhouding van 2,6:1.
Op pagina 41 heeft de witte tekst "Aantallen" (#FFFFFF) op de lichtgrijze achtergrond ( #D1D3D4) een contrastverhouding van 1,5:1.
Deze problemen met kleurencombinaties komen ook voor op andere pagina's van het document.
Oplossing:
Zorg dat het contrast van deze teksten minimaal 4,5:1 is.
SC 1.4.3 Kleurcontrast van grote tekst is te laag
In dit PDF-document staat op pagina 1 de paarse tekst "Polarisatie onder jongeren in
niet-stedelijke gebieden" op een blauwe achtergrond. Het kleurcontrast is 2,9:1.
SC 2.4.2 Titel van het PDF-document beschrijft de content niet (goed)
Dit PDF-document heeft de titel "Basis" ingesteld in de bestandseigenschappen, wat de inhoud van het document niet voldoende beschrijft.
De titel van een PDF-document moet het onderwerp of doel van het document duidelijk beschrijven. Hierdoor kunnen bezoekers snel en makkelijk bepalen of het document relevant is.
Oplossing:
Dit kun je aanpassen in de bestandseigenschappen van het bronbestand of van het PDF-document.
SC 1.1.1 Informatieve afbeelding is als achtergrondafbeelding geplaatst
Pagina 1 van dit PDF-document bevat een logo als artefact.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg het logo toe met de Figure-tag en geef het een beschrijvende alt-tekst.
SC 1.4.5 Er is een afbeelding die tekst bevat
In dit PDF-document staat op pagina 1 onderaan een afbeelding met de tekst: "Kennisplatform Inclusief Samenleven", "T 030 230 32 60", "E info@kis.nl", en "www.kis.nl".
Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.
Oplossing:
Zet de tekst die nu in de afbeelding staat als gewone tekst in het document.
SC 1.4.3 Kleurcontrast van kleine tekst is te laag
In dit PDF-document zijn er meerdere problemen met het kleurcontrast van tekst tegen de achtergrond. Bijvoorbeeld:
Op pagina 1 heeft de paarse tekst "Richtlijnen en tips voor terminologie inclusief woordgebruik" (#EB4394) op de witte achtergrond (#FFFFFF) een contrastverhouding van 3,6:1.
Op dezelfde pagina heeft de oranje tekst "1. Terminologie" (#FE9C1E) op de witte achtergrond (#FFFFFF) een contrastverhouding van 2,1:1.
Op dezelfde pagina heeft groene tekst zoals "Alternatieven voor 'allochtoon'" (#139A4A) op de witte achtergrond (#FFFFFF) een contrast ratio van 3,7:1.
Deze kleurencombinaties komen ook voor op andere pagina's van het document.
Oplossing:
Zorg dat het contrast van dit soort teksten minimaal 4,5:1 is.
SC 1.1.1 Alt-teksten van afbeeldingen kloppen niet
Dit PDF-document bevat informatieve afbeeldingen met incorrecte tekstalternatieven. Zie pagina "6" voor voorbeelden. Deze afbeeldingen hebben de tekstalternatieven "Afbeelding met vervagen" en "https://syrianobserver.com/wp-content/uploads/2018/08/IMG-CRX-14538.jpg".
Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen.
Oplossing:
Zorg dat de alt-teksten duidelijk beschrijven wat op de afbeeldingen te zien is.
SC 1.3.1 Teksten staan in één P-tag
Op pagina 6 van dit PDF-document staan de twee teksten "Foto 1" en "Foto 2". In de tags worden deze teksten gemarkeerd als één P-tag.
De visuele structuur moet weerspiegeld worden in de tags. Deze tekst hoort niet in één alinea te staan.
Oplossing:
Zorg dat elke alinea in een aparte P-tag staat.
SC 1.3.1 Eén alinea in meer dan één P-tag
Op pagina 2 en 3 van dit PDF-document staat één alinea tekst die begint met “Op de vraag wat dan wel, is het antwoord om zo precies mogelijk …”. In de tags is deze alinea gemarkeerd als twee P-tags.
De visuele structuur moet weerspiegeld worden in de tags. Als tekst visueel uit een aantal alinea's bestaat, moet hetzelfde aantal P-tags aanwezig zijn in de tags.
Oplossing:
Zorg dat elke alinea in een aparte P-tag staat.
SC 1.1.1 Informatieve afbeeldingen hebben geen alt-tekst
Dit PDF-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Dit komt voor op pagina 7.
Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu mist, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.
Oplossing:
Voeg alt-teksten toe aan deze informatieve afbeeldingen.
SC 1.3.1 Gewone tekst is gemarkeerd als kop
In dit PDF-document wordt de H-tag gebruikt om platte tekst te markeren, ook al is het geen kop. Het gaat om de tekst die begint met "Communiceer geen negatieve sociale norm ...".
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.
Oplossing:
Vervang de H-tag door de P-tag, zodat de tag-structuur gelijk is aan de visuele structuur.
SC 1.3.1 Koppen zijn niet als kop gemarkeerd
In dit PDF-document staan koppen die niet als kop gemarkeerd zijn. Op pagina 1 gaat het bijvoorbeeld om de teksten "Alternatieven voor 'autochtoon'" en "Marokkaans-Nederlandse/Marokkaanse Nederlanders". Het komt ook op andere pagina’s voor.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.
Oplossing:
Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.
SC 1.3.2 Leesvolgorde van de tags is niet logisch
In dit PDF-document is de leesvolgorde niet logisch. Op pagina 6 worden de teksten "Foto 1" en "Foto 2" gevolgd door de afbeelding die visueel onder de tekst "Foto 2" staat. Daarna volgt de tekst die begint met "Foto 1 heeft het risico van stereotypering ..." en die betrekking heeft op beide afbeeldingen. De afbeelding die visueel onder de tekst "Foto 1" staat, volgt op deze tekst.
Schermlezers lezen een PDF-document in de volgorde van de tags die in de codelaag staan. Als deze tags niet in een logische volgorde staan, is de leesvolgorde dus niet logisch en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.
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 "Zoeken", maar deze tekst komt niet terug in de toegankelijke naam van het invoerveld.
Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de tekst boven het element), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.
Oplossing:
Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.
SC 4.1.2 Invoerveld heeft geen toegankelijke naam
Op deze pagina heeft het invoerveld onder "Zoeken" geen toegankelijke naam.
Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 3.1.2 Taalwisseling ontbreekt op anderstalige content
Op deze pagina geeft de knop "Zoeken" een foutmelding: “Oops, something went wrong. Check your browser's developer console for more details.” Dit bericht staat in het Engels, zonder dat er een taalcode is toegevoegd.
SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers
De knop "Filter dit overzicht" op deze pagina bevat een decoratief icoon van een chevron met de alternatieve tekst "icon_chevron". Deze afbeelding is niet verborgen voor schermlezers. Hetzelfde probleem komt voor op de pagina Database antidiscriminatie-interventies.
Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.
SC 1.4.3 Tekstcontrast is te laag op de actieve (geselecteerde) link van het filter
Als je op deze pagina met je muis een van de filteropties selecteert in de accordeon "Filter dit overzicht", heeft deze een onvoldoende contrast van 1,1:1.
Oplossing:
Verhoog het contrast tussen de actieve link en de achtergrond tot ten minste 4,5:1.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op deze pagina is de toetsenbordfocus niet zichtbaar op de link "1" in de paginering.
SC 1.3.1 De kop van de accordeon staan binnen het button-element
In de accordeon "Filter dit overzicht" op deze pagina heeft het element dat de verborgen inhoud opent en sluit niet de rol van kop, terwijl dat wel moet. Er is wel een kop-element aanwezig, maar dit staat binnen een button-element. Als een kop binnen een knop staat, wordt de rol van kop niet meer voorgelezen.
Gebruik een h-element met daarbinnen een button-element. De volgorde is dan bijvoorbeeld <h2><button>Titel van de sectie</button></h2>. role="button" is dan niet meer nodig.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gevonden en beschreven.
Voldoet of niet van toepassing: 30
Voldoet niet: 25
