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 pagina https://haarlem-test.mapgallery.eu/app/explore/collections staat een logo van de Gemeente Haarlem dat tevens een link is naar de hoofdpagina van kaart.haarlem.nl. Hier wordt door hulpsoftware "app link" voorgelezen. Zorg dat het van alternatieve tekst dat het omschrijft is voorzien, en tevens het als logo wordt aangeduid. Sluit de tekst tevens af met een een goed linkdoel, bijvoorbeeld "ga naar de hoofdpagina van MapGallery Haarlem-Zandvoort".

Bevinding 2: Op de kaartpagina's, bijvoorbeeld op https://haarlem-test.mapgallery.eu/app/map/main/85, zijn er logo's aanwezig die links zijn naar de hoofdpagina. De afbeeldingen bevatten een alt attribuut met de tekst "MapGallery". Zorg dat het van alternatieve tekst dat het omschrijft is voorzien, en tevens het als logo wordt aangeduid. Sluit de tekst tevens af met een een goed linkdoel, bijvoorbeeld "ga naar de hoofdpagina van MapGallery Haarlem-Zandvoort".

Bevinding 3: Op pagina https://haarlem-test.mapgallery.eu/app/map/main/85/info staat een kaart met een reeks navigatieknoppen: de button met het title attribuut "inzoomen" tot het uitklapmenu met het title attribuut "Kaart opties". Er worden hier tevens Engelstalige benamingen uit een genest i-element voorgelezen. Met betrekking tot de voorgenoemde buttons "add" en "more horiz" respectievelijk. Dit is zeer verwarrend. Laat deze teksten achterwege. Dit probleem doet zich ook bij de opties in het uitklapmenu voor, en op interactieve knoppen elders op de website. Implementeer icon fonts op een manier dat ze verborgen kunnen worden voor hulpsoftware, maar dat links en knoppen nog altijd wel een toegankelijke naam hebben. Bijvoorbeeld op deze manier:
<a href=""><span class="phone" aria-hidden="true"></span>
<span class="sr-only">Telefoonnummer</span></a>.

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

Bevinding 5: Op pagina https://haarlem-test.mapgallery.eu/app/explore/collections staan een reeks navigatieknoppen. De links zijn voorzien van title attributen met een toegankelijke tekst, maar hierin geneste iconen bevatten tevens tekst. Hierdoor wordt er bij "Help & ondersteuning" tevens "help_outline" voorgelezen. Zorg dat de juiste tekst wordt voorgelezen. Implementeer icon fonts op een manier dat ze verborgen kunnen worden voor hulpsoftware, maar dat links en knoppen nog altijd wel een toegankelijke naam hebben. Bijvoorbeeld op deze manier:
<a href=""><span class="phone" aria-hidden="true"></span>
<span class="sr-only">Telefoonnummer</span></a>.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Op pagina https://haarlem-test.mapgallery.eu/app/map/main/85 staat in het legendaonderdeel een informatieicoon met title attribuut "Over deze kaartlaag" dat een dialoogvenster opent. De content bevat platte tekst dat opgemaakt is met het strong element, bijvoorbeeld "Kaartlaag:" en "Classificaties:". Dit element heeft semantische waarde en is bedoeld om de nadruk te leggen op enkele woorden of zinnen. Hulpsoftware kan dit mogelijk op verhoogde toon voorlezen. Maak dergelijke tekst anders op, bijvoorbeeld door middel van de stylingopties die CSS biedt.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

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

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 12: In de algemene navigatiebalk, bijvoorbeeld op pagina https://haarlem-test.mapgallery.eu/app/map/main/85, staan meerdere knoppen zoals "Aanmelden" en "Help en ondersteuning". Bij toetsenbordfocus krijgen de knoppen een dikke lichtgrijze omranding (HEX #C0C4C8). Het contrast met de witte achtergrond is hier 1,7:1 waar dit minimaal 3:1 behoort te zijn. Zorg dat de focusrand aan het minimum voldoet. Andere interactieve elementen zijn voorzien van een zwarte focusrand, wellicht is het beter om dit universeel toe te passen. Dit probleem doet zich bij meerdere knoppen voor, bijvoorbeeld de sluitknop in het dialoogvenster "Help & ondersteuning" en de navigatieknoppen van de kaarten zelf ("Inzoomen" tot "Kaartopties")

