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
EMCO-groep
Evaluatiedatum
31 juli 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 25 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 er geen kleur worden gebruikt om betekenis over te brengen, dat blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Niet alle links hebben een duidelijk doel
Niet alle functionaliteit is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Scope van de evaluatie
Website naam
emco-groep.nl
Scope van de website
Alle pagina's op https://emco-groep.nl/.
Niet de content van de EMtour (virtuele omgeving). Deze wordt binnenkort vervangen.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Dit rapport bevat het deelonderzoek techniek. In combinatie met een deelonderzoek content vormt dit een volledig toegankelijkheidsonderzoek van de website.
NB: Sommige bevindingen zijn hetzelfde als in het contentrapport, maar voor de volledigheid hier ook opgenomen.
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 43 van 50 WCAG 2.1 AA
Success Criteria.
16Voldoende
18Onvoldoende
9Niet 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
Werk
Uitkomst: Onvoldoende
Ontwikkelen
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo in de header heeft de zichtbare tekst 'EMCO-groep’, maar de alt-tekst luidt enkel ‘Logo'. Het logo in de footer heeft de zichtbare tekst 'EMCO-groep’, maar de alt-tekst luidt ‘arrow icon'. Zorg dat voor beide logo’s de alternatieve tekst gelijk is aan de zichtbare tekst.
De iconen in de footer van de social media hebben geen goede alternatieve tekst. Beide alt-teksten luiden nu ‘icon’. Geef deze een goede beschrijving. Zie ook 2.4.4.
De knop in de footer met ‘Neem contact op’ heeft een afbeelding met als alt-tekst ‘arrow-icon’. Deze alt-tekst kan beter worden leeg gelaten. Nu wordt de linktekst hierdoor ook ‘Neem contact op arrow icon’. Pijlen met deze alt-tekst komen op veel plekken in de site voor. Laat deze allemaal leeg zodat screenreaders ze negeren. Zie screenshot 1.
In de header staat een afbeelding met de alt-tekst ‘water mark’. Deze alt-tekst kan ook beter leeg worden gelaten.
Werk
Naast de kop ‘Kwaliteit en service’ staat een slider met foto’s. Niet alle foto’s hebben een goede beschrijving in de alt-tekst. Foto 4 en 5 hebben een lege alt-tekst.
Ontwikkelen
Boven de kop ‘Nieuws’ staan logo’s van organisaties. De alt-teksten komen niet altijd overeen met de zichtbare tekst. Zorg dat alt-teksten van logo’s altijd de gehele zichtbare tekst bevatten, zoals ‘Onderwijs Opvang Emmen Trianthaschool’. Logo's geven informatie en een screenreadergebruiker moet dezelfde informatie krijgen als een ziende gebruiker. Dit komt op meerdere pagina’s voor.
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
Vacature activiteitencoach
Uitkomst: Onvoldoende
PDF Algemene Inkoopvoorwaarden
Uitkomst: Onvoldoende
Homepage
Opmerking: Onder ‘Werksoorten’ staan h3-koppen met categorieën, zoals ‘Industrie’. Achter deze koppen volgt echter geen content. Screenreadergebruikers navigeren vaak via koppen en verwachten dan content achter een kop. Het is daarom beter om hier geen kopopmaak te gebruiken, maar enkel links.
Onderaan de pagina staat een paginatielijst met knoppen. Via een andere vormgeving is aangegeven op welke pagina je je bevindt. Dit is voor hulpapparatuur niet af te leiden uit de code. Dit kan worden opgelost door een (met CSS verborgen) tekst of door het attribuut aria-current=“page” toe te voegen aan de actieve knop. Daarnaast wordt aangeraden om deze elementen te groeperen in een lijst en/of binnen een nav-element met aria-label. Nu zijn het namelijk allemaal losse buttons.
Vacature activiteitencoach
Op deze pagina zijn alle tussenkopjes niet als kop zijn opgemaakt, maar via het strong-element. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier bijvoorbeeld h3-kopjes van. Dit komt op meerdere pagina’s voor, bijvoorbeeld op Contact naast het formulier.
PDF Algemene Inkoopvoorwaarden
De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.
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: Voldoende
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
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.
Links op hover en focus zoals ‘Neem contact op’ (roze/lila, 3.5:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Op 100% staan er toegankelijkheidsopties voor grotere letters en voorlezen. Deze verdwijnen wanneer je inzoomt op 150% of meer.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Niet getoetst
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.)
Op 100% staan er toegankelijkheidsopties voor grotere letters en voorlezen. Deze verdwijnen wanneer je inzoomt op 150% of meer.
1.4.11: Contrast van niet-tekstuele content
Hele sample
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.
In het zoekveld staat een afbeelding van een loep. Op focus is dit het enige zichtbare label van het veld. Zie screenshot 3. Dit icoon heeft een contrast van 1.6:1. Zorg dat deze minimaal een contrast heeft van 3:1. Aangeraden wordt om ook altijd een zichtbaar tekstlabel te hebben voor wie de iconen niet goed begrijpt.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacature activiteitencoach
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.
Homepage
Onder ‘Laatste nieuws’ loopt tekst door elkaar. Zie screenshot 5 en screenshot 6. Van de Tolkie opties is de laatste knop (met het vraagteken) niet meer bereikbaar. Deze valt rechts buiten beeld.
Vacature activiteitencoach
De headerfoto valt deels over teksten heen. Zie screenshot 7.
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 of de toetsenbordfocus 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
Hele sample
Bevindingen:
De sliders met foto’s, zoals op de pagina Werk, zijn niet te bedienen met het toetsenbord. Zie ook 4.1.2.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Niet van toepassing
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
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: Onvoldoende
Zoekresultaten
Uitkomst: Voldoende
PDF Algemene Inkoopvoorwaarden
Uitkomst: Onvoldoende
Zoekresultaten
Opmerking: de paginatitel is in het Engels ‘You searched for post’. Beter is het om dit in het Nederlands te zetten, omdat mogelijk niet alle bezoekers Engels begrijpen.
PDF Algemene Inkoopvoorwaarden
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF. Stel daarnaast in de eigenschappen in dat de documenttitel wordt getoond in plaats van de bestandsnaam.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Vanaf 150% ingezoomd komt het hoofdmenu achter een knop te staan. De focus gaat echter naar alle menu-items, ook wanneer dit menu nog gesloten is. Wanneer het menu wel geopend is, gaat de focus ook naar submenu-items terwijl deze niet geopend zijn, zoals de werksoorten. Dit is verwarrend. Zorg dat de focus niet bij elementen kan komen die visueel gesloten zijn.
Wanneer het mobiele menu geopend is, gaat de focus na het menu naar elementen op de onderliggende pagina, maar deze zijn nu niet zichtbaar. Zorg dat de focus hier pas bij kan komen wanneer het menu weer gesloten is.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Zoekresultaten
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De link naar de homepage achter het logo in de header heeft als linknaam (via het aria-label) ‘Logo’. Dit is geen duidelijk linkdoel. Maak hier bijvoorbeeld ‘Homepage EMCO-groep’ van. Dit geldt ook voor de link naar de homepage achter het logo in de footer. Deze linktekst is nu ‘arrow icon'.
De links naar de social media in de footer hebben als linknaam ‘icon’ (via het aria-label). Dit is geen duidelijk linkdoel. Beter is het om deze iconen een goede alt-tekst te geven (zie 1.1.1) en het aria-label weg te halen. Dan komt het linkdoel van de alt-tekst. (Dit geldt voor meerdere plekken waar de alt-tekst en het aria-label hetzelfde zijn. Een aria-label overschrijft een alt-tekst binnen het link of button element.)
Opmerking: Op veel plekken in de site staan overbodige aria-labels op links, omdat er al een linktekst is. Bijvoorbeeld de link met ‘Neem contact op’ in de footer heeft een overbodige alt-tekst en een overbodig aria-label met ‘Neem contact op arrow icon’, waardoor dit laatste nu de linktekst wordt. Het is beter om geen ARIA-markup te gebruiken als er al goede (zichtbare) teksten zijn.
Homepage
Onder ‘De kracht van EMCO-groep ‘ staan meerdere links met de tekst ‘Meer informatie’. 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. Dit kan hier worden opgelost door de linktekst langer te maken (‘Meer informatie over sociaal ondernemen’) of door de link op te nemen achter bestaande tekst binnen de content, bijvoorbeeld in de laatste zin ‘Ontdek hoe Sociaal ondernemen (...)’.
Opmerking: de links naar de werksoorten hebben erg lange linkteksten, bijvoorbeeld “Electromonteur EMCO-groep aan het werk Industrieel arrow icon’. Het zou duidelijker zijn als de link alleen om de kop zou staan, dan wordt de link ‘Industrieel’. Hier zijn verschillende technische oplossingen voor mogelijk. Deze blokjes komen op meerdere pagina’s voor.
De links naar de nieuwsberichten hebben geen duidelijk doel. Op de link elementen staat een aria-label die hetzelfde is als de alt-tekst van de afbeelding, bijvoorbeeld ‘menssupport foto werkenden mensen op afdeling’. Hiermee wordt het linkdoel, namelijk ‘Vacature Activiteitencoach’, overschreven. Beter is het om in het aria-label op de link de h3-kop te zetten, of om het linkblok anders op te maken, zodat de link alleen om de kop komt te staan (zie ook de opmerking over de link naar werksoorten). Deze blokjes komen op meerdere pagina’s voor.
Zoekresultaten
Er zijn meerdere links op de pagina met de tekst ‘Meer lezen’. 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 naar de h2-kop van elk resultaat. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
De links in de paginatie naar vorige en de volgende pagina (achter de pijlen) hebben geen tekst. Zie ook 4.1.2.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Sommige labels staan in het Engels. Dat is mogelijk niet voor iedereen goed te begrijpen. Bijvoorbeeld het label om te zoeken in de header voor hulpsoftware is ‘Search for’. Maak hier Nederlands van.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking: de meeste interactieve elementen zoals knoppen en links hebben een donkere rand op focus. De links naar de werksoorten hebben een andere stijl: geen rand, maar een verschuiving van de pijl. Het is een zichtbare focus en voldoet daarom aan dit criterium. Het is echter veel minder duidelijk dan de stijl met de rand. Het wordt daarom aangeraden om de randstijl consistent te gebruiken, eventueel in toevoeging op de verschuivende pijl. Zie screenshot 2.
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 en de footer hebben een andere toegankelijke naam 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. Zie ook 1.1.1.
Dit probleem komt ook voor bij de volgende onderdelen: Het zoeken invoerveld in de header met de zichtbare tekst ‘Wat wil je vinden?’, maar het label ‘Search for’. De links naar de nieuwsitems met als zichtbare tekst de kop, maar als toegankelijke naam de alt-tekst.
NB: Best practice is om de zichtbare naam in het begin van de toegankelijke naam te zetten, zodat het met stem meteen herkend wordt. Bijvoorbeeld bij de links naar de werksoorten staat het nu in het midden: ‘Schoonmaker aan het stofzuigen Facilitair arrow icon’. Zichtbaar is alleen ‘Facilitair’. (Het beste is echter om de link alleen de tekst ‘Facilitair’ te geven.)
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: Onvoldoende
PDF Algemene Inkoopvoorwaarden
Uitkomst: Onvoldoende
PDF Algemene Inkoopvoorwaarden
Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.
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
Contact
Uitkomst: Onvoldoende
Contact
Na het versturen van het formulier na het invullen van de 2 verplichte velden (naam en bericht), komt er geen foutmelding boven aan de pagina. Het lijkt nu of het versturen goed is gegaan. Maar als je helemaal naar beneden scrollt, staan er wel rode teksten onder de velden van het e-mailadres en telefoonnummer. Zie screenshot 8. Deze meldingen zijn niet erg specifiek: ‘Vul minimaal één van de twee velden in.’ Duidelijker zou zijn: ‘vul een e-mailadres en/of telefoonnummer in zodat we u kunnen bereiken’.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
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. NB: E-mailadres en telefoonnummer zijn niet verplicht, maar geven wel foutmeldingen. Dit is nogal verwarrend.
De iframe van Tolkie (popup met simpele tekst) 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.
Binnen de Tolkie popup staat een lijst met talen. Dit zijn buttons die zijn opgenomen binnen een button. Geneste interactieve elementen kunnen problemen geven voor hulpsoftware. Zorg dat deze na elkaar staan in plaats van onder elkaar.
Op veel pagina’s komen sliders voor met foto’s, bijvoorbeeld op de pagina Werk. De knoppen naar de foto’s hebben geen goede rol en naam. Deze zijn ook niet te bedienen met het toetsenbord. Maak hier button elementen van met een goede naam, en geef ook aan in tekst of via ARIA-markup welke actief is.
Binnen de submenu’s van het hoofdmenu (mobiele versie) wordt de status niet altijd goed aangegeven. Bijvoorbeeld binnen ‘Werksoorten en diensten’ kun je een submenu openen van ‘Industrieel’. Deze knop blijft ‘Submenu openen’ heten, ook als het submenu al geopend is. Zie screenshot 4. Zorg dat de naam verandert in ‘sluiten’ of noem de knop enkel ‘submenu’ en geeft via het ‘aria-expanded’-attribuut de status goed weer.
Homepage
De links naar de vorige en volgende organisatie in de slider (pijltjes) hebben geen goede rol en naam. Ze zijn hierdoor ook niet te bedienen met het toetsenbord.
Zoekresultaten
De links naar de volgende en vorige pagina (achter de pijlen) hebben geen naam. Voeg een tekst toe aan de link of een aria-label.
