Issues:
Audit digitale toegankelijkheid website kaart.haarlem.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 de kaartpagina's, bijvoorbeeld op https://haarlem-test.mapgallery.eu/app/map/main/85, staan legenda's. Vaak zijn legendaitems opgemaakt als een enkele afbeelding, in dit specifieke geval met een leeg alt-attribuut. Het is voor blinde gebruikers van hulpsoftware niet mogelijk in een oogopslag te lezen welke objecten zich op deze pagina bevinden. Het is ook geen goed idee om het alt-attribuut te vullen met alle visueel zichtbare tekst, omdat een alt niet gepauzeerd kan worden door schermleessoftware. Maak idealiter de legendaitems anders op, bijvoorbeeld als afbeelding per item met een alt tekst, of de kleuren als iconen vergezeld door platte tekst.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 2: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Bevinding 3: Indien pagina https://haarlem-test.mapgallery.eu/app/explore/collections op een schermstand van 1280x1024 px met 200% zoom wordt bekeken, vallen titels van de cards deels weg. Zorg dat alle tekst leesbaar blijft.

Bevinding 4: Indien pagina https://haarlem-test.mapgallery.eu/app/map/main/85 op een schermstand van 1280x1024 px met 200% zoom wordt bekeken, ontstaan meerdere problemen. De "map" button in de card "Basisregistratie Wet kenbaarheid publiekrechtelijke beperkingen onroerende zaken (Wkpb)" opent een popup, waarvan de tekstinhoud nauwelijks leesbaar is door de sluitbanner. Tevens zijn meerdere functies niet meer zichtbaar, zoals de legenda.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 5: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Bevinding 6: Indien pagina https://haarlem-test.mapgallery.eu/app/explore/collections op een schermstand van 1280x1024 px met 400% zoom wordt bekeken, valt het dropdownmenu van de navigatie deels buiten beeld. Het is bereikbaar middels tweedimensionaal scrollen, echter is dit geen toegestane oplossing onder dit criterium. Zorg voor goede reflow van alle interactieve knoppen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 7: Op https://haarlem-test.mapgallery.eu/app/map/main/85 is de zoekknop bij het zoekveld niet te bedienen met het toetsenbord. Dit heeft impact op o.a. screenreaders en spraakbesturing. De reden is dat er geen interactief element wordt gebruikt. Gebruik een button-element en verzorg een label. Dit ook op soortgelijke pagina's voor.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 8: De site betreft kaart.haarlem.nl, waarmee duidelijk is dat het een site van de Gemeente Haarlem betreft. De paginatitels zijn echter "MapGallery Haarlem". Zorg dat de organisatienaam goed duidelijk is, bijvoorbeeld "MapGallery | Gemeente Haarlem".

Bevinding 9: Vanaf https://haarlem-test.mapgallery.eu/app/explore/collections kan men naar diverse kaartapplicaties, echter zijn alle paginatitels "MapGallery Haarlem". Dit is verwarrend voor onder andere toetsenbordgebruikers die hulpsoftware gebruiken, wanneer ze tussen meerdere tabbladen navigeren. Zorg dat iedere kaartapplicatiepagina de paginatitel heeft die het omschrijft.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 10: Op de kaartpagina's, bijvoorbeeld https://haarlem-test.mapgallery.eu/app/map/main/85, staat aan het einde van de legenda een knop "Stijl" dat een pop-up opent waarin men de transparantie kan reguleren. Men drukt hier op de knop "Gegevens herladen" om het te veranderen. Na indrukken van deze knop, sluit de pop-up en verschuift de focus weer naar het logo dat vooraan in de focusvolgorde staat. Zorg dat de focus bij dit onderdeel blijft, of het eropvolgende, de "Ondergronden" knop.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 11: Op https://haarlem-test.mapgallery.eu/app/map/main/85 heeft het zoekveld geen label, maar een placeholder. Placeholders zijn echter niet afdoende om te voldoen aan dit criterium, omdat ze verdwijnen als het veld focus krijgt of als men er in gaat typen. Verzorg een label voor het zoekveld met het label-element. Dit komt o.a. ook voor op https://haarlem-test.mapgallery.eu/app/map/main/62.

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

• hoofdpagina:
  https://haarlem-test.mapgallery.eu/app/explore/collections
• zoeken op kaart:
  https://haarlem-test.mapgallery.eu/app/explore/search
• WKBP kaart:
  https://haarlem-test.mapgallery.eu/app/map/main/85
• Erfgoed kaart:
  https://haarlem-test.mapgallery.eu/app/map/main/62
• BAG:
  https://haarlem-test.mapgallery.eu/app/map/main/45
• 404:
  https://haarlem-test.mapgallery.eu/bestaatniet

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.