Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Kom verder Krimpen aan den IJssel

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Kom verder Krimpen aan den IJssel
Datum 20 juni 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op komverder.krimpenaandenijssel.nl
Buiten de scope valt:
  • De pagina's op krimpenaandenijssel.nl. Dit vereist een apart onderzoek.
  • De pagina's op krimpenaandenijssel.begrotingsapp.nl. Dit vereist een apart onderzoek.
  • De pagina's op krimpenaandenijssel.raadsinformatie.nl. Dit vereist een apart onderzoek.
  • De pagina's op krimpenduurzaam.nl. Dit vereist een apart onderzoek.
  • De pagina's op krimpenwijzer.nl. Dit vereist een apart onderzoek.
  • De pagina's op eloket.ijsselgemeenten.nl. Dit vereist een apart onderzoek.
  • Alle overige subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 29

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: De SVG's in de social media links in de navigatie en de footer op elke pagina, zijn niet als decoratief aangemerkt. Sommige browser-screenreader-combinaties zien de svg als afbeelding. Verberg daarom de inline SVG voor hulpsoftware; gebruik hiervoor bijvoorbeeld aria-hidden="true".

Bevinding 2: Op de pagina https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie is er een afbeelding aanwezig in de vacaturetekst. Er ontbreekt echter een alt-attribuut, dat altijd aanwezig moet zijn (ongeacht dat de afbeelding decoratief is of niet). Voeg het alt-attribuut toe. Omdat het een decoratieve afbeelding betreft, hoeft er geen alt-tekst opgegeven te worden. Door het lege alt-attribuut weet hulpsoftware dat deze afbeelding genegeerd mag worden en worden bijv. bezoekers met een screenreader niet overweldigd met meer informatie dan nodig is.

Bevinding 3: Op de pagina https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new verschijnt er bij het versturen van de sollicitatie een CAPTCHA. De CAPTCHA bevat alleen een visuele test en biedt geen alternatieve test waarvoor geen visuele waarneming vereist is. Een CAPTCHA vereist altijd zowel een tekstalternatief dat de test identificeert als alternatieve tests voor verschillende soorten zintuiglijke waarneming (op zijn minst het gehoor).

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: Op https://komverder.krimpenaandenijssel.nl/o/consulent-sociaaldomein/c/new is de keuzelijst voor het land niet opgemaakt als een keuzelijst, maar als een knop (met aria-live attribuut) en custom widget opgemaakt als listbox, hierdoor wordt bijvoorbeeld het gekozen land niet voorgelezen door voorleessoftware. Gebruik een <select>-element om de semantiek voor screenreaders te corrigeren.

Bevinding 5: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new worden alle foutmeldingen met een live-region gecommuniceerd. Bij meerdere foutmeldingen levert dit een onprettige ervaring op voor bezoekers met screenreaders. Verwijder de live-regions en vervang dit door een algemene waarschuwing bovenaan in het formulier en gebruik daar wel een live-region op. De foutboodschappen bij elk veld moeten blijven staan, om een inbreuk op SC's 1.4.1 en 3.3.1 te voorkomen.

Bevinding 6: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie is er tekst aanwezig dat eruit ziet als een kop en zich gedraagt als een kop, maar is opgemaakt met het strong element. Semantisch mag strong alleen gebruikt worden om de nadruk op enkele woorden te leggen, en het is belangrijk voor screenreaders om de juiste HTML-elementen te gebruiken om structuur, info en relaties over te kunnen brengen. Maak van deze tekst echte koppen en denk eraan het juiste niveau te gebruiken. Dit speelt bijvoorbeeld ook op https://komverder.krimpenaandenijssel.nl/werken-bij-ons, https://komverder.krimpenaandenijssel.nl/traineeship en https://komverder.krimpenaandenijssel.nl/stages.

Bevinding 7: Er worden citaten gebruikt op https://komverder.krimpenaandenijssel.nl/, maar deze zijn niet opgemaakt als een citaat. Het is belangrijk voor screenreaders om de juiste HTML-elementen te gebruiken om structuur, info en relaties over te kunnen brengen. Als iets een citaat is, maak het dan ook als een citaat op. Gebruik het blockquote-element om dit op te lossen. Dit speelt bijvoorbeeld ook op https://komverder.krimpenaandenijssel.nl/werken-bij-ons en https://komverder.krimpenaandenijssel.nl/traineeship.

