Content-audit digitale toegankelijkheid van website werkenbij.ipo.nl

#1 - Zichtbare tekst logo komt niet voor in toegankelijke naam

Bovenaan de pagina staat het logo met de zichtbare tekst "Werken bij IPO Bij12". De toegankelijke naam van deze link is "Homepagina". Dit verschil kan spraakbesturing belemmeren: spraakopdrachten gebruiken de zichtbare tekst van een element. Als de toegankelijke naam daarvan afwijkt, activeren spraakopdrachten de link niet.

User story

Ik bedien de website met spraakbesturing. Als ik de zichtbare tekst van het logo uitspreek om de link te activeren, dan gebeurt er niets. Ik verwacht elke link te kunnen activeren door de tekst uit te spreken die ik zie.

Hoe te testen

Vergelijk voor elk element met een zichtbaar tekstlabel de zichtbare tekst met de toegankelijke naam (via het accessibility-paneel in DevTools of met een schermlezer). De zichtbare tekst moet vooraan in de toegankelijke naam staan. Test met spraakbesturing ("Klik Werken bij IPO Bij12") of de link daadwerkelijk wordt geactiveerd.

Oplossing

Zorg ervoor dat de toegankelijke naam van de logolink de zichtbare tekst bevat, bij voorkeur aan het begin. Ideaal is dat de toegankelijke naam identiek is aan de zichtbare tekst.

#2 - Logo heeft geen tekstalternatief

Het logo bovenaan de website heeft geen tekstalternatief. Het alt-attribuut is leeg. Logo's zijn informatieve afbeeldingen en hebben een tekstalternatief nodig (de alt-tekst). De alt-tekst moet de volledige tekst bevatten die in het logo wordt weergegeven. Zo begrijpen ook bezoekers die de afbeelding niet kunnen zien de inhoud.

Hetzelfde probleem komt voor bij de logo's in de footer onder de kop "Onderdeel van de Vereniging IPO". Ook deze logo's hebben een leeg alt-attribuut.

User story

Ik lees de website met een schermlezer. Als ik de pagina open, dan kan ik niet horen welke website ik bezoek omdat het logo geen tekstalternatief heeft. Ik verwacht dat het logo een tekstalternatief heeft met de naam van de organisatie.

Hoe te testen

Inspecteer elk logo en controleer of het tekstalternatief alle betekenisvolle zichtbare tekst uit het logo bevat. Als het logo een link is, controleer dan ook of de toegankelijke naam de zichtbare logotekst bevat.

Oplossing

Voeg een tekstalternatief toe aan de afbeelding waarin de volledige zichtbare tekst van het logo is opgenomen.

#3 - Logolink heeft geen duidelijk doel

De logo's in de footer onder de kop "Onderdeel van de Vereniging IPO" zijn links, maar hebben geen beschrijvende tekst voor hun bestemming. Hierdoor is het voor bezoekers die hulpsoftware zoals een schermlezer gebruiken lastig te begrijpen waar de links naartoe gaan.

User story

Ik lees de website met een schermlezer. Als ik op een klikbaar logo kom, dan hoor ik alleen 'link' zonder informatie over de bestemming, of de hele URL wordt voorgelezen. Ik verwacht dat de schermlezer duidelijk aankondigt waar de link naartoe gaat, bijvoorbeeld "IPO Interprovinciaal Overleg, van, voor en door provincies, ga naar de homepage".

Hoe te testen

Navigeer met een schermlezer naar de logolinks en controleer of elke link met een betekenisvolle toegankelijke naam wordt aangekondigd die de zichtbare logotekst bevat. Bevestig dat geen van de logolinks zonder label wordt aangeboden.

Oplossing

Geef elk logo een betekenisvol tekstalternatief. De alt-tekst moet de volledige zichtbare tekst van het logo bevatten, zodat schermlezergebruikers dezelfde informatie krijgen als ziende gebruikers. Als het logo in een link is geplaatst, neemt de link automatisch dezelfde toegankelijke naam over van de afbeelding.

#4 - Onduidelijke koptekst

