Issues:
Audit digitale toegankelijkheid van Gemeente Haarlem

(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: Het logo bovenaan de website https://haarlem.nl/duurzaam bevat de tekst "Gemente Haarlem", maar de alt-tekst is alleen "Haarlem duurzaam". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Gemente Haarlem duurzaam”.

Bevinding 2: Op pagina https://haarlem.nl/duurzaam/school-vereniging, boven het kopje “Meer groen ..” staat een decoratieve afbeelding met de alt-tekst “Proefwijk-raaks-2023”. Deze tekst voldoet niet omdat het vreemde tekens bevat en de afbeelding niet goed beschrijft. Controleer alle afbeeldingen op kwaliteit van de alt-teksten. Bij decoratieve afbeeldingen moet het alt-attribuut leeg zijn.

Bevinding 3: Het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf, op pagina 1, bevat het "Gemeente Haarlem"-logo als artefact. Ook op pagina’s 6, 7 en 10 pagina's staan informatieve afbeeldingen die verborgen zijn voor een schermlezer.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor de schermlezer. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving (alt-tekst). Hetzelfde probleem is aangetroffen in het volgende PDF-document op
https://haarlem.nl/file/toestemming-hoofdbewoner-inschrijving-adres-haarlem, in het logo.

Bevinding 4: Het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf bevat op pagina 4 een informatieve afbeelding zonder een tekstalternatief (alt-tekst).
Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 5: Op pagina https://haarlem.nl/burgerberaad-parkeren staat een video waarin op bepaalde momenten tekst en logo in beeld verschijnen. Deze informatie is niet toegankelijk voor bezoekers die de video niet kunnen zien. Zie 00:01 en 02:26. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 6: Op pagina https://haarlem.nl/burgerberaad-parkeren staat een video waar visuele informatie niet toegankelijk is voor bezoekers die deze teksten en logo’s niet kunnen zien. Bij succescriterium 1.2.3 is deze video al beschreven. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie namelijk verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven. Er is in deze video voldoende ruimte hiervoor aanwezig, en dus moet de audiodescriptie toegevoegd worden. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 7: Op pagina https://haarlem.nl/toestemmingsverklaring is de volgende tekst ten onrechte gemarkeerd met een strong-element in plaats van het juiste heading-element: "Voorwaarden". Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.
Hetzelfde probleem is gevonden op de volgende pagina:
https://zandvoort.nl/eu-100-000-om-evenementen-zandvoort-duurzamer-te-maken het kopje "Vragen".

Bevinding 8: Op pagina https://haarlem.nl/duurzaam/aanmelding-advies-verduurzaming-vves?page=webform_preview worden h3-elementen gebruikt voor opmaak. Zie bijvoorbeeld “Het bestuur stemt in met de voorwaarden ..”. Gebruik liever een neutraal p-element in combinatie met CSS om dit visueel effect te bereiken.

Bevinding 9: Op pagina https://haarlem.nl/zoeken?searchtext=doc is het strong-element gebruikt voor opmaak in het woord dat gevonden is in de zoekresultaten. Dit element is niet bedoeld voor opmaak. Gebruik CSS om deze woorden te laten opvallen.

Bevinding 10: In het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf staan verschillende tussenkoppen die niet zijn gemarkeerd als koppen. Zie alle schuingedrukte kopjes, bijvoorbeeld “Tijdelijk karakter omgevingsplan van rechtswege” en meer. Zie ook “1. Ruimtelijke regels”, “2. Bruidsschat (voormalige rijksregels uit het Activiteitenbesluit, Bouwbesluit en het Besluit omgevingsrecht)”, “3. Toelichting omgevingsplan”, “4. Digitale eisen”, as well as “1. Randvoorwaarden” and “1. Tijdelijke omgevingsplan van rechtswege is het vertrekpunt,” op pagina 3.
Hetzelfde probleem is gevonden op de pagina's: 4-8, 12.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door de h-tag om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document.

Bevinding 11: In het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf op pagina 3, onder het kopje “4. Resultaat” staat een lijst met 4 punten.
In de tags zijn dat 4 afzonderlijke lijsten. Hetzelfde probleem is gevonden op de pagina's: 4-6, 8.

Bevinding 12: In het PDF-document op https://haarlem.nl/file/toestemming-hoofdbewoner-inschrijving-adres-haarlem staat op pagina 1 een lijst met 2 items. De juiste opmaak ontbreekt.
Een lijst in de tags moet worden gemarkeed als de lijst om een blinde bezoeker dezelfde informatiestructuur te bieden als in het document. Een ander voordeel van het gebruik van een lijst is dat de schermlezer het aantal items aankondigt voordat ze worden voorgelezen. Zo weet een blinde bezoeker hoeveel informatie er volgt. De lijst moet worden gemarkeerd met een L en LI tags.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 13: Op pagina https://haarlem.nl/duurzaam, onder het kopje “Wat je zelf kunt doen?” staan artikelen waarin de leesvolgorde niet logisch is. Momenteel is de leesvolgorde: afbeelidng met alt-tekst, kopje, tekst van het artikel. Dit is niet logisch. Dit komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 14: Op pagina https://haarlem.nl/toestemmingsverklaring ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie (zoals achternaam, e-mailadres).
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt.
Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Hetzelfde probleem is gevonden op de volgende pagina’s:
https://haarlem.nl/showcase-idee-indienen in de velden "Naam," "E-mailadres," "Postcode."
https://haarlem.nl/duurzaam/aanmelding-advies-verduurzaming-vves in de velden "E-mailadres" en "Telefoonnummer."

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 15: Op pagina https://haarlem.nl/duurzaam/aanmelding-advies-verduurzaming-vves staat boven het formulier een indicator voor de voltooide stappen.
Voltooide stappen hebben een groene cirkel met een cijfer. Witte tekst op een groene achtergrond (HEX#6EBFA2) heeft een contrastverhouding van 2,2:1. Dit voldoet niet aan de minimale vereiste contrastverhouding van 4,5:1 voor tekst.

Bevinding 16: In het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf, op pagina 10, bevatten tabellen lichtgrijze tekst (HEX#CCCCCC), zoals "Ontwerpfase", op een witte achtergrond. De kleurcontrastverhouding is te laag: 4,0:1. Daarnaast wordt lichtgrijze tekst (HEX#CCCCCC) gebruikt op een grijze achtergrond (HEX#7F7F7F), wat resulteert in een contrastverhouding van 2,5:1. Het contrast moet minstens 4,5:1 zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 17: In het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf, op pagina 10, staat een afbeelding met ingesloten tekst. Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 18: Op alle pagina's van de website https://haarlem.nl/ hebben links in de lopende tekst een aangepaste onderstreping in grijs (HEX#959597) met onvoldoende contrast tegen de witte achtergrond (2,99:1). Zorg dat het contrast tussen de kleur van de onderstreping en de achtergrond minimaal 3,0:1 is. Zie bijvoorbeeld de link "Wijkteams" en andere op https://haarlem.nl/contact-en-openingstijden. Zie ook de link "gesprekken met de stad" en andere op https://haarlem.nl/burgerberaad-parkeren.

Bevinding 19: Op pagina https://haarlem.nl/duurzaam/school-vereniging gebruiken links in de lopende tekst (zoals "Je huis en tuin vergroenen") een aangepaste groene kleur (HEX#6EBFA2) in onderstreping met onvoldoende contrast tegen de witte achtergrond (2,2:1). Zorg dat het contrast tussen de kleur van de onderstreping en de achtergrond minimaal 3,0:1 is.

2. Bedienbaar

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 20: Op pagina https://haarlem.nl/contact-en-openingstijden opent de knop met de tekst "Kunnen wij deze pagina verbeteren?" een dialoogvenster. In het invoerveld met het label "Wat is uw reactie?" wordt HTML5-validatie gebruikt. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 21: Het PDF-document op https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf heeft geen titel. Een PDF-document moet een titel bevatten die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast dient deze titel in de titelbalk te worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen omdat het hen in staat stelt snel en gemakkelijk vast te stellen of de informatie in het document relevant is voor hen. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 22: Op pagina https://haarlem.nl/ opent de knop "Meer zaken regelen" meer artikelen. De toetsenbordfocus verschuift niet naar het eerste nieuw toegevoegde artikel, maar naar de nieuwsartikelen onder het kopje "Nieuws en mededelingen".
Dit is niet de bedoeling. Zorg dat de toetsenbordfocus bij het inladen van meer artikelen naar het eerste nieuwe artikel gaat.

Bevinding 23: Op pagina https://haarlem.nl/projecten-en-beleid staat een zijkolom met filters. Wanneer een filter is geselecteerd met het toetsenbord, verplaatst de focus zich naar het select-element met zichtbare tekst “Publicatiedatum aflopend”. Dit is geen logische focusvolgorde.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 24: Het logo bovenaan de website https://haarlem.nl/duurzaam heeft zichtbare tekst "Gemente Haarlem" en de toegankelijke naam "Haarlem duurzaam Logo dat naar de hoofdpagina leidt". De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

Bevinding 25: Op pagina https://haarlem.nl/contact-en-openingstijden opent de knop met de tekst "Kunnen wij deze pagina verbeteren?" een dialoogvenster waarin een tekstvak staat. Het label boven het invoerveld is "Wat is uw reactie?". De toegankelijke naam ontbreekt, waardoor het moeilijk is voor gebruikers om interactie te hebben met het element via spraakbesturing. De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 26: Op pagina https://haarlem.nl/moving-abroad staan teksten in het Engels. Sommige teksten hebben een lokaal lang-attribuut gekregen, andere niet. Zie bijvoorbeeld het kopje “Moving abroad”. Controleer alle teksten op aanwezigheid van dit attribuut.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Bevinding 27: Op pagina https://haarlem.nl/projecten-en-beleid staat een zijbalk met filters. Wanneer een filteroptie wordt geselecteerd, wordt de focus verplaatst naar de eerste filteroptie. De bezoeker wordt niet gewaarschuwd van deze verandering van context.
Een contextwijziging, zoals het verplaatsen van focus, mag niet zomaar plaatsvinden als een bezoeker iets in een formulier aanpast. Het mag dus bijvoorbeeld niet gebeuren als een bezoeker een keuzevakje aanvinkt, een invoerveld invult of een optie uit een keuzelijst selecteert. Andere voorbeelden van grote contextwijzigingen zijn het verzenden van een formulier of het openen van een nieuw venster. Zulke contextwijzigingen mogen alleen gebeuren als de bezoeker van tevoren is gewaarschuwd. Voeg een knop toe waarmee bezoekers zelf de filters kunnen toepassen, of gebruik asynchrone JavaScript om de selectie aan te passen. Gebruik in dat geval ook een “live-region” om via de schermlezer aan te geven wanneer de inhoud is veranderd.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 28: Op pagina https://haarlem.nl/contact-en-openingstijden opent de knop met de tekst "Kunnen wij deze pagina verbeteren?" een dialoogvenster. Het tekstvak "Wat is uw reactie?" maakt alleen gebruik van HTML5-validatie als er lege of onjuiste gegevens worden ingevuld.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 29: Op pagina https://haarlem.nl/contact-en-openingstijden opent de knop met de tekst "Kunnen wij deze pagina verbeteren?" een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.
In dit dialoogvenster heeft het tekstvak onder "Wat is uw reactie?" geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 30: Op pagina https://haarlem.nl/contact-en-openingstijden opent de knop "Kunnen wij deze pagina verbeteren?" een dialoogvenster. Als er meer dan 500 tekens worden ingevoerd in het veld "Wat is uw reactie?", verschijnt er een karakersteller onder het veld. Deze teller laat zien hoeveel tekens de bezoeker nog in het tekstvak kan typen. Deze teller valt onder de definitie van een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan bijvoorbeeld worden opgelost door role="status" of aria-live="polite" aan de teller toe te voegen. Deze code moet er al staan op het moment dat de pagina wordt geladen.

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

• Homepagina:
  https://haarlem.nl/
• Contact en openingstijden:
  https://haarlem.nl/contact-en-openingstijden
• Toegankelijkheid:
  https://haarlem.nl/toegankelijkheid
• Zoekresultaten:
  https://haarlem.nl/zoeken?searchtext=doc
• Toestemmingsverklaring:
  https://haarlem.nl/toestemmingsverklaring
• Showcase idee:
  https://haarlem.nl/showcase-idee-indienen
• Burgerberaad Parkeren:
  https://haarlem.nl/burgerberaad-parkeren
• Moving abroad:
  https://haarlem.nl/moving-abroad
• Nieuws en mededelingen:
  https://haarlem.nl/nieuws-en-mededelingen
• Projecten en beleid:
  https://haarlem.nl/projecten-en-beleid
• Deze pagina bestaat niet (meer):
  https://haarlem.nl/deze-pagina-bestaat-niet-meer
• PDF Startnotitie Omgevingsplan Haarlem:
  https://haarlem.nl/sites/default/files/2022-06/Startnotitie%20Omgevingsplan%20Haarlem.pdf
• PDF Toestemming tot inschrijving op adres:
  https://haarlem.nl/file/toestemming-hoofdbewoner-inschrijving-adres-haarlem

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• ECMAScript 5
• 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.