Issues:
Audit digitale toegankelijkheid website Topotijdreis

(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 https://www.topotijdreis.nl/ is er geen alt-tekst of toegankelijke beschrijving van de kaart of kaarten aanwezig. Zorg dat er een alt-tekst of beschrijving aanwezig is die beschrijft wat er te zien is.

Bevinding 2: De pictogram in de knop om kaarten te vergelijken op https://www.topotijdreis.nl/ is een SVG die via het title-element alternatieve tekst heeft. Maar omdat de knop al een toegankelijke naam heeft, kan het pictogram hier als decoratief beschouwd worden. Verwijder het title-element en gebruik aria-hidden=true en focusable=false om dit op te lossen. Dit speelt ook bij de knoppen "Over Topotijdreis" en "Delen" (en als je het scherm "Delen" opent bij de knoppen voor de social media-links).

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 3: Op https://www.topotijdreis.nl/ is er naast de knoppen om in- en uit te zoomen op de kaart, ook een knop om te schakelen naar een weergave met luchtfoto's. Deze knop krijgt echter geen focus en is niet bedienbaar met het toetsenbord. Enkel met de muis. Gebruik het <button>-element of zorg ervoor dat alle functionaliteit voor role=button correct geprogrammeerd is, zodat het echt als een knop functioneert (want dat attribuut maakt uit zichzelf niet iets operabel met toetsenbord).

Bevinding 4: Bij het zoomen boven 200% op https://www.topotijdreis.nl/ wordt de historische navigatiebalk/tijdslijn slechts bij hover over het jaartal getoond. Dit element ontvangt geen focus en is niet toetsenbordtoegankelijk. Zorg ervoor dat alle functionaliteit behouden blijft als er ingezoomd wordt.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 5: De paginatitel blijft steeds hetzelfde, ook al gebruikt men de delen-functie, de vergelijken-functie of gaat men naar de informatie over de website. Zorg ervoor dat de titel wijzigt naar gelang welke functie men gebruikt.

Bevinding 6: De PDF https://www.topotijdreis.nl/images/Algemene_voorwaarden_en_privacy.pdf heeft geen titel ingesteld in de documenteigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam, maar de titel van het document wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 7: Op https://www.topotijdreis.nl/ krijgt, naast de link naar ESRI, de tekst "Gemeentekaart" toetsenbordfocus. Dit komt door het tabindex attribuut. Elementen die niet interactief zijn, horen niet in de lees- en tabvolgorde gezet te worden. Verwijder het attribuut.

Bevinding 8: Als men op https://www.topotijdreis.nl/ kiest voor "Over Topotijdreis", dan opent deze informatie in een modal. De focus blijft echter niet deze modal, deze verdwijnt naar de achterliggende website op een bepaald moment. Deze blijft daardoor bedienbaar. Dat kan verwarrend zijn. Implementeer dit correct als een modal, zodat de focus in de modal blijft. Of maak hier gewoon een echte pagina van. Ditzelfde geldt ook voor de modal die je krijgt als je de optie "Delen" gebruikt.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 9: Als men het scherm in responsive modus bekijkt, komen de opties in een zogeheten hamburgermenu staan. Deze heeft als label: "Plus". Deze beschrijft het doel van de knop niet. "Menu" is een betere omschrijving.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 10: Op https://www.topotijdreis.nl/ krijgt het zoekveld "Zoeken op de kaart" en de zoekknop geen zichtbare focusindicator, net als de selectielijst voor het jaar van de kaart, de kaart zelf, de knoppen voor in- en uitzoomen en de link "Powered by Esri". Alle interactieve elementen op een pagina moeten een zichtbare focusindicator hebben. In de CSS mag die niet verwijderd worden met outline: 0.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 11: Op https://www.topotijdreis.nl/ heeft de knop om af te spelen een Engels label: "Play". Dit heeft impact op bezoekers met spraakbesturing of screenreaders. Een soortgelijk probleem komt voor bij de sluitknoppen van het modal als men "Over Topotijdreis" gebruikt of "Delen". De sluitknoppen hebben als label "Close". Vertaal dit naar het Nederlands.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 12: De kaart op https://www.topotijdreis.nl/ is een canvas-element dat in een container is genest dat als attribuut role=application heeft. Er is geen toegankelijke naam dat kort beschrijft wat de inhoud is. Voeg het aria-label attribuut toe aan die container. "Kaartweergave" zou een goede beschrijving zijn.

Bevinding 13: De kaart op https://www.topotijdreis.nl/ is een canvas-element dat in een container is genest dat als attribuut role=application heeft. Gezien die container enkel de kaart bevat en de controls voor de kaart buiten de container staan, kan er niet echt gezegd worden dat er sprake is van een applicatie. Verwijder de rol of verplaats de controls naar deze container.

Bevinding 14: Als men het scherm in responsive modus bekijkt, komen de opties in een zogeheten hamburgermenu staan. Dit menu is uit te klappen, maar dat wordt niet naar hulpsoftware toe vertaald. Gebruik het attribuut aria-expanded om dit op te lossen.

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 (en applicatie):
  https://www.topotijdreis.nl/
• Kaart 1925 met 2024 vergelijken:
  https://www.topotijdreis.nl/vergelijk/kaart/1925/kaart/2024/@165631,480552,2.56
• PDF:
  https://www.topotijdreis.nl/images/Algemene_voorwaarden_en_privacy.pdf

Ondersteunende technieken

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

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.