Op deze pagina staat een kop "Ga direct naar" die de inhoud die erop volgt niet voldoende beschrijft. Koppen als "Ga direct naar", "Direct naar" of "Ga naar" zijn te generiek en geven geen betekenisvolle informatie over het doel van de inhoud. Schermlezergebruikers gebruiken koppen vaak om door de pagina te navigeren en de structuur te begrijpen. Koppen moeten daarom duidelijk en bondig zijn en het onderwerp van de volgende inhoud goed weergeven.

Dezelfde kop komt ook voor op de pagina's:

• https://werkenbij.ipo.nl/contact/
• https://werkenbij.ipo.nl/contactformulier/
• https://werkenbij.ipo.nl/vacatures/juridisch-adviseur-snl-16-20-uur-sept-nov-2026-11-weken/

User story

Ik lees de website met een schermlezer. Als ik via koppen door een pagina navigeer, dan geeft een label als "Ga direct naar" me geen bruikbare informatie. Ik verwacht dat elke kop duidelijk omschrijft welke inhoud erop volgt.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Vervang de vage kop door een meer beschrijvende kop die het onderwerp van de bijbehorende sectie duidelijk weergeeft.

#5 - Kop niet gemarkeerd als kop

Op deze pagina is de tekst "Ga direct naar" in de code niet gemarkeerd als kop. Wanneer tekst als kop fungeert maar de bijbehorende mark-up mist, verliest de tekst zijn semantische betekenis en is hij niet toegankelijk voor bezoekers die schermlezers of andere hulpsoftware gebruiken. Koppen zijn essentieel om door de pagina te navigeren en de structuur van de inhoud te begrijpen.

Hetzelfde probleem komt voor op de pagina:

• https://werkenbij.ipo.nl/contactformulier/

User story

Ik lees de website met een schermlezer. Als ik via koppen door een pagina navigeer, dan mis ik koppen die alleen visueel zijn opgemaakt. Ik verwacht dat alle zichtbare koppen ook door mijn schermlezer worden herkend als kop.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Markeer deze teksten met het juiste HTML-kopelement (h1 tot en met h6) zodat hun rol en hiërarchie in de inhoud terugkomen. De kwaliteit van de kop "Ga direct naar" is in de vorige bevinding besproken.

#6 - iframe heeft geen title-attribuut

Op deze pagina staan twee video's. Na het klikken op een video verschijnt een dialoogvenster met een iframe-element. Het iframe heeft geen title-attribuut. Iframes hebben een beschrijvende titel nodig, meestal via het title-attribuut. Deze titel moet het type inhoud van het iframe beschrijven, met een unieke en betekenisvolle omschrijving. Zo kan een blinde gebruiker bepalen of het de moeite waard is om de inhoud van het iframe te verkennen.

User story

Ik lees de website met een schermlezer. Als ik op een ingebed element kom, dan hoor ik geen omschrijving en weet ik niet wat het bevat. Ik verwacht dat mijn schermlezer een duidelijke naam en het type inhoud aankondigt, zodat ik kan beslissen of ik het wil verkennen.

Hoe te testen

Controleer in DevTools of navigeer met een schermlezer naar het iframe en verifieer dat het wordt aangekondigd met een betekenisvolle titel die duidelijk maakt wat het iframe bevat. Bevestig dat het iframe niet als naamloos of generiek wordt aangeboden en dat alle iframes op de pagina een unieke titel hebben.

Oplossing

Voeg het title-attribuut toe aan het iframe-element met een tekst die laat zien welk type inhoud het iframe bevat en waarover die inhoud gaat. Bijvoorbeeld: "Video Wat is het Interprovinciaal Overleg?".

#7 - Visuele informatie in video is niet toegankelijk

Op deze pagina staat onder de kop "Wat doen we?" een video. De video bevat tekst aan het einde (bijvoorbeeld rond 2:40).

Op deze pagina staat onder de kop "Hoe is het om hier te werken?" een video. Daarin staan de namen en functies van sprekers, evenals logo's en andere teksten (bijvoorbeeld rond 0:11, 0:34, 0:50, 1:13 en 1:20). Er is geen media-alternatief en geen audiodescriptie beschikbaar.

User story

Ik gebruik een schermlezer om de website te bezoeken. Als ik een video bekijk waarin logo's of tekst alleen visueel worden getoond, dan mis ik die informatie helemaal. Ik verwacht een audiodescriptie of een tekstuele beschrijving met daarin de visuele informatie.

