Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website PWA Ridderkerk

(Alleen de bevindingen)

Scope van de evaluatie

Naam website PWA Ridderkerk
Datum 5 december 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op pwa.ridderkerk.nl.
Buiten de scope van het onderzoek valt:
  • De uitagenda op pwa.ridderkerk.nl/uitagenda-ridderkerk/, dit vereist een apart onderzoek.
  • De PDF documenten, die via onder andere domein openpub.ridderkerk.nl en openbpc.ridderkerk.nl. Deze zijn ondergebracht in andere onderzoeken.
  • 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: 21

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: In de cookiemelding, bijvoorbeeld op https://pwa.ridderkerk.nl/, komt een symbool voor dat aangeeft dat de link naar een externe website verwijst (bij de link 'Privacyverklaring'). Dit symbool heeft geen alternatieve tekst. Zorg ervoor dat de betekenis hiervan ook beschikbaar is voor hulpsoftware, bijvoorbeeld met de tekst 'verwijst naar een externe website'.

Bevinding 2: Wanneer de website voor het eerst bezocht wordt op https://pwa.ridderkerk.nl/, is er een banner aanwezig met daarin de tekst 'Installeer de Gemeente Ridderkerk app'. Hiernaast staat het logo van de gemeente Ridderkerk. Deze afbeelding heeft geen alternatieve tekst en is verborgen voor hulpsoftware. Zorg dat het logo van een goede alternatieve tekst is voorzien.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: Wanneer bezoekers de website voor het eerst openen, is er een cookiemelding aanwezig. Omdat het dialoogvenster geen rol heeft, wordt het dialoogvenster niet aangekondigd door hulpsoftware. Gebruik bijvoorbeeld role=dialog met een verwijzing naar de heading in een aria-labelledby attribuut om dit probleem op te lossen. Dit geldt ook voor het dialoogvenster 'Instellingen'.

Bevinding 4: Op de homepage https://pwa.ridderkerk.nl/ komen teksten voor die dienst doen als kop, maar niet als zodanig zijn opgemaakt. Het gaat bijvoorbeeld om de toptaken onder 'Goedemiddag', zoals 'Servicecentrum Gemeentehuis'. Zorg ervoor dat teksten die visueel een koptekst zijn, ook in de code zijn opgemaakt als kop zodat bezoekers die gebruik maken van bijvoorbeeld voorleessoftware daar middels sneltoetsen of een koppenlijst naartoe kan navigeren. Een vergelijkbaar probleem doet zich voor op pagina https://pwa.ridderkerk.nl/contact/, waar de teksten niet met een h-element maar met een strong-element zijn opgemaakt. Het strong-element heeft een andere functie, gebruik daarom een h-element.

Bevinding 5: Onderaan iedere pagina, bijvoorbeeld https://pwa.ridderkerk.nl/, staat een navigatiemenu. De huidige pagina is herkenbaar doordat er een lichtgroene balk boven het betreffende menu-item staat. Deze informatie is niet herkenbaar voor hulpsoftware. Maak bijvoorbeeld gebruik van aria-current om dit probleem op te lossen.

Bevinding 6: Op pagina https://pwa.ridderkerk.nl/contact/ staan de openingstijden van het servicecentrum onderaan de pagina in een ongeordende lijst (ul). Lijsten mogen slechts lijstitems (li) bevatten zodat schermleessoftware de structuur goed kan identificeren. De kop "Openingstijden Servicecentrum gemeentehuis" staat in een div element als eerste child element van het ul element. Los dit op door bijvoorbeeld de kop in de DOM structuur boven de lijst te plaatsen.

Bevinding 7: Op pagina https://pwa.ridderkerk.nl/contact/ staan de openingstijden van het servicecentrum onderaan de pagina in een ongeordende lijst (ul). Advies zou zijn om in dit geval de informatie in een tabel te weergeven, zodat de structuur beter wordt overgebracht aan gebruikers van schermleessoftware.

Bevinding 8: Op pagina https://pwa.ridderkerk.nl/instellingen/ wordt het strong element gebruikt ter opmaak, op de dikgedrukte woorden in de links. Strong heeft semantische waarde, waardoor schermleessoftware dit verhoogd voor kan lezen. Maak ter opmaak liever gebruik van de mogelijkheden die CSS biedt.

Bevinding 9: Advies: Wanneer bezoekers de website voor het eerst openen, is er een cookiemelding aanwezig. Wanneer bezoekers op "Instellingen" klikken opent een nieuw dialoogvenster. Wanneer een bezoeker vervolgens één van de knoppen uitklapt ("Noodzakelijk" of "Marketing"), staat er cookie informatie. Er is nu gebruik gemaakt van een lijst-opmaak om een relatie te maken tussen de teksten, maar deze is niet heel erg duidelijk. Overweeg in plaats daarvan bijvoorbeeld een tabel te gebruiken. Een vergelijkbare situatie doet zich voor bij de openingstijden op pagina https://pwa.ridderkerk.nl/contact/.

