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
Roadbear Studios
Evaluatiedatum
29 april 2025
Managementsamenvatting
Dit rapport bevat het deelonderzoek techniek. In combinatie met een deelonderzoek content vormt dit een volledig toegankelijkheidsonderzoek van de website.
Uit dit onderzoek blijkt dat wordt voldaan aan 24 van de 43 techniek-specifieke 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 niet enkel kleur wordt gebruikt om betekenis over te brengen 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
Links zonder naam
Niet alle functionaliteit werkt met het toetsenbord
Niet alle interactieve onderdelen hebben een zichtbare focus
Scope van de evaluatie
Website naam
roadbearstudios.com
Scope van de website
Alle pagina's op https://codebear4.roadbear.website/ (testomgeving).
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Dit is een technisch onderzoek met de focus op algemene onderdelen en functionaliteit.
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 43 van 50 WCAG 2.1 AA
Success Criteria.
18Voldoende
19Onvoldoende
6Niet van toepassing
7Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Branche onderwijs
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo in de header is een svg zonder alternatieve tekst. 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).
Let op dat de alt-teksten correct zijn ingevuld. De alt-tekst over de vlag op de pagina Branches wordt nu bijvoorbeeld dubbel gebruikt. Er staan soms logo’s van tools/programma’s in de content met een lege alt-tekst. Dit is wel content. Veel afbeeldingen hebben ook title-attributen die beter weggelaten kunnen worden, bijvoorbeeld ‘fotoshoot-cch-dijk-walking’. Zie screenshot 3 en screenshot 4.
Branche onderwijs
Zorg dat afbeeldingen altijd een alt-attribuut hebben. Deze kan leeg zijn bij decoratieve afbeeldingen en gevuld bij afbeeldingen van content, maar het moet in ieder geval aanwezig zijn om te voorkomen dat de bestandsnaam wordt voorgelezen door screenreaders. Op deze pagina staat een afbeelding zonder alt-attribuut (screenshot van de Wegwijzer). Dit geldt ook voor de overige afbeeldingen binnen deze slider. Doordat er een link omheen staat, heeft de link nu ook geen naam.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet getoetst
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Niet getoetst
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Niet getoetst
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet getoetst
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet getoetst
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Branches
Uitkomst: Voldoende
Branche onderwijs
Uitkomst: Onvoldoende
Project kunstkwartier
Uitkomst: Onvoldoende
Project branding
Uitkomst: Voldoende
Plugin kaart/lijst
Uitkomst: Onvoldoende
Blog
Uitkomst: Onvoldoende
Blog artikel
Uitkomst: Onvoldoende
Homepage
Naast ‘Maak het waar’ staan 3 koppen waar geen content achter volgt: ‘strategie’, ‘branding’ en ‘techniek’. Voor screenreadergebruikers die navigeren via koppen (als inhoudsopgave van de pagina) kan dit verwarrend zijn. Het is beter om hier link-elementen van te maken zonder kop-opmaak. Visueel kan het wel hetzelfde blijven.
Contact
De invoervelden hebben geen programmatisch label. Er staat een placeholder-tekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element of aria-label toe met bijvoorbeeld ‘naam’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan. Dit komt op meerdere pagina’s voor, bijvoorbeeld bij het formulier midden op de pagina Branche onderwijs.
Branches
Opmerking: De koppenstructuur is niet logisch. De pagina begint met een h2 en er staat een h1 onderaan de pagina (‘Klaar voor groei’). Geef bij voorkeur de pagina als eerste een h1-kop met het onderwerp van de pagina. Bij verzamelpagina’s kan dit ook een visueel verborgen kop zijn zoals ‘Branches’. Koppen worden gevuld door de redactie en dat ligt vaak bij de klant. Het is wel aan te raden dit op de eigen website en in voorbeeldtemplates goed in te richten zodat ze een goed startpunt hebben.
Branche onderwijs
Op deze pagina zijn quotes opgemaakt als h3-koppen. Dit is verwarrend, want achter deze koppen volgt geen content. Ook kunnen deze koppen behoorlijk lang worden. Het is beter om hiervoor het blockquote-element te gebruiken. Zie screenshot 5.
Bij ‘Onze projecten in het onderwijs’ is het kopniveau niet correct. De overkoepelende titel is een h2-kop, maar de projecten die eronder vallen hebben ook een h2-kop. Dit moet h3-niveau zijn. Dit komt ook voor op de pagina Expertise Branding onder ‘Branding projecten’.
Project kunstkwartier
Tussenkopjes worden in deze pagina opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Binnen de tekst bovenaan kun je hier h3-kopjes van maken. Bij de Projectdetails kun je een dl-list gebruiken om structuur met paren aan te geven.
Project branding
Opmerking: Let ook op deze pagina op de kopniveaus. Het springt van h1 naar h4 en van h2 naar h5. Zie screenshot 6.
Plugin kaart/lijst
De invoervelden onder ‘Activiteit’ zijn niet gegroepeerd en hebben geen groepslabel. Dit kan worden gedaan via een fieldset en legend of via role="group" en een “aria-labelledby”-attribuut. Met een groepslabel worden bij losse invoervelden ook het groepslabel voorgelezen, zodat de relatie ook duidelijk is wanneer je deze niet kunt zien.
Blog
Het invoerveld om te zoeken heeft geen label. Er staat een label element met id-verwijzing in de code, maar deze is verborgen voor hulpsoftware via display:none. Gebruik een andere CSS-techniek om deze tekst visueel te verbergen.
De koppenstructuur op deze pagina is niet correct. De h4-koppen in de sidebar, zoals ‘Zoek in onze website’, vallen nu onder het artikel met de h2-kop ‘Het verschil tussen 0 en uitverkocht’. Screenreadergebruikers die navigeren via koppen kunnen deze h4-koppen nu gemakkelijk missen, als ze niet naar dat artikel gaan. Deze koppen kunnen beter op h2-niveau worden gezet.
Blog artikel
De invoervelden bij het reactieformulier hebben geen labels. Er staan label elementen met id-verwijzing in de code, maar deze zijn verborgen voor hulpsoftware via display:none.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Niet getoetst
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
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 voor zowel contactformulieren als het nieuwsbriefformulier onderaan elke pagina.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking: De links in de tekst (in artikelen en in de footer) worden alleen met een verschil in kleur aangegeven. Omdat het contrast tussen de links en de omliggende tekst meer dan 3:1 is (namelijk 3.4:1), wordt dit hier toegestaan. Echter, slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijk te maken.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Blog artikel
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.
In de footer staan rode links op een rood/oranje achtergrond. Dit heeft een contrast van 2.9:1 en 2.4:1.
Contact
De teksten van de labels in de invoervelden (zwart op donkergrijs, 2.5:1). Zie screenshot 1. (Dit zijn in feite placeholders, maar deze fungeren visueel als labels omdat er geen labels zijn.) Deze bevindingen komen op meerdere pagina’s voor waar een formulier wordt gebruikt.
Blog artikel
De teksten van de labels in de invoervelden (grijs op lichtgrijs, 2.5:1). Zie screenshot 9. (Dit zijn in feite placeholders, maar deze fungeren visueel als labels omdat er geen labels zijn.)
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het inzoomen op mobiele apparaten wordt belemmerd via het meta element. Dit staat er nu in de head:
Haal de maximum-scale er uit (of maak het minimaal 2.0) en maak het user-scalable. (Niet alle mobiele browsers doen wat met deze declaraties, maar het is beter om ze wel goed te zetten.)
Opmerking: op 200% loopt de scroll-knop door de ‘lees-verder’-link heen. Zie screenshot 10.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Niet getoetst
1.4.10: Reflow
Hele sample
Uitkomst: Voldoende
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. (Dit wordt getest op 1280px breed.)
Opmerking: boven de 200% neemt het logo en de menu-knop relatief veel schermruimte in en valt over content heen. Je kunt deze elementen bijvoorbeeld op dit zoomniveau iets kleiner maken. Zie screenshot 11.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Expertise Branding
Uitkomst: Voldoende
Project branding
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.
Het invoerveld voor de nieuwsbrief heeft een transparante achtergrondkleur en geen rand. Dit heeft een te laag contrast met de achtergrond (2.5:1). Slechtzienden kunnen hierdoor moeite hebben om te bepalen waar ze input kunnen geven. Geef het invoerveld een rand ten opzichte van de achtergrondkleur tot tenminste 3:1 of zorg dat de mindere transparante kleur van de focus state altijd zichtbaar is.
Contact
De achtergrondkleur van de invoervelden ten opzichte van de achtergrond (2.5:1). Zie screenshot 1.
Expertise Branding
Opmerking: de play-knop van de video is moeilijk te onderscheiden, doordat het een witte knop is op een bijna witte achtergrond. Voeg bijvoorbeeld outlines toe zodat het symbool altijd herkenbaar is op diverse achtergronden. (Of maak van de mouseover-stijl de standaardstijl.) Zie screenshot 2. Dit geldt ook voor de pijl-iconen op sliders.
Project branding
De sluitknop in de slider popup (donkergrijs kruis icoon) heeft een contrast van 1.8:1. Dit geldt ook voor de pijlknoppen in de paginabrede slider onderaan de pagina op hover (in de niet actieve state is deze geheel onzichtbaar).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De overlay met het submenu 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
Homepage
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo in de header werkt met de muis als link. Met het toetsenbord werkt dit niet. Maak hier bij voorkeur een standaard link element van zodat het ook met het toetsenbord en hulpsoftware werkt als link.
De scroll-knop werkt alleen met de muis. Dit is een div-element. Maak hier bij voorkeur een standaard button element van zodat het ook werkt met het toetsenbord.
In het hoofdmenu kun je met de muis een submenu-item kiezen. Met het toetsenbord werkt dit niet. Op focus komt het submenu niet tevoorschijn. Bij de meeste menu-items kun je op de volgende pagina meteen naar de subitems gaan, maar bij ‘Over ons’ werkt dit niet. Het meest gebruiksvriendelijk is om het gedrag voor toetsenbordgebruikers gelijk te maken aan die van gebruik met de muis. In het ‘mobiele menu’ werkt de pijl om het submenu te openen wel met het toetsenbord, maar ook hier kun je niet bij de subitems komen.
Vanaf 150% ingezoomd verdwijnt het hoofdmenu achter een knop. Deze knop is niet te bedienen met het toetsenbord. Zie ook 4.1.2.
Homepage
Naast ‘Maak het waar’ staan 3 koppen die met de muis fungeren als links. Met het toetsenbord werkt dit niet. Maak hier bij voorkeur een standaard link element van zodat het ook met het toetsenbord en hulpsoftware werkt als link.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Project branding
Uitkomst: Onvoldoende
Project branding
NB: dit valt vaak onder content, maar het kan goed zijn hier een generieke oplossing voor aan te bieden aan klanten, zodat dit gemakkelijk ingesteld kan worden.
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 issue komt ook voor op de pagina Blog artikel (met zo te zien een eigen video implementatie).
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 video bovenaan speelt automatisch af en is niet te stoppen of te pauzeren. Dit kan hinderlijk zijn 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 video te pauzeren (of zet de video niet op autoplay).
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
Hele sample
Bevindingen:
Opmerking: de zoekresultatenpagina heeft een Engelse titel (‘You searched for…’). Het is beter om dit in het Nederlands te zetten.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Project branding
Uitkomst: Onvoldoende
Plugin agenda
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De links naar social media in de menubalk hebben geen naam. Er staat een title-attribuut, maar deze wordt slecht ondersteund door hulpsoftware (bijvoorbeeld VoiceOver op de Mac geeft hier enkel vraagtekens). Voeg bijvoorbeeld een aria-label toe op de links. Zie screenshot 12.
Op veel pagina’s staan ‘lees meer’-links. Het linkdoel is hier niet duidelijk. 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 tekst toe aan de link die duidelijk maakt 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, bijvoorbeeld een h2-kop. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
Vanaf 150% ingezoomd verdwijnt het hoofdmenu achter een knop. Wanneer dit menu wordt geopend, staan er pijltjes achter de menu-items. Deze links hebben als tekst ‘3’ (via de CSS content property). Dit is geen duidelijk doel. Het is beter om hier button elementen van te maken (omdat je hier niet naar een andere pagina gaat) met bijvoorbeeld als tekst ‘submenu’.
Project branding
In de slider staan links met pijlen zonder duidelijk doel. De naam van de ‘volgende’ link is ‘5’ via de CSS content property. Zie screenshot 13.
De links van de slides hebben enkel een nummer. Duidelijker zou bijvoorbeeld zijn ‘slide 2’ i.p.v. alleen ‘2’.
Zie ook 4.1.2.
Plugin agenda
Om de afbeeldingen van de agenda-items staan links zonder naam, doordat de alt-teksten leeg zijn. Aangezien deze afbeeldingen als link dienen, kan de alt-tekst het beste gevuld worden met het linkdoel (het event). Een andere oplossing kan zijn om de links een aria-label te geven.
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 ingezoomd of via een screenreader te gebruiken. Biedt naast het hoofdmenu nog een tweede optie aan, bijvoorbeeld een algemene zoekfunctie.
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Branche onderwijs
Uitkomst: Onvoldoende
Branche onderwijs
Binnen de content staat een slider met afbeeldingen. De knoppen van deze slider hebben Engelse labels, zoals ‘Close (Esc)’.. Op een Nederlandse website is het beter deze Nederlandse namen te geven, omdat niet alle gebruikers Engels goed beheersen (denk bijvoorbeeld aan ouderen). Dit geldt ook voor knoppen binnen de videoplayer zoals op de pagina Expertise Branding.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Branche onderwijs
Uitkomst: Onvoldoende
Expertise Branding
Uitkomst: Onvoldoende
Projecten
Uitkomst: Onvoldoende
Project branding
Uitkomst: Onvoldoende
Plugin kaart/lijst
Uitkomst: Onvoldoende
Blog
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De focus op ‘lees verder’-links is niet zichtbaar. De outline staat op 0. Zie screenshot 7. Ziende toetsenbordgebruikers weten hierdoor niet wanneer ze op deze links staan. Zorg dat de standaard browser focusstijl zichtbaar is, of voeg een eigen goed zichtbare focusstijl toe. Dit geldt voor alle links en buttons op de site in deze stijl (met pijl eronder).
Vanaf 150% ingezoomd verdwijnt het menu achter een knop. Wanneer je in dit menu zit (geopend met de muis, zie ook 2.1.1), is de focus op de menu-onderdelen niet zichtbaar.
Branche onderwijs
Binnen de content staat een slider met afbeeldingen. Dit werkt wel met het toetsenbord, maar de focus op de elementen is niet zichtbaar. Dan gaat het om de eerste afbeelding (met de muis zie je een pointer, maar op focus is er geen indicatie dat dit interactief is), de pijlen, dots en de buttons in de popup. Dit geldt ook voor enkele foto’s die je in een vergrote popup kunt bekijken, zoals op de pagina Expertise Branding.
Expertise Branding
De focus op de videoplayer is niet zichtbaar. Het gaat om de eerste activeerknop. Als de player eenmaal open en gefocused is, is de focus op de controls wel zichtbaar.
Projecten
Bij de projecten staat een featured image met een link. Deze ontvangt wel focus, maar deze focus is niet zichtbaar. Omdat je hier als alternatief de titel hebt met de link, zou het ook goed zijn als deze image-link geen focus ontvangt. (Dat voorkomt dubbel tabben en voorlezen.) Je kunt deze link dan verbergen voor hulpsoftware d.m.v. aria-hidden=”true”.
Project branding
Onderaan de pagina staat een paginabrede slider met afbeeldingen. Op mouseover zie je hier een titel en pointer. Op focus is dit niet te zien, waardoor het niet duidelijk is dat dit links zijn.
Plugin kaart/lijst
De focus op de knoppen om de plugin te bedienen is niet zichtbaar. Het gaat zowel om de buttons als de checkboxes van de filters. Zie screenshot 8.
Blog
De focus op de zoekknop is niet zichtbaar.
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
Plugin kaart/lijst
Uitkomst: Onvoldoende
Plugin kaart/lijst
Wanneer er filters zijn geselecteerd, verschijnen er buttons boven ‘Activiteiten’. Deze hebben visueel een woord en een kruisje. De toegankelijke naam is echter alleen ‘x’. Daarmee is het lastig om deze buttons met stem te bedienen. Zorg dat de toegankelijke naam minstens de zichtbare naam bevat.
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Voldoende
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.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Onvoldoende
Blog artikel
Uitkomst: Onvoldoende
Blog artikel
Wanneer er foutmeldingen zijn gevonden bij het verzenden van het formulier, wordt er niet duidelijk aangegeven wat er fout is gegaan. Er staat enkel een algemene melding ‘Fout: vul de vereiste velden in.’ Als je dan weer terug gaat naar het formulier, zijn alle labels en ook sterretjes weg. Zie screenshot 14. Geef duidelijk aan welke velden moeten worden verbeterd.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
Er wordt visueel niet aangegeven welke velden verplicht zijn (voor het invullen van het formulier). Dit kan onnodige foutmeldingen geven. Voor bezoekers die meer tijd nodig hebben voor het invullen van formulieren kan dit nog een extra belasting zijn. Geef daarom van tevoren aan welke velden verplicht zijn. Geef dit niet enkel aan met een asterisk (*) zonder verdere uitleg. Dit is namelijk mogelijk niet voor iedereen duidelijk, wat ook weer onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst. (Het is wel goed dat hier een ‘aria-required’ attribuut is gebruikt voor gebruikers van hulpsoftware, aangezien de asterisk niet door alle screenreaders goed wordt voorgelezen.)
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
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 e-mailadres moet in deze vorm worden ingevoerd: email@domein.nl’. (Nu staat er de melding: ‘Het e-mailadres is als ongeldig aangemerkt door het systeem, controleer het nog een keer. Dit is niet erg behulpzaam.’).
Vanaf 150% ingezoomd verdwijnt het hoofdmenu achter een knop. Deze knop heeft geen goede rol en naam. Maak hier bij voorkeur een button element van met een goede omschrijving. Voeg ook de status toe (in-of uitgeklapt). Dit kan m.b.v. het ‘aria-expanded’-attribuut.
Vanaf 150% ingezoomd verdwijnt het hoofdmenu achter een knop. Wanneer dit menu wordt geopend, staan er pijltjes achter de menu-items. Deze links geven geen status aan (in-of uitgeklapt). Dit kan m.b.v. het ‘aria-expanded’-attribuut. Aangezien de links niet naar een andere pagina gaan, is een button element hier beter geschikt.
Branche onderwijs
De links binnen de slider naar de volgende en de vorige slide hebben geen toegankelijke naam. Er staat een span-element in met een tekst, maar deze staat op display:none, waardoor deze ook voor hulpsoftware is verborgen. Gebruik een andere CSS techniek om deze visueel te verbergen. Deze slider komt op meerdere pagina’s voor, ook in bredere versie onderaan op de pagina Project branding.
Expertise Branding
Naast de kop ‘Complexe Merkarchitectuur en online Brand Management’ staat een geëmbedde video. De knop om deze af te spelen heeft geen naam.
Wanneer er filters zijn geselecteerd, verschijnen er buttons boven ‘Activiteiten’. Deze hebben geen goede naam (enkel ‘x’). Geef deze bijvoorbeeld een aria-label met ‘cultuur verwijderen’. Daarmee voldoet het dan ook aan 2.5.3.