Hoe te testen

Bepaal per video of er visuele informatie is die niet in de audio voorkomt (tekst op scherm, handelingen, demonstraties). Zo ja, controleer of er een audiodescriptie-track of een tekstalternatief is met alle gesproken én visuele informatie, vlak bij de video geplaatst.

Oplossing

Voorheen was een media-alternatief (een tekstuele weergave van alle informatie) een acceptabele oplossing, maar succescriterium 1.2.5 vereist nu een audiodescriptie van de visuele inhoud voor dit type video. Voeg daarom een audiodescriptie toe om de video toegankelijk te maken. In het bestaande audiospoor is voldoende ruimte voor de audiodescriptie.

#8 - Kop niet gemarkeerd als kop

Op deze pagina zijn de volgende teksten in de code niet gemarkeerd als kop: "Hoort bij" en "Op deze pagina". Als visuele koppen niet ook als kop zijn gemarkeerd, kunnen schermlezergebruikers de structuur van de pagina lastig begrijpen en doorlopen.

Hetzelfde probleem komt voor op de pagina's:

• https://werkenbij.ipo.nl/verhalen/etienne/
• https://werkenbij.ipo.nl/cookieverklaring/ — zie "Noodzakelijk (1)", "Statistieken (4)", "Marketing (2)" en "Niet geclassificeerd (1)"
• https://werkenbij.ipo.nl/vacatures/ — zie "Zoek je geen vaste baan maar een tijdelijke opdracht?" en andere koppen

User story

Ik lees de website met een schermlezer. Als ik via koppen door een pagina navigeer, dan mis ik koppen die alleen visueel zijn opgemaakt. Ik verwacht dat alle zichtbare koppen ook door mijn schermlezer worden herkend als kop.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Markeer deze teksten met het juiste HTML-kopelement (h1 tot en met h6), zodat hun rol en hiërarchie in de inhoud terugkomen.

#9 - Pdf-icoon heeft geen tekstalternatief

Op deze pagina staat een link met de tekst "Print" die een pdf-icoon bevat. Het icoon heeft geen tekstalternatief, waardoor schermlezergebruikers niet weten dat de link verwijst naar een "Print naar PDF"-functionaliteit. Deze informatie is belangrijk en moet op een toegankelijke manier worden aangeboden.

User story

Als ik mijn schermlezer gebruik, krijg ik geen informatie van iconen zonder tekst. Ik wil dat het pdf-icoon wordt voorgelezen, anders weet ik niet dat de link naar een pdf leidt of er een opent.

Hoe te testen

Inspecteer elke afbeelding, elk icoon en elke SVG in DevTools. Informatieve elementen hebben een tekstalternatief nodig dat de betekenis overbrengt; decoratieve img-elementen gebruiken alt="" en decoratieve svg-elementen aria-hidden="true". Verifieer met een schermlezer dat er geen ruis (bijvoorbeeld de bestandsnaam of "image") wordt voorgelezen.

Oplossing

Voeg verborgen tekst toe binnen de link (bijvoorbeeld "(PDF)") die visueel niet zichtbaar is, maar wel beschikbaar is voor schermlezers. Zo weten gebruikers dat de link naar een "Print naar PDF"-functionaliteit verwijst.

#10 - Onjuist gebruik p-element

Op deze pagina staat onder de kop "Cookieverklaring" een tekstblok ("Cookies zijn kleine tekstbestanden … toestemming alstublieft.") met meerdere alinea's dat onjuist als één enkel <p>-element is gemarkeerd. De visuele structuur van de inhoud moet ook in de HTML terugkomen.

User story

Ik lees de website met een schermlezer. Als ik door de tekst navigeer, dan worden alle alinea's als één lang blok voorgelezen. Ik verwacht dat ik elke visuele alinea apart kan bereiken.

Hoe te testen

Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's ook als aparte <p>-elementen zijn gemarkeerd. Gebruik een schermlezer en navigeer per alinea (bijvoorbeeld met de P-toets in NVDA). Verifieer dat elke visueel onderscheiden alinea ook als afzonderlijke alinea wordt herkend en los kan worden bereikt.

