Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website PWA Barendrecht

(Alleen de bevindingen)

Scope van de evaluatie

Naam website PWA Barendrecht
Datum 5 december 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op pwa.barendrecht.nl.
Buiten de scope van het onderzoek valt:
  • 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: 22

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 op bijvoorbeeld https://pwa.barendrecht.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'. Zie bijvoorbeeld de adresgegevens van het gemeentehuis op https://pwa.barendrecht.nl/contact/ voor een plek waar dit wel goed gaat.

Bevinding 2: Wanneer de website voor het eerst bezocht wordt op https://pwa.barendrecht.nl/, is er een banner aanwezig met daarin de tekst "Altijd direct op de hoogte van het laatste nieuws van de gemeente Barendrecht?". Hiernaast staat het logo van de gemeente Barendrecht. Deze afbeelding heeft de alternatieve tekst "notification icon". Pas de tekst in het alt attribuut aan zodat het logo correct wordt omschreven. Zie tevens SC 3.1.2 voor anderstalige informatie.

Bevinding 3: Op pagina https://pwa.barendrecht.nl/actueel/roeland-bol-nieuwe-wethouder-sociaal-domein/ staat een afbeelding van Roeland Bol met een leeg alt attribuut waardoor het niet van alternatieve tekst is voorzien dat de afbeelding omschrijft. Zorg dat afbeeldingen die informatie overbrengen, ook van goede omschrijvingen zijn voorzien. De afbeelding is overigens correct genest in een figure element met een bijbehorend figcaption element, echter is het laatstgenoemde leeg. Men kan in dit geval de bestaande structuur hanteren, het alt attribuut op de afbeelding leeglaten en de beschrijving in het figcaption element plaatsen, zodat schermleessoftware het verband tussen de elementen herkent en correct aan de gebruiker overdraagt. Dit probleem doet zich op meerdere nieuwsbericht pagina's voor, bijvoorbeeld op https://pwa.barendrecht.nl/actueel/voedselbank-huurt-voor-vijf-jaar-kruidentuin-10a/. Zie SC 1.3.1 voor het incorrecte gebruik van figure en figcapture elementen.

Bevinding 4: Op pagina https://pwa.barendrecht.nl/actueel/gemeente-en-zorgmies-handen-ineen-voor-betere-ondersteuning-kwetsbare-inwoners/ staat een afbeelding genest in een figure element met een bijbehorend figcaption element. De tekst in de figcaption leest "screenshot", wat de afbeelding niet omschrijft. Indien afbeeldingen decoratief bedoeld zijn, kan een toegankelijke tekst achterwege gelaten worden.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op de homepage https://pwa.barendrecht.nl/ komen teksten voor die dienst doen als kop, maar niet als zodanig zijn opgemaakt. Het gaat bijvoorbeeld om de toptaken onder "Goedemorgen", van "Afspraak maken" tot "Werk in uitvoering". 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.barendrecht.nl/contact/.

Bevinding 6: Onderaan iedere pagina, bijvoorbeeld https://pwa.barendrecht.nl/contact/, staat een navigatiemenu. De huidige pagina is herkenbaar doordat er een donkerblauwe 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 7: Op pagina https://pwa.barendrecht.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 8: Op pagina https://pwa.barendrecht.nl/actueel/voedselbank-huurt-voor-vijf-jaar-kruidentuin-10a/ wordt het emphasis element (em) gebruikt ter opmaak, bijvoorbeeld in de tweede en derde alinea's. Em heeft semantische waarde, waardoor schermleessoftware dit met meer intonatie voor kan lezen. Men kan ter opmaak CSS gebruiken om hetzelfde effect te bewerkstellingen, of ervoor kiezen om de teksten binnen blockquote elementen te plaatsen. Het verband tussen de tekst en van wie de tekst afkomstig is wordt dan ook door schermleessoftware aan de bezoeker medegedeeld.

Bevinding 9: Op pagina https://pwa.barendrecht.nl/actueel/roeland-bol-nieuwe-wethouder-sociaal-domein/ staat een afbeelding van Roeland Bol met een leeg alt tribuut waardoor het niet van alternatieve tekst is voorzien dat de afbeelding omschrijft. De afbeelding is correct genest in een figure element met een bijbehorend figcaption element, echter is het laatstgenoemde leeg. Zorg voor een beschrijving in het figcaption element, zodat schermleessoftware het verband tussen de elementen herkent en correct aan de gebruiker overdraagt. Dit probleem doet zich op meerdere nieuwsbericht pagina's voor, bijvoorbeeld op https://pwa.barendrecht.nl/actueel/voedselbank-huurt-voor-vijf-jaar-kruidentuin-10a/. Zie SC 1.1.1 over de alternatieve tekst zelf.

Bevinding 10: 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.

