Audit digitale toegankelijkheid van website https://www.bureauwbtv.nl/
Samenvatting
Wij hebben de website https://www.bureauwbtv.nl/ onderzocht tussen 20 en 27 maart 2025. Op dit moment zijn 38 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 17 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Alle pagina's op de website https://www.bureauwbtv.nl/
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 134
Google Chrome, versie 131
Apple Safari, versie 17
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Contrast tussen focusindicator en achtergrond is te laag
In de cookiebanner staat een knop met de tekst "Cookievoorkeuren beheren". Deze opent een dialoogvenster met een knop met de tekst "Cookievoorkeuren opslaan". Als deze knop toetsenbordfocus krijgt, krijgt de knop een lichtblauwe rand (#BFDEFF). De contrastverhouding tussen de focusrand en de witte achtergrond is 1,4:1. Dit is te laag. 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.
Voldoet niet aan SC 1.4.11 – Non-text Contrast
Decoratieve content is niet verborgen voor schermlezers
In de header en footer staan links zoals "Mijn Wbtv"", "Contact" en "Nieuws". Deze links zijn gescheiden door verticale streepjes. Deze streepjes zijn decoratieve elementen, maar ze zijn niet verborgen voor schermlezers. Sommige schermlezers lezen ze voor als "verticale lijn". Decoratieve inhoud moet verborgen zijn voor schermlezers.
Oplossing:
Verwijder de content: "|" van de link.
Voldoet niet aan SC 1.1.1 – Non-text Content
Kop is niet gemarkeerd als koptekst
In de footer van de website is de tekst "Deel deze informatie" niet gemarkeerd als kop, terwijl het wel een kop is.
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.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je de website bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, wordt de tekst in het logo afgekapt. Hetzelfde gebeurt met de placeholder-tekst in de zoekbalk.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Onder de kop "Nieuws" op deze pagina staan zes nieuwsartikelen. Onder de tekst "Vacatures Commissie btv" valt bijbehorende inhoud, zoals de datum. Deze tekst doet dus dienst als kop, maar is niet als een kop gemarkeerd. Hetzelfde geldt bijvoorbeeld voor de tekst "Vacature Klachtencommissie Wbtv - tolk-vertaler" en de tekst "Vacature Klachtencommissie Wbtv - overige expertise".
Oplossing:
Gebruik een kop-element, zoals <h3> of <h4>.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In de captcha op deze pagina staat de grijze tekst "Friendly Captcha" (#777777) op een lichtgrijze achtergrond (#FAFAFA). De contrastverhouding tussen deze twee kleuren is te laag: 4,3:1.
Als de captcha niet werkt komt deze tekst op een lichtrode achtergrond te staan (#FFF2F2). Dan is de contrastverhouding 4,1:1: ook te laag. Dit komt ook voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 – Contrast (Minimum)
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina staat een formulier met een captcha. Als de captcha niet werkt, verschijnt de rode tekst "Websiteprobleem" (#EE0000) op een lichtrode achtergrond (#FFF2F2).
De contrastverhouding is te laag: 4,2:1. Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 – Contrast (Minimum)
Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, gaat de tekst "Friendly Captcha" gedeeltelijk verloren. Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Voldoet niet aan SC 1.4.10 – Reflow
Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, is het interactieve element in de captcha (de knop met drie stippen) niet zichtbaar en niet bedienbaar. Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Voldoet niet aan SC 1.4.10 – Reflow
Contrast van icoon op knop is te laag
Het kleurcontrast tussen het grijze icoon van drie stippen (#AAAAAA) en de lichtgrijze achtergrond (#FAFAFA) van de knop in de captcha is 2,2:1, dit is te laag. Ook de andere "x"-knop, die verschijnt als de knop met drie stippen geopend is, heeft te weinig contrast. Het contrast is nog lager op de lichtrode achtergrond (#FFF2F2) die verschijnt als de captcha niet werkt op de pagina. De contrastverhouding is dan 2,1:1.
Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Zorg dat de iconen voldoende contrast hebben. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.
Voldoet niet aan SC 1.4.11 – Non-text Contrast
De rand van het keuzevakje heeft niet genoeg contrast
In de captcha op deze pagina staat een keuzevakje. De contrastverhouding tussen de grijze rand (#AAAAAA) en de lichtgrijze achtergrond (#FAFAFA) is 2,2:1. Dit contrast is te laag.
Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
De randen van interactieve elementen zoals keuzevakjes moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Voldoet niet aan SC 1.4.11 – Non-text Contrast
iframe heeft geen toegankelijke naam
Onder de tekst "Beveiligingsvraag *" op deze pagina staat een iframe zonder title-attribuut.
Iframes moeten een goede beschrijving hebben. Die staat 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.
Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
Voldoet niet aan SC 4.1.2 – Name, Role, Value
Tekst van keuzevakje komt niet voor in toegankelijke naam
In de captcha op deze pagina staat een keuzevakje met de zichtbare tekst "Anti-robotverificatie". De toegankelijke naam hiervan is "Vinkje-icoon. Klik om te verifiëren dat je geen robot bent".Deze staat in het aria-label-attribuut.
Het aria-label-attribuut overschrijft alle andere methoden voor het benoemen van elementen. Schermlezers en spraakherkenningssoftware gebruiken de naam die in het aria-label staat. Dit wordt de “toegankelijke naam” genoemd. Als deze toegankelijke naam anders is dan de zichtbare tekst, zal de tekst die schermlezers voorlezen en die door spraakherkenningssoftware wordt gebruikt, dus afwijken van de zichtbare tekst. Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.
Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
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.
Voldoet niet aan SC 2.5.3 – Label in Name
Succesbericht wordt niet automatisch voorgelezen door schermlezers
Als je de “Friendly Captcha” op deze pagina succesvol maakt, verandert het keuzevakje in een blauw vinkje en verschijnt de tekst “Verificatie voltooid” zonder dat de pagina opnieuw laadt. De focus wordt daarbij niet naar deze melding verplaatst.
Een schermlezer kan dit bericht daarom alleen voorlezen aan een blinde bezoeker als het bericht in de code als statusbericht is gemarkeerd, en dat is nu niet het geval.
Hetzelfde probleem komt voor op de pagina Bezwaarformulier Wbtv en op de pagina Registratieformulier PE-punten scholingsactiviteit.
Oplossing:
Om dit te bereiken moet het bericht het attribuut aria-live="polite" of role="status" krijgen. Dit zorgt ervoor dat schermlezers het bericht automatisch voorlezen.
Informatieve afbeelding is als achtergrond gebruikt, en er is geen tekstalternatief
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". Naast deze links staat een icoon van een pijltje dat naar beneden wijst, dat aangeeft dat je extra informatie kunt bekijken. Dit informatieve icoon is toegevoegd als achtergrondafbeelding en heeft geen tekstalternatief.
Voldoet niet aan SC 1.1.1 – Non-text Content
De popup mist het attribuut aria-haspopup
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". Deze links missen het attribuut aria-haspopup.
Oplossing:
Voeg het aria-haspopup-attribuut toe, en stel de waarde in op true.
Voldoet niet aan SC 4.1.2 – Name, Role, Value
Staat van popup niet doorgegeven aan schermlezer
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". De code geeft niet aan of de pop-up geopend of gesloten is.
Als er een link is die een pop-up kan tonen of verbergen, dan moet hulpsoftware de staat van deze pop-up (zichtbaar of verborgen) kunnen bepalen.
Oplossing:
Je kunt hiervoor het aria-expanded-attribuut gebruiken. Maar let op: dit attribuut werkt alleen zolang de focus op de link blijft. Verplaatst de focus? Gebruik dan een verborgen tekst om de staat van de pop-up aan te geven.
Voldoet niet aan SC 4.1.2 – Name, Role, Value
Links niet visueel te onderscheiden van gewone tekst
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". In alle pop-ups staan links, zoals de link "Taalprofielen 2015", in de pop-up "minimaal twee subvaardigheden". De blauwe tekst (#34587F) van deze links heeft een contrastverhouding van 2,8:1 met de omliggende zwarte tekst (#000000). Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.
Oplossing:
Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur. Bijvoorbeeld:
Onderstrepen: geef de links een onderstreping.
Rand: voeg een subtiele rand (kader) toe aan de links.
Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.
Voldoet niet aan SC 1.4.1 – Use of Color
Contrast van tekst is te laag bij hover
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". In alle pop-ups staan links, zoals de link "Taalprofielen 2015", in de pop-up "minimaal twee subvaardigheden". Deze links hebben bij hover onvoldoende contrast: de blauwe tekstkleur (#99ABBF) heeft een contrastverhouding van 2:1 tegen de lichtgroene achtergrond (#EBF1E8).
Oplossing:
Verhoog het contrast tussen de link bij hover en de achtergrond tot minimaal 4,5:1.
Voldoet niet aan SC 1.4.3 – Contrast (Minimum)
Linktekst bevat onleesbare karakters
In het accordeon "Toelichting" op deze pagina staat een link met de tekst "De taalprestatieniveaus van het ERK (A1, A2, B1, B2, C1 en C2) zijn nader uitgewerkt in beschrijvingen van wat men kan in een bepaalde taal (de ik-kan stellingen of ‘can-do statements’)". Hiermee open je een pop-up. In deze pop-up staat een link met de tekst "Bestand SLO Taalprofielen 2015 /publish/pages/11007/taalprofielen-2015_1_.pdf taalprofielen-2015_1_.pdf taalprofielen-2015_1_.pdf Taalprofielen 2015". Deze link bevat niet-leesbare tekens (zoals koppeltekens en underscores). 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.
Voldoet niet aan SC 2.4.4 – Link Purpose (In Context)
Volgorde toetsenbordfocus is niet logisch
Op deze pagina staan linkjes die pop-ups openen, zoals "minimaal twee subvaardigheden", "ERK" en (in het accordeon "Toelichting") de link "De volgende subvaardigheden worden onderscheiden". Na het sluiten van een pop-up met de "X"-knop verplaatst de toetsenbordfocus niet naar het volgende element, maar naar de bovenkant van de pagina. Deze volgorde van toetsenbordnavigatie is niet logisch.
Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.
Oplossing:
Zorg dat bij het sluiten van de pop-up de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.
Voldoet niet aan SC 2.4.3 – Focus Order
Er staan twee kopregels van hetzelfde niveau direct onder elkaar
Op deze pagina wordt een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde of een hoger niveau. Zie bijvoorbeeld “Artikelsgewijze toelichting” en “Artikel 1. Definities” in het accordeon “Toelichting”.
Als twee koppen van hetzelfde niveau (bijvoorbeeld h3) 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 kopregelniveaus de structuur van de tekst correct weergeven.
Voldoet niet aan SC 1.3.1 – Info and Relationships
em-element is gebruikt voor opmaak
In het accordeon “Bijlage: Toetsformat” op deze pagina staan tabellen. In de rij “Scores” is de volledige zin “Hoeveel punten worden ... slagen voor de toets?” gemarkeerd met een <em>-element, om de tekst schuingedrukt 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.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Als je het formulier instuurt met lege velden of onjuiste gegevens, verschijnen er meldingen zoals "Veld Wbtv-nummer is verplicht". Dit gebeurt bijvoorbeeld bij de invoervelden "Wbtv-nummer", "Voorletters" en "Achternaam". Deze teksten zijn instructies, geen 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 foutmelding aan, zodat de bezoeker weet wat er fout is.
Voldoet niet aan SC 3.3.1 – Error Identification
Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Het formulier op deze pagina heeft invoervelden voor persoonlijke gegevens (zoals "Achternaam", "Postcode" en andere). Bij deze velden ontbreekt het attribuut autocomplete.
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.
Voldoet niet aan SC 1.3.5 – Identify Input Purpose
Geen permanent zichtbare instructie
In het invoerveld "Datum besluit" staat een placeholder-tekst die het vereiste formaat aangeeft: "dd-mm-jjjj". Invoervelden moeten een instructie hebben die altijd zichtbaar is. Je kunt hier dus niet een placeholder-tekst voor gebruiken, want die verdwijnt zodra de bezoeker begint te typen.
Oplossing:
Voeg een instructie toe bij het veld die altijd zichtbaar is.
Voldoet niet aan SC 3.3.2 – Labels or Instructions
Als je het formulier instuurt met lege velden of onjuiste gegevens, verschijnen er meldingen zoals "Veld Wbtv-nummer is verplicht". Dit gebeurt bijvoorbeeld bij de velden "Wbtv-nummer", "Omschrijving scholingsactiviteit" en "Welke competenties heeft u met deze activiteit op peil gehouden/ontwikkeld?". Deze teksten zijn een instructie, geen foutmelding.
Voldoet niet aan SC 3.3.1 – Error Identification
Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Bij het invoerveld "Achternaam" ontbreekt het attribuut autocomplete.
Voldoet niet aan SC 1.3.5 – Identify Input Purpose
Er staan twee kopregels van hetzelfde niveau direct onder elkaar
Op deze pagina wordt een kop van niveau 2 direct gevolgd door een andere kop van hetzelfde of een hoger niveau. Zie bijvoorbeeld “Opleidingen Nederland” en “Tolkopleidingen Nederland”. Hetzelfde probleem komt voor bij de koppen “Opleidingen België” en “Tolkopleidingen België”.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Onder de kop “Het nieuwe logo” op deze pagina staan twee logo’s.
De volledige tekst van beide logo’s is "Erkend opleider door Bureau Wbtv", maar de alt-tekst van het eerste logo is "paars logo erkend" en van het tweede "Wit logo erkend".
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.
Oplossing:
Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Erkend opleider door Bureau Wbtv – paars logo” en “Erkend opleider door Bureau Wbtv – wit logo”.
In de titel van dit PDF-document, "Microsoft Word - besluitvormingArabisch.doc", staan de termen "Microsoft Word" en "doc". Dit kan bezoekers verwarren, omdat het suggereert dat het om een Microsoft Word-bestand gaat, terwijl het in werkelijkheid een PDF is.
Oplossing:
Verwijder de onnodige termen. Dit kun je aanpassen in de bestandseigenschappen van het bronbestand of van het PDF-document.
Voldoet niet aan aan SC 2.4.2 – Page Titled
De taal is niet ingesteld in de metadata
In de metadata van dit PDF-bestand 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:
Open het PDF-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Geavanceerd.
Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
Klik op OK en sla het bestand op.
Voldoet niet aan SC 3.1.1 – Language of Page
Structuur van PDF-document is niet in codes vastgelegd
Dit PDF-document mist codering, waardoor de inhoud ontoegankelijk is voor schermlezers.
Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.
Oplossing:
Voeg codes toe aan het document die de structuur van het document weergeven.
Voldoet niet aan SC 1.3.1 – Info and Relationships
In de bestandsinstellingen 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.
Voldoet niet aan SC 2.4.2 – Page Titled
Koppen zijn niet als kop gemarkeerd
In dit PDF-document zijn meerdere koppen niet gemarkeerd als kop. Bijvoorbeeld “Jaarverslag 2023” en “Klachtencommissie Wet beëdigde tolken en vertalers” op pagina 1, en “Woord vooraf” op pagina 2. Deze teksten staan in een P-tag. Dit probleem komt ook voor op andere pagina’s, bijvoorbeeld op pagina’s 3–6, 9 en 11–16. Daarnaast zijn koppen zoals “1.1 Algemene inleiding” en “1.2 Samenstelling commissie” gemarkeerd met een L-tag. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.
Oplossing:
Vervang de P-tags en L-tags met de juiste H-tags, zodat de structuur in de tags gelijk is aan de visuele structuur.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Lijst is niet als lijst gemarkeerd
Op pagina 5 van dit PDF-document staat een lijst onder “2.1 Inleidende opmerkingen”. De juiste structuurmarkering voor deze lijst ontbreekt.
Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen.
Oplossing:
Markeer de lijst met een L- en Li-tags.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Meerdere alinea’s staan in één P-tag
In dit PDF-document staan twee alinea’s tekst op pagina 3, beginnend met de tekst “Volgens art. 15, eerste…”,. In de tags zijn deze alinea’s samengevoegd in één P-tag. Dit probleem komt ook voor op pagina 5, bij de tekst die begint met “In 2023 zijn er…”.
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.
Voldoet niet aan SC 1.3.1 – Info and Relationships
th-tags zijn gebruikt voor gegevens
Op pagina 5 van dit PDF-document staat een tabel. De eerste kolom ("Nr.") bevat gegevens zoals “1” en “2” die zijn gemarkeerd met th-tags. Deze tag mag alleen worden gebruikt voor kopcellen. Hetzelfde probleem komt voor in de eerste kolom “klacht” van de tabel op pagina 12. Als th-tags worden gebruikt voor cellen met gegevens in plaats van met koppen, kan hulpsoftware de structuur van de tabel niet meer goed doorgeven. Het wordt dan lastig voor bezoekers om de relaties tussen de gegevens in de tabel te begrijpen.
Oplossing:
Gebruik voor cellen met gegevens een td-tag, en gebruik th-tags alleen voor kopcellen.
Voldoet niet aan SC 1.3.1 – Info and Relationships
Informatieve afbeelding is als achtergrond gebruikt, en er is geen tekstalternatief
Onder de kop "Rechtwijzer.nl (website voor burgers die informatie zoeken en/of hun probleem zelf kunnen en willen oplossen)" staat naast de link “onderzoeksrapport” een informatieve afbeelding van een PDF-icoon. Deze afbeelding is toegevoegd als achtergrondafbeelding, zonder dat er een tekstalternatief is.
Als je een afbeelding als achtergrond toevoegt aan een pagina, maak je de afbeelding ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door.
Oplossing:
Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Je kunt de afbeelding ook via het img-element plaatsen en de informatie in de alt-tekst zetten.
Belangrijk: deze afbeelding is ook nog verborgen voor schermlezers met het attribuut aria-hidden="true". Verwijder deze code.
Voldoet niet aan SC 1.1.1 – Non-text Content
Taalwisseling ontbreekt op anderstalige content
Bij de koptekst "RaadvoorRechtsbijstand.org (corporate website)" staat het gedeelte "corporate website" in een andere taal. Er is geen taalcode toegepast op deze inhoud. 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”. Dit is niet correct. De schermlezer moet op de juiste taal (Engels) overschakelen.
Oplossing
Voeg lang="en" toe aan het element waarin deze content staat, bijvoorbeeld: <span lang=”en”>Engelse tekst</span> of <p lang=”fr”>Franse tekst</p>.
Voldoet niet aan SC 3.1.2 – Language of Parts
Linktekst is niet duidelijk genoeg
Op deze pagina staan links met de tekst "onderzoeksrapport". Deze tekst geeft niet aan waar de link naartoe leidt. Hetzelfde geldt voor de link "toegankelijkheidsverklaring".
Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘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 als “onderzoeksrapport” aan te vullen met de rapporttitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. De linknaam wordt dan bijvoorbeeld "onderzoeksrapport van de RaadvoorRechtsbijstand.org."
Voldoet niet aan SC 2.4.4 – Link Purpose (In Context)
Voldoet of niet van toepassing: 38
Voldoet niet: 17
