Issues:
Hercontrole Audit digitale toegankelijkheid 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: 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% is het ook erg lastig om gebouwen aan te klikken, omdat die achter andere onderdelen vallen.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 2: Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is de tekst van de achtergrondlaag BRT-A standaard 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 3: 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.
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).

Bevinding 4: 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.

2.4 Navigeerbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 5: 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.
Hertoetsing: de focus komt nu direct in het geopende panel. Wanneer je deze echter sluit (met de sluit-knop of via de escape-toets), sta je weer helemaal bovenaan de pagina. Zorg dat na het openen van een popup of panel de focus weer terug gaat naar het item waarmee je deze opende of het eerstvolgende item.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 6: 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.
Hertoetsing: op het panel staat nu een ongeldig attribuut, namelijk: aria-hidden="primary-panel-label". Dit attribute moet als waarde true of false hebben. De waarde is nu hetzelfde wanneer het panel open of gesloten is. Dit zou dus false (of afwezig) respectievelijk true moeten zijn.

Bevinding 7: 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 8: 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 9: 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 10: 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.