Bevinding 8: Advies: Er ontbreekt een H1. Het is aan te bevelen om op elke pagina een H1 te gebruiken, zodat bezoekers met een screenreader weten welke content ze kunnen verwachten en of ze op de juiste pagina zijn uitgekomen. Dit speelt bijvoorbeeld op https://komverder.krimpenaandenijssel.nl/onze-collegas en https://komverder.krimpenaandenijssel.nl/maak-kennis-met-mike-en-patrick

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 9: Op https://komverder.krimpenaandenijssel.nl/maak-kennis-met-aimee hebben de groene quotes (HEX #7FBD56) onvoldoende contrast met de witte achtergrond. De contrastverhouding is 2.3:1 waar het minstens 3:1 moet zijn. Pas de kleur van de tekst aan.

Bevinding 10: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new hebben de foutmeldingen (HEX #FF0000) onvoldoende contrast met de witte achtergrond: De contrastverhouding is 3.7:1 waar het minimaal 4.5:1 moet zijn. Gebruik een donkerdere kleur rood voor de foutmeldingen.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Voldoende

Bevinding 11: Advies: hoewel er geen tekst wegvalt bij het inzoomen op alle pagina's, is er nauwelijks ruimte tussen de rand van de browser en de tekst, wat ook net een scrollbalk veroorzaakt. Verzorg meer marge tussen de tekst en de rand van de browser en dat alles netjes binnen de viewport blijft passen.

2. Bedienbaar

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 12: Op https://komverder.krimpenaandenijssel.nl/over-onze-gemeente speelt bovenin een animatie automatisch af. Er is geen mechanisme aanwezig om deze te stoppen, pauzeren of te verbergen. Vervang de animatie door een foto, of voeg knoppen toe om de animatie te kunnen afspelen, verbergen, stoppen en pauzeren.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 13: Op de pagina https://komverder.krimpenaandenijssel.nl/vacatures zijn er tussen het e-mailadres solliciteren@krimpenaandeijssel.nl en de knop "Open Sollicitatie" twee lege tabstops, veroorzaakt door links zonder tekst. Dit is verwarrend voor bezoekers die afhankelijk zijn van het toetsenbord. Verwijder deze extra links. Dit komt ook voor op de pagina https://komverder.krimpenaandenijssel.nl/over-onze-gemeente

Bevinding 14: Op de pagina https://komverder.krimpenaandenijssel.nl/stages is er een lege extra link voor de link "Traineeships". Dit is verwarrend voor bezoekers die afhankelijk zijn van het toetsenbord. Verwijder deze extra link.

Bevinding 15: Op de pagina https://komverder.krimpenaandenijssel.nl/traineeship is er een lege extra link na de link "Stage" . Dit is verwarrend voor bezoekers die afhankelijk zijn van het toetsenbord. Verwijder deze extra link.

Bevinding 16: Op de pagina https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie krijgt de hele vacaturetekst een focusrand bij het bedienen van het toetsenbord. Aangezien dit geen interactief element is, is een focusrand niet nodig hier. Zorg dat het blok met de vacaturetekst geen focus meer ontvangt.

Bevinding 17: Op de pagina https://komverder.krimpenaandenijssel.nl/maak-kennis-met-aimee is er een lege link voor de eerste quote. Dit is verwarrend voor bezoekers die afhankelijk zijn van het toetsenbord. Verwijder deze extra link. Dit komt ook voor op de pagina https://komverder.krimpenaandenijssel.nl/maak-kennis-met-mike-en-patrick.

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 elke pagina staat de knop "Lees voor". De toegankelijke naam van deze knop is echter "ReadSpeaker webReader: Luister met webReader". Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

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 19: De titel van de pagina https://komverder.krimpenaandenijssel.nl/o/consulent-sociaaldomein is Engels: We didn't find the job. Geef hiervoor een taalwissel aan door het lang="en" attribuut, of vertaal deze naar het Nederlands.

Bevinding 20: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new wordt bij het ingeven van een ongeldig e-mailadres (zonder @-teken of punt, of met een spatie) een algemene foutboodschap gegeven: "Please enter an email address". Vertaal deze naar het Nederlands.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 21: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new worden alle foutmeldingen met een live-region gecommuniceerd. Bij meerdere foutmeldingen levert dit een onprettige ervaring op voor bezoekers met screenreaders. Verwijder de live-regions en gebruik het aria-invalid attribuut om programmatisch aan te duiden dat velden foutieve of ongeldige invoer hebben.
Maak de foutmeldingen ook zo specifiek mogelijk. (bv. Achternaam is niet ingevuld). Zo is er naast de visuele foutmelding ook voor hulpsoftware een duidelijke foutboodschap voor bezoekers.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 22: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new wordt bij het ingeven van een ongeldig e-mailadres (zonder @-teken of punt, of met een spatie) een algemene foutboodschap gegeven: "Please enter an email address". Geef suggesties waaraan een geldig email adres moet voldoen om de invoer te corrigeren.

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 de pagina https://komverder.krimpenaandenijssel.nl/vacatures staat de foto van recruiter Niels in een carousel. Het <div>-element bevat een aria-label-attribuut. Dit attribuut is niet toegestaan op <div> en <span> elementen volgens de ARIA-standaard. Verwijder het attribuut en gebruik een correcte manier om de carousel een label te geven. Dit komt ook voor op https://komverder.krimpenaandenijssel.nl/over-onze-gemeente, https://komverder.krimpenaandenijssel.nl/maak-kennis-met-sylvia, https://komverder.krimpenaandenijssel.nl/maak-kennis-met-michel, https://komverder.krimpenaandenijssel.nl/maak-kennis-met-aimee, https://komverder.krimpenaandenijssel.nl/maak-kennis-met-peter, https://komverder.krimpenaandenijssel.nl/maak-kennis-met-menno en https://komverder.krimpenaandenijssel.nl/maak-kennis-met-mike-en-patrick.

Bevinding 24: Op de pagina https://komverder.krimpenaandenijssel.nl/vacatures is een carousel aanwezig. Op dit moment bevat deze enkel 1 foto en deze wordt niet afgewisseld door andere foto's. Er is echter wel een aria-live attribute aanwezig, met de waarde polite. Dit zal verwarring scheppen voor bezoekers met een screenreader. Verwijder de live region en de carousel als het bij deze ene foto gehouden wordt. Dit komt ook voor op https://komverder.krimpenaandenijssel.nl/over-onze-gemeente

Bevinding 25: De inhoud van het menu voor mobile view staat op elke pagina in een <div>-element met de ARIA-rol menu. De keuze voor deze rol is semantisch echter niet juist: deze rol is bedoeld voor complexe bestandsmenu's zoals we die kennen uit de online Microsoft Word of Google Docs.

Bevinding 26: Op elke pagina in mobile view wordt de knop voor het menu in een live-region gezet. Dat is overbodig en geeft overbodige informatie aan de bezoeker met een screenreader die verwarrend of irriterend kan zijn. Verwijder de live-region.

Bevinding 27: Elk menu-item van het menu in mobile view is gewrapped in een <div> met role=none. Hierdoor worden de links in die <div> van hun semantische rol gestript, waardoor bezoekers met een screenreader niet weten dat dit links zijn en dus interactieve elementen. Verwijder het role=none attribuut.

Bevinding 28: Op https://komverder.krimpenaandenijssel.nl/o/open-sollicitatie/c/new is de keuzelijst voor het land niet opgemaakt als een keuzelijst, maar een knop (met aria-live attribuut) en custom widget opgemaakt als listbox. De opties voor de listbox zijn echter niet correct opgemaakt volgens de ARIA-standaard, deze zijn niet opgemaakt als items met de rol "option". Gebruik een native <select>-element met <option> om de ARIA-problemen op te lossen.

Bevinding 29: Advies: op https://komverder.krimpenaandenijssel.nl/ hebben links het aria-live attribuut. Deze staat wel uit door de waarde off. Aangezien er geen automatisch updatende of veranderende content op de pagina is, is dit attribuut niet nodig en kan het verwijderd worden.

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-04-09 20:29:01 v2.4-011