Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Gemeente Leiden

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Gemeente Leiden
Datum 5 juli 2022
Scope van de website Binnen de scope vallen:
  • Alle pagina's op gemeente.leiden.nl
  • Het proces op melding.leiden.nl/leiden/melding.php (deel van proces)
Buiten de scope vallen:
  • De chatfunctionaliteit op gemeente.leiden.nl (op verzoek van de klant)
  • De overige subdomeinen (op verzoek van de klant)
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 36

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op pagina gemeente.leiden.nl/inwoners-en-ondernemers/afval/afvalcontainers/ staat een kaart waarin wordt aangegeven op welke adressen de containers staan. Deze informatie is niet beschikbaar voor een blinde bezoeker.
Onder de kaart staat een link naar de Stadskaart. Deze pagina is ook ontoegankelijk.
Zorg dat deze informatie op een toegankelijke manier wordt gepresenteerd.

Bevinding 2: In het pdf-document gemeente.leiden.nl/bestanden/handleiding-parkeren-tweede-kenteken-op-vergunning.pdf is het logo van de organisatie toegevoegd als achtergrondafbeelding. Dit zorgt ervoor dat het voor een blinde bezoeker niet duidelijk is bij welke organisatie dit document hoort. ‘Leiden’ staat nergens als tekst en wordt dus niet voorgelezen. Logo’s zijn informatieve afbeeldingen en hebben goed tekstalternatief nodig.

Bevinding 3: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Advies: De social media links in de footer van de website (iedere pagina) hebben een alternatieve tekst gekregen via een <span> element. Dezelfde tekst wordt echter ook via het title-attribuut meegegeven. Hierdoor wordt dezelfde tekst door sommige voorleessoftware (niet alle hulpsoftware ondersteund het title-attribuut goed) dubbel voorgelezen. Dit kan vervelend zijn. Overweeg het title-attribuut te verwijderen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: De kop 'Nieuws' (in het grijze vlak op de pagina) op pagina gemeente.leiden.nl/inwoners-en-ondernemers/verhuizen-en-migreren/immigratie-en-integratie/oekraine-… is visueel een kop, maar is niet opgemaakt als koptekst.

Bevinding 5: De koppenstructuur op pagina gemeente.leiden.nl/inwoners-en-ondernemers/verhuizen-en-migreren/immigratie-en-integratie/oekraine-… is niet correct. Voor subkoppen (de uitklapbare onderwerpen) wordt een H2 gebruikt, terwijl dit een H3 zou moeten zijn. De koppen daaronder zijn nu een H3, maar moeten dan een H4 worden.

Bevinding 6: In het pdf-document gemeente.leiden.nl/bestanden/handleiding-parkeren-tweede-kenteken-op-vergunning.pdf is de titel van het document niet als koptekst getagd. Los dit op door de titel als H1 te taggen, of via 'rolemapping' de rol 'Titel' mee te geven.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 7: De leesvolgorde van pdf gemeente.leiden.nl/bestanden/handleiding-parkeren-tweede-kenteken-op-vergunning.pdf is niet juist. Op pagina 7 komt bijvoorbeeld eerst de paragraaf, daarna de afbeelding en daarna de lijst, in plaats van afbeelding, paragraaf, lijst.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 8: Autocomplete attributen ontbreken in het formulier op gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/. Invoervelden die informatie vragen over de gebruiker (bekijk hier welke dat zijn: www.w3.org/TR/WCAG21/) moeten een juist autocomplete attribuut hebben (bekijk hier welke dat zijn: www.w3.org/TR/html52/sec-forms.html).

Bevinding 9: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Op het invoerveld voor telefoonnummer op pagina melding.leiden.nl/leiden/melding.php is de autocomplete waarde "phone" gebruikt, maar dit is geen geldige waarde. Dit moet "tel" zijn.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: De placeholdertekst op gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ in het formulier heeft een te laag contrast. De contrastratio is hier 2,0:1 en dat moet minimaal 4,5:1 zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 11: Wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 400% (volgens de eisen van dit succescriterium) op pagina gemeente.leiden.nl/sitemap/, moeten gebruikers horizontaal scrollen om de tekst 'gehandicaptenparkeervergunning' te kunnen lezen.

Bevinding 12: Onderstaande bevinding is een nieuwe bevinding, als gevolg van de nieuw toegevoegde chatfunctionaliteit:
Wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 400% (volgens de eisen van dit succescriterium), valt in het hamburgermenu (wanneer deze geopend is) de tekst 'Vragen? Chat met ons' over de onderste drie menu-items heen, waardoor deze niet leesbaar zijn. Dit gebeurt al vanaf 170%.
Wanneer het menu gesloten is, valt dezelfde tekst op 400% deels over de menu-knop heen, waardoor deze niet goed zichtbaar is.

