SC 1.4.3 Contrast roze tekst op witte of grijze achtergrond is onvoldoende

Op veel pagina’s van de website komt de kleur roze (bijvoorbeeld #E17695, #FC88A7, #E17896) voor op een witte achtergrond (#FFFFFF) of andersom. Deze combinatie wordt gebruikt voor verschillende soorten teksten, links en knoppen. De contrastverhoudingen van deze kleurcombinaties zijn respectievelijk 2,9:1, 2,3:1 en 2,9:1. Deze waarden voldoen niet aan de minimale eisen voor toegankelijkheid: 4,5:1 voor kleine tekst (tot 24 px en niet vetgedrukt) en 3,0:1 voor grote tekst (vanaf 24 px of vetgedrukt).

Voorbeelden van deze combinaties (komen op meerdere plekken op de website voor):

• De link “Handige tips en hulpmiddelen” in de header
• Links in het submenu “Informatie”, in focus- en hovertoestand
• Alle links in het mobiele navigatiemenu, in focus- en hovertoestand
• De knoppen “Meer informatie” op de pagina https://geldwijzerwinkel.nl/ onder de kop “Thema’s over geld”
• De knop “Versturen” op de pagina https://geldwijzerwinkel.nl/contact/
• De links “formulier”, “045-4059219” en “openingstijden” in de accordeons op de pagina https://geldwijzerwinkel.nl/veelgestelde-vragen/
• De link “GeldWijzerWinkel viert zijn 1 jarig jubileum” op de pagina https://geldwijzerwinkel.nl/?s=werk
• De links “Beleef Kerkrade kadokaarten” en “GeldWijzerWinkel” op de pagina https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/

Daarnaast is op veel plekken een combinatie gebruikt van roze (#E17695) op een grijze achtergrond (#F7F7F7), met een contrastverhouding van 2,7:1. Ook deze waarde is te laag, ongeacht of het om kleine of grote tekst gaat.

Oplossing

Zorg dat de kleur van teksten, links en knoppen met een normale tekstgrootte minimaal een contrast van 4,5:1 heeft tegen de achtergrond, en de kleur van grote of vetgedrukte tekst een contrast van 3,0:1. Zo weet je dat de teksten ook goed leesbaar zijn voor bezoekers met een visuele beperking zoals kleurenblindheid.

Hieronder vind je meer voorbeelden van deze kleurencombinatie, maar deze lijst is niet volledig:

• links in de nieuwsberichten op pagina https://geldwijzerwinkel.nl/category/nieuws/
• links zoals "GeldWijzerWinkel viert zijn 1 jarig jubileum" op https://geldwijzerwinkel.nl/category/nieuws/
• roze links "Lees verder" ( #E17695) op pagina https://geldwijzerwinkel.nl/category/nieuws/
• links “Lees verder” on pagina https://geldwijzerwinkel.nl/nieuws/
• links naast de datums van de nieuwsberichten in de gefocuste staat op https://geldwijzerwinkel.nl/nieuws/.

Oplossing:

Zorg ervoor dat het contrast van kleine tekst minimaal 4,5:1 is en dat het contrast van grote tekst minimaal 3,0:1 is.

SC 1.4.11 Contrast roze elementen op witte achtergrond is te laag

Op verschillende pagina’s zijn er interactieve of informatieve elementen waarbij de kleur roze (#E17695) gecombineerd is met een witte achtergrond (#FFFFFF). De contrastverhouding van deze combinatie is 2,9:1, wat lager is dan de minimale vereiste waarde van 3,0:1 voor interactieve elementen. Hierdoor zijn deze elementen mogelijk niet goed zichtbaar voor bezoekers met een visuele beperking.

Enkele voorbeelden:

• Het “Delen”-icoon onderaan de nieuwspagina’s, zoals op https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/ (drie witte stippen verbonden door lijnen op een roze achtergrond);
• De socialmedia-iconen die verschijnen als je met de muis over het bovengenoemde “Share”-icoon beweegt. Ook deze iconen hebben een te lage contrastverhouding bij hover;
• De focusindicator van het zoekveld op de pagina https://geldwijzerwinkel.nl/category/nieuws/

Oplossing:

Interactieve en informatieve elementen moeten altijd een minimale contrastverhouding van 3,0:1 hebben ten opzichte van de achtergrond. Dit geldt voor alle toestanden: normaal, hover, focus en actief. Zorg dat de gebruikte kleuren worden aangepast of aangevuld met extra visuele kenmerken, zodat deze elementen goed waarneembaar en bruikbaar zijn voor iedereen.

SC 2.4.2 Meerdere pagina’s hebben dezelfde title-tekst

De pagina’s https://geldwijzerwinkel.nl/thema/ en https://geldwijzerwinkel.nl/geldplan/ hebben dezelfde tekst staan in het title-element van de HTML: “GeldWijzerWinkel – We staan voor je klaar”. Hierdoor is het voor bezoekers – en ook voor zoekmachines – lastig om het onderscheid tussen de pagina’s te maken. Elke pagina moet een unieke en beschrijvende paginatitel hebben die de inhoud van die specifieke pagina duidelijk weergeeft.

Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger.

Oplossing:

Verander de tekst in het title-element van, zodat elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.

SC 2.4.5 Er is maar één manier om een webpagina te vinden

Er is geen tweede manier om de pagina's van deze website te vinden.

Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Oplossing:

Zorg dat de webpagina’s op meerdere manieren bereikbaar zijn.

SC 1.4.11 Huidige pagina in menu heeft niet genoeg contrast

In het hoofdmenu wordt de huidige pagina aangegeven met een roze onderstreping ( #FB88A7) op een witte achtergrond ( #FFFFFF). De contrastverhouding is 2,3:1.

Oplossing:

Het contrast van visuele indicatoren zoals deze onderstreping moet ten minste 3,0:1 zijn.

SC 1.4.4 Zoomen is niet mogelijk in oudere browsers door bepaalde code

In het <head>-gedeelte van de HTML-code staat maximum-scale=1 en user-scalable=no. Deze codes zorgen ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze codes.

SC 1.4.3 Contrast van tekst op knop is minder dan 4,5:1

De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiebanner. De knop "Accepteren" heeft witte tekst ( #FFFFFF) op een groene achtergrond (#29BE1E). Het contrast tussen deze kleuren is 2,5:1, en dit is niet genoeg.

Oplossing:

Zorg dat het contrast minimaal 4,5:1 is.

SC 2.4.3 Toetsenbordfocus gaat buiten het dialoogvenster

De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiebanner in de vorm van een dialoogvenster. De toetsenbordfocus kan uit dit dialoogvenster ontsnappen en naar elementen op de onderliggende pagina gaan.

Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster actief is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Oplossing:

Om dit probleem op te lossen, zijn er twee mogelijke benaderingen: Houd de focus binnen het cookiebanner-venster: Zorg dat de toetsenbordfocus binnen het cookiebanner-venster blijft zolang dit geopend is. Bezoekers moeten met het toetsenbord kunnen navigeren tussen alle interactieve elementen binnen het venster, zonder dat de focus naar elementen buiten het venster kan springen. Pas hiervoor focusbeheer toe, bijvoorbeeld met JavaScript, en zorg dat de focus terugkeert naar een logisch element als de bezoeker het venster sluit.

Sluit het cookiebanner-venster automatisch als de focus het venster verlaat: Als alternatief kan het cookiebanner-venster automatisch worden gesloten of samengeklapt zodra de toetsenbordfocus het venster verlaat. Dit voorkomt dat gebruikers onbedoeld verder navigeren terwijl het venster nog zichtbaar is. Let er wel op dat het voor de bezoeker duidelijk is wat er gebeurt, en dat de site goed bruikbaar blijft.

SC 2.4.11 De cookiebanner valt over de focusindicator heen

Als de cookiebanner open is, kan de toetsenbordfocus buiten de banner gaan. Interactieve elementen zoals de links "mm360 agency" en "Privacystatement" kunnen daardoor nog steeds toetsenbordfocus krijgen. De focusindicator is alleen niet zichtbaar, omdat die verborgen is achter de cookiebanner.

Oplossing:

Je kunt dit oplossen door de focus in het venster te houden totdat de bezoeker het venster sluit. Je kunt er ook voor kiezen om het venster automatisch in te klappen op het moment dat de focus eruitgaat.

SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken

Met de knop "Bekijk bewaren" in de cookiebanner kun je extra inhoud openen. Als je op de knop "Voorkeuren bewaren" klikt, klapt het dialoogvenster dicht en verschijnt er een witte knop onderaan het scherm. Als je de site bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 200%, is deze knop niet meer zichtbaar of bedienbaar. Dit gebeurt ook als iemand tot 400% inzoomt. Daarom wordt ook SC 1.4.10 afgekeurd.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen en alle functies gebruiken

In de cookiebanner is een deel van de inhoud niet zichtbaar als iemand de website bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%. De kop "Beheer toestemming" en de tekst eronder, de links "Cookiebeleid" en "Privacystatement" zijn bijvoorbeeld niet zichtbaar.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 1.3.1 Kop is niet gemarkeerd als koptekst

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die fungeert als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Een soortgelijk probleem komt voor op pagina https://geldwijzerwinkel.nl/cookiebeleid-eu/ bij de volgende teksten: "5.1 Technische of functionele cookies", "5.2 Statistieken cookies", "5.3 Marketing/Tracking cookies", "5.4 Sociale media" en "7.1 Beheer uw cookie toestemming".

Oplossing:

Gebruik een kop-element, zoals h3 of h4.

SC 4.1.2 Gebruikte rol is niet correct

In het hoofdmenu is het menu-item "Informatie" een a-element met role="generic". Dit element bevat het ARIA-attribuut aria-expanded="", wat niet is toegestaan voor deze rol. Bovendien heeft het a-element geen href-attribuut. Hierdoor herkent hulpsoftware het niet als een interactief element.

Oplossing:

Voeg de benodigde attributen toe om ervoor te zorgen dat het element correct wordt herkend als een interactief element, bijvoorbeeld door een geldig href-attribuut toe te voegen of door het type en de rol van het element aan te passen aan het interactieve gedrag. Dit zorgt ervoor dat ARIA-attributen zoals aria-expanded op de juiste manier worden gebruikt.

SC 1.4.13 Content die verschijnt bij hover moet makkelijk gesloten kunnen worden

Als je in het hoofdmenu met de muis over het menu-item "Informatie" beweegt, verschijnt een submenu. Dit submenu overlapt de inhoud van de pagina.

Oplossing:

De bezoeker moet deze content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

SC 1.1.1 Logo heeft geen alt-attribuut

In de footer heeft het logo met de tekst "GeldWijzerWinkel" geen tekstalternatief.

Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

SC 1.1.1 Logo heeft onvoldoende tekstalternatief

In de footer heeft het logo met de zichtbare tekst "mm360 agency" de alt-tekst "logo mm360.com".

In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.

Oplossing:

Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Logo mm360 agency”.

SC 1.1.1 Afbeelding zonder tekstalternatief is de enige inhoud van een link

Onder de tekst "Volg ons" in de footer staan iconen voor social media. Dit zijn links, maar ze hebben geen alternatieve tekst. Elk gelinkt icoon moet een betekenisvol tekstalternatief hebben dat het doel of de bestemming ervan beschrijft. Doordat de alt-teksten van deze afbeeldingen leeg zijn hebben de links geen inhoud (dit schendt ook succescriteria 2.4.4 en 4.1.2 ).

Oplossing:

Om de links toegankelijk te maken, geef je de afbeeldingen tekstalternatieven die het linkdoel beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

SC 2.4.4 Link met een afbeelding, linkdoel is onbekend

In de footer heeft de link met het icoon van Instagram geen duidelijk linkdoel.

Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

SC 1.4.1 Actieve link alleen aan kleur te herkennen

Op een klein scherm verschijnt een menuknop waarmee je het mobiele navigatiemenu kunt openen. De actieve link (de link naar de huidige pagina) in dit menu wordt alleen aangegeven met een andere tekstkleur.

Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dus niet welke link actief is en welke niet.

Oplossing:

Zorg ervoor dat actieve links ook nog op een andere manier te herkennen zijn, bijvoorbeeld door ze te onderstrepen of vetgedrukt te maken.

SC 2.1.1 Knop is niet met het toetsenbord te bedienen

Op een klein scherm verschijnt een menuknop waarmee je het mobiele navigatiemenu kunt openen. De knop "Informatie" in dit menu is niet toegankelijk via een toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve elementen op de website met het toetsenbord kunnen worden bediend.

SC 2.4.3 Mobiel menu werkt niet goed met toetsenbordfocus

Als je de website bekijkt op een klein scherm, verschijnt er een menuknop. Deze knop opent het mobiele navigatiemenu. Het menu gedraagt zich nog niet goed in combinatie met de toetsenbordfocus. Het valt over de pagina heen als het is uitgeklapt. Je moet bij dit soort menu’s extra goed op de toetsenbordfocus letten. Als het menu is geopend, moet de focus binnen het menu blijven. Een bezoeker moet niet naar andere elementen op de pagina kunnen tabben. Dit helpt bezoekers om makkelijk door het menu te navigeren, zonder dat ze per ongeluk op iets anders klikken.

Oplossing:

Zorg ervoor dat de focus in het menu blijft totdat de bezoeker dit sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.

SC 2.4.11 Elementen die toetsenbordfocus krijgen vallen onder mobiel menu

Op een klein scherm verschijnt een menuknop waarmee je het mobiele navigatiemenu kunt openen. Dit menu bedekt interactieve elementen op de onderliggende pagina. Deze elementen kunnen nog steeds toetsenbordfocus krijgen, ook al worden ze bedekt door het menu en zijn ze daarom onzichtbaar.

Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.

Oplossing:

Je lost dit op een van de volgende manieren op:

1. Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.

2. Sluit het menu automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat.

Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.

SC 1.1.1 Afbeelding zonder tekstalternatief is de enige inhoud van een link

Onderaan de pagina's met nieuws, zoals https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/, staat een icoon dat werkt als een link, weergegeven als drie stippen verbonden door lijnen. Het icoon heeft geen alternatieve tekst. Als je met de muis over dit icoon beweegt, verschijnen extra iconen van social media. Deze iconen werken ook als links, maar hebben geen alternatieve tekst. Daardoor hebben de links geen inhoud (dus succescriteria 2.4.4 en 4.1.2 worden ook overtreden).

Dit komt ook voor op de pagina’s https://geldwijzerwinkel.nl/gemeente-kerkrade-start-uitbetaling-energietoeslag/ en https://geldwijzerwinkel.nl/in-2022-bijdrage-energielasten-voor-inwoners-met-een-laag-inkomen/.

Oplossing:

Om de links toegankelijk te maken, geef je de afbeeldingen tekstalternatieven die het linkdoel beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

SC 2.1.1 Functionaliteit niet beschikbaar via toetsenbord

Onderaan pagina's met nieuws, zoals https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/, staat een icoon dat werkt als een link (drie stippen verbonden door lijnen). Als je met de muis over dit icoon beweegt, verschijnen extra iconen van social media. Via het toetsenbord kun je deze extra iconen niet openen.

Dit komt ook voor op de pagina’s https://geldwijzerwinkel.nl/gemeente-kerkrade-start-uitbetaling-energietoeslag/ en https://geldwijzerwinkel.nl/in-2022-bijdrage-energielasten-voor-inwoners-met-een-laag-inkomen/.

Oplossing:

Zorg dat alle interactieve elementen ook met het toetsenbord te bedienen zijn.

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Onderaan pagina's met nieuws, zoals https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/, staat een icoon dat werkt als link (drie stippen verbonden door lijnen). Als je navigeert met het toetsenbord, gaat de toetsenbordfocus na dit element naar onzichtbare interactieve elementen.

Dit komt ook op andere pagina’s voor: https://geldwijzerwinkel.nl/gemeente-kerkrade-start-uitbetaling-energietoeslag/, https://geldwijzerwinkel.nl/in-2022-bijdrage-energielasten-voor-inwoners-met-een-laag-inkomen/.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

SC 4.1.2 Toestand van het paneel is niet in de code van de knop vastgelegd

Onderaan pagina's met nieuws, zoals https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/, staat een icoon dat werkt als link (drie stippen verbonden door lijnen). Als je de muis over deze knop beweegt, opent een paneel met extra knoppen. Hulpsoftware weet niet of dit paneel geopend of gesloten is.

Oplossing:

Voeg een aria-expanded-attribuut toe aan de knop.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Onderaan pagina’s met nieuws, zoals https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/, staat een icoon dat werkt als link (drie stippen verbonden door lijnen). Als je er met de muis overheen beweegt, verschijnen er extra socialmedia-iconen die ook als links werken. Deze elementen zijn echter niet zichtbaar of bedienbaar als je de website bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Zie ook pagina’s:

• https://geldwijzerwinkel.nl/gemeente-kerkrade-start-uitbetaling-energietoeslag/
• https://geldwijzerwinkel.nl/in-2022-bijdrage-energielasten-voor-inwoners-met-een-laag-inkomen/.

Link naar pagina: Home

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat een decoratieve afbeelding naast de tekst "Wij zijn er voor gratis advies over geldzaken". Toch heeft deze afbeelding een tekstalternatief: "video preview". Schermlezers lezen deze alternatieve tekst voor.

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Je kunt dit op verschillende manieren bereiken:

• Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.

• Voor svg-elementen zorg je dat ze óf een leeg title-element hebben, óf verborgen zijn via aria-hidden=”true”.

• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

SC 2.4.4 Link heeft geen tekst, waardoor linkdoel onbekend is

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" staat een link die geen inhoud heeft en daardoor ook geen linkdoel. Het gaat om de eerste link in de HTML met de URL "https://vimeo.com/674417404" in het href-attribuut. Een blinde bezoeker weet nu niet waar de link naartoe zal leiden. Deze link heeft bovendien geen toegankelijke naam, daarom wordt dit ook afgekeurd bij succescriterium 4.1.2.

Oplossing:

Om dit op te lossen moet je de link content geven. Dat kun je als volgt doen:

• Tekst toevoegen aan het a-element: voeg beschrijvende tekst toe binnen het element.

• aria-label gebruiken: voeg het aria-label-attribuut toe aan de link en plaats hier een beknopte beschrijving van de bestemming in.

Zorg dat alle links een duidelijk linkdoel hebben.

SC 3.1.2 Toegankelijke namen zijn in het Engels geschreven

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" staat een link die de vorm heeft van een afspeelknop (een driehoek in een cirkel). De toegankelijke naam van deze link is "Play Video", in het Engels.

Schermlezers zullen Engelse labels uitspreken volgens de uitspraakregels van de primaire taal van de pagina, wat in dit geval Nederlands is. Dit kan leiden tot een verkeerde uitspraak, waardoor de naam moeilijk te begrijpen is.

Oplossing:

Vertaal de tekst naar het Nederlands zodat deze correct wordt uitgesproken door schermlezers.

SC 1.2.2 Video heeft geen ondertiteling

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" staat een video met gesproken woorden. Deze video heeft geen ondertiteling.

Ondertitels zijn essentieel voor bezoekers die doof of slechthorend zijn. Door de ondertiteling kunnen zij ook alle inhoud van de video tot zich nemen.

Oplossing:

Voeg ondertiteling toe aan de video.

SC 2.1.4 De Vimeo-video’s gebruiken letters als sneltoetsen

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" is een Vimeo-videospeler ingesloten. Deze speler maakt gebruik van sneltoetsen met één letter, zoals 'd' om technische details te bekijken.

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.

Oplossing:

Je lost dit op door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).

SC 4.1.2 Iframe heeft geen toegankelijke naam

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" staat een video die opent in een iframe. Deze iframe heeft geen title-attribuut.

Iframes moeten een goede beschrijving hebben. Die staat 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 bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

SC 2.4.3 Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

Naast de tekst "Wij zijn er voor gratis advies over geldzaken" staat een video die opent in een venster met een iframe. Als je het iframe met de "X"-knop sluit, wordt de toetsenbordfocus verplaatst naar de bovenkant van de pagina. De focus zou terug moeten gaan naar het element dat het venster heeft geactiveerd of het volgende logische element in de focusvolgorde van de pagina.

Oplossing:

Zorg dat de focus na het sluiten van het venster weer terechtkomt op het element waarmee het dialoogvenster werd geopend.

SC 2.4.6 Knoppen met dezelfde tekst hebben een andere functie

Onder de kop "Thema's over geld" staan meerdere knoppen met dezelfde zichtbare tekst: "Meer informatie". Elke knop leidt echter naar andere inhoud.

Je kunt met elk van deze knoppen een andere actie uitvoeren. Dit kan verwarrend zijn voor bezoekers met een schermlezer, omdat ze dezelfde tekst hebben. Het is niet duidelijk welke actie elke knop uitvoert.

Oplossing:

Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.

SC 1.1.1 Alternatieve tekst van informatieve afbeelding is niet betekenisvol

De logo’s van "Impuls", "Krediet bank Limburg", en "SchuldHulp Maatie Parkstad" onder de kop "Geldwijzerwinkel is een initiatief van:" hebben allemaal hetzelfde alt-attribuut, namelijk: "client". Dit is geen goede alternatieve tekst.

Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben, met de belangrijke informatie uit de afbeelding. Bovendien zijn deze logo's ook links. De alternatieve teksten van de logo’s geven in dat geval de naam aan de link. Die is nu dus drie keer hetzelfde. Ten slotte bevatten de alternatieve teksten niet de tekst die zichtbaar is op de logo's. Hierdoor kunnen ze niet met de stem worden geactiveerd. Hiervoor worden ze afgekeurd onder succescriterium 2.5.3.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Dit zal direct ook een toegankelijke naam geven aan de bijbehorende links.

SC 1.1.1 Logo heeft onvoldoende tekstalternatief

Onder de kop “Geldwijzerwinkel is een initiatief van:” staat een logo met de zichtbare tekst “de Bibliotheek Kerkrade | Brunssum Voerendaal | Simpelveld”. Het alt-attribuut van dit logo is “Bibliotheek Kerkrade”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Dit wordt ook afgekeurd onder succescriterium 2.5.3, omdat het logo een link is.

Oplossing:

Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “de Bibliotheek Kerkrade | Brunssum Voerendaal | Simpelveld”.

Link naar pagina: Contact

SC 1.3.1 strong-element in plaats van kop-element

De teksten "Openingstijden", "Adres" en "Contact" zijn gemarkeerd met strong-elementen in plaats van met de juiste heading-elementen.

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

SC 1.4.1 Links in lopende tekst verschillen alleen in kleur

In de alinea onder "Contact" staan de links "geldwijzerwinkel@kerkrade.nl" en "045-4059219". Deze links zijn alleen herkenbaar als link doordat ze een andere kleur hebben dan de gewone tekst.

Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.

Oplossing:

Zorg dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

• Onderstrepen: geef de links een onderstreping.

• Rand: voeg een subtiele rand (kader) toe aan de links.

SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat een formulier. De contrastverhouding tussen de paarse randkleur (#C8CADD) van de invoervelden en de paarse achtergrondkleur (#D0D2E6) is 1,1:1. Dit contrast moet minstens 3,0:1 zijn.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

SC 1.4.11 Aangepaste focusindicator heeft onvoldoende kleurcontrast

Op deze pagina staat een formulier. Alle velden gebruiken een aangepaste focusindicator om toetsenbordfocus aan te geven, die bestaat uit een roze rand ( #E17695) op een paarse achtergrond (#CFD2E6). De contrastverhouding tussen deze kleuren is 1,9: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.

Oplossing:

Zorg dat het contrast van de aangepaste focusindicator minimaal 3,0:1 is.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke gegevens. Bij de velden "Voornaam", "Achternaam", "E-mailadres*" en "Telefoon", ontbreekt het autocomplete-attribuut voor automatisch aanvullen.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout

Als je het formulier instuurt met onjuiste gegevens of lege velden, verschijnt een foutmelding met deze tekst: "Dit veld is vereist. Vul de volgende velden in: Voornaam, Achternaam."

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

SC 1.4.3 Contrast van de tekst is minder dan 4,5:1

Als je het formulier instuurt met onjuiste gegevens of lege velden, verschijnen de volgende woorden onder de overeenkomstige velden: "Voornaam", "Achternaam". Deze woorden zijn rood ( #C02B0A) op een paarse achtergrond ( #CFD2E6). De contrastverhouding tussen deze twee kleuren is te laag: 3,9:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 2.4.7 Toetsenbordfocus is niet zichtbaar op de knop

De knop met de tekst "Versturen" heeft geen zichtbare focusindicator.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op knoppen, zodat bezoekers weten wanneer zij een knop kunnen indrukken.

Link naar pagina: Thema’s

SC 1.4.3 Er is niet genoeg contrast tussen de tekst en delen van de achtergrond

De witte tekst (#FFFFFF) die begint met "Welke gevolgen..." heeft niet voldoende contrast met sommige delen van de achtergrond. Tegen de grijze achtergrondkleur (#838283) is de contrastverhouding bijvoorbeeld 3,8:1. De minimaal vereiste contrastverhouding is 4,5:1.

Oplossing:

Pas de tekst- of achtergrondkleur aan om ervoor te zorgen dat een minimale contrastverhouding van 4,5:1 wordt gehaald.

Link naar pagina: Zoekresultaten

SC 2.4.2 De paginatitel is onduidelijk

De titel van deze pagina is "You searched for werk - GeldWijzerWinkel", waarbij de zin "You searched for werk" in het Engels is, terwijl de pagina zelf in het Nederlands is. Deze mismatch kan gebruikers van schermlezers in verwarring brengen en ervoor zorgen dat de tekst raar wordt uitgesproken.

Oplossing:

Zorg dat de paginatitel volledig in het Nederlands is geschreven, zodat de taal hetzelfde is als de rest van de inhoud. Maak er bijvoorbeeld van: "Je zocht naar werk - GeldWijzerWinkel".

SC 3.1.2 Taalwisseling ontbreekt bij anderstalige content

De grote kop op deze pagina bevat de Engelse woorden "Results for...", en de tekst "8 results found" eronder is ook in het Engels geschreven. Bij deze Engelse woorden staat geen code voor een taalwisseling.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Je wilt echter dat de schermlezer op de juiste taal overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. De aangegeven elementen kunnen ook naar het Nederlands worden vertaald.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staan grijze teksten (#C2C2C2), zoals "Blog Post" en "Pagina", op een witte achtergrond (#FFFFFF). De contrastverhouding is 1,8:1, wat onder het vereiste minimum van 4,5:1 ligt.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 1.4.3 Er is niet genoeg contrast tussen de tekst en delen van de achtergrond

De witte teksten, zoals nummer 2 bij "Gemeente Kerkrade start uitbetaling energietoeslag" en nummer 3 bij "In 2022 bijdrage energielasten voor inwoners met een laag inkomen", hebben onvoldoende contrast met sommige delen van de achtergrond. Tegen de grijze achtergrondkleur ( #ADAEB0) is de contrastverhouding bijvoorbeeld 2,2:1.

Oplossing:

Zorg ervoor dat de contrastverhouding voldoet aan het vereiste minimum van 4,5:1.

SC 1.1.1 Afbeeldingen zonder tekstalternatief zijn de enige inhoud van een link

De afbeelding naast de tekst “Gemeente Kerkrade start uitbetaling energietoeslag” is een link, maar bevat geen alternatieve tekst. Hierdoor is de link niet toegankelijk. Hetzelfde geldt voor de afbeelding naast de tekst “In 2022 bijdrage energielasten voor inwoners met een laag inkomen”. Doordat er geen alternatieve teksten zijn hebben de links geen inhoud, en dit wordt afgekeurd onder succescriterium 2.4.4 (Linkdoel - context) en 4.1.2 (Naam, rol, waarde).

Oplossing:

Om de links toegankelijk te maken, geef je de afbeeldingen tekstalternatieven die het linkdoel beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

Link naar pagina: Category – Nieuws

SC 1.4.11 De rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat een zoekveld. De contrastverhouding tussen de grijze rand van het invoerveld (#F5F5F5) en de witte achtergrond (#FFFFFF) is 1,0:1. Dit contrast moet ten minste 3,0:1 zijn.

SC 1.4.3 Placeholder-tekst heeft niet genoeg contrast

Op deze pagina staat een zoekveld. De grijze placeholder-tekst (#757575) heeft een contrast van 4,2:1 op de lichtgrijze achtergrond (#F5F5F5), wat onder het vereiste minimum van 4,5:1 ligt.

Oplossing:

Vergroot het contrast tussen de placeholder-tekst en de achtergrondkleur, zodat het minimaal 4,5:1 is.

SC 4.1.2 Zoekknop heeft geen toegankelijke naam

De zoekknop bij het zoekveld heeft geen toegankelijke naam. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet.

Oplossing:

Geef een toegankelijke naam aan de knop. Dit kun je op verschillende manieren doen:

• Zichtbaar label: voeg een zichtbaar label naast de knop toe (bijv. "Zoeken”).
• aria-label: voeg met het aria-label-attribuut op het button-element een beschrijvend label toe.
• alt-tekst: als de knop een afbeelding heeft, voeg dan een beschrijvende alt-tekst toe (bijvoorbeeld alt=”Zoeken”).

SC 1.4.11 Contrast van zoek-icoon (vergrootglas) is te laag

Op deze pagina staat een zoekveld. Het roze icoon van een vergrootglas (#E17695) dat in het veld staat, heeft tegen de lichtgrijze achtergrond (#F5F5F5) een contrastverhouding van 2,7:1, wat lager is dan de vereiste 3,0:1 voor iconen en andere grafische elementen.

Oplossing:

Zorg dat het contrast van iconen en andere grafische elementen minimaal 3,0:1 is.

SC 3.1.2 Placeholder-tekst en toegankelijke naam van zoekveld zijn in het Engels

Het zoekveld op deze pagina heeft de placeholder-tekst "Search" en de toegankelijke naam "Search for:". Deze teksten zijn in het Engels, wat afwijkt van de primaire taal van de pagina.

Oplossing:

Vertaal de placeholder-tekst en de toegankelijke naam naar het Nederlands. Gebruik bijvoorbeeld "Zoeken" in plaats van "Search".

SC 2.4.4 Linktekst is niet duidelijk genoeg

Er staan meerdere links op deze pagina met de onduidelijke tekst "Lees verder". Deze tekst beschrijft de bestemming van de link niet duidelijk.

Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘lees meer (over het project)’ of ‘lees meer (in onze blog)’.

SC 1.3.2 Artikelen hebben een onlogische leesvolgorde

De volgorde van de HTML-elementen binnen artikelen is onjuist. De huidige volgorde begint met een de categorie, zoals "In Nieuws", gevolgd door de kop en dan de tekst.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

Link naar pagina: GeldWijzerWinkel viert zijn 1 jarig jubileum

SC 3.1.2 Toegankelijke namen zijn in het Engels geschreven

Op deze pagina staat een link in de vorm van een afspeelicoon (een driehoek in een cirkel). De toegankelijke naam van deze link is "Play Video", in het Engels.

Oplossing:

Vertaal de toegankelijke naam naar het Nederlands.

SC 4.1.2 Iframe heeft geen toegankelijke naam

Op deze pagina staat een video die opent in een iframe. Dit iframe heeft geen title-attribuut.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Link naar pagina: Gemeente Kerkrade start uitbetaling energietoeslag

SC 1.3.1 strong-element in plaats van kop-element

De tekst “Niet bekend bij gemeente? Dan energietoeslag aanvragen” is gemarkeerd met een strong-element in plaats van een heading-element.

Dit komt ook voor op pagina https://geldwijzerwinkel.nl/privacystatement/ bij de tekst "Persoonsgegevens die wij verwerken" en andere vergelijkbare teksten op de pagina, en ook op de pagina https://geldwijzerwinkel.nl/geldplan/ bij de teksten "Beter rondkomen", "Rondkomen met kinderen" en "Bijna 18".

Gebruik alleen kop-elementen zoals h2 om koppen te markeren, niet het strong-element.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren.

Link naar pagina: In 2022 bijdrage energielasten voor inwoners met een laag inkomen

De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.

Link naar pagina: Team

SC 1.4.3 The contrast between text and parts of the background is insufficient

De witte tekst (#FFFFFF) die begint met "Onze medewerkers weten..." heeft niet voldoende contrast met sommige delen van de achtergrond. Tegen de grijze achtergrondkleur (#838283) is de contrastverhouding bijvoorbeeld 3,8:1. De minimaal vereiste contrastverhouding is 4,5:1.

Link naar pagina: Privacystatement

De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.

Link naar pagina: Geldplan

SC 1.4.3 Het contrast tussen tekst en delen van de achtergrond is onvoldoende

De witte tekst (#FFFFFF) die begint met "Jouw leven verandert..." heeft niet voldoende contrast met sommige delen van de achtergrond. Tegen de grijze achtergrondkleur (#838283) is de contrastverhouding bijvoorbeeld 3,8:1. De minimaal vereiste contrastverhouding is 4,5:1.

Link naar pagina: Сookiebeleid

SC 1.1.1 Icoon ‘opent in nieuw venster’ heeft geen tekstalternatief

De links in accordeons hebben een icoon dat aangeeft dat de link in een nieuw browsertabblad wordt geopend. Bijvoorbeeld in de accordeon “WordPress”. Deze iconen hebben geen alternatieve tekst. Hierdoor weet een blinde bezoeker niet dat deze link een nieuwe browsertab zal openen. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen.

Oplossing:

Voeg de informatie dat de link een nieuwe browsertab opent toe als visueel verborgen tekst die wel toegankelijk is voor schermlezers.

SC 1.3.1 Er staan twee kopregels van hetzelfde niveau direct onder elkaar

In sommige accordeons staan tabellen met lege cellen, bijvoorbeeld in de accordeon "Facebook”. Het gaat hier om de tabel onder "Doel wordt onderzocht". In de HTML zijn koppen zoals "Naam", "Verval" en "Functie" aanwezig voor elke rij. Maar als een cel leeg is, staan koppen van hetzelfde niveau, zoals "Verval" en "Functie", achter elkaar zonder inhoud ertussen.

Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h5-element mag een h6-element komen of andere content, maar niet nog een keer een h5-element of een h4-element.

Oplossing:

Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.

Link naar pagina: Page Not Found

SC 3.1.2 De titel en inhoud van de pagina staan in een andere taal

De primaire taal van deze pagina is ingesteld op Nederlands (lang="nl-NL", maar er is wat inhoud die in een andere taal is dan de primaire taal. De titel van de pagina is "Page not found - GeldWijzerWinkel", waarbij de zin "Page not found" in het Engels is. De kop "Pagina niet gevonden" en de knop "Back Home" zijn ook in het Engels.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. Of vertaal de aangegeven elementen naar het Nederlands.

Link naar pagina Gemeente Kerkrade start uitbetaling energietoeslag

Link naar PDF Wat is 120% van het sociaal minimum?

SC 2.4.2 Titel van document is niet correct

In de bestandseigenschappen van dit pdf-document is de titel "Microsoft Word - Aanvraagformulier 2022.Inkomensgegevens" ingesteld. De tekst "Microsoft Word" is onnodig en beschrijft de inhoud van het document niet voldoende.

Oplossing:

Bewerk de titel in de documenteigenschappen van de pdf zodat deze de werkelijke inhoud weergeeft en verwijder de tekst “Microsoft Word”.

SC 3.1.1 De taal is niet ingesteld in de metadata

In de metadata van deze pdf is de taal niet ingesteld.

Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.

2. Ga naar Bestand > Eigenschappen.

3. Ga naar het tabblad Geavanceerd.

4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).

5. Klik op OK en sla het bestand op.

SC 1.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document ontbreken codes, waardoor de inhoud niet toegankelijk is voor schermlezers.

Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Oplossing:

Voeg codes toe aan het document die de structuur van het document weergeven.

Link naar pagina: Veelgestelde vragen

SC 4.1.2 Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op de pagina zijn secties met verborgen inhoud aanwezig. 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. De toestand is namelijk niet in de code vastgelegd.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

SC 2.4.3 Klikbare items in een gesloten accordeonsectie krijgen toch toetsenbordfocus

De focusvolgorde binnen de accordeons klopt niet. Elementen in ingeklapte blokken krijgen nog steeds toetsenbordfocus, ook al zijn ze niet zichtbaar. Dat gebeurt bijvoorbeeld bij de links "formulier" en "045-4059219" in de accordeon "Hoe kom ik in contact met de GeldWijzerWinkel?", bij de link "formulier" in de accordeon "Wanneer is de GeldWijzerWinkel geopend?" en de link "openingstijden" in de accordeon "Moet ik een afspraak maken voor een bezoek aan de GeldWijzerWinkel?".

Dit is verwarrend voor bezoekers die met het toetsenbord navigeren en daarbij naar het scherm kijken.

Oplossing:

Zorg dat elementen die niet zichtbaar zijn geen toetsenbordfocus krijgen.

SC 1.4.1 Links in de lopende tekst verschillen alleen in kleur

In sommige accordeons op deze pagina staan links die alleen door kleur te onderscheiden zijn van de tekst eromheen. In de accordeon "Hoe kom ik in contact met de GeldWijzerWinkel?" zijn bijvoorbeeld de links "formulier" en "045-4059219" alleen visueel te herkennen als link door hun kleur.

Hetzelfde probleem is te zien op pagina https://geldwijzerwinkel.nl/geldwijzerwinkel-viert-zijn-1-jarig-jubileum/ in de links "Beleef Kerkrade kadokaarten" en "GeldWijzerWinkel" onder "GeldWijzerWinkel viert zijn 1 jarig jubileum".

Oplossing:

Zorg dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

• Onderstrepen: geef de links een onderstreping.
• Rand: voeg een subtiele rand (kader) toe aan de links.

Link naar pagina: Nieuws

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op de pagina staan grijze teksten (#888888) op een lichtgrijze achtergrond (#F7F7F7). Bijvoorbeeld de tekst "10 augustus 2022 in Nieuws". De contrastverhouding is hier 3,3:1, wat onder het vereiste minimum van 4,5:1 is.