Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Gemeente Capelle aan den IJssel

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Gemeente Capelle aan den IJssel
Datum 24 januari 2023
Scope van de website Binnen de scope van dit onderzoek vallen:
  • Alle pagina's op capelleaandenijssel.nl
  • Alle PDF's op capelleaandenijssel.nl
Buiten de scope van dit onderzoek vallen:
  • De pagina's op de subdomeinen eloket.ijsselgemeenten.nl, afspraken.capelleaandenijssel.nl en nieuwsbrief.capelleaandenijssel.nl. Dit vereist een apart onderzoek.
  • Overige subdomeinen waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via capelleaandenijssel.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 24

1. Waarneembaar

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)

Uitkomst: Onvoldoende

Bevinding 1: In de video op pagina https://www.capelleaandenijssel.nl/capelle-onderhoudt-de-bomen-in-de-wijken-0 komen teksten in beeld. Rond 0:17 komt de naam van de spreker in beeld te staan in deze video, maar ook aan het begin en eind van de video staat een logo en tekst in beeld. Deze teksten en het logo komen niet voor in het audiospoor van de video. Hierdoor krijgt een bezoeker die niet (goed) kan zien deze informatie niet mee bij het afspelen van de video. Zorg er daarom voor dat deze video een media-alternatief heeft, zoals een transscript. Er mag ook gebruik worden gemaakt van een audiodescriptie om ook gelijk te voldoen aan succescriterium 1.2.5 Audiodescriptie.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 2: In de video op pagina https://www.capelleaandenijssel.nl/capelle-onderhoudt-de-bomen-in-de-wijken-0 komen teksten in beeld. Rond 0:17 komt de naam van de spreker in beeld te staan in deze video, maar ook aan het begin en eind van de video staat een logo en tekst in beeld. Deze teksten en het logo komen niet voor in het audiospoor van de video. Hierdoor krijgt een bezoeker die niet (goed) kan zien deze informatie niet mee bij het afspelen van de video. Zorg ervoor dat de teksten die in beeld staan voorkomen in het audiospoor van de video, bijvoorbeeld door de teksten uit te laten spreken door een voiceover of door gebruik te maken van audio-descriptie.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: De PDF "Verklaring van geen bezwaar tegen afgifte reisdocument" (https://cuatro.sim-cdn.nl/capelleaandenijssel/uploads/verklaring-van-geen-bezwaar-tegen-afgifte-reisdocument_3.pdf) is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium met betrekking tot de PDF code laag zoals semantische koppen en alt teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 4: Advies: De PDF "Verklaring van geen bezwaar tegen afgifte reisdocument" (https://cuatro.sim-cdn.nl/capelleaandenijssel/uploads/verklaring-van-geen-bezwaar-tegen-afgifte-reisdocument_3.pdf) is een formulier wat bezoekers moeten uitprinten om in te vullen. Het is mogelijk om een PDF formulier digitaal invulbaar te maken. Dit maakt het bestand toegankelijk voor bezoekers die moeite hebben met schrijven, bijvoorbeeld door motorieke beperkingen of slecht zicht. Zorg ervoor dat het bestand ook digitaal is in te vullen en daardoor toegankelijk is voor alle bezoekers.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 5: Wanneer over de bruine knoppen gehoverd wordt, zoals 'Maak een afspraak' op pagina https://www.capelleaandenijssel.nl/melding-openbare-ruimte verandert de achtergrondkleur naar een lichtere tint (HEX #AF7431). De contrastverhouding tussen de witte tekst en de achtergrond is dan 3,9:1 terwijl dit minimaal 4,5:1 moet zijn.
Dit komt op meerdere pagina's voor.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 6: Wanneer bij een schermbreedte van 1280x1024px wordt ingezoomd tot 400% op pagina https://www.capelleaandenijssel.nl/contact-en-openingstijden, verdwijnt content achter de knop 'Geef ons uw feedback'. Het gaat hier bijvoorbeeld om delen van teksten die op deze pagina staan. Doordat deze teksten deels onder een knop verdwijnen zijn deze teksten slecht leesbaar voor bezoekers die moeten inzoomen op de pagina, bijvoorbeeld als zij last hebben van slecht zicht. Zorg ervoor dat content niet over elkaar komt te staan wanneer bezoekers inzoomen op een pagina.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op de pagina's https://www.capelleaandenijssel.nl/zoeken?trefwoord=toeslag en https://www.capelleaandenijssel.nl/capelle-onderhoudt-de-bomen-in-de-wijken-0.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 7: Wanneer toetsenbordgebruikers in Firefox in een ingezoomde weergave focus plaatsen op het menu, verschijnt een zwarte focusrand. Deze heeft een contrastwaarde van 1,6:1 in combinatie met de donkerblauwe achtergrond. Dit moet minimaal 3,0:1 zijn.

