Oorspronkelijke online versie rapportage: Op verzoek van Het waterschapshuis is een toegankelijkheidsonderzoek uitgevoerd op de door hun aangeboden website, https://heel-nl.nu/ , om te beoordelen hoe deze voldoet aan de gestelde WCAG norm.
Doel van het onderzoek is om te beoordelen of de informatie op de website voor iedereen, inclusief mensen met een functiebeperking, toegankelijk is en bedient kan worden.
Deze rapportage bevat de bevindingen van dit onderzoek. Uitgewerkt per richtlijn benoemen we de status waarin aan de succescriteria voldaan wordt, wat daarbij geconstateerde toegankelijkheidsproblemen zijn en eventuele opmerkingen ter advies.
De opgetekende bevindingen zijn indicatief. Een betreffend probleem kan dus op meerdere locaties binnen de website voorkomen zonder dat die apart benoemd worden.
De gebruikte onderzoeksmethode, WCAG-EM, werkt op basis van een steekproef. Hoewel de steekproef van het onderzoek zorgvuldig wordt samengesteld om een evenwichtig beeld van de vastgestelde scope te onderzoeken, kan het voorkomen dat een toegankelijkheidsprobleem niet geconstateerd wordt, maar dit bij een vervolgonderzoek wel aan het licht komt. Ook kunnen bevindingen op een later tijdstip mogelijk anders geïnterpreteerd en beoordeeld worden door verdere ontwikkeling van kennis en technieken.
De WCAG (Web Content Accessibility Guidelines) zijn internationaal geaccepteerde richtlijnen, gepubliceerd door het W3C (World Wide Web Consortium), ter bevordering van de toegankelijkheid van webcontent voor mensen met een functiebeperking. De richtlijnen zijn techniek-onafhankelijk opgebouwd via een viertal principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Deze principes bevatten een serie richtlijnen met succescriteria waarmee webcontent beoordeeld kan worden.
Voor Nederlandse (semi-)overheidsorganisaties geldt een wettelijke verplichting om met hun websites te voldoen aan de WCAG norm vanuit het ‘Tijdelijk besluit digitale toegankelijkheid overheid’, welke voortvloeit uit de Europese richtlijnen EN 301 549 (versie 2.1.2, pdf).
Voor niet-overheidsorganisaties geldt onder de Wet gelijke behandeling op grond van handicap of chronische ziekte (2017) dat zij hun goederen en diensten zo toegankelijk mogelijk aan bieden. Daarnaast zal naar verwachting vanaf 28 juni 2025 de Europese Toegankelijkheidswet in werking treden, waarmee onder andere ook webshops aan de WCAG-richtlijnen moeten voldoen.
| Opdrachtgever: | Het waterschapshuis |
|---|---|
| Betreft: | https://heel-nl.nu/ |
| Toetsingsnorm: | WCAG 2.2 AA |
| Datum onderzoek: | 07-01-2026 |
| Onderzoek door: | Toegankelijk Online Sint Hubertus 35 6713 JN Ede https://www.toegankelijkonline.nl +31 6 5115 6244 |
| Onderzoeker: | Ronny Hendriks |
| Type rapportage: | Nulmeting |
| Scope: | Alle pagina's op https://heel-nl.nu/ |
| Steekproef: | Voor dit onderzoek is een representatieve steekproef van de scope samengesteld. Zie steekproef lijst |
| Getoetste basisniveau: | De website is getoetst op geschiktheid voor gangbare browsers en hulpapparatuur. |
| Technieken: | Alle door W3C uitgebrachte technieken zijn ondersteund en kunnen gebruikt worden. |
| Technologieën: | |
| Gebruikte Software: |
|
| JSON: | Resultaten in JSON formaat downloaden |
Het toegankelijkheidsonderzoek voor de website https://heel-nl.nu/ is op 7 januari 2026 afgerond. Hiervoor is gebruikgemaakt van de WCAG-EM-evaluatiemethode om te kijken hoe de onderzochte website voldoet aan de gestelde norm van WCAG 2.2 Niveau AA.
Uit het onderzoek blijkt dat op veel punten al rekening is gehouden met digitale toegankelijkheid, waardoor de site in de basis bruikbaar is voor gebruikers met een functiebeperking. De audit toont echter aan dat nog niet aan alle WCAG-succescriteria wordt voldaan.
De belangrijkste knelpunten betreffen onder meer
Hoewel de site al op veel punten toegankelijk werkt, zijn gerichte verbeteringen nodig om de toegankelijkheid verder te verhogen.
| Status succescriteria | Aantal |
|---|---|
| Voldoende | 22 |
| Onvoldoende | 19 |
| Niet van toepassing | 14 |
| Totaal | 55 |
Er zijn bevindingen gedaan bij de volgende succescriteria:
Op de volgende pagina’s staan per succescriterium de bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Bij sommige succescriteria staan opmerkingen vermeldt. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Hieronder staan per succescriterium eventuele bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website en haar content verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Tevens staan bij sommige succescriteria opmerkingen. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze.
Lever tekstalternatieven voor alle niet-tekstuele content, zodat die veranderd kan worden in andere vormen die mensen nodig hebben, zoals grote letters, braille, spraak, symbolen of eenvoudigere taal.
Niveau A
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Het organisatielogo in de header fungeert als link naar de homepage, maar de afbeelding heeft geen alt-attribuut of geen alternatieve tekst. Hierdoor is het doel en de functie van deze link niet beschikbaar voor hulptechnologie.
Wanneer een afbeelding als link wordt gebruikt, vormt de alternatieve tekst de linknaam. Zonder alt-tekst is voor screenreaders niet duidelijk dat het om een link naar de homepage gaat, noch van welke organisatie.
Voorzie het logo van een beschrijvende alt-tekst die zowel de organisatie als het linkdoel benoemt.
Op de pagina https://heel-nl.nu/nieuws/ staan nieuwskaartjes met een <img>-element waarbij het verplichte alt-attribuut ontbreekt. Hierdoor is geen alternatieve tekst beschikbaar voor de afbeelding.
Het alt-attribuut is nodig om de betekenis of functie van een afbeelding over te brengen aan gebruikers die de afbeelding niet kunnen zien. Zonder alt-attribuut weten hulptechnologieën niet hoe de afbeelding moet worden gepresenteerd. Screenreadergebruikers krijgen hierdoor geen of een onduidelijke aankondiging van de afbeelding.
Voeg altijd een alt-attribuut toe aan het <img>-element. Is de afbeelding informatief: gebruik een beschrijvende alternatieve tekst. Is de afbeelding decoratief: gebruik een leeg alt-attribuut (alt="").
Ditzelfde gebeurt ook op nieuwsberichten, zoals de pagina https://heel-nl.nu/nieuws/manifesto-integraliteit-en-standaardisatie/met de kleine afbeeldingen onder "Overig nieuws".
Op de pagina https://heel-nl.nu/pwa-en-bim/pwa/ worden afbeeldingen gebruikt als links, maar deze <img>-elementen hebben geen alt-attribuut of geen alternatieve tekst. Daardoor is het linkdoel niet beschikbaar voor hulptechnologie. Wanneer een afbeelding als link wordt gebruikt, dient de alternatieve tekst als de linktekst. Zonder alt-tekst is voor screenreaders niet duidelijk dat het om een link gaat, noch waar de link naartoe leidt. Screenreadergebruikers horen hierdoor een nietszeggende of lege link en het doel en de functie van de link zijn onduidelijk. Ook is navigeren via een lijst met links zo niet mogelijk of verwarrend.
Voorzie elke afbeelding die als link wordt gebruikt van een beschrijvende alt-tekst die het doel van de link weergeeft (niet alleen wat er te zien is).
Ditzelfde gebeurt ook op andere pagina's als https://heel-nl.nu/kennisbasis/geheel-platen/
De tabel overzicht basisspecificaties op de pagina https://heel-nl.nu/netwerk/decompositie/ bevat icoontjes voor informatie. De icoontjes in de tabel zijn opgemaakt als <img>-elementen zonder verplicht alt-attribuut. In plaats daarvan is een title-attribuut gebruikt om een tekstalternatief te bieden. Dit title-attribuut bevat HTML-code, waardoor de inhoud niet correct of begrijpelijk wordt gepresenteerd aan gebruikers van hulptechnologie.
HTML-code wordt op deze manier letterlijk voorgelezen, wat leidt tot verwarrende of onbegrijpelijke output. Een screenreader hoort bijvoorbeeld <div class=tooltip><strong>Status: </strong>Beschikbaar</div>
Voeg aan elk <img>-element een passend alt-attribuut toe dat de functie of betekenis van het icoon beschrijft. Verwijder het gebruik van title als vervanging voor het tekstalternatief.
Lever alternatieven voor op tijd gebaseerde media.
Niveau A
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau A
Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
De onderzochte steekproef voldoet niet aan dit succescriterium.
De video onderaan de pagina https://heel-nl.nu/ bevat alleen automatisch gegenereerde ondertiteling die niet altijd overeenkomt met de daadwerkelijk gesproken tekst. Woorden ontbreken of zijn verkeerd weergegeven.
Ondertiteling moet de gesproken inhoud correct en volledig weergeven. Automatisch gegenereerde ondertitels zijn vaak onnauwkeurig en voldoen alleen aan WCAG wanneer ze zijn nagekeken en gecorrigeerd. Onjuiste ondertitels kunnen leiden tot misinterpretatie of onbegrip over de inhoud, omdat doven en slechthorenden onjuiste of onvolledige informatie krijgen. Zij begrijpen de inhoud mogelijk verkeerd.
Ook is de video hierdoor minder bruikbaar in situaties waar audio niet beschikbaar is.
Controleer en corrigeer de automatisch gegenereerde ondertiteling, zodat deze volledig en correct overeenkomt met de gesproken tekst, inclusief belangrijke geluiden en sprekerswissels. Dit kan gemakkelijk op basis van de al gegenereerde ondertiteling via de studio-interface van YouTube.
Niveau A
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Voor de video op de pagina https://heel-nl.nu/ is geen audiodescriptie aanwezig en er wordt ook geen media-alternatief aangeboden, zoals een volledig teksttranscript. De informatie uit de video is niet op dezelfde pagina beschikbaar en er is geen link naar een andere bron waar deze informatie (bij elkaar) in toegankelijke tekstvorm wordt aangeboden.
Voeg een volledig en gelijkwaardig teksttranscript toe waarin zowel de gesproken tekst als de belangrijke visuele informatie is opgenomen.
Niveau AA
Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.
De onderzochte steekproef voldoet aan dit succescriterium.
De video op pagina https://heel-nl.nu/ heeft geen audiodescriptie, maar er wordt geen belangrijke informatie uitsluitend op een visuele presentatie gedeeld in de video.
Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur.
Niveau A
Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Op sommige pagina's, zoals https://heel-nl.nu/implementatie/de-dos-bij-de-implementatie-van-se/, wordt tekst die functioneert als kop (titel of sectiekop) opgemaakt met <strong>-elementen in plaats van met semantische kopteksten (<h1>–<h6>). Hierdoor is de documentstructuur niet correct vastgelegd in de HTML.
Kopteksten geven structuur en hiërarchie aan een pagina. Hulptechnologieën gebruiken deze structuur om te navigeren en om de inhoud te begrijpen. Het <strong>-element geeft alleen visuele nadruk en geen structurele betekenis.
Gebruik semantische kopteksten (<h1>–<h6>) voor titels en sectiekoppen, in een logische hiërarchie.
Het kruimelpad op de pagina's is niet opgemaakt als een semantische lijst (<ol> ), maar bestaat uit losse tekst- of linkelementen. Een kruimelpad bestaat uit een reeks gerelateerde navigatie-items met een vaste volgorde. Hierdoor is de onderlinge relatie tussen de kruimelpad-items niet correct vastgelegd in de HTML.
Markeer het kruimelpad als navigatie en gebruik een geordende lijst (<ol>) , met elk onderdeel in een <li>-element. Voeg voor de huidige pagina aria-current="page" toe aan het betreffende <li>-element.
In het enquêteformulier op de pagina https://heel-nl.nu/help-mee/ bestaan meerdere vragen uit groepen checkboxen of radio buttons, maar deze opties zijn niet gegroepeerd met <fieldset> en <legend>. Hierdoor is de onderlinge relatie tussen de opties en de bijbehorende vraag niet programmatisch vastgelegd.
Bij keuzevragen horen meerdere opties logisch bij één vraag. Zonder een fieldset en legend kunnen hulptechnologieën deze relatie niet herkennen en wordt de vraag niet (of onvolledig) aangekondigd bij het doorlopen van de opties.
Groepeer per vraag alle bijbehorende checkboxen of radio buttons in een <fieldset> en gebruik een <legend> voor de vraagtekst.
Een set links op de pagina https://heel-nl.nu/case/ is visueel vormgegeven als tabs, maar is in de code geïmplementeerd als een eenvoudig linkoverzicht (quickmenu) dat naar content op dezelfde pagina verwijst. De component heeft geen semantiek die aangeeft dat het om tabs of een navigatiegroep gaat. Daarnaast is de momenteel getoonde ‘tab’ niet programmatisch gemarkeerd.
Door de visuele vormgeving verwachten gebruikers een tabcomponent met een actieve status. Hulptechnologie kan deze verwachting niet volgen, omdat naam, rol en onderlinge relatie ontbreken. Ook is niet vastgelegd welk onderdeel actief is, waardoor de relatie tussen de links en de bijbehorende content onduidelijk is.
De visuele presentatie wekt andere verwachtingen dan de feitelijke werking.
Ons advies is om één van de volgende benaderingen te kiezen:
Tabs: implementeer de component als echte tabs met correcte semantiek (zoals tablist, tab, tabpanel) en markeer de actieve tab programmatisch. Zie ook WAI-ARIA Tabs pattern (Engels)
Navigatie / quickmenu: behoud de linkfunctionaliteit, maar pas de visuele vormgeving aan, zodat deze niet als tabs wordt geïnterpreteerd. Markeer daarnaast het huidige onderdeel, bijvoorbeeld met aria-current="true".
In het formulier op bijvoorbeeld https://heel-nl.nu/help-mee/ hebben invoervelden geen zichtbaar label. Er is wel een programmatisch gekoppeld label aanwezig, maar dit is niet zichtbaar voor gebruikers.
In dit label wordt met een sterretje (*) aangegeven dat het veld verplicht is. Deze verplichte status is voor ziende gebruikers niet zichtbaar tot na een eventuele foutmelding.
Labels en instructies moeten voor alle gebruikers duidelijk en waarneembaar zijn. Wanneer labels alleen programmatisch aanwezig zijn, missen ziende gebruikers context over wat er in een veld moet worden ingevuld. Let erop dat, wanneer dit label zichtbaar gemaakt wordt, het gebruik van een sterretje zonder uitleg niet voldoende om aan te geven dat een veld verplicht is. Verklaar de betekenis aan het begin van het formulier. Voor gebruikers van hulpsoftware wordt de status programmatisch al aangekondigd door de implementatie van aria-required
In het enquêteformulier worden <label>-elementen gebruikt als visuele kopteksten om verschillende secties met vragen van elkaar te scheiden. Deze labels zijn niet gekoppeld aan een formulierveld en hebben daarmee een andere functie dan waarvoor het label-element bedoeld is.
Het label-element is bedoeld om één specifiek formulierveld te benoemen. Wanneer labels als kopteksten worden gebruikt, ontstaat verwarring in de semantiek van het formulier. Hulptechnologie kan de structuur van het formulier niet correct interpreteren en gebruikers krijgen onjuiste of misleidende informatie omdat screenreadergebruikers bijvoorbeeld labels zonder bijbehorend invoerveld horen.
Gebruik kopteksten (<h1>–<h6>) om secties in het formulier te groeperen. Gebruik <label> uitsluitend voor het benoemen van individuele formuliervelden en koppel deze altijd programmatisch via het for-attribuut.
In de tabel overzicht basisspecificaties op de pagina https://heel-nl.nu/netwerk/decompositie/ bevat de eerste tabelkopcel (<th>) een legenda. Deze informatie beschrijft de betekenis van symbolen of aanduidingen in de tabel, maar functioneert niet als koptekst voor de betreffende kolom.
Een th-element mag alleen worden gebruikt voor echte kolom- of rijkoppen. Hulptechnologieën, zoals screenreaders, gebruiken tabelkoppen om relaties tussen cellen en hun headers te bepalen. Wanneer een legenda in een th wordt geplaatst, ontstaat een onjuiste semantische relatie. Screenreadergebruikers krijgen zo verwarrende informatie bij het navigeren door de tabel.
Verplaats de legenda buiten de tabel, bijvoorbeeld boven of onder de tabel als aparte tekst. Of plaats de legenda in een <caption> of een afzonderlijk element dat duidelijk als toelichting is gemarkeerd.
Gebruik de eerste th-cel uitsluitend voor een daadwerkelijke kolomkop die de inhoud van die kolom beschrijft. Aangezien deze kolom andere rijkoppen bevat, kan hij leeggelaten worden.
Het PDF-document https://heel-nl.nu/wp-content/uploads/2023/10/HEEL-Handboek-digitaal_2023.pdf bevat geen tags (codestructuur). Hierdoor ontbreekt de semantische structuur van het document, zoals koppen, paragrafen, lijsten en leesvolgorde.
Tags zijn nodig, zodat hulptechnologie kan begrijpen hoe de inhoud is opgebouwd en in welke volgorde deze gelezen moet worden. Zonder tags is een PDF voor screenreaders grotendeels onbruikbaar en is navigatie binnen het document niet mogelijk.
Maak de PDF toegankelijk door een volledige tags-structuur toe te voegen. Zorg dat alle inhoud correct is getagd (zoals <H1>–<H6>, <P>, <L>, <Table>) en dat de leesvolgorde klopt. Dit kan bijvoorbeeld met Adobe Acrobat of bij het genereren van de PDF vanuit de bron (Word, InDesign).
Het PDF-document https://heel-nl.nu/wp-content/uploads/2025/01/HEEL_Marktverhalen_Markt-en-Waterschap.pdf is wel getagd, maar alle inhoud is uitsluitend opgemaakt met <P>-tags. Er is geen semantische structuur aanwezig, zoals koppen (<H1>–<H6>), lijsten, tabellen of andere betekenisvolle structuurelementen.
Semantische tags zijn nodig om de onderlinge relaties en structuur over te brengen. Wanneer alle content als platte paragrafen is getagd, kunnen hulptechnologieën de logische opbouw van het document niet herkennen.
Pas een correcte tag-structuur toe in de PDF, met onder andere:
<H1>, <H2>, etc.) voor titels en tussenkoppen<L>, <LI>) voor opsommingen<Table>, <TR>, <TH>, <TD>) voor tabellenZorg dat de structuur logisch en consistent is opgebouwd. Dit kan achteraf toegevoegd worden via Acrobat Pro, maar vaak is de beste oplossing om vanaf het bronbestand de eerste stappen te zetten als daar wel een goede structuur aanwezig is. Controleer vervolgens de tag-structuur met een checker zoals PAC en een screenreader.
Niveau A
Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.
Noot: Voor eisen met betrekking tot kleur zie Richtlijn 1.4.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.
Noot: Voorbeelden waarbij een specifieke presentatie-oriëntatie essentieel kan zijn: een acceptgiro, een piano applicatie, dia’s voor een projector of televisiescherm, of Virtual Reality waarbij de weergavestand van de content niet noodzakelijkerwijs beperkt is tot staand of liggend.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:
De onderzochte steekproef voldoet niet aan dit succescriterium.
In het formulier hebben persoonlijke invoervelden zoals naam en e-mailadres geen juiste autocomplete-attributen. Hierdoor kan de browser of assistieve technologie niet betrouwbaar automatisch gegevens invullen.
Correcte autocomplete-waarden helpen gebruikers om formulieren sneller en foutloos in te kunnen vullen. Zonder deze waarden moeten gebruikers mogelijk handmatig informatie invoeren, of wordt automatisch invullen minder betrouwbaar, wat extra tijd en inspanning kost, vooral voor gebruikers met motorische of cognitieve beperkingen.
Voeg voor elk invoerveld een passend autocomplete-attribuut toe. Zie de lijst, gelinkt in de tekst hierboven, voor toepasselijke waarden.
Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond.
Niveau A
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Noot: Dit succescriterium richt zich specifiek op kleurperceptie. Andere vormen van perceptie worden behandeld in Richtlijn 1.3 inclusief softwarematige toegang tot kleur en andere codering van visuele presentatie.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.
Noot: Omdat content die niet aan dit succescriterium voldoet het vermogen van een gebruiker om de hele pagina te gebruiken kan belemmeren, moet alle content op de webpagina (of die nu wel of niet gebruikt wordt om aan andere succescriteria te voldoen) aan dit succescriterium voldoen. Zie Conformiteitseis 5: Niet-interferentie (w3.org).
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:
De onderzochte steekproef voldoet niet aan dit succescriterium.
De website is kleurrijk vormgegeven, maar sommige combinaties van tekst en achtergrond hebben onvoldoende contrast. Hierdoor wordt niet voldaan aan de minimale contrasteisen. Contrast zorgt voor duidelijk leesbare tekst voor gebruikers met een visuele beperking, kleurenblindheid of bij fel licht.
Pas de gebruikte kleurencombinaties die niet voldoen aan, zodat het contrast voldoet aan de minimale WCAG-eisen (minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst).
| Kleur 1 | Kleur 2 | Gemeten ratioRatio |
|---|---|---|
| #FFFFFF (Wit) | #98C5C7 (licht groen/cyaan) | 1,9:1 |
| #FFFFFF (Wit) | #82B9BB (iets donkerder groen/cyaan) | 2.2:1 |
| #FFFFFF (Wit) | #2CABE2 (blauw) | 2,6:1 |
| #FFFFFF (Wit) | #95D5F0 (lichtblauw) | 1,6:1 |
| #FFFFFF (Wit) | #F4B93A (oranjegeel) | 1,8:1 |
| #FFFFFF (Wit) | #6FB63F (groen) | 2,5:1 |
| #FFFFFF (Wit) | #AC98C7 (paars) | 2,6:1 |
| #F5F5F5 (grijs) | #E73E33 (rood) | 3,8:1 |
| #F5F5F5 (grijs) | #6FB63F (groen) | 2,3:1 |
| #EEEEEE (grijs) | #6FB63F (groen) | 2,1:1 |
| #CCCCCC (lichtgrijs) | #FFFFFF (wit) | 1,6:1 (formulierplaceholders) |
Soortgelijke combinaties worden ook in de onderzochte pdf-documenten gebruikt. Controller ook deze voor voldoende contrast.
Niveau AA
Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:
Noot: Woordmerken (tekst die onderdeel is van een logo of merknaam) worden als essentieel beschouwd.
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.
Noot: 320 CSS-pixels zijn gelijk aan de beginbreedte van een weergavekader van 1280 CSS-pixels bij 400% zoom. Voor webcontent die ontworpen is om horizontaal te scrollen (bijv. bij verticale tekst), zijn de 256 CSS-pixels gelijk aan de beginbreedte van een weergavekader van 1024 CSS-pixels bij 400% zoom.
Noot: Voorbeelden van content die een tweedimensionale lay-out vereisen, zijn afbeeldingen, kaarten, schema's, video's, games, presentaties, gegevenstabellen en interfaces waarbij de werkbalken zichtbaar moeten blijven tijdens het manipuleren van de content.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Sommige vragen in het enquêteformulier op https://heel-nl.nu/help-mee/ blijven niet goed leesbaar wanneer reflow wordt toegepast, bijvoorbeeld bij het vergroten van de tekst of bij smalle schermbreedtes. Tekst wordt door container-overflow afgesneden en is niet volledig zichtbaar.
Reflow zorgt ervoor dat content ook bij tekstvergroting of op kleine schermen toegankelijk en leesbaar blijft. Wanneer tekst wordt afgesneden of uit de container valt, kan de inhoud niet volledig worden gelezen, vooral voor gebruikers met een visuele beperking.
Gebruik flexibele layouts, vermijd vaste breedtes en pas CSS toe die overflow voorkomt, zoals overflow-wrap: break-word of word-break: break-word.
Test de pagina op verschillende schermbreedtes en tekstvergrotingen om te verifiëren dat alle content zichtbaar blijft.
Op de pagina https://heel-nl.nu/netwerk/decompositie/ ontstaat er ook noodzaak tot zijwaarts scrollen voor de overzichtstabel, maar voor deze presentatie is dit gedrag deels als essentieel te beschouwen.
Zorg er echter wel voor dat dit scrollgedrag zich beperkt tot het overzicht en niet de hele pagina. Dit kan door een CSS overflow in te stellen op de container. Geef de container op een tabindex="0" om ervoor te zorgen dat deze focusbaar is, zodat het scrollen ook via een toetsenbord kan gebeuren.
Omdat dit ook op kleinere schermen voor problemen zorgt, adviseren we op deze schermen een alternatief format, bijvoorbeeld een lijst, te overwegen, zoals bij de radar gedaan wordt.
Niveau AA
De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:
De onderzochte steekproef voldoet niet aan dit succescriterium.
In de tabel “Overzicht basisspecificaties” worden iconen gebruikt om informatie te communiceren. Sommige van deze iconen hebben onvoldoende contrast vergeleken met de achtergrond, waardoor ze moeilijk waarneembaar zijn voor gebruikers met visuele beperkingen.
Verhoog het contrast van de kleuren in de iconen tussen de iconen en de achtergrond, zodat deze minimaal 3:1 bereiken.
Niveau AA
Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze eigenschappen voor tekststijl in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.
De onderzochte steekproef voldoet aan dit succescriterium.
Notitie: voor sommige elementen wordt dynamisch de hoogte bepaald tijdens het renderen van de pagina. Het kan hierdoor voorkomen dat tekst buiten de container valt (overflow) als deze instellingen worden aangepast. Als de pagina's geladen worden met deze aanpassingen actief, wordt wel de correcte hoogte berekend, waardoor we dit niet afkeuren.
Niveau AA
Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:
Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.
Noot: Voorbeelden van aanvullende content die door de user agent wordt bepaald, zijn de browser tooltips die worden gemaakt met behulp van het HTML title attribuut.
Noot: Aangepaste tooltips, submenu's en andere niet-modale pop-ups die worden weergegeven bij hover en focus zijn voorbeelden van aanvullende content waarop dit criterium van toepassing is.
De onderzochte steekproef voldoet aan dit succescriterium.
Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.
Maak alle functionaliteit beschikbaar vanaf een toetsenbord.
Niveau A
Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
Noot: Deze uitzondering is gerelateerd aan de onderliggende functie, niet aan de invoertechniek. Als we bijvoorbeeld met de hand geschreven tekst invoeren, vereist de invoertechniek (met de hand geschreven tekst) padafhankelijke invoer, maar de onderliggende functie (tekstinvoer) vereist dat niet.
Noot: Dit succescriterium verbiedt geen muisinvoer of andere invoermethoden naast de toetsenbordinvoer en wil dit ook niet ontmoedigen.
De onderzochte steekproef voldoet niet aan dit succescriterium.
De items in de sectie “Overig nieuws” zijn opgebouwd met <div>-elementen en hebben een JavaScript-click-handler om te navigeren naar het artikel. Ze zijn niet semantisch als link (<a>) gemarkeerd en kunnen daardoor niet met het toetsenbord worden geactiveerd.
Gebruikers die geen muis kunnen gebruiken, zoals blinde of motorisch beperkte gebruikers, zijn afhankelijk van toetsenbordtoegang om navigatie te activeren. <div>-elementen zonder correcte semantiek of ARIA-rol zijn niet focusbaar en kunnen niet geactiveerd worden via toetsenbordtoetsen.
Gebruik semantische <a>-elementen voor alle klikbare items, zodat ze automatisch focusbaar en toetsbedienbaar zijn.
Als een <div> of ander niet-interactief element moet worden gebruikt, voeg dan de juiste ARIA-rol (role="link"), focusbaarheid (tabindex="0") en toetsenbordinteractie (Enter/Space) toe, hoewel het gebruik van echte links sterk de voorkeur heeft.
De accordeoncomponenten kunnen niet worden bediend met het toetsenbord. Gebruikers kunnen de accordeonheaders niet activeren, en openen of sluiten met toetsen zoals Tab, Enter of Spatie.
Gebruikers die geen muis kunnen gebruiken, zoals blinde of motorisch beperkte gebruikers, zijn afhankelijk van toetsenbordnavigatie om interactieve elementen te bedienen. Zonder toetsenbordtoegang is de accordeon onbruikbaar voor deze gebruikers.
Zorg dat alle accordeonheaders focusbaar zijn via Tab. Maak het mogelijk om accordeons te openen/sluiten met Enter en/of Space.
Dit component heeft ook andere problemen onder SC 4.1.2. De oplossing zoals daar voorgesteld lost ook dit probleem op omdat deze gebruik maakt van een HTML button.
De begrippenlijst bevat een filter om termen te selecteren (alle / A–Z). De interactie werkt alleen via muiskliks; toetsenbordgebruikers kunnen de filteropties niet bedienen.
Gebruik semantische interactieve elementen (<button> ) voor de filteropties om de semantiek te verbeteren en ze bedienbaar te maken met een toetsenbord. Communiceer ook de actieve selectie op de button via aria-current="true".
De tabel overzicht basisspecificaties op de pagina https://heel-nl.nu/netwerk/decompositie/ bevat in de <th>-rij koppen interactieve elementen, zoals uitklapbare genummerde rijen waarmee extra tabelrijen zichtbaar worden.
Deze interacties zijn alleen met de muis te bedienen en niet bereikbaar of bedienbaar met het toetsenbord. Alle functionaliteit moet via het toetsenbord te bedienen zijn. Omdat de interactie niet focusbaar is en geen toetsenbordafhandeling heeft, kunnen toetsenbordgebruikers de extra informatie niet openen. Maak de interactieve elementen toetsenbordfocusbaar (bijvoorbeeld met een <button>).
Op de pagina https://heel-nl.nu/netwerk/radar/ zijn zowel de "radar" als de alternatieve lijstweergave niet met een toetsenbord te bedienen.. Dit gaat dan om zowel de toggle tussen de opties als de implementaties zelf. Hierdoor hebben toetsenbordgebruikers in zijn geheel geen toegang tot deze informatie.
Gebruik semantisch HTML zoals button elementen om het geheel in een bedienbaar format op te maken. Als alternatief kan ARIA gebruikt worden, maar dan moet er naast de rollen ook gezorgd worden voor de ondersteuning van toetsenbord via JavaScript.
Niveau A
Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.
Noot: Omdat content die niet aan dit succescriterium voldoet het vermogen van een gebruiker om de hele pagina te gebruiken kan belemmeren, moet alle content op de webpagina (ongeacht of deze gebruikt wordt om aan andere succescriteria te voldoen of niet) voldoen aan dit succescriterium. Zie Conformiteitseis 5: Niet-interferentie (w3.org).
De onderzochte steekproef voldoet niet aan dit succescriterium.
In het formulier op pagina https://heel-nl.nu/help-mee/ bevat bij sommige vragen een van de opties binnen een radiogroep een invoerveld. Wanneer dit invoerveld focus krijgt, kan de focus met het toetsenbord alleen nog vooruit worden verplaatst (met Tab) en niet meer achteruit (met Shift+Tab).
Gebruikers moeten met het toetsenbord vrij vooruit én achteruit door alle interactieve elementen kunnen navigeren. Wanneer de focus vastloopt in een element, ontstaat een toetsenbordval. Dit belemmert de bediening van het formulier.
Zorg dat de focusvolgorde correct werkt en dat het invoerveld geen toetsenbordval veroorzaakt. Controleer JavaScript focusmanagement en event-handlers die Shift+Tab blokkeren of overschrijven. Test expliciet of zowel Tab als Shift+Tab correct functioneren.
Niveau A
Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Geef gebruikers genoeg tijd om content te lezen en te gebruiken.
Niveau A
Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:
Noot: Dit succescriterium helpt om ervoor te zorgen dat gebruikers taken kunnen voltooien zonder onverwachte veranderingen in content of context die het resultaat zijn van een tijdslimiet. Dit succescriterium moet in samenhang met Succescriterium 3.2.1 worden beschouwd, dat limieten stelt aan veranderingen van content of context als gevolg van een gebruikersactie.
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau A
Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:
Noot: Voor eisen gerelateerd aan knipperende of flitsende content zie Richtlijn 2.3.
Noot: Omdat content die niet aan dit succescriterium voldoet het vermogen van een gebruiker om de hele pagina te gebruiken kan belemmeren, moet alle content op de webpagina (of ze gebruikt wordt om aan andere succescriteria te voldoen of niet) voldoen aan dit succescriterium. Zie Conformiteitseis 5: Niet-interferentie (w3.org).
Noot: Van content die periodiek door software wordt geactualiseerd of die naar de user agent wordt verzonden, wordt niet vereist dat ze informatie behoudt of weergeeft die gegenereerd of ontvangen wordt tussen het begin van de pauze en het moment van de hervatting van de weergave, aangezien dit technisch wellicht niet mogelijk is en het in veel situaties misleidend is om dit te doen.
Noot: Een animatie die speelt tijdens het laden of een gelijkwaardige situatie, kan als essentieel worden beschouwd als niet tegelijkertijd interactie kan plaatsvinden door alle gebruikers en als het niet aangeven van de voortgang gebruikers zou kunnen verwarren of laten denken dat de content vastgelopen of onvolledig was.
De onderzochte steekproef voldoet aan dit succescriterium.
Advies: de homepage bevat een slider die automatisch wisselt tussen afbeeldingen en tekstblokken met een fade-animatie. Er is geen mechanisme aanwezig om de animatie permanent te pauzeren. De slider stopt wel tijdelijk wanneer het component focus krijgt. Daarnaast reageert de animatie niet op de prefers-reduced-motion mediaquery.
Dit leidt niet tot een afkeuring, omdat de animatie stopt zodra het component focus ontvangt, waardoor gebruikers controle krijgen tijdens interactie.
Automatisch bewegende content kan voor sommige gebruikers (bijvoorbeeld met vestibulaire gevoeligheid, cognitieve beperkingen of concentratieproblemen) wel als storend worden ervaren. Gebruikers die in hun besturingssysteem hebben aangegeven minder beweging te willen, verwachten bovendien dat animaties hierop reageren.
Overweeg de volgende verbeteringen om de gebruikerservaring verder te versterken:
prefers-reduced-motion mediaquery door animaties te verminderen of uit te schakelen voor deze gebruikers, of de slider standaard niet automatisch te laten afspelen wanneer deze voorkeur is ingesteld.
Ontwerp content niet op een manier waarvan bekend is dat die toevallen of fysieke reacties veroorzaakt.
Niveau A
Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.
Noot: Omdat content die niet aan dit succescriterium voldoet het vermogen van een gebruiker om de hele pagina te gebruiken kan belemmeren, moet alle content op de webpagina (ongeacht of deze gebruikt wordt om aan andere succescriteria te voldoen of niet) voldoen aan dit succescriterium. Zie Conformiteitseis 5: Niet-interferentie (w3.org).
De onderzochte steekproef voldoet aan dit succescriterium.
Lever manieren om gebruikers te helpen navigeren, content te vinden en te bepalen waar ze zijn.
Niveau A
Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Op de site is geen mechanisme aanwezig, zoals een skiplink, om herhalende content (bijvoorbeeld de hoofdnavigatie) te omzeilen. Hoewel ARIA-landmarks (header, main, footer) zijn toegepast, is er voor toetsenbordgebruikers zonder screenreader geen directe manier om snel naar de hoofdinhoud van een pagina te navigeren. Zij moeten daardoor bij elke pagina alle herhalende onderdelen zoals het menu doorlopen voordat ze de hoofdinhoud bereiken.
Voeg een zichtbare skiplink toe als eerste focusbare element op de pagina's, die bij focus verschijnt en direct naar de hoofdinhoud (<main>) verwijst.
Niveau A
Webpagina's hebben titels die het onderwerp of doel beschrijven.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Het PDF-document heeft geen ingestelde documenttitel. Hierdoor wordt geen betekenisvolle titel aangeboden aan gebruikers van hulptechnologie of in de documentweergave.
De documenttitel wordt gebruikt door screenreaders, browser-tabs en PDF-lezers om het document te identificeren. Zonder titel is het voor gebruikers lastig om het document te herkennen, vooral wanneer meerdere documenten tegelijk geopend zijn.
Zonder ingestelde titel en weergave wordt de bestandsnaam gebruikt, maar dit wordt niet als betrouwbare bron beschouwd, omdat deze makkelijk aan te passen is en vaak in een minder goed leesbaar format is opgemaakt.
Stel in de documenteigenschappen van de PDF een beschrijvende documenttitel in. Zorg dat de titel de inhoud of het doel van het document duidelijk weergeeft. Controleer ook de instellingen, zodat de titel wordt gebruikt als documenttitel en niet de bestandsnaam.
Dit geldt voor beide onderzochte documenten. Controleer ook andere documenten op de site, bijvoorbeeld door gebruik van PAC.
Niveau A
Als in webpagina's sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Wanneer het menu wordt uitgeklapt, wordt de focus niet beperkt tot de menu-items. Toetsenbord- en screenreadergebruikers kunnen de focus verplaatsen naar andere elementen op de pagina terwijl het menu nog openstaat.
Interactieve componenten zoals modale menu’s of uitklapmenu’s moeten de focus beperken tot hun eigen items wanneer ze actief zijn, zodat gebruikers duidelijk weten waar ze zich bevinden en de interactie logisch blijft. Momenteel kunnen gebruikers per ongeluk buiten het menu navigeren terwijl het menu open is.
Implementeer een focus-val, zodat de focus binnen het open menu blijft totdat deze wordt gesloten. Zorg dat de focus terugkeert naar de menuknop wanneer het menu wordt gesloten.
Niveau A
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis kan hebben voor gebruikers in het algemeen.
De onderzochte steekproef voldoet niet aan dit succescriterium.
Op de pagina https://heel-nl.nu/nieuws/ bestaat elk kaartje in het overzicht uit een afbeelding, koptekst en introductietekst. De links naar de volledige artikelen gebruiken allemaal dezelfde, generieke tekst: “Lees meer”. Hierdoor is het doel van elke link niet duidelijk zonder de context van de omliggende tekst te lezen.
Screenreadergebruikers en andere hulptechnologieën navigeren vaak via een lijst van links. Generieke linkteksten zoals “Lees meer” geven geen informatie over waar de link naartoe leidt, waardoor navigatie en begrip van de inhoud moeilijker worden.
Maak de linktekst uniek en beschrijvend, zodat het linkdoel duidelijk is, bijvoorbeeld door de titel van het artikel op te nemen. Dit kan beschrijvend, maar ook via een aria-label waarin ook de titel is opgenomen, of via aria-describedby waarmee een relatie gelegd wordt tussen de link en de titel van het artikel.
Niveau AA
Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Koppen en labels beschrijven het onderwerp of doel.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.
De onderzochte steekproef voldoet niet aan dit succescriterium.
De bedieningsknoppen van de slider (om tussen slides te navigeren) hebben geen duidelijke zichtbare focusindicatie. Bij toetsenbordfocus verandert alleen de opacity van 0,75 naar 1. Hierdoor worden de knoppen wit in plaats van een lichte tint van de onderliggende slidekleur. In geen van de situaties is het contrastverschil voldoende om focus duidelijk waarneembaar te maken. De standaard focusindicatie van de browser is voor deze knoppen uitgeschakeld.
Voeg een duidelijke, contrastrijke focusstijl toe, zoals een outline, rand of achtergrond met voldoende contrast. Het herstellen van de standaard focus outline is voldoende.
Zorg dat een custom focusindicatie duidelijk zichtbaar is ongeacht de onderliggende slidekleur.
De formulierelementen op de pagina hebben geen (of een onvoldoende) zichtbare focusindicatie wanneer ze met het toetsenbord worden bereikt. Hierdoor is niet te zien welk element momenteel focus heeft.
Toetsenbordgebruikers navigeren door een pagina met de Tab-toets. Een zichtbare focusindicator is essentieel om te kunnen volgen waar men zich op de pagina bevindt. Zonder focusindicatie raakt de gebruiker de oriëntatie kwijt.
Zorg dat alle interactieve formulierelementen een duidelijke en contrastrijke focusstijl hebben die zichtbaar is bij toetsenbordnavigatie. Momenteel wordt de CSS outline: none; toegepast op alle textarea-, input- en buttonelementen. Verwijder de standaard focusstijl niet zonder een gelijkwaardig alternatief toe te voegen.
Niveau AA
Wanneer een component van de gebruikersinterface de toetsenbordfocus krijgt, wordt die component niet volledig bedekt door de content die door de auteur is gecreëerd.
Noot 1: Waar content in een configureerbare interface door de gebruiker kan worden verplaatst, worden alleen de oorspronkelijke posities van door de gebruiker verplaatsbare content beoordeeld bij testen en conformiteit met dit succescriterium.
Noot 2: Content die de gebruiker opent, kan de component die focus ontvangt bedekken. Als de gebruiker de gefocuste component zichtbaar kan maken zonder de toetsenbordfocus te verplaatsen, wordt de component met focus niet beschouwd als bedekt door de content die door de auteur is gecreëerd.
De onderzochte steekproef voldoet niet aan dit succescriterium.
In de header bevindt zich een zoekfunctie die standaard verborgen is. Ondanks dat deze niet is uitgeklapt, kan de toetsenbordfocus toch op interactieve elementen binnen deze verborgen zoekfunctie terechtkomen. Hierdoor bevindt de focus zich op een element dat niet zichtbaar is voor de gebruiker.
Toetsenbordgebruikers moeten altijd kunnen zien waar de focus zich bevindt. Wanneer focus terechtkomt op verborgen content, raakt de gebruiker de oriëntatie kwijt en is het niet duidelijk welk element actief is.
Zorg dat interactieve elementen binnen de verborgen zoekfunctie niet focusbaar zijn zolang de zoekfunctie gesloten is (bijvoorbeeld door display: none, hidden ). Maak de elementen pas focusbaar wanneer de zoekfunctie daadwerkelijk wordt uitgeklapt.
Maak het eenvoudiger voor gebruikers om de functionaliteit te bedienen met andere vormen van invoer dan alleen het toetsenbord.
Niveau A
Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.
Noot: Deze eis is van toepassing op webcontent die acties met de aanwijzer interpreteert (NB: dit geldt niet voor acties die vereist zijn om de user agent of hulptechnologie te bedienen).
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau A
Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:
Noot: Functies die het indrukken van een toets op het toetsenbord of het numeriek toetsenbord nabootsen, worden als essentieel beschouwd.
Noot: Deze eis is van toepassing op webcontent die acties met de aanwijzer interpreteert (dus dit geldt niet voor acties die vereist zijn om de user agent of hulptechnologie te bedienen).
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
Noot: Een best practice is om de naam te laten beginnen met de tekst van het label.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
Alle functionaliteit die voor de bediening gebruik maakt van een sleepbeweging kan worden bereikt door een enkele aanwijzer zonder slepen, tenzij slepen essentieel is of de functionaliteit wordt bepaald door de user agent en niet wordt aangepast door de auteur.
Noot: Deze eis is van toepassing op webcontent die acties met de aanwijzer interpreteert (d.w.z.: dit geldt niet voor acties die vereist zijn om de user agent of hulptechnologie te bedienen).
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
De grootte van het aanwijsgebied voor aanwijzerinvoer is ten minste 24 bij 24 CSS pixels, behalve in de volgende gevallen:
Noot 1: Aanwijsgebieden waarmee waarden ruimtelijk kunnen worden geselecteerd op basis van de positie binnen het gebied, worden beschouwd als 1 aanwijsgebied voor het succescriterium. Voorbeelden zijn schuifregelaars, kleurenkiezers die een kleurverloop weergeven, of bewerkbare gebieden waar je de cursor in kunt positioneren.
Noot 2: Voor inline aanwijsgebieden moet de regelhoogte worden geïnterpreteerd als zijnde loodrecht op de tekstrichting. Bijvoorbeeld, bij een taal die verticaal wordt weergegeven, zou de regelhoogte horizontaal zijn.
De onderzochte steekproef voldoet aan dit succescriterium.
Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.
Maak tekstcontent leesbaar en begrijpelijk.
Niveau A
De standaard menselijke taal van diverse webpagina's kan door software bepaald worden.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.
De onderzochte steekproef voldoet niet aan dit succescriterium.
De knoppen van de slider om tussen slides te navigeren zijn aangeduid met Engelstalige teksten (“Previous” en “Next”), terwijl de rest van de pagina Nederlandstalig is. Deze knoppen zijn niet als Engelstalig gemarkeerd met een lang="en"-attribuut.
Wanneer onderdelen een andere taal gebruiken dan de hoofdtaal van de pagina, moet dit programmatisch worden aangegeven. Zonder taalmarkering kunnen screenreaders de tekst verkeerd uitspreken. Daarnaast ontstaat een inconsistente en verwarrende gebruikerservaring door het mengen van talen.
Pas bij voorkeur de teksten van de knoppen aan naar het Nederlands (bijvoorbeeld “Vorige” en “Volgende”), of markeer de Engelstalige tekst expliciet met lang="en" als deze Engelstalig blijft.
Maak het uiterlijk en de bediening van webpagina's voorspelbaar.
Niveau A
Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau A
Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Als een webpagina een van de volgende hulpmechanismen bevat, en die mechanismes op meerdere webpagina's binnen een verzameling webpagina's worden herhaald, dan komen ze in dezelfde relatieve volgorde voor ten opzichte van andere paginacontent, tenzij een wijziging wordt geïnitieerd door de gebruiker:
Noot 1: Hulpmechanismen kunnen direct op de pagina worden aangeboden, of kunnen worden aangeboden via een directe link naar een andere pagina met die informatie.
Noot 2: Voor dit succescriterium kan 'dezelfde relatieve volgorde ten opzichte van andere paginacontent' worden gezien als hoe de content is geordend wanneer de pagina onderdeel is van een serie pagina's. De visuele positie van een hulpmechanisme is doorgaans consistent bij pagina's met dezelfde paginavariant (bijv. CSS-break-point). De gebruiker kan een wijziging initiëren, zoals het wijzigen van de zoom of de oriëntatie van de pagina. Dat kan een andere paginavariant veroorzaken. Dit criterium heeft betrekking op de relatieve volgorde binnen pagina's die worden weergegeven in dezelfde paginavariant (bijv. hetzelfde zoomniveau en oriëntatie).
De onderzochte steekproef voldoet aan dit succescriterium.
Help gebruikers om fouten te vermijden en ze te verbeteren.
Niveau A
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau A
Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.
De onderzochte steekproef voldoet niet aan dit succescriterium.
In het formulier op bijvoorbeeld https://heel-nl.nu/help-mee/ hebben invoervelden geen permanent zichtbaar label. De velden gebruiken alleen placeholdertekst om aan te geven welke invoer wordt verwacht.
Placeholdertekst is geen vervanging voor een label. De tekst verdwijnt zodra de gebruiker begint met typen en wordt door hulptechnologie niet altijd als label aangekondigd. Vanaf het moment dat de placeholdertekst verdwijnt, is er ook geen zichtbaar tekstlabel meer aanwezig.
Hierdoor is het voor gebruikers onduidelijk wat er in een veld moet worden ingevuld. Gebruikers met cognitieve beperkingen kunnen de context van het veld verliezen zodra zij beginnen met typen.
Voorzie elk invoerveld van een zichtbaar <label> dat programmatisch is gekoppeld aan het invoerveld via het for- en id-attribuut.
Niveau AA
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.
De onderzochte steekproef voldoet aan dit succescriterium.
Niveau AA
Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door gebruikers bedienbaar gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt ten minste één van de volgende zaken:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau A
Informatie die eerder is ingevoerd door of aangeboden aan de gebruiker en opnieuw moet worden ingevoerd tijdens hetzelfde proces is:
Behalve wanneer:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Niveau AA
Een cognitieve functietest (zoals het onthouden van een wachtwoord of het oplossen van een puzzel) is bij geen enkele stap van een authenticatieproces verplicht, tenzij die stap ten minste een van de volgende opties biedt:
Noot 1: 'Objectherkenning' en 'Persoonlijke content' kunnen worden weergegeven door afbeeldingen, video of audio.
Noot 2: Voorbeelden van mechanismen die aan dit criterium voldoen, omvatten:
Dit succescriterium is niet van toepassing op de onderzochte steekproef.
Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën.
Maximaliseer compatibiliteit met huidige en toekomstige user agents, met inbegrip van hulptechnologieën.
Niveau A
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
Noot: Dit succescriterium is primair voor webauteurs die hun eigen componenten van de gebruikersinterface ontwikkelen of scripten. Standaard bedieningselementen in HTML bijvoorbeeld voldoen al aan dit succescriterium als ze gebruikt worden volgens specificatie.
De onderzochte steekproef voldoet niet aan dit succescriterium.
In de header staat een element dat dient om de zoekfunctie te tonen of te verbergen. Dit element is opgemaakt als een link (<a>), terwijl het functioneert als een knop. Daarnaast heeft het element geen toegankelijke naam en wordt de status (of de zoekfunctie zichtbaar is of niet) niet programmatisch aangeduid.
Een element moet in de code dezelfde rol hebben als de functie die het uitvoert. Wanneer een link wordt gebruikt als knop, herkennen hulptechnologieën de juiste rol niet. Zonder toegankelijke naam is het doel van het element onduidelijk, en zonder statusaanduiding weten gebruikers niet of de zoekfunctie is geopend of gesloten.
Gebruik een <button>-element in plaats van een link voor het tonen/verbergen van de zoekfunctie. Geef de knop een duidelijke toegankelijke naam, bijvoorbeeld "Zoeken". Markeer de status programmatisch, bijvoorbeeld met aria-expanded, en koppel de knop aan het zoekveld met aria-controls.
Op de pagina zijn componenten die visueel als accordeons functioneren. In de code zijn deze echter niet semantisch als accordeon gemarkeerd, waardoor naam, rol en waarde ontbreken. Dit betekent dat hulptechnologieën de interactieve structuur en status van de accordeons niet kunnen interpreteren.
Accordeons bestaan uit interactieve headers die contentpanelen tonen of verbergen. Zonder juiste semantiek kan een screenreader niet aangeven dat een element een accordeonheader is of of het paneel geopend of gesloten is. Dit maakt de component onbegrijpelijk voor gebruikers die afhankelijk zijn van assistieve technologie.
Screenreadergebruikers weten niet welke elementen accordeons zijn of wat hun status is (open/gesloten). Navigeren en het openen/sluiten van de juiste panelen wordt moeilijk of onmogelijk.
Implementeer de accordeons met de juiste ARIA-rollen en attributen, zoals button voor de header, aria-expanded om de status aan te geven, en aria-controls om het gekoppelde paneel te verbinden. Zorg daarnaast dat de panelen via role="region" en aria-labelledby correct gelabeld zijn.
De tabel overzicht basisspecificaties op de pagina https://heel-nl.nu/netwerk/decompositie/ bevat in de <th>-rij koppen interactieve elementen, zoals uitklapbare genummerde rijen waarmee extra tabelrijen zichtbaar worden.
De interactieve elementen zijn niet semantisch gecodeerd en daardoor niet als interactieve componenten herkenbaar voor hulptechnologie en hebben geen rol of status (bijvoorbeeld ingeklapt/uitgeklapt).
Hulptechnologie kan alleen correct communiceren met gebruikers wanneer interactieve componenten een duidelijke rol (zoals knop), naam en actuele status hebben. Doordat deze ontbreken, is de interactie niet begrijpelijk of bedienbaar voor screenreaders.
Gebruik een semantisch correct interactief element, zoals <button>, binnen de tabelkop. De huidige tekst kan dienen als de naam. Geef de status programmatisch door met aria-expanded. Zorg dat de relatie tussen de knop en de nieuwe extra rijen duidelijk is door ze te verbinden met aria-controls.
Niveau AA
In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.
De onderzochte steekproef voldoet aan dit succescriterium.
Het toegankelijkheidsonderzoek is opgesteld en uitgevoerd conform de WCAG-EM evaluatiemethode van het W3C. Dat betekent dat een representatieve steekproef is verzameld binnen de bepaalde scope.
Opgenomen in de steekproef van dit onderzoek:
Binnen de steekproef zijn ook de volgende documenten onderzocht: