Rapport:
Audit digitale toegankelijkheid website Duurzaam Capelle

Uitkomst: Onvoldoende

Bevindingen: In de header van elke pagina staat het logo van "Duurzaam Capelle". De toegankelijke tekst van het logo is "Duurzaam Capelle". Het feit dat het hier om een logo gaat is belangrijk, het geeft aan dat het om een officiële website van deze campagne gaat. Voeg het woord "logo" toe aan de alt tekst. Hetzelfde geldt voor het logo van de gemeente Capelle aan den IJssel in de footer van elke website, dit geeft aan dat het om een officiële gemeentewebsite gaat.

Als een bezoeker op pagina https://www.duurzaamcapelle.nl/ met een schermresolutie van 1280 bij 1024 tot 200% inzoomt verandert de lay-out van de footer. De kolommen onder Doelgroepen, Meer informatie en Adres & contact veranderen in de zogenaamde accordeons.
De pijlpictogrammen die aangeven dat hier verborgen inhoud aanwezig is hebben geen tekstalternatieven, waardoor schermlezers de status van deze secties (open of gesloten) niet kunnen bepalen. Deze informatie wordt niet overgebracht via aria-expanded attribuut of verborgen tekst. Het probleem doet zich voor op de pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder de kop "Veelgestelde vragen" in gedeelten met inhoud die verborgen is, maar kan worden geopend als een bezoeker op de tekst in de kop klikt.

Op de homepagina https://www.duurzaamcapelle.nl/ staat naast de kop "Profiteer van de Energiebespaarlening" een decoratieve afbeelding. Het tekstalternatief is "decoratieve afbeelding". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf op pagina 1 staat een afbeelding met het logo "Gemeente Capelle aan den IJssel". Deze afbeeldingen zijn toegevoegd via een figuur-tag en hebben automatisch gegenereerde beschrijvingen "Afbeelding met wiel, Landvoertuig, voertuig, buitenshuis Automatisch gegenereerde beschrijving". Deze tekst voegt niets toe aan de pagina. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf op pagina 3 staan onder het kopje "Onze Gebruikersgroep(en)" 4 informatieve pictogrammen zonder tekstalternatief. Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen. Het probleem doet zich voor op pagina 21, specifiek in de pictogrammen in een tabel onder de kop “10 Bijlage II: Overzicht gebruikersgroepen”.

In het PDF-document https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf op pagina 3 staat een complexe afbeelding met een leeg tekstalternatief. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alt-tekst past. Deze informatie kan toegankelijk gemaakt worden door twee tekstalternatieven te bieden: een korte en een lange beschrijving. De korte beschrijving, meestal de alt-tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kan als tekst op de pagina zelf geplaatst worden, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ staan links die visueel bij elkaar horen: "Ik ben bewoner", "Ik ben ondernemer" en "Ik ben VvE". Deze relatie ontbreekt in de HTML. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element. Hetzelfde geldt voor de links in de kruimelpaden op de pagina’s. Bijvoorbeeld op pagina https://www.duurzaamcapelle.nl/nieuws/alle-beetjes-helpen-om-onze-stad-voor-te-bereiden-op-extreem-weer/. Blinde bezoekers weten niet dat het hier om een kruimelpad gaat.

Op de homepagina https://www.duurzaamcapelle.nl/ is de tekst “Schrijf je in voor onze nieuwsbrief Op de hoogte blijven?” niet gemarkeerd als kop.
Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Deze kwestie is te zien op pagina's https://www.duurzaamcapelle.nl/laadpalenbeleid-capelle-aan-den-ijssel/ en https://www.duurzaamcapelle.nl/subsidie-water-en-groen-capelle-aan-den-ijssel/ in dezelfde tekst, https://www.duurzaamcapelle.nl/agenda/ in de titels van de events. Meer voorbeelden zijn niet genoemd.

Op pagina https://www.duurzaamcapelle.nl/gavoorgroen/ is de eerste alinea opgemaakt met een strong-element. Dit element is niet bedoeld voor opmaak.

Op pagina https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ staan koppen “Persoonlijke tips over energiebesparing”, “Persoonlijk advies aanvragen” en “Aanvraagformulier energiecoach”. Het heading-element en het strong-element worden gebruikt in deze koppen. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag het element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS.

Op pagina https://www.duurzaamcapelle.nl/subsidie-water-en-groen-capelle-aan-den-ijssel/ wordt het em-element gebruikt voor styling in de tekst "De regenton actie is tijdelijk gestopt". De hele zin wordt opgemaakt met een em-element. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst). Gebruik hiervoor bijvoorbeeld CSS.

Op pagina https://www.duurzaamcapelle.nl/toegankelijkheidsverklaring/ zijn de volgende koppen gemarkeerd met een strong-element: "Probleem met de toegankelijkheid van deze website?", en "Contrast website". Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.

Op pagina http://duurzaamcapelle.nl/contact/ wanneer het formulier is verstuurd, verschijnt de tekst “Er was een probleem ..”. Deze tekst is gemarkeerd met een h2-element, terwijl het geen kop is.

Het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf bevat een inhoudsopgave. De tag Reference wordt niet gebruikt in de links naar pagina's. De schermlezer heeft deze tags nodig om het document correct te interpreteren. De juiste tags in de inhoudsopgave zijn: TOC, TOCI, Reference, Link.

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf staat op pagina 9 de laatste alinea onder het kopje "3.1.3 Wet- & regelgeving". Visueel is dit 1 alinea tekst. In de tags zijn deze alinea's gemarkeerd als twee p-tags. Zie ook de laatste paragrafen onder de kopjes "5.2 Soorten laadpunten " en "6.2 Logistieke sector". De visuele structuur van de informatie in het document moet ook weerspiegeld worden in de tags. Als tekst uit een aantal alinea's bestaat, moet hetzelfde aantal p-tags aanwezig zijn in de tags. Om een blinde bezoeker dezelfde informatiestructuur te bieden, plaats je elke alinea in een aparte p-tag.

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf, op pagina 13, staan verschillende koppen die niet als koppen zijn gemarkeerd. Zie bijvoorbeeld “Vraaggestuurd”, “Plaatsing op basis van gebruiksdata” en “Plaatsing op basis van voorspellende data”. Zie ook pagina 16 - 18.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door de h-tag om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document.

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf staat op pagina 17-18 onder het kopje "7.2 Realisatiecriteria" een lijst met 7 items. In de tags staan echter twee afzonderlijke lijsten. Zorg ervoor dat de lijst als één lijst wordt gecodeerd. Combineer de lijsten: zorg ervoor dat de afzonderlijke L-tags in de code worden samengevoegd tot één enkele lijst, zodat de schermlezer de items als een doorlopende lijst voorleest. Een andere oplossing is om de twee lijsten ongewijzigd te laten en bij de tweede lijst een toelichting toe te voegen waarin wordt vermeld dat deze lijst een vervolg is op de lijst van de vorige pagina.

In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf, op pagina 20, wordt de gegevenstabel gebruikt om tekst een kolomindeling te geven. De gegevenstabel mag in deze situatie niet worden gebruikt.
De th-tags mogen niet aanwezig zijn in een lay-outtabel. Dit kan verwarrend zijn voor blinde bezoekers omdat ze de relatie tussen de cellen niet correct interpreteren.

