Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
De Web Content Accessibility Guidelines (WCAG) versie 2.1 AA is het verplichte niveau onder de Europese standaard EN 301 549 en de European Accessibility Act. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle voor dit onderzoek relevante WCAG criteria. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Almere
Evaluatiedatum
19 december 2025
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 35 van de 55 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de website goed werkt op mobiel, dat er geen afbeeldingen van tekst worden gebruikt en dat de pagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
Te laag contrast van niet-tekstuele content
Scope van de evaluatie
Website naam
werkenbijalmere.nl
Scope van de website
Alle pagina's op https://www.werkenbijalmere.nl/.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
23Voldoende
21Onvoldoende
11Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Vacature
Uitkomst: Onvoldoende
Afdelingen
Uitkomst: Onvoldoende
Afdeling stadsarchief
Uitkomst: Onvoldoende
Arbeidsvoorwaarden
Uitkomst: Onvoldoende
Vacature nieuwsbrief
Uitkomst: Onvoldoende
Random pagina - Diversiteit en inclusie
Uitkomst: Onvoldoende
Homepage
Onder de slider staat een afbeelding met informatie over cijfers. De alt-tekst luidt echter alleen ‘Almere, pioniersgemeente’. Hierdoor krijgt een screenreadergebruiker niet dezelfde informatie als een ziende gebruiker. Geef een alternatieve tekst van de informatie in de afbeelding.
Daaronder staat een foto van zwanen. De alt-tekst luidt ‘Werken voor Almere’. Een alt-tekst moet de afbeelding beschrijven, of worden leeg gelaten wanneer de afbeelding decoratief is.
Vacatures
De alt-teksten bij de vacatures herhalen de titel van de vacature. Dit is geen beschrijving van de afbeelding en zorgt voor veel herhalende teksten voor screenreadergebruikers. Geef een beschrijving van wat er op de afbeelding staat of laat de alt-teksten leeg wanneer deze afbeeldingen decoratief zijn.
Vacature
De foto in de header heeft een alt-tekst die de paginatitel herhaalt. Geef een correcte beschrijving van wat er op de afbeelding staat of laat de alt-tekst leeg wanneer deze afbeelding decoratief is. Dit komt op meerdere pagina’s voor.
Onder ‘Vragen over deze vacature?’ staan 2 afbeeldingen zonder alt-attribuut. Voeg een alt-tekst toe met de naam van de geportretteerde. Dit komt bij meerdere vacatures voor.
Afdelingen
Bovenaan de pagina staat een organogram. Deze afbeelding heeft geen alternatieve tekst voor de informatie in de afbeelding. De alt-tekst luidt nu enkel ‘Afdelingen’. Voeg een tekst toe onder de afbeelding met daarin alle afdelingen, of voeg een link toe onder de afbeelding naar een toegankelijk tekstalternatief. Geef in de alt-tekst een korte beschrijving van de afbeelding en verwijzing naar het volledige alternatief.
Afdeling stadsarchief
De alt-teksten bij de afbeeldingen in de content van deze pagina herhalen de koppen. Deze foto’s geven content weer en moeten daarom een goede beschrijving hebben van wat er wordt afgebeeld. Zie screenshot 1. Dit komt op veel pagina’s voor.
Arbeidsvoorwaarden
Bovenaan de pagina staat een afbeelding met informatie over voorwaarden. De alt-tekst luidt echter alleen ‘Arbeidsvoorwaarden’. Hierdoor krijgt een screenreadergebruiker niet dezelfde informatie als een ziende gebruiker. Geef een alternatieve tekst van de informatie in de afbeelding.
Vacature nieuwsbrief
Het logo heeft geen alt-attribuut. Voeg een alt-tekst toe met de zichtbare informatie op de afbeelding.
Random pagina - Diversiteit en inclusie
Naast het kopje ‘De inclusieve stad, Almere’ staat een afbeelding met 4 uitgangspunten. Er wordt ook naar verwezen met de tekst ‘Deze vier uitgangspunten in de afbeelding hiernaast, zijn de basis voor Almere, als dé inclusieve stad.’ De alt-tekst luidt echter alleen ‘De inclusieve stad, Almere’. Hierdoor krijgt een screenreadergebruiker niet dezelfde informatie als een ziende gebruiker. Geef een alternatieve tekst van de informatie in de afbeelding.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacature
Uitkomst: Onvoldoende
Homepage
Op deze pagina staat een video ‘Almere, Work of art’. Deze video mist een goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal. Zie screenshot 2.
Vacature
Op deze pagina staat een video ‘Werken bij Almere’. Deze video mist een goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Vacature
Uitkomst: Onvoldoende
Vacature
Op deze pagina staat een video ‘Werken bij Almere’. Er komen scènes in beeld die niet worden uitgesproken, zoals mensen aan de vergadertafel met plattegronden, medewerkers in de wegenbouw, overviews vanuit de lucht van nieuwe woonwijken. Mensen die deze beelden niet kunnen zien, krijgen deze informatie niet mee, alleen een hele algemene beschrijving. Behalve audiodescriptie kan deze informatie (onder dit niveau A criterium) ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Vacature
Uitkomst: Onvoldoende
Vacature
Op deze pagina staat een video ‘Werken bij Almere’. Er komen scènes in beeld die niet worden uitgesproken, zoals mensen aan de vergadertafel met plattegronden, medewerkers in de wegenbouw, overviews vanuit de lucht van nieuwe woonwijken. Mensen die deze beelden niet kunnen zien, krijgen deze informatie niet mee, alleen een hele algemene beschrijving. Onder dit niveau AA kan niet worden volstaan met een alternatief, maar is audiodescriptie vereist.
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Vacature
Uitkomst: Onvoldoende
Solliciteer direct
Uitkomst: Onvoldoende
Afdeling stadsarchief
Uitkomst: Onvoldoende
Stages
Uitkomst: Onvoldoende
Profiel medewerker
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De actieve pagina in het menu wordt aangegeven met een andere styling. In de tekst wordt dit echter niet aangegeven. Hulpsoftware kan niet opmaken uit de code welke pagina actief is. Voeg hiervoor bijvoorbeeld aria-current=“page” toe aan het actieve menu-item.
Homepage
De pagina heeft geen logische koppenstructuur. De pagina begint met een reeks h4-koppen, welke quotes bevatten in de slider. Achter deze koppen volgt geen aparte content, dus deze teksten kunnen beter geen kopopmaak krijgen. De h1-kop is ‘Waar ligt jouw uitdaging?’, waardoor dit de belangrijkste kop op de pagina is. Het zou logischer zijn als er een h1-kop is met bijvoorbeeld ‘Homepagina Werken bij Almere’ (eventueel verborgen met CSS). Alle categorieën hebben een h4-kop. Hier worden 2 kopniveaus overgeslagen. Het overslaan van niveaus wordt afgeraden. Screenreadergebruikers navigeren vaak via koppen als een inhoudsopgave. Zo kunnen ze het idee krijgen dat ze content missen. Zie screenshot 3.
Vacatures
De invoervelden voor de filters (de eerste 3) hebben geen label. Een placeholder (bij het zoeken) is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg bij alle velden een label-element of aria-label toe met beschrijving van het veld. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
Vacature
De pagina heeft geen logische koppenstructuur. De (turkooise) koppen binnen de content zijn niet als kop opgemaakt, maar door middel van het strong-element. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier kopelementen van zoals h2 of h3. De tekst met de sluitingsdatum is nu visueel ook als kop opgemaakt, maar er volgt geen content achter. Deze tekst moet dus niet als kop worden opgemaakt. Onder ‘Vragen over deze vacature?’ staan 2 contactpersonen. Zowel hun naam als functie zijn met een kop opgemaakt. De functie kan beter geen kopopmaak bevatten, want er volgt verder geen beschrijving van deze functie. Ook worden er veel niveaus overgeslagen. Zie screenshot 4. Deze bevindingen komen bij meerdere vacaturepagina’s voor.
Solliciteer direct
De invoervelden (alle behalve de checkbox) hebben geen label voor hulpsoftware. Er staat een label voor de velden, maar deze is niet gekoppeld via het id. Zorg voor een correcte koppeling. Dit geldt ook voor de pagina Open sollicitatie.
Boven de h1-kop van de vacature staat een h4-kop met ‘Je solliciteert op de volgende functie:’. Deze tekst hoort geen kopopmaak te hebben. Dit komt ook voor op de pagina Open sollicitatie (hier is het een h6-kop).
Afdeling stadsarchief
De pagina heeft geen logische koppenstructuur. De h3-koppen in de footer vallen nu onder de laatste h2-kop met ‘Ssstttt.....niet verder vertellen’. Hierdoor kan een screenreadergebruiker de kopjes in de footer missen. Zet deze een niveau hoger (h2) of voeg een (eventueel met CSS verborgen) h2-kopje boven de footer toe. Dit komt op meerdere pagina’s voor.
Stages
De tussenkopjes zoals ‘Waarom stage lopen bij gemeente Almere?’ zijn niet als kop opgemaakt, maar door middel van het b-element. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier kopelementen van zoals h2 of h3, afhankelijk van de context. Let op een correcte volgorde van de niveaus. Dit komt op veel pagina’s voor (via het strong-element of het b-element).
Profiel medewerker
De pagina heeft geen logische koppenstructuur. De pagina start met een h2 met een quote. Deze tekst hoort niet als kop te worden opgemaakt. Hier kan beter het blockquote-element voor worden gebruikt. Daarna volgt een h3 met de naam van de medewerker. Aangezien deze pagina hierover gaat, kan dit beter als h1 worden opgemaakt. Vervolgens zijn er tussenkopjes die met het strong-element staan opgemaakt. Deze kunnen beter als h2-kop (na de h1) worden opgemaakt.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Solliciteer direct
Uitkomst: Onvoldoende
Solliciteer direct
De invoervelden voor persoonlijke informatie zoals naam en e-mailadres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes. Dit geldt ook voor de pagina Open sollicitatie en Vacature nieuwsbrief.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Voldoende
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Vacature nieuwsbrief
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Het actieve menu-item (turkoois, 3.1:1). DIt geldt ook voor het actieve item in het kruimelpad.
Homepage
De link ‘Bekijk alle vacatures’ (roze/wit, 2.56:1), zowel als losse ‘knop’ als onder de vacatureteksten.
De link ‘Onze vakgebieden’ (turkoois/wit, 3.1:1). Deze combinatie komt op veel plekken in de site voor, bijvoorbeeld ook bij tussenkopjes zoals op de pagina Stages, bij quotes en als asterisk voor verplichte velden.
De kop ‘Waar ligt jouw uitdaging?’ (turkoois/turkoois, 2.6:1).
De koppen in de footer (turkoois/turkoois, 2.3:1).
Vacatures
De roze zoekknop (roze/wit, 2.56:1). Deze combinatie komt op veel plekken in de site voor.
De links met ‘Bekijk deze vacature’ (roze/grijs, 2.38:1).
Vacature nieuwsbrief
De gehele witte tekst op blauwe achtergrond (2.54:1)
De teksten van de foutmeldingen (rood, 1.36:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Voldoende
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Onze collega’s
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
De focus op de rode knoppen, zoals ‘Bekijk alle vacatures’, heeft te weinig contrast. Het verschil tussen standaard rood en rood op focus is 1.6:1 en de lichtblauwe rand heeft een contrast van 1.4:1 met de achtergrond. Zorg voor een duidelijke focusstijl met tenminste een contrast van 3:1. Zie screenshot 5.
Onze collega’s
De focusstijl op de links naar profielen heeft een contrast van 1.2:1 (lichtgrijze rand). Zie screenshot 6.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.
Vacatures
Binnen de blokken met vacatures valt een deel van de tekst weg. Zie screenshot 7. In het zoeken invoerveld valt de placeholder tekst ook deels weg. Deze bevindingen zijn op 100-125% zoomniveau.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De submenu’s kunnen alleen worden gesloten door de muis te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content uitklapt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In het hoofdmenu hebben sommige links submenu’s, zoals Afdelingen. Deze submenu’s zijn met de muis te gebruiken, maar niet met het toetsenbord. Wanneer je bent ingezoomd komt er wel een zichtbare focus op het pijltje te staan, maar er opent na activatie geen submenu.
Homepage
In de slider staan 3 knoppen die je met de muis kunt selecteren zodat de slides wisselen. Met het toetsenbord zijn deze knoppen niet te bedienen. Je gaat wel door alle slides heen, maar de layout verspringt steeds en het is minder duidelijk waar je bent. Zorg dat de knoppen ook op de ‘normale’ manier met het toetsenbord zijn te bedienen.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb Dit komt op meerdere pagina’s met video’s voor.
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De carrousel bovenaan de pagina toont afwisselend verschillende afbeeldingen met verschillende teksten. Deze beweging is niet te stoppen of te pauzeren. Dit is hinderlijk voor mensen die bijvoorbeeld concentratieproblemen hebben of ADHD. De beweging leidt erg af van de tekst. Zorg ervoor dat er een mechanisme komt om de carrousel stop te zetten, bijvoorbeeld een pauzeknop.
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking: Er zijn koppen en landmarks om blokken met links over te kunnen slaan. Voor veel toetsenbordgebruikers is een skiplink echter gemakkelijker om direct bij de hoofdcontent te kunnen komen. Navigatie via koppen en landmarks is namelijk alleen beschikbaar voor screenreadergebruikers. Het wordt daarom aangeraden een skiplink toe te voegen als eerste link op elke pagina.
2.4.2: Paginatitel
Hele sample
Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Stages
Uitkomst: Onvoldoende
Random pagina - vacature planoloog
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In de footer staan links naar sociale mediakanalen. Deze links hebben alleen een naam in het title-attribuut. Dit attribuut wordt slecht ondersteund door hulpsoftware. Beter is het om een tekst binnen de link te plaatsen of een aria-label-attribuut.
Stages
Er zijn meerdere links op de pagina met de tekst ‘Lees meer’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina, zoals hier de h2-kop die ervoor staat. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
Random pagina - vacature planoloog
Onder ‘Vragen over deze vacature?’ staan 2 afbeeldingen. Bij de tweede afbeelding staat een link naar een LinkedIn-profiel. Deze link heeft geen tekst. Voeg hier een (met CSS verborgen) linktekst toe of een aria-label, zodat het doel van de link ook duidelijk is voor bezoekers die het LinkedIn-icoon niet kunnen zien.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Behalve het hoofdmenu zijn er geen andere manieren om webpagina’s te vinden. Een deel van de bezoekers kan gemakkelijker navigeren via een zoekfunctie of een sitemap dan via een menu, bijvoorbeeld omdat het lastig is deze met een toetsenbord te gebruiken. Biedt naast het hoofdmenu nog een tweede optie aan, bijvoorbeeld een algemene zoekfunctie.
2.4.6: Koppen en labels
Hele sample
Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Solliciteer direct
Uitkomst: Onvoldoende
Vacature nieuwsbrief
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer je inzoomt komt het menu achter een knop te staan met 3 streepjes. Deze knop heeft geen zichtbare focus. Zorg voor een duidelijke focusstijl, zoals een donkere rand om de knop.
Vacatures
De focus op de filtervelden met meerdere opties is niet zichtbaar (uren, salaris en vakgebied). In het zoekveld is alleen de cursor zichtbaar. Zorg voor een duidelijke focusstijl, zoals een donkere rand om het veld.
De focus op de checkboxes onder Vakgebied is ook niet zichtbaar.
Solliciteer direct
De focus op de velden om een bijlage bij te voegen is niet zichtbaar. Binnen de reCaptcha banner komt de focus op een niet zichtbare link (‘Onderneem actie’). Dit geldt ook voor de pagina Open sollicitatie.
Vacature nieuwsbrief
De focus op de knop ‘Abonneren’ is niet zichtbaar.
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Voldoende
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample
Uitkomst: Voldoende
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
2.5.7: Dragging Movements
Hele sample
Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De knoppen in de slider staan te dicht bij elkaar waardoor het ‘aanwijsgebied’ (grootte van het doel) te klein is. Maak het doel minimaal 24px, gerekend vanaf het middenpunt van de knop (knop inclusief tussenruimte). Bezoekers met een motorische beperking kunnen moeite hebben om links en buttons te selecteren die te klein zijn of te dicht op elkaar staan.
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De webpagina’s hebben geen taal gespecificeerd. Screenreaders lezen hierdoor de content mogelijk niet in de juiste taal voor. Stel de juiste taal in op het html element.
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium
Uitkomst
Bevindingen
3.2.1: Bij focus
Hele sample
Uitkomst: Voldoende
3.2.2: Bij input
Hele sample
Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample
Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample
Uitkomst: Voldoende
3.2.6: Consistent Help
Hele sample
Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Voldoende
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Solliciteer direct
Uitkomst: Onvoldoende
Solliciteer direct
De betekenis van de asterisk (*) voor verplichte velden wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk, wat onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst. Ook kan een ‘required’ of ‘aria-required’ attribuut behulpzaam zijn voor gebruikers van hulpsoftware, aangezien de asterisk niet door alle screenreaders goed wordt voorgelezen.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Vacature nieuwsbrief
Uitkomst: Onvoldoende
Vacature nieuwsbrief
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan moeten deze suggesties aan de gebruiker worden geleverd. Bij het e-mailadres wordt een bepaald format geëist, maar deze wordt niet als suggestie gegeven. Voeg een suggestie toe, bijvoorbeeld: ‘het emailadres moet in deze vorm worden ingevoerd: ‘naam@domein.com’.
Wanneer je inzoomt komt het hoofdmenu achter een knop te staan met 3 streepjes. Deze knop heeft geen toegankelijke naam. Ook heeft de knop geen status wanneer deze nog niet is geopend. Er komt nu een ‘aria-expanded’-attribuut te staan na het activeren, maar die moet er ook al staan wanneer de pagina geladen wordt. Achter links met een submenu staat een link met een pijl icoon. Deze links hebben geen toegankelijke naam.
Op 100% zoom werken de submenu’s nu niet met het toetsenbord, maar let erop dat wanneer dit aangepast wordt, de status ook goed wordt weergegeven via het 'aria-expanded'-attribuut.
Homepage
Bovenaan de pagina staat een slider. Deze bevat button elementen zonder naam. Voeg bijvoorbeeld een aria-label toe met beschrijving. Ook wordt niet aangegeven welke actief is. Dit kan bijvoorbeeld worden gedaan met behulp van het ‘aria-pressed’-attribuut.
De iframe met de video heeft geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title-attribuut met beschrijving toe of een aria-label. Op de pagina met de vacature heeft de iframe als title ‘ YouTube video player’. Dit geeft geen beschrijving van de specifieke video die hier wordt getoond.
Vacatures
De invoervelden voor de filters (de eerste 3) hebben geen toegankelijke naam. Voeg bij voorkeur een label element toe en koppel deze aan het invoerveld door middel van een id.
Het vierde filter (vakgebied) bevat een button die een popup opent. Dit wordt niet doorgegeven aan hulpsoftware. Dit kan worden gedaan via de attributen ‘aria-haspopup’ en de status ‘aria-expanded’. Zie ook https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup. Let er hierbij op dat de popup container de juiste rol krijgt. Dat is nu enkel een ul-element.
Solliciteer direct
De invoervelden (alle behalve de checkboxes) hebben geen toegankelijke naam. Er staat een label voor de velden, maar deze is niet gekoppeld via het id. Zorg voor een correcte koppeling.
