Issues:
Audit digitale toegankelijkheid website kaartenvannederland.nl

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op alle pagina’s van https://kaartenvannederland.nl staat bovenaan de website het logo met de tekst “Ministerie van Volkshuisvesting en Ruimtelijke Ordening”. De alt-tekst is nu alleen “Rijksoverheid logo”. Het tekstalternatief bevat dus niet de volledige tekst die in het logo zichtbaar is. Dit moet wel. Zo weten ook bezoekers die het plaatje niet kunnen zien, precies wat er staat. Pas de alt-tekst aan naar: “Ministerie van Volkshuisvesting en Ruimtelijke Ordening”. Als het logo geen link is, voeg dan het woord “logo” toe aan het tekstalternatief. Dit probleem hoort ook bij succescriterium 2.5.3.

Bevinding 2: Op de homepage https://kaartenvannederland.nl verschijnen op een klein scherm twee knoppen met pictogrammen onderaan de kaart. Deze pictogrammen hebben geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van die afbeelding de functie van de knop beschrijven. Voeg daarom een beschrijving toe via een aria-label of via tekst die visueel verborgen is, maar wel toegankelijk is voor een schermlezer.

Bevinding 3: Op de homepagina, https://kaartenvannederland.nl, staat boven de kaart een knop met een pictogram van drie horizontale lijnen. Deze knop opent extra inhoud met een afbeelding van de kaartlegenda. Dit is een complexe afbeelding met als korte alternatieve tekst: “dit is de legenda van BRT Achtergrond”. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet past binnen de 150 tekens van de alternatieve tekst. Deze informatie kan toegankelijk gemaakt worden door twee tekstalternatieven te geven: een korte en een lange beschrijving. De korte beschrijving, meestal de alternatieve tekst, moet aangeven waar de lange beschrijving te vinden is. De lange beschrijving kan als tekst op de pagina zelf worden geplaatst, maar ook op een andere pagina of in een downloadbaar bestand.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Op de homepagina, https://kaartenvannederland.nl, staat in het hoofdmenu een link “Veelgestelde vragen”. Deze tekst is geen kop, maar is onterecht gemarkeerd met een h2-element. Het kop-element is hier niet betekenisvol gebruikt, omdat er geen inhoud onder staat. Door het h-element krijgt de tekst wel de functie van een kop, terwijl dat niet klopt. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg er daarom voor dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h-element en gebruik bijvoorbeeld een p-element. Hetzelfde probleem doet zich voor bij links, zoals “Verbeter de Kaart” in de extra inhoud, die de link “Handige links” opent.

Bevinding 5: Op de homepagina, https://kaartenvannederland.nl, staat in het hoofdmenu een link “Veelgestelde vragen” die een dialoogvenster opent met secties met verborgen inhoud. In deze secties zijn de elementen waarmee je de inhoud kunt in- en uitklappen, niet gemarkeerd als kop. De teksten waarmee je delen van een accordeon kunt openen en sluiten, functioneren als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop krijgen. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop behouden blijft.

Bevinding 6: Op de homepagina, https://kaartenvannederland.nl, staat een knop “Standaard” die extra inhoud opent. In deze inhoud zijn de teksten “Kaartlagen” en “Opties” niet als kop gemarkeerd. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers de inhoud scannen of snel naar een sectie navigeren. Dat werkt alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven, bijvoorbeeld vetgedrukt, ontstaat een probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS, zodat de HTML-code voor de kop automatisch wordt toegepast.

Bevinding 7: Op de homepagina, https://kaartenvannederland.nl, opent de knop “Standaard” aanvullende inhoud met een groep selectievakjes, voorafgegaan door de tekst “Opties”. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Opties”.

Bevinding 8: Op de homepagina, https://kaartenvannederland.nl, opent de knop “Standaard” extra inhoud met een groep keuzerondjes. Deze groep heeft het label “Kaartlagen”, maar dit label is in de code niet gekoppeld aan de groep. Daardoor begrijpen gebruikers met een schermlezer de samenhang niet. Koppel het label aan de groep, bijvoorbeeld met aria-labelledby, of maak de groep goed op met fieldset en legend met de tekst “Kaartlagen”.