Bevinding 13: Advies: op pagina https://haarlem-test.mapgallery.eu/app/map/main/45 worden locaties middels kleur aangegeven. In de legenda "BAG-adres: woon- / bedrijfsfunctie" wordt "gemengd" aangegeven met een roze kleur (HEX #FD65FF). De stippen hebben een donkere rand, waardoor het contrast op basis van dit succescriterium voldoet. De focusrand is echter heel slecht zichtbaar, en het contrast tussen de kleur en de achtergrond is 2,4:1. Advies is om de randen zichtbaarder te maken, legendakleuren te kiezen die sowieso aan het kleurcontrastminimum voldoen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 14: 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.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 15: Op https://haarlem-test.mapgallery.eu/app/explore/search bevindt zich een achtergrondanimatie die niet te stoppen is, en die impact kan hebben op mensen met epilepsie of snel duizelig worden. Zorg voor een knop waarmee bezoekers de animatie stop kunnen zetten. Deze moet uiteraard zichtbaar focus krijgen, gelabeld zijn en met het toetsenbord te bedienen zijn. Of verwijder de achtergrondanimatie.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 16: 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 17: 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 18: 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.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 19: Op pagina https://haarlem-test.mapgallery.eu/app/map/main/45 staat een zoekfunctie voorzien van een invoerveld en een uitklapmenu met opties. De toetsenbordfocus is duidelijk indien deze op individuele opties staat, echter is er geen focus zichtbaar op de uitklapmechanismes zelf, zoals "Gerelateerd" of "Adressen (BAG)".

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 20: Op pagina https://haarlem-test.mapgallery.eu/app/map/main/85/info staat een kaart met een reeks navigatieknoppen: de button met het title attribuut "inzoomen" tot het uitklapmenu met het title attribuut "Kaart opties". Er worden hier tevens Engelstalige benamingen uit een genest i-element voorgelezen. Met betrekking tot de voorgenoemde buttons "add" en "more horiz" respectievelijk. Dit komt niet overeen met het visuele label dat ze hebben. Dit probleem doet zich ook bij de opties in het uitklapmenu voor, en op interactieve knoppen elders op de website. Implementeer icon fonts op een manier dat ze verborgen kunnen worden voor hulpsoftware, maar dat links en knoppen nog altijd wel een toegankelijke naam hebben. Bijvoorbeeld op deze manier:
<a href=""><span class="phone" aria-hidden="true"></span>
<span class="sr-only">Telefoonnummer</span></a>. Zorg dat het visuele label en het label in de code overeenkomen. Dit komt ook voor op o.a. https://haarlem-test.mapgallery.eu/app/map/main/62.

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://haarlem-test.mapgallery.eu/app/map/main/85/info staat een kaart met een reeks navigatieknoppen: de button met het title attribuut "inzoomen" tot het uitklapmenu met het title attribuut "Kaart opties". Er worden hier tevens Engelstalige benamingen uit een genest i-element voorgelezen. Met betrekking tot de voorgenoemde buttons "add" en "more horiz" respectievelijk. Er is geen taalswitch ingesteld. Hierdoor worden de labels niet correct voorgelezen. Dit probleem doet zich ook bij de opties in het uitklapmenu voor, en op interactieve knoppen elders op de website. Implementeer icon fonts op een manier dat ze verborgen kunnen worden voor hulpsoftware, maar dat links en knoppen nog altijd wel een toegankelijke naam hebben. Bijvoorbeeld op deze manier:
<a href=""><span class="phone" aria-hidden="true"></span>
<span class="sr-only">Telefoonnummer</span></a>. Verzorg een Nederlands label voor deze knoppen. Dit komt ook voor op o.a. https://haarlem-test.mapgallery.eu/app/map/main/62

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

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

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 23: Op https://haarlem-test.mapgallery.eu/app/map/main/85 kan het blok "WKPB-objecten" in- en uitgeklapt worden. Die staat wordt echter niet naar hulpsoftware gecommuniceerd, zodat deze belangrijke informatie gemist wordt door bezoekers. Voeg aria-expanded toe aan de knop die het blok laat in- en uitklappen. Dit komt ook voor op https://haarlem-test.mapgallery.eu/app/map/main/45, in o.a. het blok "Adressen en gebouwen, kadastraal eigendom en waardering onroerende zaken" en 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.