Bevinding 8: Wanneer toetsenbordgebruikers focus plaatsen op de links onder de kop 'Laatste nieuws', verschijnt een witte focusrand rondom de titels. Deze heeft een te laag contrast op de achtergrond (HEX #F4F4F4) en zorgt ervoor dat de titels slechter leesbaar worden doordat deze door letters heen gaat (bijvoorbeeld de g's in 'Aanvragen energietoeslag').
De focusrand is ook waarneembaar door een stippellijntje rondom het hele blok, dus er is een toegankelijk alternatief aanwezig. Wel is deze extra rand rondom de titels een mooie toevoeging mits de contrastverhouding hoog genoeg is (de contrastverhouding is hier 1,1:1, waar dat minimaal 3:1 moet zijn) en hij de letters niet in de weg zit.
Dit contrastprobleem komt ook voor op pagina https://www.capelleaandenijssel.nl/nieuwsberichten.
Let op dat in WCAG 2.2 de eisen voor de focusrand waarschijnlijk strenger worden, zie https://www.w3.org/TR/WCAG22/#focus-appearance .

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 9: Wanneer de stijleigenschappen, zoals die staan omschreven bij dit succescriterium, worden toegepast op pagina https://www.capelleaandenijssel.nl/horeca-evenementen worden teksten deels bedekt door andere content. Het gaat hier om de teksten 'muziek', 'vergunning', 'bedrijfspand' en 'gokkast'. Doordat deze teksten voor een deel zijn bedekt zijn ze slecht leesbaar. Zorg ervoor dat teksten goed leesbaar blijven wanneer bezoekers de stijleigenschappen aanpassen.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 10: In de eigenschappen van de PDF "Verklaring van geen bezwaar tegen afgifte reisdocument" (https://cuatro.sim-cdn.nl/capelleaandenijssel/uploads/verklaring-van-geen-bezwaar-tegen-afgifte-reisdocument_3.pdf) is een goede documenttitel ingevuld, maar deze titel wordt niet getoond bij het openen van het document. Zorg ervoor dat bij het openen van het document de documenttitel wordt getoond en niet de bestandsnaam. Dit kan worden ingesteld bij de eigenschappen onder 'Weergave bij openen'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://www.capelleaandenijssel.nl/contact-en-openingstijden is in de code achter de link '+31 10 284 86 88' nog een a-element geplaatst. Naast dat deze link geen toegankelijke naam heeft (zie succescriterium 2.4.4) is het ook mogelijk om toetsenbordfocus op deze niet zichtbare link te plaatsten. Dit kan verwarrend zijn voor toetsenbordgebruiker. Zorg ervoor dat deze link niet voorkomt in de focusvolgorde, bijvoorbeeld door het a-element van deze link te verwijderen.

Bevinding 12: Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px en de knop 'Geef ons feedback' activeren, staat er een venster in beeld dat het hele scherm bedekt. Het is voor toetsenbordgebruikers mogelijk om focus te plaatsen op de achterliggende pagina terwijl het venster nog in beeld staat. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft. Zorg ervoor dat het niet mogelijk is voor toetsenbordgebruikers om focus te plaatsen op de achterliggende pagina terwijl het venster nog in beeld staat, bijvoorbeeld door te zorgen dat de focus binnen het venster blijft tot de bezoeker het afsluit, of door ervoor te zorgen dat het venster automatisch afsluit als de focus hieruit wordt gehaald.

Bevinding 13: Wanneer bezoekers in een ingezoomde weergave met de tab-toets over de pagina navigeren, gaat de focus netjes van de skiplink, naar lees voor, naar het logo, naar het menu en naar het zoekveld, voordat je bij de rest van de pagina komt. Wanneer bezoekers echter met shift+tab terug navigeren vanaf de hoofdinhoud, gaat de focus enkel naar het zoekveld, de lees voor functie en de skiplink. Het logo en het menu worden dus overgeslagen. Zorg dat de focus volgorde ook bij het 'achteruit' navigeren logisch is.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 14: In de code op pagina https://www.capelleaandenijssel.nl/contact-en-openingstijden is achter de link '+31 10 284 86 88' een leeg a-element geplaatst. Deze link heeft geen toegankelijke naam, maar wordt wel voorgelezen aan gebruikers van voorleessoftware. Deze gebruikers weten niet waar de link naar verwijst. Zorg ervoor dat de link een goede toegankelijke naam krijgt, of verwijder het a-element van deze lege link uit de code.

Bevinding 15: Advies: Op onder andere de homepage is het logo van de Gemeente Capelle aan den IJssel opgemaakt als link. Met het title-attribuut op het a-element is geprobeerd om deze link de toegankelijke naam 'Ga naar de homepage van Capelle aan den IJssel' te geven. Echter, dit attribuut wordt overschreven door de alternatieve tekst op het logo. Het title-attribuut is niet geschikt om links een toegankelijke naam mee te geven, het wordt makkelijk overschreven door andere attributen. Maak om deze reden geen gebruik van het title-attribuut om links en andere elementen een toegankelijke naam te geven.

Bevinding 16: Advies: Op pagina https://www.capelleaandenijssel.nl/melden-aanvragen staan blokken content die zijn opgemaakt als link, bijvoorbeeld de kop 'Meldingen' en de onderstaande tekst. Doordat het a-element van de link is geplaatst om de kop en tekst in deze blokken, zijn de toegankelijke namen van de links erg lang. Dit kan vervelend zijn voor bezoekers die voorleessoftware gebruiken. Voor deze bezoeker is het beter als linkteksten korter zijn. Een oplossing hiervoor zou kunnen zijn om het a-element alleen om de kop in de blokken te plaatsen. Op deze manier is alleen de kop opgemaakt als link en bestaat de toegankelijke naam van de link alleen uit de kop, het klikgebied kan worden vergroot met Javascript.
Dit komt ook voor op pagina https://www.capelleaandenijssel.nl/horeca-evenementen.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 17: Wanneer bezoekers in een ingezoomde weergave met de tab-toets over de pagina navigeren naar het zoekveld, komt de focus na het zoekveld op een knop 'Zoekveld sluiten'. Deze knop heeft geen visuele indicator van wat het doet. Hierdoor is het voor bezoekers (zonder voorleessoftware) onduidelijk wat deze knop doet.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 18: Op onder andere de homepage staat een knop met het label 'Lees voor'. De toegankelijke naam van deze knop is 'Laat de tekst voorlezen met ReadSpeaker'. Het visuele label van de knop komt niet voor in de toegankelijke naam, hierdoor is de knop lastig te bedienen voor bezoekers die gebruikmaken van spraakbediening. Zorg ervoor dat het visuele label voorkomt in de toegankelijke van deze knop, het liefst vooraan.

Bevinding 19: Advies: Op pagina https://www.capelleaandenijssel.nl/toegankelijkheidsverklaring staat een afbeelding die is opgemaakt als link. De afbeelding geeft de status toegankelijkheid van deze website aan. In de alternatieve tekst van deze afbeelding komt niet voor wat de status is, ook komt deze status nergens anders op de pagina voor. Bezoekers die de afbeelding niet kunnen zien kunnen de status wel vinden als zij de link volgen, dit staat ook netjes aangegeven in de toegankelijke naam van de link. Echter, het is beter als de status ook staat aangegeven op deze pagina. Op deze manier hoeven bezoekers die het scherm niet kunnen zien de pagina niet te verlaten om achter de toegankelijkheidsstatus van de website te komen. Zorg er daarom voor dat de status voorkomt in de alternatieve tekst van de afbeelding, of ergens anders op de pagina staat aangegeven.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bezoekers op de knop 'Geef ons uw feedback' klikken, verschijnt er een formulier in beeld. Op het invoerveld 'Geef ons hier uw feedback' wordt gebruik gemaakt van HTML5-foutmeldingen. Deze foutmelding is niet toegankelijk, het geeft namelijk niet aan welke fout de bezoeker heeft gemaakt en de melding blijft maar kort in beeld staan. Hierdoor is de foutmelding moeilijk te begrijpen en lezen voor sommige bezoekers. Zorg ervoor dat foutmeldingen aangeven welke fout de bezoeker heeft gemaakt, en in beeld blijven staan tot de bezoeker het formulier weer verstuurd. Los dit probleem op door eigen foutmeldingen toe te voegen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 21: Wanneer bezoekers op de knop 'Geef ons uw feedback' klikken, verschijnt er een invoerveld in beeld. Dit invoerveld heeft alleen de placeholdertekst 'Geef ons hier uw feedback' als label. Deze placeholdertekst verdwijnt wanneer bezoekers iets invoeren in het veld, hierdoor is het veld moeilijk in te vullen voor bezoekers met bepaalde cognitieve beperkingen. Zorg ervoor dat invoervelden een label hebben dat altijd bij het veld blijft staan, ook wanneer bezoekers iets invoeren in dat veld.

Bevinding 22: Wanneer bezoekers in een ingezoomde weergave met de tab-toets over de pagina navigeren naar het zoekveld, staat er de placeholdertekst 'Zoeken'. Wanneer de gebruiker begint te typen, verdwijnt deze tekst. Er is geen visuele indicator van wat het doel is van dit veld ('Zoeken'). In een niet-ingezoomde weergave is dat er wel, doordat het vergrootglas in beeld blijft staan, ook wanneer de placeholdertekst verdwijnt. Zorg dat er altijd een visueel label in beeld blijft staan, dit mag dus ook een icoon zijn.

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 23: Op elke pagina staat in de code een lijst (<ul>) met id="search-bar-autocomplete-list". Deze lijst heeft een role='listbox' gekregen en heeft daarom ook een aria-label of aria-labelledby attribuut nodig. Doordat dit niet aanwezig is, heeft de lijst geen toegankelijke naam.

Bij deze listbox zijn ook andere toegankelijkheidsproblemen gevonden:

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 24: Wanneer bezoekers op de knop 'Geef ons uw feedback' klikken, verschijnt er een formulier in beeld. Wanneer bezoekers het formulier verzenden verschijnt de melding 'Bedankt voor uw feedback' in beeld. Deze melding wordt niet opgemerkt door voorleessoftware. Zorg ervoor dat wanneer content in beeld verschijnt dit wordt opgemerkt door hulpsoftware zoals voorleessoftware.

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: 2025-05-12 20:08:48 v2.4-011