Bevinding 9: Op de homepagina, https://kaartenvannederland.nl, opent de link “Veelgestelde vragen” een dialoogvenster met secties met verborgen inhoud. Deze secties staan in een tablist-element dat ongeldige kindelementen bevat, namelijk button. Boven de kaart speelt hetzelfde probleem bij zes knoppen met pictogrammen. Gebruik in een tablist alleen tab-elementen (of elementen met role=“tab”) en zorg voor de juiste koppeling met role=“tablist”, role=“tab” en aria-controls, of kies een passend patroon zonder tablist als het geen tabs zijn.

Bevinding 10: Op de homepagina, https://kaartenvannederland.nl, staat in het hoofdmenu een link “Handige links” die aanvullende inhoud opent met een groep links. Deze groep links wordt visueel gepresenteerd als een groep, maar deze groepering is niet terug te zien in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 11: Op de homepagina, https://kaartenvannederland.nl, staat in het hoofdmenu een link “Veelgestelde vragen” die een dialoogvenster opent met secties met verborgen inhoud. In sommige secties staan blauwe links (HEX #0D6EFD) op een grijze achtergrond (HEX #F3F3F3), zoals “Contact” en “Verbeter de Kaart”. De contrastratio is 4,1:1 en daarmee te laag. Omdat deze tekst kleiner is dan 24 px en niet vet is, moet het contrast minimaal 4,5:1 zijn.

Bevinding 12: Op de homepagina, https://kaartenvannederland.nl, staat boven de kaart een knop met een printericoon. Na een klik verschijnt een formulier met de knop “Maak PDF”. Als deze knop toetsenbordfocus krijgt, verandert de tekst in lichtgrijs (HEX #D7E7CE) op een grijze achtergrond (HEX #5F6F56). De contrastratio is dan 4,2:1 en dus te laag. Zorg dat het contrast altijd minimaal 4,5:1 is, ook bij focus en hover, zodat tekst op links en knoppen goed leesbaar blijft.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 13: Wanneer de homepagina, https://kaartenvannederland.nl, wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, is de kaart niet zichtbaar en niet te bedienen. Bij inzoomen moet alle functionaliteit behouden blijven en toegankelijk blijven voor de gebruiker.

Bevinding 14: Wanneer de pagina https://kaartenvannederland.nl/toegankelijkheid wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, verschijnt er een horizontale scrollbalk en raakt de kop “Overzicht toegankelijkheidsverklaringen” deels uit beeld. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed of 256 CSS-pixels hoog. Zorg dat de tekst altijd binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of werking van de inhoud, mag dit. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven en mogen binnen hun eigen element wel scrollbaar zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 15: Op de homepagina, https://kaartenvannederland.nl, krijgen de links “Kaarten van Nederland”, “Handige links” en “Veelgestelde vragen” in het hoofdmenu een blauwe rand (HEX #0378D4) wanneer ze toetsenbordfocus krijgen. De contrastratio tussen deze focusrand en de blauwe achtergrond (HEX #007BC7) is 1:1. Dit is te laag, want het contrast moet minimaal 3,0:1 zijn. Voor mensen met een visuele beperking of kleurenblindheid is de focus nu moeilijk of niet te zien. Gebruik een kleurcombinatie met voldoende contrast om dit te verbeteren.

Bevinding 16: Op de homepagina, https://kaartenvannederland.nl, krijgt de knop “Standaard” een lichtblauwe rand (HEX #BFDEFF) wanneer deze toetsenbordfocus krijgt. De contrastratio met de witte achtergrond is 1,4:1 en daarmee te laag. Het contrast moet minimaal 3,0:1 zijn.

Bevinding 17: Op de homepagina, https://kaartenvannederland.nl, staat boven de kaart een knop met een printericoon. Na een klik verschijnt een formulier met select-elementen. Wanneer deze select-elementen toetsenbordfocus krijgen, verschijnt er een lichtblauwe rand (HEX #2A7F52). De contrastratio tussen deze focusrand en de groene achtergrond (HEX #39870C) is 1,1:1. Dit voldoet niet aan de eis van minimaal 3,0:1. Zorg ervoor dat alle focusindicatoren voldoende contrast hebben zodat ze goed zichtbaar zijn.

2. Bedienbaar

2.4 Navigeerbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 18: Op de homepagina, https://kaartenvannederland.nl, komt de toetsenbordfocus na de link “Veelgestelde vragen” terecht op onzichtbare interactieve elementen. Dit mag niet, want de toetsenbordfocus mag alleen op zichtbare links, knoppen en formuliervelden komen. Als de focus op onzichtbare elementen terechtkomt, kan een bezoeker deze per ongeluk activeren.

