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
Provincie Fryslân
Evaluatiedatum
20 juni 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 29 van de 55 criteria voor toegankelijkheid (23 van de 50 verplichte criteria). Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat er geen afbeeldingen van tekst worden gebruikt en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Onjuist opgemaakte koppen
Te laag contrast van tekst
Bij inzoomen is niet alle content meer beschikbaar
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
Website naam
investeringskaderwaddengebied.nl
Scope van de website
Alle pagina's op https://www.investeringskaderwaddengebied.nl/.
Alle pagina's op https://ikwmagazine.nl/.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
16Voldoende
26Onvoldoende
13Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Projecten overzicht
Uitkomst: Onvoldoende
Project Kornwerderzand
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Uitkomst: Onvoldoende
Random pagina 2: Project Centrum Gastvrij Schiermonnikoog
Uitkomst: Onvoldoende
Homepage
Achter het formulier voor de nieuwsbrief staat een decoratieve foto. Deze heeft een rol van image, waardoor deze door screenreaders wordt herkend. Er is echter geen alt attribuut (voor een alternatieve tekst). Dit kan resulteren in het voorlezen van de bestandsnaam. Aangezien dit een decoratieve afbeelding is, kan deze beter worden verborgen voor hulpsoftware. Dat kan hier door de rol te verwijderen (de afbeelding wordt al geplaatst via CSS). Dit komt ook voor bij headerfoto’s zoals op de pagina Over het IKW.
De logo’s in de footer onder ‘Een initiatief van’ hebben een lege alt-tekst, maar deze afbeeldingen zijn niet decoratief. Deze informatie is nu niet beschikbaar voor screenreadergebruikers. Geef deze logo’s alternatieve teksten met de volledige teksten die op de afbeeldingen zichtbaar zijn.
Projecten overzicht
Bovenaan de pagina staat een logo van het Investeringskader Waddengebied. De alternatieve tekst luidt ‘Magazine Waddengebied’. Dit is niet wat er op de afbeelding te zien is. Screenreadergebruikers krijgen hierdoor andere informatie. Pas de alt-tekst aan met wat er op de afbeelding staat.
De logo’s in de footer hebben een lege alt-tekst, maar deze afbeeldingen zijn niet decoratief. Deze informatie is nu niet beschikbaar voor screenreadergebruikers. Geef deze logo’s alternatieve teksten met de volledige teksten die op de afbeeldingen zichtbaar zijn.
Project Kornwerderzand
In de footer staat een logo van het investeringskader Waddengebied. Deze afbeelding heeft geen alt-attribuut. Logo’s zijn informatieve afbeeldingen en hebben daarom altijd een alternatieve tekst nodig die de tekst op de afbeelding bevat.
PDF Meerjarenprogramma IKW 2021 en verder
De afbeeldingen in het document missen een alternatieve tekst. Afbeeldingen van content zoals logo’s hebben een goede omschrijving nodig. De decoratieve afbeeldingen kunnen het best als artifact worden gemarkeerd, zodat screenreaders ze niet voorlezen.
Random pagina 2: Project Centrum Gastvrij Schiermonnikoog
Onderaan de pagina staat een projectfoto zonder alt-attribuut. Geef deze afbeelding een alternatieve tekst met beschrijving van de persoon.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
De video heeft geen goede ondertiteling. De automatisch gegenereerde ondertiteling bevat veel fouten. Voeg een correcte ondertiteling toe.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
Aan het begin van de video komt de naam van de spreker in beeld. Deze wordt niet uitgesproken, waardoor bezoekers die niet kunnen zien, deze informatie missen. Voeg hiervoor audiodescriptiespoor toe of een tekstalternatief, zoals een beschrijving onder de video. Omdat het hier om één spreker gaat, en deze informatie dus niet tijdgevoelig is, kan een tekstalternatief voldoende zijn (ook voor 1.2.5).
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Opgaveteams
Uitkomst: Onvoldoende
Nieuwsartikel Kleirijperij (tabel)
Uitkomst: Onvoldoende
Projecten overzicht
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Uitkomst: Onvoldoende
Homepage
De pagina heeft geen logische koppenstructuur. Het start met een h2 ‘Investeringskader Waddengebied’ en daarna een h1 ‘Nieuws’. Het zou logischer zijn als dit andersom zou staan. Doordat ‘Nieuwsberichten’ nu een h1 heeft, vallen alle onderdelen erna hieronder. De nieuwsitems zelf hebben h6-koppen (deze zouden 1 niveau lager moeten staan dan de Nieuws kop), en daarna volgen h3-koppen zoals ‘De thema’s’. De kopjes in de footer hebben h6-niveau en vallen daardoor onder de laatste h3-kop ‘Inschrijven Nieuwsbrief’, wat qua betekenis niet klopt. Zie screenshot 3. Dit komt op meerdere pagina’s voor. Screenreadergebruikers navigeren vaak via koppen. Zorg daarom voor een goede koppenhiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan.
Opgaveteams
De tussenkopjes van de teams worden in de code opgemaakt met het strong-element in plaats van met kopelementen. Screenreadergebruikers die navigeren via koppen missen deze nu. Maak hier kopelementen van. Dit komt op meerdere pagina’s voor, ook bij bijvoorbeeld Documenten. Een logische indeling hier zou zijn om een h1-kop te gebruiken voor ‘Opgaveteams’ en h2-kopjes voor de teams. De kopjes in de footer kunnen h2-niveau krijgen of h3 met een h2 als (verborgen) ‘footerkop’, bijvoorbeeld ‘Over het IKW’.
Nieuwsartikel Kleirijperij (tabel)
De eerste paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen.
De tussenkopjes op deze pagina zoals ‘ Samenwerking tussen veel partijen‘ worden ook opgemaakt met het strong-element. Maak hier kopelementen van.
Onder ‘Bijdrage Waddenfonds’ staat een tabel met visueel een rij kopcellen. Deze zijn niet als kopcel maar als datacel opgemaakt. Maar hier kopcellen (th) van zodat screenreaders ze ook als kop kunnen voorlezen en het juiste bedrag bij de juiste kop kunnen noemen.
Projecten overzicht
In de footer staat een pay-off tekst die opgemaakt is met een h4-element. Dit is geen kop waarachter content volgt. Dit element kan beter geen kopopmaak hebben.
Project Holwerd aan zee (video)
Er zijn meerdere koppen op de pagina niet als kop opgemaakt: de grote kop ‘Getijdenmeer’ en de tussenkopjes zoals ‘Steeds meer duidelijkheid’. De quote onderaan de pagina is wel als kop opgemaakt, maar dit hoort geen kop te zijn, maar bijvoorbeeld een quote of blockquote element. Soortgelijke issues komen meerdere pagina’s voor, zoals op de pagina Over ons en Project Centrum Gastvrij Schiermonnikoog.
Onderaan elke projectpagina staat een lijstje met bedragen. Deze zijn niet als lijst opgemaakt, maar als paragrafen, wat hier niet correct is. Maak hier een lijst van (ul- of dl-element).
PDF Meerjarenprogramma IKW 2021 en verder
Koppen in het document zoals de hoofdstukkoppen zijn niet als kop opgemaakt, maar als paragraaf. Maak hier kopelementen van met een logische opbouw in niveaus. Deze kunnen dan ook gebruikt worden om bookmarks te genereren, zodat er gemakkelijker door het document genavigeerd kan worden.
De kopcellen in de tabel op pagina 10 zijn niet als kop opgemaakt, maar als datacellen. Hierdoor is het voor een screenreadergebruiker lastig om te weten welke data bij elkaar horen. Maak hier kolomkoppen en eventueel ook rijkoppen van.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De invoervelden voor persoonlijke informatie bij het aanmelden voor de nieuwsbrief 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.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Voldoende
Opgaveteams
Uitkomst: Voldoende
Opgaveteams
Opmerking: De links worden alleen met een verschil in kleur aangegeven. Omdat het contrast tussen de links en de omliggende tekst meer dan 3:1 is, wordt dit hier toegestaan. Echter, slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijk te maken. Zie screenshot 1 en screenshot 2 voor een vergelijking met en zonder duidelijke kleuren. Dit geldt ook voor de gele links op de projectpagina’s zoals bij Over ons.
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.
Het actieve menu-item (lichtblauw, 3:1)
De tag ‘Nieuws’ boven artikelen (lichtblauw, 3:1)
De grijze tekst in de footer onder Contact (grijs op blauw, 3.1:1)
Homepage: de labels bij het inschrijven voor de nieuwsbrief (lichtgrijs op foto, rond de 3:1), de ingevoerde tekst (2.8:1)
De knoppen zoals ‘Lees meer’ (wit op lichtblauw, rond 2.5:1)
Tekstlinks zoals onder De Thema’s (3:1)
Projectenoverzicht: alle drie kleurcombinaties voor links: Voorwoord en Over ons (2.12:1 en op hover 1.6:1); In uitvoering (3.77:1); Gerealiseerd (2.49:1)
Project Kornwerderzand: de link in de tekst (2.12:1)
Random pagina 2: Project Centrum Gastvrij Schiermonnikoog : De tekst Project Gerealiseerd (2.52:1) en De expositie over de Natuur en Cultuur op het eiland (2.49:1)
Projecten Over ons: De tekst ‘Organisatie’ (Korrelige letters, 1.8:1)
Op verschillende plekken en resoluties vallen titels over foto’s heen. Hierbij is het contrast niet op alle plekken voldoende. Bijvoorbeeld op project Kornwerderzand op 150% ingezoomd.
Witte tekst op groene achtergrond in de PDF Meerjarenprogramma IKW 2021 en verder (pagina 1), de groene koppen zoals op pagina 3, de blauwe teksten zoals op pagina 23.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Nieuwsartikel Kleirijperij (tabel)
Uitkomst: Onvoldoende
Projecten overzicht
Uitkomst: Onvoldoende
Project Holwerd aan zee (video)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Homepage
het hoofdmenu wordt deels onbereikbaar en de titel slecht leesbaar bij inzoomen. Zie screenshot 5 (150% ingezoomd).
Nieuwsartikel Kleirijperij (tabel)
De tabel wordt deels onzichtbaar bij inzoomen. Er kan ook niet naartoe gescrolld worden.
Projecten overzicht
De titel bovenaan valt deels buiten beeld op 150% ingezoomd. Zie screenshot 7. Dit komt op meerdere pagina’s voor bij grotere koppen. (Op mobiel in landschapsmodus doet zich dit probleem ook voor.)
Project Holwerd aan zee (video)
De navigatie onderaan valt deels buiten beeld op 200%.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Homepage: boven de 200% ingezoomd verdwijnt de inleidende tekst. De pagina start met de nieuwsberichten.
Boven de 200% komt er een ander hoofdmenu, zonder submenu’s. Deze onderliggende pagina’s (bijvoorbeeld ‘Opgaveteams’ onder ‘Over het IKW’) zijn nu niet meer bereikbaar.
Op 400% loopt de menuknop door de titel heen. Zie screenshot 8.
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.
De knop van het mobiele menu (2.1:1 t.o.v. de pagina-achtergrond, 2.6:1 de streepjes van het icoon t.o.v. de achtergrond van het icoon). Hetzelfde geldt voor de ‘naar boven’ knop wanneer je bent ingezoomd.
Projectenoverzicht: de vorige knop (groen pijltje, 1.6:1)
1.4.12: Tekstafstand
Hele sample
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: het menu valt deels buiten beeld; de ‘lees meer’-link valt over de inleidende tekst heen. Zie screenshot 9.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De submenu’s, welke openen op mouseover of focus, 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 over iets heen valt, 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. Zie screenshot 6 voor een voorbeeld waarbij het menu over content heen blijft vallen. (De focus op de Waddenzee-link is tijdens het onderzoek zichtbaar gemaakt via een plugin.)
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer je bent ingezoomd boven de 200% komt er een menuknop voor het hoofdmenu. Deze is niet te gebruiken met het toetsenbord. De focus op de knop komt pas na de footer in plaats van in het begin van de pagina, en de focus komt na het openen niet in het menu terecht.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Nieuwsartikel sfeerimpressie (video)
Uitkomst: Onvoldoende
Nieuwsartikel sfeerimpressie (video)
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. Dit komt ook voor op de pagina Project Holwerd aan Zee.Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
In de header worden afwisselend verschillende foto’s getoond. Deze beweging is niet te stoppen of te pauzeren. Dit is hinderlijk voor mensen die bijvoorbeeld concentratieproblemen hebben of ADHD. De beweging leidt erg af van de tekst. Zorg ervoor dat er een mechanisme komt om de carrousel stop te zetten, bijvoorbeeld een pauzeknop.
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Voldoende
Projecten overzicht
Uitkomst: Voldoende
Projecten overzicht
Opmerking: de projectenpagina’s hebben een ‘skip to main content’-link, maar er zijn hier geen herhalende blokken om te omzeilen. Deze link heeft hier dus geen nut. Zo’n skiplink zou op de andere pagina’s van https://www.investeringskaderwaddengebied.nl/ wel nuttig zijn, omdat er een groot hoofdmenu is die dan gemakkelijker omzeild kan worden (zet deze linktekst bij voorkeur dan wel in het Nederlands). Zie screenshot 4.
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s 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.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
Wanneer je ‘Laad meer items’ activeert en dan verder navigeert, slaat de focus de nieuwe items over en gaat meteen naar de Thema’s. Zorg dat de focus op het eerste nieuw geladen item komt te staan.
Opmerking: per nieuwsitem komt de focus drie keer op dezelfde link, via de afbeelding, de titel en de ‘lees meer’-link. Dit zorgt voor veel overbodige kliks. Beter is het om per item maar 1 keer de focus er op te zetten.
Wanneer je bent ingezoomd boven de 200%, komt de focus bovenaan de pagina op meerdere verborgen onderdelen voordat je bij de zichtbare nieuwslinks komt. Zorg dat de focus alleen komt op onderdelen die visueel beschikbaar zijn.
De focus op de knop voor het mobiele menu komt pas aan het eind van de pagina. Zorg dat deze focus ontvangt aan het begin van de pagina (in de header), wanneer je dit verwacht.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
Er zijn meerdere links op de pagina met de tekst ‘Lees meer’ en ‘Lees verder’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina, zoals de kop van het artikel. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html. Voor de nieuwsitems kan het ook worden verbeterd door per item maar één link te coderen (bij voorkeur om de titel), en deze als geheel blok aanklikbaar te maken via CSS of Javascript. Zie ook 2.4.3.
De links naar de initiatiefnemers in de footer hebben geen duidelijk doel. Er staan aria-labels op zoals ‘logo prov nh zw’, waardoor dit ook de linkteksten worden. Geef deze links teksten die het doel duidelijk maken, zoals ‘Provincie Noord-Holland’.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Onvoldoende
PDF Brochure magazine Blijven investeren in het Waddengebied (2024)
Uitkomst: Voldoende
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. Bied naast het hoofdmenu nog een tweede optie aan, bijvoorbeeld een algemene zoekfunctie.
PDF Brochure magazine Blijven investeren in het Waddengebied (2024)
Opmerking: voor langere documenten zoals deze wordt aangeraden bookmarks aan te bieden om gemakkelijker door het document te navigeren. Deze bookmarks kunnen worden gegenereerd aan de hand van aanwezige koppen in het document.
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De link naar boven (achter het pijltje) heeft als label ‘Back to top’. Dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse tekst van.
Dit geldt ook voor de links ‘previous post’ en ‘next post’ op de projectpagina’s zoals op project Kornwerderzand.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De focus op de meeste links is niet zichtbaar, bijvoorbeeld op de nieuwstitels en de ‘Lees meer’-links en de links in de footer. Ziende toetsenbordgebruikers weten nu niet wanneer ze welke elementen kunnen activeren. Zorg voor een duidelijke eigen focusstijl of overschrijf de standaard browserstijl niet door de outline op ‘none’ te zetten (wat hier het geval is.)
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Voldoende
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De links in de footer naar de organisaties hebben een andere naam dan wat er te zien is op de logo’s. Hierdoor is het lastig deze links met stem te bedienen. Zorg dat de toegankelijke naam (hier het aria-label op de link) tenminste de zichtbare tekst bevat.
Bij de social media links is de toegankelijke naam achter ‘X’ nog ‘Twitter’. Zorg dat deze overeenkomen.
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
2.5.7: Dragging Movements
Hele sample
Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample
Uitkomst: Voldoende
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Uitkomst: Onvoldoende
PDF Meerjarenprogramma IKW 2021 en verder
Het document heeft niet de juiste taal gespecificeerd, deze staat op Engels. Screenreaders lezen de pdf nu mogelijk niet goed 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.2.6: Consistent Help
Hele sample
Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
In het formulier voor de nieuwsbrief wordt er alleen de standaard browser validatie gebruikt: hoe deze getoond wordt is afhankelijk van de browser. Hierdoor is niet goed te testen of deze wel altijd toegankelijk getoond wordt. Soms blijft een melding bijvoorbeeld maar heel kort in beeld, of wordt deze in Engels getoond. Zie screenshot 10. Zorg zelf voor een goede en toegankelijke clientvalidatie met goede teksten over wat er fout gaat.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De betekenis van de asterisk (*) voor het (enige) verplichte veld bij de nieuwsbrief wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
In het formulier voor de nieuwsbrief worden geen duidelijke verbetersuggesties gegeven, doordat er alleen de standaardbrowservalidatie is gebruikt. Geef met een Nederlandse tekst aan hoe het emailadres moet worden ingevuld.
De links in het hoofdmenu waarmee submenu’s kunnen worden uitgeklapt geven geen status aan of het geopend of gesloten is. Dit kan worden opgelost door het ‘aria-expanded’ attribuut toe te voegen.
De knop waarmee het menu kan worden uitgeklapt wanneer je bent ingezoomd (het mobiele menu), geeft geen status aan of het geopend of gesloten is. Dit kan worden opgelost door het ‘aria-expanded’ attribuut toe te voegen.