Het PDF-document https://www.duurzaamcapelle.nl/app/uploads/2023/02/Subsidieregeling-water-en-groen-Capelle-aan-den-IJssel-2022.pdf heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.duurzaamcapelle.nl/ staat bovenaan de pagina een menuknop met de tekst "Menu". Deze knop opent een mobiel menu. Als het mobiele menu wordt geopend, is er het menu-item "Over Duurzaam Capelle" met in- en uitklapbaar submenu. De positie van het pictogram van een pijl geeft de status van het verborgen submenu aan (open of gesloten). Deze informatie is niet beschikbaar in HTML. Zie ook de kolommen in de footer bij 400% zoom en pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder het kopje “Veelgestelde vragen”.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Op de hoogte blijven?" staat een formulier met invoervelden "Volledige naam" en "E-mailadres" waarmee persoonlijke gegevens worden verzameld. Het attribuut voor automatisch aanvullen ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt.
Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes
Het probleem is ook te vinden op pagina's
https://www.duurzaamcapelle.nl/contact/ in invoervelden “Naam” en “E-mailadres”, https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ in invoervelden “Voornaam”, “Achternaam”, “Postcode”, en anderen, https://www.duurzaamcapelle.nl/ik-ben-bewoner/ in invoervelden “Jouw naam” en “Email”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.duurzaamcapelle.nl/contact/ onder het kopje "Stuur ons een bericht" staat een formulier. In dit formulier is aangepaste toetsenbordfocus toegepast op het selectievakje "Ik ga akkoord met...". De toetsenbordfocus is een verandering van de randkleur van dit element. Dit gebruik van kleur als de enige manier om informatie over de locatie van de toetsenbordfocus te verschaffen, faalt in dit succescriterium. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond. Dit probleem treedt ook op op dezelfde pagina bij het vakje "I am not a robot" en bij dezelfde selectievakjes van het formulier op pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ en in het “Ja, ik krijg graag nieuws” selectievakje op pagina https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.duurzaamcapelle.nl/ staan links van het hoofdmenu. Als een bezoeker met de muis over zo'n link gaat, wordt de tekst van andere links grijs (HEX#8F8F8F) en heeft deze onvoldoende kleurcontrast tegen de witte achtergrond. De kleurcontrastverhouding is te laag: 3,2:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Op alle pagina's van de website https://www.duurzaamcapelle.nl/ staat bovenaan de pagina een menuknop met de tekst "Menu". Deze knop opent het mobiele navigatiemenu. Wanneer een bezoeker dit menu opent en met de muis over de link in dit menu beweegt, wordt de tekst van andere links donkergroen (HEX#456620) en heeft deze onvoldoende kleurcontrast tegen de groene (HEX#75B62A) achtergrond. De kleurcontrastverhouding is te laag: 2,7:1. De tekst van menu-items is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Tekst van het submenu links is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

In de footer van de website https://www.duurzaamcapelle.nl/ staan de links "Proclaimer", "Privacyverklaring", "Contact" en "Nedbase". De tekst van deze links wordt groen als u er met de muis overheen gaat. Deze groene (HEX#75B62A) tekst staat op de witte (HEX#F5F5F5) achtergrond. De kleurcontrastverhouding is te laag: 2,3:1.
Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.
Dit komt ook op pagina https://www.duurzaamcapelle.nl/laadpalenbeleid-capelle-aan-den-ijssel/ voor
in de linktekst “PDF Laadpalenbeleid Capelle Aan Den IJssel 2025-2026”.

Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Op de hoogte blijven?" staat een aanmeldingsformulier voor de nieuwsbrief. Wanneer velden met het label "Volledige naam" of "E-mailadres" toetsenbordfocus krijgen, wordt het label boven het veld geplaatst en wordt het contrast onvoldoende. Er is een lichtgrijze (HEX#D1D1D1) labeltekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 1,5:1.
Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Zie andere formulieren, bijvoorbeeld op pagina's https://www.duurzaamcapelle.nl/laadpalenbeleid-capelle-aan-den-ijssel/ en https://www.duurzaamcapelle.nl/subsidie-water-en-groen-capelle-aan-den-ijssel/.