Bevinding 19: Op de homepagina, https://kaartenvannederland.nl, staat op een klein scherm een knop met een vergrootglasicoon die extra inhoud met een zoekveld opent. De focusvolgorde is hierbij niet logisch. Na het openen van de extra inhoud gaat de focus niet naar het zoekveld, maar verder naar andere elementen op de pagina. Voor bezoekers die met het toetsenbord navigeren, moeten interactieve elementen de focus krijgen in een volgorde die overeenkomt met de visuele opbouw. Dit is belangrijk voor mensen met een motorische of visuele beperking of een leesstoornis. Zorg ervoor dat het activeren van de knop de toetsenbordfocus verplaatst naar het zoekveld of het volgende logische element in de reeks.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 20: Op alle pagina’s van https://kaartenvannederland.nl toont het logo bovenaan de website de tekst: “Ministerie van Volkshuisvesting en Ruimtelijke Ordening”. De toegankelijke naam van deze link is echter “Rijksoverheid logo (herlaadt deze pagina)”. De toegankelijke naam komt dus niet overeen met de zichtbare tekst in het logo. Hierdoor werkt het activeren van de link met een stemgestuurd systeem niet goed. Bezoekers spreken namelijk de tekst uit die zij in het logo zien. Als de toegankelijke naam daarvan afwijkt, herkent het systeem de link niet. Zorg er daarom voor dat de zichtbare tekst in het logo ook voorkomt in de toegankelijke naam, bij voorkeur aan het begin.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 21: Op pagina https://kaartenvannederland.nl/test bevat het title-element de Engelse tekst “404 Error page”, terwijl de hoofdtaal van de pagina Nederlands is. Geef deze tekst een lokaal taalattribuut. Een betere oplossing is het vertalen van deze tekst naar het Nederlands, bijvoorbeeld “404-foutpagina”.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 22: Op de homepagina, https://kaartenvannederland.nl, staat in het hoofdmenu een link “Veelgestelde vragen” die een dialoogvenster opent. Dit dialoogvenster heeft geen toegankelijke naam, waardoor schermlezers niet kunnen doorgeven wat er staat. Voeg een aria-label toe met een duidelijke beschrijving van de inhoud. Hetzelfde probleem speelt bij het dialoogvenster dat verschijnt na het klikken op de knop “Maak PDF”, die zichtbaar wordt na een klik op de knop met het printerpictogram.

Bevinding 23: Op de homepagina, https://kaartenvannederland.nl, staan boven de kaart zes knoppen met iconen, zoals een “liniaal”-icoon. Sommige van deze knoppen openen en sluiten extra inhoud, maar een blinde bezoeker krijgt geen informatie over of die inhoud open of gesloten is. Gebruik hiervoor het attribuut aria-expanded.

Bevinding 24: Op de homepagina, https://kaartenvannederland.nl, staat op een klein scherm een knop met een vergrootglas-icoon die extra inhoud met een zoekveld opent en sluit. Ook hier krijgt een blinde bezoeker geen informatie over de open- of gesloten toestand. Het attribuut aria-expanded kan dit oplossen.

Bevinding 25: Op de homepagina, https://kaartenvannederland.nl, verschijnen op een klein scherm onderaan de kaart twee knoppen met iconen. Deze knoppen hebben geen toegankelijke naam, waardoor schermlezers niet duidelijk maken wat het doel van de knoppen is. Voeg een toegankelijke naam toe die de functie van de knop beschrijft.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 26: Op de homepagina, https://kaartenvannederland.nl, staat boven de kaart een knop met een ketting-icoon om te kopiëren. Wanneer deze knop wordt aangeklikt, verschijnt de melding “Link is gekopieerd naar het klembord.” Deze melding is een statusbericht, maar wordt niet voorgelezen door schermlezers omdat de melding geen toetsenbordfocus krijgt. Statusberichten moeten automatisch worden voorgelezen zodra ze verschijnen of veranderen. Voeg hiervoor het attribuut aria-live toe aan de melding.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Home:
  https://kaartenvannederland.nl
• Toegankelijkheid:
  https://kaartenvannederland.nl/toegankelijkheid
• Pagina niet gevonden:
  https://kaartenvannederland.nl/test

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.