Bevinding 11: 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 12: Op diverse pagina's staat de skiplink "Spring naar content", bijvoorbeeld op https://pwa.barendrecht.nl/actueel/roeland-bol-nieuwe-wethouder-sociaal-domein/. De skiplink is voorzien van een witte focusrand. Op de lichtblauwe pagina achtergrond (HEX #F2F5F7) is de focusrand nauwelijks herkenbaar. Er sprake van een 1,09:1 contrastratio waar dit minimaal 3:1 behoort te zijn. Zorg idealiter voor een focusrand met duidelijker contrast.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 13: Indien men de website bezoekt op een schermafstand van 1280x1024 op 400% zoom, ontstaan problemen met witte focusranden, bijvoorbeeld op pagina https://pwa.barendrecht.nl/home/actueel/. Een deel van de voorgenoemde focusrand staat bij focus op een nieuwsitem over de tekst een, waardoor dit moeilijker leesbaar is. Zorg dat de focusrand om de tekst heen blijft staan en geef het bij voorkeur een andere kleur.

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: In de cookiemelding, bijvoorbeeld op https://pwa.ridderkerk.nl/, komt de link "privacyverklaring" voor. De link ontvangt focus en is van een witte focusrand voorzien. Door het contrast (1:1) tussen de witte focusrand en de witte achtergrond is het eerstgenoemde nauwelijks herkenbaar, slechts waar het een deel van de omringende tekst overlapt. Zorg voor een goede zichtbaarheid, zoals bijvoorbeeld op de knoppen "Instellingen" tot "Alles accepteren" waar een lichtblauwe focusrand (HEX #1863DC) gebruikt is. Zie tevens SC 2.4.7 voor de focuszichtbaarheid.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 15: Indien men de website bezoekt op een schermafstand van 1280x1024 op 400% zoom, ontstaan op pagina https://pwa.barendrecht.nl/home/actueel/ problemen met het bel-icoon. Bij incidentele muishover over dit icoon, vouwt de zwarte balk "Meld u aan voor notificaties" uit, welk niet middels het toetsenbord te sluiten is. De balk staat over de onderliggende pagina heen en indien met het toetsenbord verder navigeert, is het niet mogelijk een deel van de content te lezen. Zorg dat er een sluitmechanisme voor dit element aanwezig is.

2. Bedienbaar

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 16: De primaire navigatie in het nav element op iedere pagina, bijvoorbeeld https://pwa.barendrecht.nl/, bevat de links "Home" tot "Instellingen". Indien de focus op de links staat is dit niet zichtbaar. Zorg voor een goede zichtbare focusrand.

Bevinding 17: In de cookiemelding, bijvoorbeeld op https://pwa.barendrecht.nl/, komt de link "privacyverklaring" voor. De link ontvangt focus en is van een witte focusrand voorzien. Door het contrast tussen de witte focusrand en de witte achtergrond is het eerstgenoemde nauwelijks herkenbaar, slechts waar het een deel van de omringende tekst overlapt. Zorg voor een goede zichtbaarheid, zoals bijvoorbeeld op de knoppen "Instellingen" tot "Alles accepteren" waar een lichtblauwe focusrand (HEX #1863DC) gebruikt is. Zie tevens SC 1.4.11 voor het contrastprobleem.

Bevinding 18: Op pagina https://pwa.barendrecht.nl/ staat de blauwe pop-up balk "Installeer de Gemeente Barendrecht app". Over de sluitknop staat een bel-icoon om aan te melden voor notificaties. Verplaats dit icoon zodat de focus op de sluitknop zichtbaar is. Zorg er tevens voor dat het bel-icoon focus ontvangt en van een goede focusrand is voorzien.

Bevinding 19: Op diverse nieuwspagina's, bijvoorbeeld https://pwa.barendrecht.nl/actueel/roeland-bol-nieuwe-wethouder-sociaal-domein/, staat de donkerblauwe link (HEX #032D57) "Terug naar het overzicht". Bij focus kleurt de link nog donkerder blauw (HEX #011426), echter is dit onderscheid niet erg goed op te maken. Het contrast is hier slechts 1,3:1. Zorg dat de informatie, te weten het informeren van de toetsenbordgebruiker dat de focus op het element staat, op een andere wijze wordt weerlegd. Men doet dit door een duidelijke focusrand aan de knop toe te voegen.

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 20: Wanneer de website voor het eerst bezocht wordt op https://pwa.barendrecht.nl/, is er een banner aanwezig met daarin de tekst "Altijd direct op de hoogte van het laatste nieuws van de gemeente Barendrecht?". Hiernaast staat het logo van de gemeente Barendrecht. Deze afbeelding heeft de alternatieve tekst "notification icon", terwijl de pagina de Nederlandse taalinstelling heeft (lang="nl-NL"). Zorg ervoor dat alle toegankelijke teksten overeenkomen met de taalinstelling. Denk hierbij aan bijvoorbeeld alle afbeeldingen en buttons. Zie tevens SC 1.1.1 voor de alternatieve tekst.

Bevinding 21: 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 22: 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.

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-18 12:15:53 v2.4-011