Bevinding 13: Onderstaande bevinding is nieuw:
Wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 400% (volgens de eisen van dit succescriterium) pagina gemeente.leiden.nl/inwoners-en-ondernemers/paspoort-rijbewijs-en-uittreksels/verklaring-en-… bekijken, is er door het hamburgermenu en de sticky header 'Regel het' weinig ruimte om de content te bekijken. Overweeg om geen sticky elementen te gebruiker, aangezien dit bezoekers hindert die het scherm moeten vergroten om de content te kunnen lezen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 14: Het contrast van de rode asterisken op pagina melding.leiden.nl/leiden/melding.php is niet hoog genoeg. De contrastratio is hier 2,9:1 op de lichtgrijze achtergrond waar dat minimaal 3,0 moet zijn.

Bevinding 15: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Op een aantal plekken is het contrast van de focusrand nog te laag, bijvoorbeeld de witte rand rondom de menuknop en de skiplinks in een ingezoomde weergave. Zorg dat de focusrand altijd voldoende contrast heeft in combinatie met de achtergrond.
Let op: In de conceptversie van WCAG 2.2 worden de eisen voor de focus strenger. Zie www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html .

Bevinding 16: Onderstaande bevinding is nieuw:
Het contrast van de randen van de dropdown-invoervelden is niet hoog genoeg. Het contrastwaarde is 1,2:1 maar moet minimaal 3,0:1 zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 17: Wanneer gebruikers de tekstafstand wijzigen naar de hierboven beschreven waarden, is de placeholdertekst 'Waar bent u naar op zoek' in het zoekvenster op pagina gemeente.leiden.nl/inwoners-en-ondernemers/verhuizen-en-migreren/immigratie-en-integratie/oekraine-… niet meer geheel leesbaar. Dit probleem komt op meerdere pagina's voor.

Bevinding 18: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Advies: Op de homepagina valt de tekst 'uittreksels' na het wijzigen van de hierboven beschreven waarden net buiten de randen van het kader, maar de tekst is nog wel goed leesbaar.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 19: De checkbox 'Onthoud mijn gegevens' op gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ is niet toetsenbordtoegankelijk.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 20: Onderstaande bevinding is nieuw:
In het hamburgermenu dat in een ingezoomde weergave verschijnt, is de focusvolgorde onlogisch. De focus gaat eerst naar 'Bestuur', 'Stadskaart' en de Sluitknop, voordat deze op 'Inwoners en Ondernemers' komt. Volg de visuele volgorde van de onderste drie elementen, en plaats daarna de focus op de sluitknop.

Bevinding 21: Onderstaande bevinding is nieuw:
Op meerdere pagina's, waaronder gemeente.leiden.nl/inwoners-en-ondernemers/paspoort-rijbewijs-en-uittreksels/verklaring-en-…, wordt de content aan de zijkant bij een ingezoomde pagina ondergebracht onder de tekst 'Regel het'. Deze krijgt pas de focus na de rest van de pagina, terwijl deze visueel bovenaan de pagina staat.

Bevinding 22: Onderstaande bevinding is nieuw:
Op meerdere pagina's, waaronder gemeente.leiden.nl/inwoners-en-ondernemers/paspoort-rijbewijs-en-uittreksels/verklaring-en-…, wordt de content aan de zijkant bij een ingezoomde pagina ondergebracht onder de tekst 'Regel het'. Wanneer dit wordt uitgeklapt, bedekt het scherm de hele pagina. Echter gaat de focus wel verder over de achterliggende pagina. Zorg dat de focus binnen de overlay blijft.

Bevinding 23: Onderstaande bevinding is nieuw:
Op pagina melding.leiden.nl/leiden/melding.php komt aan het einde van het formulier de focus eerst op de onzichtbare knoppen uit de kaart voordat deze op het verzendformulier komt. Zorg dat de focus niet op onzichtbare (interactieve) elementen kan komen.

Bevinding 24: Advies. Als de website gemeente.leiden.nl bekeken wordt in een ingezoomde weergave, verandert het hoofdmenu in een zogenaamde ‘hamburger’ knop (drie horizontale streepjes). Deze knop komt in de linker onder hoek van de pagina te staan. De focusvolgorde is goed, maar de positie van de knop is ongewoon en zou verwarrend kunnen zijn. Een betere plek voor deze knop is de bovenkant van de website.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Voldoende

Bevinding 25: Advies: Het logo van de website heeft als toegankelijke naam ‘Terug naar homepagina - Gemeente Leiden’. De zichtbare tekst is ‘Leiden’. Deze link kan moeilijk zijn om met de stem te bedienen doordat de visuele tekst achterin de toegankelijke naam staat. Zorg ervoor dat zichtbare tekst in het begin van de toegankelijke naam staat, bijvoorbeeld ‘Gemeente Leiden - terug naar home’.