Bevinding 10: Advies: Onder andere de homepage mist een kop op niveau 1. Een logische aflopende koppenstructuur is een belangrijk navigatiemiddel voor bezoekers die gebruik maken van voorleessoftware en daarnaast ook belangrijk voor zoekmachineoptimalisatie. Overweeg iedere pagina een h1-kop te geven die de inhoud van de pagina omschrijft. Dit kan een visueel verborgen kop betreffen (bijvoorbeeld middels sr-only), indien visuele aanpassing niet wenselijk is.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 11: In de cookiemelding komt witte tekst op een groene (HEX #009A3E) achtergrond voor, of groene tekst op een witte achtergrond. De contrastratio is hier 3,6:1 waar dat minimaal 4,5:1 moet zijn. Bij muishover kleurt de achtergrond of de tekst lichter groen (HEX #33AE65). De contrastratio is hier 2,8:1 waar dat minimaal 4,5:1 moet zijn. De tekst 'Privacyverklaring' (HEX #098D3E) heeft een contrastratio van 4,3:1 met de achtergrond, waar dat minimaal 4,5:1 moet zijn.

Bevinding 12: Op pagina https://pwa.ridderkerk.nl/actueel/processen-verbaal-en-tellingen-verkiezing-europees-parlement/ staan meerdere opsommingen van links. De groene tekst (HEX #008937) heeft met de achtergrondkleur (HEX #F3F5F9) een contrast van 4,15:1 waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 13: Indien men voor het eerst de website bezoekt, bijvoorbeeld https://pwa.ridderkerk.nl/, komt een cookiemelding in beeld. Indien men de website bekijkt op een schermstand van 1280x1024 met een vergroting van 400%, is de tekst boven de knoppen in de cookiemelding niet meer zichtbaar. Indien men geen andere hulpsoftware gebruikt is het onduidelijk waar de pop-up voor dient, mede omdat zich op de pagina ook andere pop-up's voordoen. Zorg dat er een goede reflow is van de tekst.

2. Bedienbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 14: Indien men de hoofdpagina van de website https://pwa.ridderkerk.nl/ voor het eerst bezoekt, treft men een drietal dialoogvensters die over de content heen staan. De cookiemelding, een push-bericht aanmelding en een link om de app te downloaden. De cookiemelding ontvangt correct als eerste focus. De focus gaat daarna echter naar de navigatiebalk en dan pas naar de dialoogvensters. Omdat de laatstgenoemden een significant deel van de pagina verbergen, zeker voor bezoekers die ingeschaald of op een mobiele weergave navigeren, is het wenselijk om eerst de focus naar deze dialoogvensters te brengen zodat ze gesloten kunnen worden.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 15: Op pagina https://pwa.ridderkerk.nl/actueel/last-onder-bestuursdwang-wegslepen-en-opslaan-voertuig-4/ staan een tweetal afbeeldingen van aanhangwagens. De afbeeldingen en hun beschrijvingen zijn correct geplaatst binnen figure en figcaption elementen, echter zijn ze genest in een link. Geef aan wat het linkdoel is, te weten het vergroten van de afbeelding in een nieuw tabblad.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 16: De items ''Installeer de Gemeente Ridderkerk app' en de sluitknop krijgen focus, ook als de bezoeker de melding al heeft weggeklikt. Deze items zijn dan niet meer zichtbaar op de pagina en daardoor is het niet zichtbaar waar de focus zich bevindt. Verwijder deze elementen uit de focusvolgorde als de melding niet meer aanwezig is op de pagina.

Bevinding 17: De pop-up "blijf op de hoogte van het laatste nieuws" staat op diverse pagina's over content heen, bijvoorbeeld op pagina https://pwa.ridderkerk.nl/contact/. Indien men middels de sneltoets "spring naar content" navigeert, komt de focus niet op de pop-up maar bij het item "Bellen" dat hierdoor niet zichtbaar is. Dit is voor toetsenbordgebruikers verwarrend. Zorg bij het activeren van de sneltoets dat de focus eerst op de pop-up komt.

Bevinding 18: Indien men de website bekijkt op een schermstand van 1280x1024 met een vergroting van 400%, staat op pagina https://pwa.ridderkerk.nl/ de pop-up "blijf op de hoogte van het laatste nieuws" over de content heen. Er is slechts het bel icoontje zichtbaar, en men moet met het toetsenbord door alle content te navigeren (er is een scrolbalk aanwezig). Voor toetsenbordgebruikers die met de tabtoets verder door de pagina willen, blijft de groene "lees meer" knop boven de onderliggende content staan. Zorg dat de focus eerst naar het sluiten van de pop-up verplaatst alvorens op de onderliggende pagina verder te gaan.

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: Wanneer bezoekers de website voor het eerst openen, is er een cookiemelding aanwezig. Wanneer bezoekers op 'Instellingen' klikken opent een nieuw dialoogvenster. De knop om het venster te sluiten heeft als naam 'Close'. Zorg ervoor dat de toegankelijke namen van interactieve elementen overeenkomen met de hoofdtaal van de pagina (in dit geval Nederlands), of geef een taalwissel aan. Dit komt op meerdere plekken in de cookiemelding voor, bijvoorbeeld met de toegankelijke naam 'Enable Marketing' bij het selectievakje bij Marketing cookies.

Bevinding 20: Wanneer bezoekers de website voor het eerst openen, is er een cookiemelding aanwezig. Wanneer bezoekers op 'Instellingen' klikken opent een nieuw dialoogvenster. Wanneer een bezoeker vervolgens één van de visuele knoppen uitklapt, staat er cookie informatie. Bij "Noodzakelijk" staat uitsluitend informatie in de taal van de pagina (lang="nl-NL"). Bij "Marketing" staan echter Engelse teksten waarvoor geen taalwissel is aangegeven. Bepaalde schermleessoftware kunnen taal niet herkennen en hebben instructies nodig, in dit geval zou tekst met Nederlands accent voorgelezen worden. Geef een taalwissel aan om aan dit criterium te voldoen, of vertaal idealiter de informatie.

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 21: Wanneer bezoekers de website voor het eerst openen, is er een cookiemelding aanwezig. Omdat het dialoogvenster geen rol heeft, wordt het dialoogvenster niet aangekondigd door hulpsoftware. Gebruik bijvoorbeeld role=dialog met een verwijzing naar de heading in een aria-labelledby attribuut om dit probleem op te lossen. Dit geldt ook voor het dialoogvenster 'Instellingen'.

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-12-28 05:36:48 v2.4-011