Op pagina https://www.duurzaamcapelle.nl/contact/ staat een broodkruimelnavigatie.
De link “Home” wordt groen (HEX#75B62A) op focus. Het contrast is onvoldoende 2,5:1.
Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Dit probleem komt op alle pagina’s met een kruimelpad voor waar deze kleurencombinatie is gebruikt. Dit kan opgelost worden door andere kleuren te gebruiken, waardoor het contrast tussen voor- en achtergrondkleur groter wordt. Het probleem is te zien op pagina's
https://www.duurzaamcapelle.nl/ik-ben-bewoner/ in koppen “Is een warmtepomp een goede vervanging van mijn cv-ketel?”, “Ik kook nu op gas. Kan ik straks niet meer op gas koken?”, enzovoort, en in links in onder deze koppen wanneer een bezoeker de muis over deze koppen en links beweegt.

Op pagina https://www.duurzaamcapelle.nl/?s=subsidie, wanneer een bezoeker navigeert met toetsenbordfocus of met de muis over het zoekresultaat beweegt, wordt het kleurcontrast van de koppen onvoldoende. Zie bijvoorbeeld de koppen "Subsidie Natuurvriendelijke oevers", "Subsidieregeling Particuliere Laadinfrastructuur bij bedrijven (SPRILA) Aanschaf", enzovoort. De tekst van de koppen wordt groen (HEX#75B62A). Het kleurcontrast tegen de witte achtergrond is 2,5:1. Deze tekst is groter dan 19px maar kleiner dan 24px en vetgedrukt, daarom moet het contrast minimaal 3,0:1 zijn.

Op de pagina https://www.duurzaamcapelle.nl/contact/ staat een formulier. Als de bezoeker dit formulier instuurt met lege velden of verkeerde invoer, verschijnen er foutmeldingen. De kleur van deze teksten is oranje (HEX#FC7A1F). Deze teksten hebben te weinig contrast tegen de witte achtergrond, namelijk 2,6:1. Het moet minimaal 4,5:1 zijn. Deze kwestie is te zien op pagina's https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ en https://www.duurzaamcapelle.nl/ik-ben-bewoner/.

Op pagina https://www.duurzaamcapelle.nl/laadpalenbeleid-capelle-aan-den-ijssel/ staat а bruine (HEX#AD9203) tekst "Schrijf je in voor onze nieuwsbrief" op de witte achtergrond. De kleurcontrastverhouding is te laag: 3,0:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina's van de website https://www.duurzaamcapelle.nl/ worden bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 200%, wordt het onmogelijk om alle links van het mobiele menu "Menu" te bekijken. Als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels, moet alles nog gewoon leesbaar zijn.

Wanneer een bezoeker inzoomt, verdwijnt de broodkruimelnavigatie.
Dit is niet de bedoeling, want op deze manier gaat functionaliteit verloren. Zorg dat alle content en functionaliteiten leesbaar en bruikbaar blijven als een bezoeker inzoomt. Zie dit probleem op pagina's https://www.duurzaamcapelle.nl/contact/, https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/, https://www.duurzaamcapelle.nl/nieuws/alle-beetjes-helpen-om-onze-stad-voor-te-bereiden-op-extreem-weer/, en anderen.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf, op pagina 1, staat een afbeelding met ingesloten tekst “Laadpalenbeleid 2025 - 2026”.
Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Uitkomst: Onvoldoende

Bevindingen: Er ontstaan problemen als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Bij succescriterium 1.4.4 is al beschreven dat er content en/of functionaliteit verloren gaat als tot 200% wordt ingezoomd. Dat gebeurt ook als tot 400% wordt ingezoomd. Deze problemen zijn hier daarom niet nog een keer benoemd. Zorg dat de problemen niet alleen opgelost worden voor als tot 200% is ingezoomd, maar ook voor 400%.

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.duurzaamcapelle.nl/ is de kleur van de pictogrammen voor sociale media gewijzigd. De pictogrammen zijn groen (HEX#75B62A) en worden oranje (HEX#FC7A1F) bij hover en bij keyboard focus en in combinatie met de witte achtergrond van de pagina is de contrastverhouding respectievelijk 2,5:1 en 2,6:1.
De standaardkleur van deze socialmedia-logo’s hoeft niet aan de contrasteisen te voldoen, omdat ze worden gezien als ‘kunstobjecten’. Maar als de kleuren worden aangepast, dan moeten die wél voldoen aan de minimale contrasteisen van 3,0:1.

Op pagina https://www.duurzaamcapelle.nl/contact/ wanneer een checkbox naast “Ik ga akkoord met…” focus krijgt, is deze focus zichtbaar als een oranje (HEX#FC7A1F) rand. De contrastverhouding tussen de rand voor toetsenbordfocus en de witte achtergrond van de pagina en de witte (HEX#F5F5F5) achtergrond van de footer is respectievelijk 2,6:1 en 2,4:1.
Op de site wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een (gekleurde) rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Dit moet ten minste 3,0:1 zijn.
Zie ook https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ in rand van het selectievakje “Ja, ik krijg graag nieuws…”.

Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Onder deze slider staat een dotnavigatie om de slider naar een bepaalde dia te scrollen. De groene (HEX#75B62A) dot heeft onvoldoende contrast op de witte achtergrond van 2,5:1. Dit moet minimaal 3:1 zijn. Het probleem met dit kleurcontrast is te zien op pagina https://www.duurzaamcapelle.nl/laadpalenbeleid-capelle-aan-den-ijssel/ wanneer een bezoeker de muisaanwijzer over het downloadpictogram naast de link "PDF..." beweegt.
Op pagina https://www.duurzaamcapelle.nl/contact/ staat een broodkruimelnavigatie. Wanneer de breadcrumb-link met de tekst "Home" de toetsenbordfocus krijgt, is deze zichtbaar door een groene (HEX #75B62A) toetsenbordfocusrand. De contrastverhouding tussen de toetsenbordfocusrand en de witte achtergrond is 2,5:1, terwijl dit minimaal 3:1 moet zijn. Hierdoor kan het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk zijn om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit probleem op te lossen. Dit geldt ook voor de broodkruimellinks op de volgende pagina's: https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/, https://www.duurzaamcapelle.nl/nieuws/alle-beetjes-helpen-om-onze-stad-voor-te-bereiden-op-extreem-weer/ in broodkruimellinks.

Op pagina https://www.duurzaamcapelle.nl/contact/ onder het kopje "Stuur ons een bericht" staat een formulier. In dit formulier is de contrastverhouding tussen een lichtgrijze (HEX#D1D1D1) rand van invoervelden en de witte achtergrond van de pagina 1,5:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Dit probleem komt ook op andere pagina’s voor: https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ en https://www.duurzaamcapelle.nl/ik-ben-bewoner/.

Op pagina https://www.duurzaamcapelle.nl/contact/ onder het kopje "Stuur ons een bericht" staat een formulier. Als in dit formulier het selectievakje "Ik ga akkoord met..." de toetsenbordfocus krijgt, is dit zichtbaar door een lichtgrijze (HEX#B8B8B8) toetsenbordfocusrand. De contrastverhouding tussen de toetsenbordfocusrand en de witte achtergrond is 2,0:1. Dit moet minimaal 3:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.
Dit probleem is te zien op de pagina's https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ in het formulier onder de kop "Aanvraagformulier energiecoach" in de rand van het selectievakje "Ja, ik krijg graag nieuws..." en op
https://www.duurzaamcapelle.nl/ik-ben-bewoner/ in een selectievakje.

Op pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder de kop "Wat kunt u doen om energie te besparen?" staat een navigatie met stippen om de pagina naar een bepaalde dia te scrollen. De contrastverhouding tussen de grijze (HEX#A8A8A8) inactieve stippen en de witte achtergrond is 2,4:1. Dit moet minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/, wanneer bezoekers tekstspatiëring toepassen zoals beschreven in dit succescriterium, verdwijnt de knop "Menu" uit het zicht en in het mobile menu worden de links "Ga voor groen in elk seizoen" en de submenu links "Duurzaam nieuws uit Capelle aan den IJssel" afgesneden. In Firefox wordt de tekst van de kop "Laadpaalbeleid Capelle Behoefte aan laadpunten groeit fors" gedeeltelijk onzichtbaar en is niet meer leesbaar en de link met de tekst "Bekijk het laadpalenbeleid 2025-2026" verdwijnt uit beeld. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.duurzaamcapelle.nl/ staat bovenaan de pagina een menuknop met de tekst "Menu". Wanneer dit menu wordt geopend verschijnt de knop met de tekst "Sluiten". Deze knoppen zijn niet met het toetsenbord te bedienen. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.

De link met tekst “Over Duurzaam Capelle” in het menu heeft een submenu, dat verschijnt als de bezoeker met de cursor over de link beweegt. Dit werkt niet met het toetsenbord. Zorg dat dit submenu met het toetsenbord kan worden geopend en gebruikt, en dat de informatie in dit submenu toegankelijk is voor alle bezoekers. De pagina’s die de hoofdnavigatie-items openen, bevatten namelijk niet alle informatie die in dit submenu staat. Zie de link met de tekst "Wat doet de gemeente".

Wanneer de website https://www.duurzaamcapelle.nl/ worden bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 200%, verandert de lay-out van de footer tot zogenaamde accordeon. Deze accordeon kan niet met het toetsenbord worden bediend. Sommige bezoekers gebruiken alleen een toetsenbord om te navigeren en geen muis. Zij moeten alle klikbare onderdelen van de website gewoon kunnen gebruiken. Daaronder vallen bijvoorbeeld links, knoppen, formulieren, keuzelijsten, tabbladen, sliders en accordeons. Zorg dat alles wat aanklikbaar is, ook werkt met het toetsenbord. Het probleem is te zien op de pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/, onder het kopje "Veelgestelde vragen" in secties met samenvouwbare en uitvouwbare inhoud.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.duurzaamcapelle.nl/nieuws/alle-beetjes-helpen-om-onze-stad-voor-te-bereiden-op-extreem-weer/ onder het kopje "Subsidie voor groene maatregelen" staat een video. Binnen deze videospeler is het mogelijk om sneltoetsen met één letter te gebruiken. De Youtube-video’s gebruiken sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Op de hoogte blijven?" staat een aanmeldformulier voor de nieuwsbrief. Dit formulier gebruikt alleen HTML5-validatie in het invoerveld "E-mailadres".
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Op pagina https://www.duurzaamcapelle.nl/contact/ staat een formulier met reCAPTCHA. Als het keuzevakje is aangevinkt maar het formulier nog niet is verstuurd, verschijnt na een tijdje de volgende melding: "Verificatie is verlopen. Schakel het selectievakje opnieuw in." Dat betekent dat er een tijdslimiet voor reCAPTCHA is ingesteld. Dat kan een probleem zijn voor iemand die veel tijd nodig heeft om de rest van het formulier in te vullen. Bezoekers moeten de tijdslimiet kunnen uitzetten, aanpassen of verlengen. Zie ook https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ en https://www.duurzaamcapelle.nl/ik-ben-bewoner/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2025/01/Laadpalenbeleid-Capelle-aan-den-IJssel-2025-2026.pdf heeft geen documenttitel ingesteld in de bestandseigenschappen. Een PDF-document moet een titel bevatten die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast dient deze titel in de titelbalk te worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen omdat het hen in staat stelt snel en gemakkelijk vast te stellen of de informatie in het document relevant is voor hen. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document. Dit geld ook voor het PDF-document op https://www.duurzaamcapelle.nl/app/uploads/2023/02/Subsidieregeling-water-en-groen-Capelle-aan-den-IJssel-2022.pdf.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.duurzaamcapelle.nl/ staat bovenaan de pagina een menuknop met de tekst "Menu". Wanneer een bezoeker met behulp van het toetsenbord door een pagina navigeert, komt de toetsenbordfocus op de items in dit menu terecht terwijl het menu op dat moment gesloten is en de items niet zichtbaar zijn. Wanneer het menu geopend is, kan de toetsenbordfocus dit menu verlaten. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Elke slide bestaat uit een afbeelding die als link fungeert en een link met de tekst "Lees meer" die naar dezelfde bestemming leidt. Het alt-attribuut van sommige afbeeldingen is leeg waardoor een link zonder linkdoel ontstaat. De links met “Lees meer” hebben onvoldoende content om het linkdoel duidelijk te maken.
Dit probleem doet zich voor op pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder het kopje "Verhalen".

Op pagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Elke dia bevat een afbeelding die als link fungeert. Elk van deze links heeft een onduidelijk doel (zie de links vanaf dia drie). Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Deze kwestie is te zien op pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ in links (zie de links vanaf dia twee) van de slider onder het kopje "Verhalen".

Op pagina https://www.duurzaamcapelle.nl/contact/ staat een formulier met de verificatiemethode reCAPTCHA. Het bevat twee links, "Privacy" en "Terms."
Het is visueel duidelijk dat deze links over reCAPTCHA gaan, maar dit is niet in de code vastgelegd. Daardoor is het voor bezoekers die de visuele layout niet zien onduidelijk wat hun bestemming is. Je kunt dit op meerdere manieren oplossen, bijvoorbeeld door een title-attribuut op de links te gebruiken. Zie ook op pagina's https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ en https://www.duurzaamcapelle.nl/ik-ben-bewoner/.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Onder deze slider staat een navigatie met stippen om de pagina naar een bepaalde dia te scrollen. De toegankelijke namen van deze stippen zijn "1 van 26", "2 van 26" enzovoort. Deze toegankelijke namen geven niet genoeg informatie over de functie van de knoppen. Voeg het woordje ‘slide’ toe. Dit probleem is te zien op pagina
https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder de kop "Wat kunt u doen om energie te besparen?" in dots naar een bepaalde dia te scrollen.

Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Er zijn knoppen met pijlen beschikbaar om door de dia's te navigeren. De toegankelijke namen van deze knoppen zijn "Vorige" en "Volgende". Deze toegankelijke namen geven niet genoeg informatie over de functie van de knoppen.

Op pagina https://www.duurzaamcapelle.nl/nieuws/alle-beetjes-helpen-om-onze-stad-voor-te-bereiden-op-extreem-weer/ staat onder de kop "Subsidie voor groene maatregelen" een iframe met daarin een video. De titel "Anders omgaan met water" beschrijft niet het type inhoud in dit iframe. In het title-attribuut van het iframe ontbreekt het woord "video".
Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.duurzaamcapelle.nl/ staat na de link met tekst "BEKIJK HET LAADPALENBELEID 2025-2026" een link met de afbeelding van de hoofdbanner. De toetsenbordfocus is niet zichtbaar op deze link. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder het kopje "Wat kunt u doen om energie te besparen?" staat een slider. De focusindicator is verwijderd van de pijlknoppen. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de meta data van het PDF-document https://www.duurzaamcapelle.nl/app/uploads/2023/02/Subsidieregeling-water-en-groen-Capelle-aan-den-IJssel-2022.pdf is de taal niet ingesteld. De taal hoort ingesteld te worden, zodat hulpsoftware de informatie uit het bestand met de juiste uitspraakregels kan worden voorgelezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.duurzaamcapelle.nl/contact/ staat een formulier met een hCaptcha. In de captcha staat een keuzevakje: een div-element met role="checkbox". Dit keuzevakje werkt echter niet als een normale checkbox, die je simpelweg aan- of uitvinkt. Dat gedrag wordt ‘het instellen van een component van de gebruikersinterface’ genoemd. Maar dat is niet wat het element hier doet. De rol “checkbox” is dus niet correct. In plaats daarvan werkt het element als een knop: bij het aanvinken opent een pop-up en verplaatst de toetsenbordfocus naar die pop-up. Dit is een contextwijziging, en die mag niet zonder waarschuwing vooraf plaatsvinden, zoals nu wel gebeurt. Zie ook op pagina's https://www.duurzaamcapelle.nl/persoonlijk-advies-over-energiebesparing/ en https://www.duurzaamcapelle.nl/ik-ben-bewoner/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.duurzaamcapelle.nl/ staat bovenaan de pagina een menuknop met de tekst “Menu”. Deze knop heeft niet de juiste toegankelijke rol, waardoor hulptechnologie dit element niet als knop kan herkennen.
De juiste rol voor de menuknop zou “button” (knop) moeten zijn, omdat je er een actie mee uitvoert: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kan een schermlezer of ander hulpmiddel de knop niet goed herkennen, waardoor deze moeilijker te gebruiken is voor mensen die deze hulptechnologie gebruiken. Zorg er daarom voor dat de knop “Menu” de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen.
Daarnaast ontbreekt bij deze knop informatie over de status van het mobiele menu (open of gesloten) aan bezoekers die het menu niet kunnen zien. Dit kan worden opgelost door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de link van het hamburgermenu. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.

Op de homepagina https://www.duurzaamcapelle.nl/ onder het kopje "Verhalen" staat een slider. Elke slide bestaat uit een afbeelding die als link fungeert. Het alt-attribuut van sommige afbeeldingen is leeg waardoor een link zonder naam ontstaat.

Op de homepagina https://www.duurzaamcapelle.nl/ staat onder het kopje “Verhalen” een slider waarin role=tabpanel wordt gebruikt. Elk element met deze rol moet het attribuut aria-labelledby hebben dat verwijst naar het bijbehorende tabelement. Daarnaast ontbreekt de statusaanduiding bij de geselecteerde tab-elementen. Dit kan worden opgelost door gebruik te maken van een aria-selected-attribuut.
Hetzelfde probleem is te vinden op pagina's https://www.duurzaamcapelle.nl/ik-ben-bewoner/ in tabbladen van de sliders onder de kopjes “Verhalen” en “Wat kunt u doen om energie te besparen?”.

Wanneer je https://www.duurzaamcapelle.nl/ bekijkt met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, verandert de layout van de footer in een accordeon. De koppen die de verborgen secties openen en sluiten, missen de rol van een knop.
Daarnaast kan een schermlezer niet bepalen of deze panelen open of gesloten zijn. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft. Het probleem is te zien op de pagina https://www.duurzaamcapelle.nl/ik-ben-bewoner/ onder het kopje “Veelgestelde vragen” in secties met inhoud die verborgen is maar kan worden geopend wanneer een bezoeker op de koptekst klikt.

Uitkomst: Voldoende