Bevinding 26: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Advies: Op gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ staan bij de externe links iconen die aangeven dat de link naar een externe webpagina verwijst. In het aria-label staat de linktekst achteraan (bijv: "Link naar externe website: de App store"). Het is een best practice om de visueel zichtbare tekst (in dit geval de link tekst) vooraan in de toegankelijke naam te plaatsen, zodat deze goed bedienbaar is met spraaksoftware.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 27: Onderstaande bevinding is nieuw:
Op pagina staat de tekst gemeente.leiden.nl/inwoners-en-ondernemers/verhuizen-en-migreren/verhuizen-naar-nederland-u-heeft-al-… staat de tekst "Moving to The Netherlands (if you have previously been registered as a resident of The Netherlands)". Hiervoor moet in de code een taalwisseling worden aangegeven.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 28: Wanneer op pagina gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ een van de velden leeg wordt gelaten of een verkeerd format wordt ingevuld, verschijnt de melding: ‘Er is geen ophaalschema gevonden voor dit adres.’ Dit beschrijft niet wat er mis is gegaan.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 29: Visuele labels en instructies ontbreken bij het formulier op gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/. Een placeholdertekst is hiervoor geen vervanging, want die verdwijnt zodra de gebruiker begint met typen.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 30: Wanneer op pagina gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ in een van de velden een verkeerd format wordt ingevuld, verschijnt de melding: ‘Er is geen ophaalschema gevonden voor dit adres.’ Er is een foutsuggestie nodig, met bijvoorbeeld een voorbeeldformat van een postcode, om bezoekers te helpen hun fout te verbeteren.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 31: Op alle pagina’s van de website heeft het hoofdmenu in de link ‘Stadskaart’ een verwijzing naar het id dat niet bestaat. Het gaat om aria-controls attribuut op deze link. Deze link 'Stadskaart' in het navigatiemenu (alle pagina's) heeft een aria-expanded (true/false) attribuut, terwijl dat hier niet van toepassing is.

Bevinding 32: Op pagina gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ staat twee maal een button met als naam 'Zoeken' (één bij de zoekfunctie, en één om het ophaalschema op te halen). Hierdoor kan met spraaksoftware per ongeluk de verkeerde knop geactiveerd worden. De knop voor het ophaalschema heeft een betere naam nodig.

Bevinding 33: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
De knop om het hamburgermenu te sluiten (wanneer gebruikers ingezoomd zijn), heeft als toegankelijke naam 'Menu' via zowel een <span> tekst als een aria-label. Het aria-label is niet toegestaan op een <span> element, maar moet op interactieve elementen geplaatst worden (zoals een <button>). In dit geval is het aria-label overbodig, omdat de span-tekst voldoende is als toegankelijke naam.
Daarnaast is op de button een aria-expanded attribuut geplaatst. Doordat de naam van de knop ook veranderd (naar 'Menu sluiten') wordt er nu dubbel een status doorgegeven ('Menu sluiten knop uitgevouwen"). Eén van de twee opties is voldoende (dus ofwel de naam wijzigen naar "Menu sluiten", ofwel gebruik maken van het aria-expanded attribuut).
Dit geldt ook voor de knop om het zoekveld te sluiten (wanneer gebruikers ingezoomd zijn). Die knop heet ook 'Zoekveld' in plaats van 'Sluit zoekveld'.

Bevinding 34: Onderstaande bevinding is nieuw:
Op meerdere pagina's, waaronder gemeente.leiden.nl/inwoners-en-ondernemers/paspoort-rijbewijs-en-uittreksels/verklaring-en-…, wordt de content aan de zijkant bij een ingezoomde pagina ondergebracht onder de tekst 'Regel het'. De button mist een waarde die aangeeft of dit element is uitgeklapt of ingeklapt. Gebruik bijvoorbeeld het aria-expanded attribuut om dit op te lossen.

Bevinding 35: Onderstaande bevinding komt voort uit het oplossen van een bevinding uit een eerder rapport:
Advies: Op pagina gemeente.leiden.nl/over-deze-site/toegankelijkheid/ staat een afbeelding met zichtbare tekst ‘Status toegankelijkheid gemeente.leiden.nlâ__. Dit is een link, maar heeft nu als rol 'button'.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 36: Wanneer gebruikers op pagina gemeente.leiden.nl/inwoners-en-ondernemers/afval/ophaalschema-afval/ een niet bekend adres invoeren en zoeken, verschijnt (zonder dat de pagina ververst en zonder dat de focus daarheen verschuift) de melding 'Er is geen ophaalschema gevonden voor dit adres'. Screenreadergebruikers krijgen deze melding niet te horen.

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

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-04-19 03:05:20 v2.4-011