Issues:
Audit digitale toegankelijkheid website PDOK 3D Viewer

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.4 Onderscheidbaar

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 1: Boven de 200% zoom zijn niet alle teksten in de Details panel meer leesbaar. Deze vallen aan de onderkant buiten beeld en er kan niet naartoe gescrold worden (zie ook screenshot 1410-2 op 300%). Dit geldt ook voor de lijst met zoeksuggesties.
Zorg dat teksten tot minimaal 400% zoom (bij 1280px breed) leesbaar en bereikbaar blijven, zonder in twee richtingen te hoeven scrollen.

Bevinding 2: Opmerking: Wanneer ingezoomd op 400% (bij 1280px breed) valt het zoeken invoerveld over de knop om naar boven te navigeren (screenshot 1410-1). Alle functionaliteit is nog wel te gebruiken, maar het zou beter zijn als het zoekvenster bijvoorbeeld dichtgeklapt kan worden op kleinere schermgroottes en de navigatieknoppen meer naar de zijkant komen te staan, zodat er meer ruimte overblijft voor de kaart in het midden.
Op 400% zoom is het ook erg lastig om gebouwen aan te klikken, omdat die achter andere onderdelen vallen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 3: De lichtblauwe rand op focus (HEX #51ECFF) heeft een te laag contrast ten opzichte van de niet gefocuste stijl op sommige plekken, zoals bij de achtergrondlagen en de zoeksuggesties (screenshot 1411-1). Het verschil met de standaard lichtgrijze rand is 1,1:1. Dit kan daardoor mogelijk niet voor iedereen duidelijk zijn. Zorg voor een verschil van minimaal 3:1 tussen de niet actieve en de actieve/focus state.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 4: Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is de tekst van de eerste achtergrondlaag niet meer geheel leesbaar (screenshot 1412-1). 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.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 5: De achtergrondlaag kan niet gewijzigd worden met het toetsenbord. Het werkt nu enkel door met de muis op de afbeelding te klikken. Als ziende toetsenbordgebruiker (zonder hulpsoftware) kom je niet bij de opties terecht. Met een screenreader (getest met VoiceOver op Mac) kun je bij de achterliggende radio buttons komen, maar ze worden meteen geselecteerd als je er door heen navigeert. Je kunt geen keuze maken en meteen daarna het panel sluiten. Wanneer je terug naar de sluiten-knop navigeert, selecteer je dus de eerste radio button in de bronvolgorde.
Zorg dat je met het toetsenbord ook de afbeeldingen als zichtbare knoppen bij langs kunt gaan met een zichtbare focus(rand) en ze kunt selecteren.
Ook zou het goed zijn wanneer het panel ook op elk moment gesloten kan worden met de Escape toets, zodat je niet terug hoeft te navigeren naar de sluiten-knop.

Bevinding 6: Met de muis kun je een gebouw selecteren om details te zien. Met het toetsenbord is dit niet mogelijk. Wanneer het niet mogelijk is om deze objecten toetsenbordtoegankelijk te maken, kan een alternatief worden geboden, bijvoorbeeld per view of zoekresultaat een lijst met gebouwen waarbij de details geopend kunnen worden.

Bevinding 7: NB: Niet alleen blinde bezoekers gebruiken een screenreader. Ook slechtzienden en mensen met dyslexie gebruiken screenreaders als extra hulp bij het visueel navigeren op een site. Het is daarom aan te raden om de informatie in de toegankelijkheidslaag (accessibility tree) zoveel mogelijk overeen te laten komen met de visuele informatie. Wanneer de volgorde erg verschilt of de teksten heel anders zijn, kan dit verwarrend zijn voor ziende gebruikers van hulpsoftware (zie ook 2.5.3).

2.4 Navigeerbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 8: Wanneer je met het toetsenbord de kaartlagen opent, gaat de focus niet in deze laag, maar eerst naar de de knop met achtergrondlaag en de navigeerknoppen (richting en zoom). Dit is geen logische volgorde. Zorg dat de focus direct in het geopende panel komt. Dit geldt ook voor de knop en panel van de achtergrondlaag.

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Bevinding 9: Dit criterium gaat over functionaliteit waarin bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren. Voor gebruikers met een motorische beperking is het niet altijd mogelijk om dit te bedienen, en daarom is het een vereiste dat er een alternatief wordt geboden in de vorm van een knop met enkele aanwijzer (zoals de al wel aanwezige navigeer-en zoomknoppen).

Bevinding 10: Op deze webpagina zijn 2 zulke functies aanwezig zonder enkele aanwijzer alternatief:

• Shift+ linker muisklik + slepen op de kaart: veranderen view waarbij de camera op de vaste positie blijft staan
• Ctrl+Linker muisklik + slepen | Midden muisklik + slepen: draaien (roteren) van de camera terwijl de huidige positie van de camera blijft staan

2.5.2 Aanwijzerannulering (Niveau A)

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Bevinding 11: Wanneer je op touchscreen in het panel Achtergrondlaag een afbeelding aanraakt, wordt deze optie meteen geactiveerd. Zorg dat functies niet op het down-event worden uitgevoerd, maar pas wanneer ze worden losgelaten. Het aanraken van elementen is deel van de navigatie (zowel visueel als met behulp van een screenreader), en moet gebruikers daarom de mogelijkheid geven eerst een keuze te maken voordat ze loslaten er er iets geactiveerd wordt.

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 12: Opmerking: de links en knoppen op de pagina hebben door gebruik van het aria-label alle een net iets andere naam dan er zichtbaar is. ‘Info’ wordt bijvoorbeeld ‘Meer informatie over de 3D-Viewer op pdok.nl’. Voor gebruikers die navigeren via steminvoer kan dit lastig zijn. Het commando ‘klik info’ werkt dan bijvoorbeeld niet. Zorg ervoor dat de toegankelijke naam in ieder geval de zichtbare tekst bevat, bij voorkeur in het begin van de toegankelijke naam. Dus bij deze link bijvoorbeeld: ‘Info: 3D-Viewer op pdok.nl’.

Bevinding 13: NB: het aria-label overschrijft de content van de link of button, het is geen toevoeging. Wanneer het element al een goede naam heeft, kan het aria-label beter weggelaten worden.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 14: Er wordt een aria-labelledby attribuut gebruikt op een element met een onduidelijke rol. Het gaat om:
<app-primary-panel _ngcontent-ng-c4097170455="" id="primary-panel" aria-labelledby="primary-panel-label" _nghost-ng-c1091925924="" class="panel panel-left">
Geef dit element een geldige rol en naam (label), of verberg het gehele element voor hulpsoftware indien deze (in deze staat) niet relevant is. Ook wordt er verwezen naar een element dat verborgen is. Nu wordt de h2-kop ‘Details’ standaard voorgelezen door een screenreader terwijl dit panel niet geopend is.

Bevinding 15: Het invoerveld om te zoeken is opgemaakt als een combobox, maar mist het aria-expanded attribuut om de status (suggesties uit- of ingeklapt) te vermelden. Voeg dit attribuut toe met de juiste waarde.

Bevinding 16: Wanneer de lijst met suggesties geopend is, wordt deze lijst gelabeld door een element met het id ‘ggcSearchLabel’. Dit element is echter niet aanwezig, waardoor er geen label beschikbaar is voor hulpsoftware (screenshot 412-2).

Bevinding 17: Binnen de kaartlagen staat een link binnen een button (screenshot 412-1). Het gaat om de link naar de OGC API . Wanneer interactieve elementen genest worden, kan dit poblemen geven bij het gebruik met hulpsoftware. Een screenreader leest de button en link nu gezamenlijk voor. Dit is verwarrend, want je staat op een ‘uitklapknop’, maar hoort ook ‘opent een nieuwe pagina’. Beter is het om de link na de button te plaatsen.

Bevinding 18: In het Details panel staat een button ‘gebouwen’. Het is niet duidelijk waar deze button voor is. Er staat een class ‘active’ op, wat er op zou kunnen duiden dat dit een uitklapbutton of tab zou kunnen zijn wanneer er meer categorieën aanwezig zijn. In dat geval is het duidelijker wanneer er een aria-expanded-attribuut wordt toegevoegd of een aria-selected-attribuut, afhankelijk van de gekozen opmaak.

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

• PDOK 3D Viewer:
  https://app.pdok.nl/3d-viewer/

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.