Oplossing

Plaats elke alinea in een afzonderlijk <p>-element. Het aantal alinea's dat wordt weergegeven, moet overeenkomen met het aantal <p>-elementen in de code.

#11 - strong-element gebruikt in plaats van kop-element

Op deze pagina zijn de volgende teksten koppen, maar de kop-elementen ontbreken. In plaats daarvan is het strong-element gebruikt om de teksten er als kop uit te laten zien. Zie "Redactie" en "Websitebureau en hosting". Het strong-element is bedoeld voor semantische nadruk, niet om koppen te maken. Het inzetten op de plek van kop-elementen (h1 tot en met h6) verstoort de structuur en maakt de inhoud ontoegankelijk voor hulpsoftware.

User story

Ik gebruik een schermlezer. Als ik door de koppen van een pagina navigeer, dan mis ik titels die alleen visueel vet zijn opgemaakt. Ik verwacht dat alle titels als echte koppen zijn gemarkeerd, zodat ik de paginastructuur kan volgen.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Verwijder de strong-elementen en markeer deze teksten met het juiste kop-element.

#12 - Logo's bij vacatures hebben geen tekstalternatief

De logo's die bij de vacatures worden getoond, hebben geen tekstalternatief. Het alt-attribuut is leeg. Deze logo's zijn informatieve afbeeldingen, ze laten zien welke organisatie kandidaten zoekt, en hebben dus een tekstalternatief nodig. De alt-tekst moet de volledige naam van de organisatie bevatten die in het logo staat. Zo begrijpen ook bezoekers die de afbeeldingen niet kunnen zien bij welke organisatie de vacature hoort.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, dan kan ik niet horen welk logo van welk bedrijf wordt getoond, omdat het geen tekstalternatief heeft. Ik verwacht dat het logo een tekstalternatief heeft met de naam van de organisatie.

Hoe te testen

Inspecteer het <img>-element met het logo op de vacaturepagina in DevTools. Informatieve afbeeldingen hebben een alt-attribuut nodig dat de betekenis overbrengt.

Oplossing

Voeg een beschrijvend tekstalternatief toe aan de logo-afbeeldingen, of zet de naam van de organisatie als tekst bij de vacature.

#13 - em-element gebruikt in plaats van kop-element

Op deze pagina is de tekst "Verder beschik jij over:" een kop, maar het kop-element ontbreekt. In plaats daarvan is het em-element gebruikt om de tekst er als kop uit te laten zien. Het em-element is bedoeld voor semantische nadruk, niet om koppen te maken. Het inzetten op de plek van kop-elementen (h1 tot en met h6) verstoort de structuur en maakt de koppen ontoegankelijk voor hulpsoftware.

Hetzelfde probleem komt voor op de pagina:

• https://werkenbij.ipo.nl/vacatures/coordinerend-inkoopadviseur/ — zie "Wat je concreet doet:" en "Verder heb/ben je:"

User story

Ik lees de website met een schermlezer. Als ik door de koppen van een pagina navigeer, dan mis ik titels die alleen visueel verschillen, bijvoorbeeld door cursieve opmaak. Ik verwacht dat alle titels als echte koppen zijn gemarkeerd, zodat ik de paginastructuur kan volgen.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Verwijder de em-elementen en markeer deze teksten met het juiste kop-element.

#14 - Foutmelding in formulier in het Engels

Op deze pagina staat een formulier. Het invoerveld "E-mailadres invoeren" toont een Engelse foutmelding: "Please supply a valid email address". De rest van de website is in het Nederlands. Foutmeldingen horen in dezelfde taal te staan als de hoofdinhoud van de website.

User story

Als bezoeker die een schermlezer gebruikt, wil ik dat foutmeldingen in de juiste taal worden gepresenteerd, zodat ze correct worden uitgesproken en makkelijk te begrijpen zijn.

Hoe te testen

Verstuur het formulier met lege velden en controleer of de foutmelding in dezelfde taal is als de rest van de pagina. Bevestig dat foutmeldingen niet in een andere taal worden weergegeven, tenzij de taalwisseling correct in de code is aangegeven.

Oplossing

Vertaal de foutmelding naar het Nederlands.