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?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. 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 50 criteria onder WCAG 2.1 A en AA. 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
FUMO
Evaluatiedatum
3 oktober 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 29 van de 50 verplichte criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de video’s goede ondertiteling hebben, 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 alternatieve teksten
Onjuist opgemaakte koppen
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
Website naam
werkenbijnod.nl
Scope van de website
Alle pagina's op https://werkenbijnod.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.
20Voldoende
21Onvoldoende
14Niet 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
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Hedwig
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Bovenaan de site staat een logo met de tekst ‘noordelijke omgevingsdiensten’. De alt-tekst luidt ‘Werken bij NOD”. Een screenreader gebruiker krijgt nu andere informatie dan een ziende gebruiker. Zorg dat de alt-tekst overeen komt met de zichtbare tekst. Eventueel kan nog ‘Logo’ worden toegevoegd aan de alt-tekst, of ‘Ga naar homepage’ om het linkdoel duidelijker te maken. Het logo in de footer heeft als alt-tekst ‘footer logo’. Ook dit is niet correct. Maak hier ‘(Logo) Noordelijke omgevingsdiensten’ van.
Homepage
De kaart heeft geen tekstalternatief. Voor een svg afbeelding kan dit worden gedaan door middel van het toevoegen van een ‘role=”img” en een title element. (Alleen een title element wordt niet goed ondersteund in alle screenreaders, in combinatie met een expliciete rol gaat dit wel goed). Dit geldt ook voor de kaart in de footer. Met de mouseover wordt in de afbeelding per provincie een naam getoond, met het toetsenbord niet. Zorg dat met het toetsenbord (op focus) deze tekst ook beschikbaar is.
Thema energie/duurzaamheid
De foto van Arnoud heeft een lege alt-tekst. Portretfoto’s zijn echter niet decoratief (ze hebben een functie) en moeten daarom altijd een beschrijving hebben van de persoon op de foto.
Hedwig
De afbeelding van de video heeft een lege alt-tekst. Deze afbeelding is echter niet decoratief, maar laat de geïnterviewde persoon zien. Geef deze daarom een duidelijke beschrijving.
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: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Hedwig
Uitkomst: Onvoldoende
Hedwig
In het begin en aan het eind van de video komen er teksten in beeld die niet worden uitgesproken. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video. Dit kan een volledig transcript zijn (eventueel ook met beschrijving van scènes als deze belangrijk zijn), of slechts een beschrijving van de niet tijdsgevoelige content, zoals de teksten die in beeld komen.
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Vacature adviseur bodem
Uitkomst: Onvoldoende
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Homepage
De koppenstructuur is niet geheel logisch opgebouwd. De h3-kop ‘Snel naar’ in de footer valt qua hiërarchie onder de h2-kop ‘Onze collega’s aan het woord’, maar is een zelfstandig onderdeel. Dit zou dan een h2-kop moeten zijn. Bovenaan de pagina zijn 2 teksten opgemaakt als kop die eigenlijk een paragraaf zijn, zoals ‘Wij zijn de FUMO, de Omgevingsdienst Groningen en de RUD Drenthe: De drie noordelijke omgevingsdiensten van Nederland.‘ Het kopje ‘Bouw met ons mee aan een schoon en veilig Noord-Nederland’ is niet als kop opgemaakt, maar met het strong-element. Dit element is bedoeld om één of enkele woorden uit te lichten in een paragraaf, niet om kopjes aan te geven. Screenreader gebruikers die navigeren via koppen missen deze kop nu. Maak hier bijvoorbeeld h2 van.
Vacatures
De koppenstructuur is niet geheel logisch opgebouwd. De h3-kopjes zoals ‘Direct de nieuwste vacatures ontvangen?‘ en de vacaturetitels vallen nu onder de h2-kop ‘Filter vacatures’ maar deze onderdelen vallen daar niet onder. Deze koppen moeten daarom een niveau hoger zijn. Screenreader gebruikers die navigeren via koppen kunnen deze nu gemakkelijk missen. De h3-kop ‘Senior jurist omgevingsrecht‘ valt nu onder de h2-kop ‘Young Professionalprogramma‘ maar qua layout lijkt deze hier niet onder te vallen. De kopjes van de veelgestelde vragen staan op hetzelfde niveau als de overkoepelende kop ‘Veelgestelde vragen en antwoorden’. Deze horen een niveau lager te staan. Binnen de vraag ‘Hoe verloopt de sollicitatieprocedure? staan de kopjes opgemaakt met het strong-element. Zie screenshot 1.
Vacature adviseur bodem
Het kopje van de geselecteerde stap is niet als kop opgemaakt maar met het strong-element.
Thema energie/duurzaamheid
De tekst ‘De opwarming van de aarde heeft grote gevolgen voor mens, natuur en milieu. ‘ is opgemaakt als h3-kop, maar dit hoort geen kop te zijn. Dit issue komt op meerdere pagina’s voor.
De paragraaf daarna is in het geheel opgemaakt met het strong-element. Als hier een aparte styling gewenst is, kan dat beter worden geregeld via CSS.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Onvoldoende
Functies
Uitkomst: Onvoldoende
Functies
Bij elke functie staat de functienaam (als paragraaf) boven een zin over de functie, die als h2-kop is opgemaakt. Daardoor missen screenreader gebruikers die via koppen navigeren deze tekst. Zorg dat tekst die onder een kop valt altijd in de broncode na de kop staat. Hier zou het logischer zijn om de functietitel als kop op te maken, en de zin eronder als paragraaf. Dan klopt het semantisch (SC 1.3.1) en ook qua betekenisvolle volgorde.
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het hoofdmenu kan niet goed gebruikt worden in landschapsmodus, doordat een deel van het menu buiten beeld valt en er niet naartoe gescrold kan worden. Mensen die motorisch beperkt zijn, kunnen niet altijd het device draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus. Zie screenshot 2.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
De invoervelden voor persoonlijke informatie zoals naam en adres 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 komt ook voor op de pagina Traineeships.
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
Contact
Uitkomst: Onvoldoende
Vergunningverlener
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.
De buttons in de cookiemelding (wit/oranje, 2.73:1).
Homepage
Groene kopjes zoals ‘Thema’s’ (2.97:1)
Oranje kopjes zoals ‘Adviseur geluid’ (2.73:1)
Footer tekst ‘website ontwikkeld door Convident’ (4.1:1).
Contact
De tekst ‘*verplichte velden’ (3.69:1).
De asterisk bij de verplichte velden (oranje, 2.7:1).
Vergunningverlener
De hoofdmenu-items t.o.v. van de foto eronder (1.8:1). Zie screenshot 3. Dit kan worden opgelost door bijvoorbeeld standaard een donker vlak onder de tekst te plaatsen voor op lichtere foto’s.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacature adviseur bodem
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Homepage
Op 200% ingezoomd lopen de tekstballonnen over elkaar heen. Zie screenshot 4.
Vacature adviseur bodem
Boven de 125% valt een deel van de sollicitatiestappen buiten beeld. Zie screenshot 5.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Boven de 200% valt een deel van het hoofdmenu buiten beeld, en er kan ook niet naar toe gescrold worden. (Met de muis kun je er niet bij, met het toetsenbord wel.)
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Contact
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.
Contact
De randen van de invoervelden (lichtgrijs/wit, 1.4:1).
De focusrand om de invoervelden t.o.v. de standaardrand (oranje/grijs, 2:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het submenu onder Functies kan 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
Vacatures
Uitkomst: Onvoldoende
Vacature adviseur bodem
Uitkomst: Onvoldoende
Hedwig
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In het hoofdmenu kun je onder Functies met de muis kiezen uit een submenu. Met het toetsenbord is dit niet mogelijk (op 100%, ingezoomd vanaf 150% kan het wel, maar is de focus niet zichtbaar).
Vacatures
De veelgestelde vragen kunnen niet geopend worden met het toetsenbord. Zie ook 4.1.2.
De filters in de popup kunnen niet gesloten worden met het toetsenbord. Zie ook 4.1.2.
Vacature adviseur bodem
Onderaan de pagina staan stappen die dienen als links om de paragraaf te openen. Deze links zijn niet te bedienen met het toetsenbord. Zie ook 4.1.2.
Hedwig
De video kan niet met het toetsenbord gestart worden. Zie ook 4.1.2.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Op deze website wordt op verschillende pagina’s 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
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: Niet van toepassing
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
2.4.2: Paginatitel
Hele sample
Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Voldoende
Vacatures
Uitkomst: Onvoldoende
Functies
Uitkomst: Voldoende
Hele sample
Bevindingen:
Ingezoomd vanaf 150% komt het hoofdmenu achter een knop te staan. Wanneer deze ingeklapt is, gaat de focus nog wel naar de menu-onderdelen. Zorg dat wanneer onderdelen visueel verborgen zijn, deze ook geen focus kunnen ontvangen.
Homepage
In de slider met verhalen komt de focus tussen de slides op onzichtbare onderdelen. Zorg dat wanneer onderdelen visueel verborgen zijn, deze ook geen focus kunnen ontvangen.
Contact
Opmerking: wanneer er fouten in het formulier zijn gevonden na verzenden, komt de focus op het eerstvolgende veld dat gecorrigeerd moet worden. Dit is goed. Alleen bij het laatste verplichte veld, de checkbox, gebeurt dit niet en kom je helemaal bovenaan de pagina te staan. De foutmelding is dan ook niet zichtbaar. Het zou beter zijn als hier ook de focus op wordt gezet als alleen dit veld nog moet worden ingevuld. NB: de link naar de privacyverklaring werkt niet (gaat naar een andere omgeving).
Vacatures
Wanneer je bent ingezoomd boven de 150% komen de filters achter een knop te staan, welke een popup window opent. De focus gaat na de onderdelen in deze popup door op de pagina eronder, die niet zichtbaar is. Zorg dat de focus hier pas op kan komen wanneer de popup weer gesloten is. Wanneer de popup gesloten wordt door ‘Filters toepassen’ te selecteren en er zijn geen resultaten, dan komt de focus in de footer te staan. Dit is verwarrend, want hierdoor zie je niet de resultaten. Hiervoor moet je eerst weer terug naar boven navigeren. Zorg dat de focus terug komt op de filter knop of daar vlakbij.
Opmerking: er is geen manier om het blok met filters gemakkelijk over te slaan. Wanneer je bijvoorbeeld Friesland selecteert, en er komt een lijst met resultaten boven, moet je met het toetsenbord eerst nog alle checkboxes langs voor je bij de vacatures komt. (Naar de main landmark springen werkt hier niet, want de filters zitten daar ook in). Dit kan verbeterd worden door een skiplink toe te voegen net voor de filters om de filters over te slaan en direct naar de resultaten te gaan.
Functies
Opmerking: bij elke functie staat 3 keer dezelfde link: achter de zin die als h2 is opgemaakt, de ‘meer informatie…’-link en de foto. Hierdoor hebben toetsenbordgebruikers bij elke functie 3 ‘tabstops’. Het is gebruiksvriendelijker om 1 link te hebben, achter de ‘meer informatie…’ of als blok als geheel.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Verhalen
Uitkomst: Onvoldoende
Homepage
De link om naar beneden te springen (pijl) heeft geen tekst, waardoor het doel niet duidelijk is. Voeg een (verborgen) tekst toe binnen het link element of geef de link een aria-label attribuut.
Er zijn nog meer links op de pagina gevonden zonder tekst:
De links van de gebieden in de kaart.
De links naar de vacatures onder ‘Een selectie uit onze openstaande vacatures‘.
De links naar de social media kanalen.
Contact
De link naar de homepage in de breadcrumb heeft geen tekst.
Vacatures
Er zijn meerdere links op de pagina met de tekst ‘Bekijk vacature’. Hierdoor is het doel niet duidelijk. Dit kan worden opgelost met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de h3-kop ervoor.
Thema energie/duurzaamheid
Er staat een link op de pagina met enkel de tekst ‘Lees meer’. Hierdoor is het doel niet duidelijk. Dit kan worden opgelost met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de h2-kop ervoor. Dit komt op meerdere plekken voor, bijvoorbeeld bij het blok over het Young Professionalprogramma op de pagina Vacatures.
Verhalen
De links naar de verhalen onder ‘Collega’s aan het woord’ hebben geen tekst. Dit kan bijvoorbeeld worden opgelost door een aria-label attribuut toe te voegen of een aria-labelledby verwijzing naar de h3-kop.
Er zijn meerdere links op de pagina met de tekst ‘Lees verder’. 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 de h3-kop ervoor. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
Omdat elk verhaal nu 2 keer dezelfde link heeft, kan dit nog beter worden opgelost door hier 1 link (en dus 1 tabstop voor toetsenbordgebruikers) van te maken, dus alleen de’ lees verder’-link of alleen als geheel linkblok.
De link naar de volgende pagina heeft geen tekst.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Behalve het menu 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 ingezoomd of via een screenreader te gebruiken. Biedt naast het menu nog een tweede optie aan, bijvoorbeeld een algemene zoekfunctie.
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De knoppen om het menu te openen en sluiten heten beide ‘open mobiel menu’. Beter is het om deze knop enkel ‘Menu’ te noemen, omdat de status al wordt aangegeven via het aria-expanded attribuut. Ook is ‘mobiel’ niet van toepassing wanneer je bent ingezoomd op de desktop.
Homepage
De knoppen in de slider hebben als naam ‘previous’ en ‘next’. Dit is mogelijk niet voor alle gebruikers duidelijk. Geef de knoppen een Nederlandse naam.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De focus op onderstaande onderdelen is niet zichtbaar. Hierdoor weet een ziende toetsenbordgebruiker niet wanneer hij/zij deze kan activeren.
De knoppen om het menu te openen wanneer je bent ingezoomd.
De knop om het submenu onder Functies te openen.
Homepage
De ‘Lees verder’ links in de verhalen (slider).
Contact
De knoppen om een bestand toe te voegen en om het formulier te verzenden.
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: Onvoldoende
Hele sample
Bevindingen:
De link achter het logo in de header heeft een andere toegankelijke naam (‘Werken bij NOD’) dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat.
De veelgestelde vragen zijn h2-koppen die met de muis als link dienen. Ze hebben echter geen rol waaruit door hulpsoftware kan worden opgemaakt dat het interactieve elementen zijn. Voeg hier bijvoorbeeld button elementen aan toe (binnen de h2), met een aria-expanded attribuut om aan te geven of de vragen geopend of gesloten zijn.
Wanneer je bent ingezoomd boven de 150% komen de filters achter een knop te staan, welke een popup window opent. Deze heeft een kruisje om dit weer te sluiten. Dit is een span element zonder goede rol. Maak hier een button element van met duidelijke naam.
Vacature adviseur bodem
Onderaan de pagina staan stappen die dienen als links om de paragraaf te openen. Dit zijn echter enkel koppen, geen links of buttons. Het is daardoor niet duidelijk dat dit interactieve elementen zijn. Maak hier bij voorkeur button elementen van met een aria-expanded attribuut om aan te geven dat de paragraaf geopend of gesloten is.
Hedwig
De play-knop van de video is een div-element zonder goede rol. Maak hier een button element van met duidelijke naam. Dit komt op meerdere pagina’s voor.
4.1.3: Statusberichten
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Contact
Als er foutmeldingen zijn gevonden na het verzenden, verschijnt bovenaan een algemene foutmelding. Deze foutmelding heeft de role van status, waardoor deze niet belangrijk genoeg is om meteen voor te lezen door de screenreader. De focus gaat er niet heen, en daardoor missen screenreader gebruikers deze tekst nu. Gebruik hiervoor een andere live region, zoals een alert. De meldingen bij de velden hebben wel een alert, maar geven dus geen fout aan, alleen algemene instructies zoals ‘dit veld is verplicht’. Dit kan verbeterd worden door de alert aan het veld te verbinden via een aria-describedby-attribuut, zodat dit label bij de melding wordt voorgelezen.
Vacatures
Wanneer er bij het filteren geen resultaten zijn, verschijnt er een melding in beeld. Dit is een statusbericht die geen focus ontvangt en niet wordt voorgelezen door screenreaders. Maak hier een live region van, zodat een screenreader gebruiker ook meteen weet dat er geen resultaten zijn voor deze keuze.
