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

De website heeft geen zoekfunctie, dus pagina's kunnen alleen worden gevonden via een enkele link op een andere pagina.
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.

Voldoet niet aan SC 2.4.5

Tekst heeft niet genoeg contrast

Op alle pagina's van de website wordt de kleurencombinatie van wit en oranje (#F49800) gebruikt voor teksten. Het contrast tussen deze kleuren is 2,2:1.

Als de tekst kleiner is dan 24px, moet het contrast minstens 4,5:1 zijn. Als de tekst meer dan 24px is, moet het contrast minstens 3,0:1 zijn. Hieronder staan enkele voorbeelden, maar het komt ook op andere plaatsen voor.

Op de [homepage] (https://mijnrolduckerveld.nl/) heeft de tekst "Wonen midden in de natuur..." in carrousel boven de kop “IN ROLDUCKERVELD BEN JE THUIS” witte tekst op een oranje achtergrond. Het kleurcontrast moet ten minste 4,5:1 zijn.

De pagina Nieuwsberichten heeft een kopje "Nieuwsberichten" met witte tekst op een oranje achtergrond. Het kleurcontrast moet minimaal 3,0:1 zijn. Op deze pagina staat "Lees het bericht" met een oranje tekst op een witte achtergrond. Het kleurcontrast moet minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3

Decoratieve afbeelding is niet verborgen voor schermlezers

Op pagina's met artikelen staan decoratieve afbeeldingen boven de koppen. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Op de homepage onder "Nieuws" heeft een decoratieve afbeelding naast de kop "Start van onderzoeken en herinrichting middengebied" bijvoorbeeld de alternatieve tekst: “middengebied Rolduckerveld”.

Op de pagina Activiteiten heeft de afbeelding naast "Buurtwandeling Kerkrade-Oost - 28 september 2024" het tekstalternatief "wandeling".

Op de pagina Nieuwsberichten heeft de afbeelding naast "Ontdek de plannen in de Oostkamer" het tekstalternatief "stickers Oostkamer raam". Zorg ervoor dat alle decoratieve afbeeldingen verborgen zijn voor hulpsoftware.

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 title-element hebben, óf verborgen zijn via aria-hidden=”true”.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

Voldoet niet aan SC 1.1.1

strong-element in plaats van kop-element

Op meerdere pagina's van de website zijn koppen gemarkeerd met <strong> in plaats van met de juiste kop-elementen. Bijvoorbeeld de teksten "Gebiedsvisie en herontwikkeling", "Vooruitgang en investeringen", "Status sociale koopwoningen" op de pagina Bouw.

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>.

Voldoet niet aan SC 1.3.1

Op de pagina's Bouw en Koopwoningen staan afbeeldingen die functioneren als links om een carrousel te openen. Deze carrousels hebben verschillende toegankelijkheidsproblemen. Die beschrijven we hieronder.

Knoppen kunnen niet met het toetsenbord worden bediend

De carrousel heeft knoppen met pijlen om tussen de slides te navigeren. Deze knoppen zijn niet toegankelijk via het toetsenbord.

Oplossing:

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

Voldoet niet aan SC 2.1.1

Toestand van de knop is niet vastgelegd in de code

In de carrousel staat een knop met een icoon van een vergrootglas om de afbeelding in te zoomen. Deze kan meerdere toestanden hebben (bijvoorbeeld ingedrukt, niet ingedrukt), maar in de code is niet vastgelegd wat de huidige toestand is. Dit is wel geprobeerd, door het attribuut aria-checked toe te voegen, maar dit werkt niet:als de knop wordt geactiveerd is de waarde van het attribuut false, in plaats van true.

Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop.

Oplossing:

Zorg ervoor dat de status van de knop correct wordt weergegeven in de code.

Voldoet niet aan SC 4.1.2

Contrast van icoon op knop is te laag

De knoppen met pijlen in de carrousel hebben onvoldoende kleurcontrast tussen het icoon en de achtergrond, op het moment dat de achtergrond een afbeelding is. Bijvoorbeeld op de pagina Bouw. Je ziet het probleem bij de afbeelding met het bijschrift “Blok A, view 1 vanaf inrit_HQ-small”. De contrastverhouding is te laag en bedraagt op sommige punten 2,2:1.

Oplossing:

Zorg voor een minimaal contrast van 3,0:1.

Voldoet niet aan SC 1.4.11

Afbeeldingen hebben geen alternatieve tekst

De elementen met afbeeldingen die links zijn waarmee je de carrousel kunt openen hebben de ARIA-rol img in de code. Een aria-label-attribuut wordt gebruikt om deze elementen een toegankelijke naam te geven. Er zijn echter afbeeldingen die een leeg aria-label-attribuut hebben. Hierdoor hebben de links geen linktekst. Op de pagina Bouw zie je dit bijvoorbeeld bij de eerste en de derde afbeelding.

Oplossing:

Om de links toegankelijk te maken, moet je de elementen met de img-rol een toegankelijke naam geven. Dit kan worden gedaan met een aria-label-attribuut met een betekenisvolle tekst om het doel van de link te beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden. Zie ook succescriterium 2.4.4.

Voldoet niet aan SC 1.1.1

Link met een afbeelding, linkdoel is onbekend

De afbeeldingen zijn links om een carrousel met afbeeldingen te openen. Deze informatie staat niet in de HTML-code. Hierdoor is het voor een blinde bezoeker niet duidelijk wat deze links doen.

Oplossing:

Je lost dit op door informatie te geven over het gedrag van de link. Dit kun je als volgt doen:

• Verborgen tekst toevoegen: voeg beschrijvende tekst toe aan het a-element, zoals (“opent een grote weergave”), die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).
• aria-haspopup=”dialog” gebruiken: voeg het attribuut aria-haspopup met de waarde dialog toe aan het a-element, om aan te geven dat de link een grote weergave opent. Dit kun je zien als een soort dialoogvenster.

Voldoet niet aan SC 2.4.4

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Als je op de afbeeldingen klikt opent een dialoogvenster met een carrousel. Dit venster heeft een onjuiste ARIA role="document" en heeft geen toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Zorg dat het dialoogvenster de juiste role="dialog" heeft. Voeg het aria label-attribuut toe aan het dialoogvenster, met een duidelijke beschrijving van de inhoud (aria label="Beschrijving van inhoud").

Voldoet niet aan SC 4.1.2

Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

Nadat je het dialoogvenster met de carrousel hebt gesloten, keert de toetsenbordfocus niet terug naar het element dat dit dialoogvenster activeert of naar het volgende logische element in de focusvolgorde van de pagina.

Oplossing:

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

Voldoet niet aan SC 2.4.3

Alt-tekst van het logo bevat niet alle tekst

Er staat een logo in de header van de website. De volledige tekst van het logo is "Rolduckerveld, hier wil je zijn!". De alternatieve tekst is "logo rolduckerveld". 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. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Voldoet niet aan SC 1.1.1

Linkdoel is niet duidelijk

Het logo bovenaan de pagina, dat ook een link is, heeft geen beschrijvende tekst voor de bestemming. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.

Oplossing:

Pas een van deze opties toe om de link meer context te geven:

Alt-tekst: als het logo een afbeelding is, kun je een beschrijvende alt-tekst toevoegen die de bestemming van de link beschrijft. De alt-tekst moet de volledige tekst van het logo bevatten en bijvoorbeeld de tekst 'homepage'. Visueel verborgen tekst: voeg beschrijvende tekst toe binnen het a-element en verberg deze visueel met CSS, terwijl je de tekst toegankelijk houdt voor schermlezers.

Voldoet niet aan SC 2.4.4

Toegankelijke naam is niet volledig

De toegankelijke naam van de link met het logo in de header bevat niet de volledige tekst van het logo: het gedeelte "hier wil je zijn" ontbreekt. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is, voorkomt in de toegankelijke naam, het liefst vooraan.

Voldoet niet aan SC 2.5.3

Contrast van tekst is te laag bij toetsenbordfocus

In het hoofdmenu bovenaan de pagina staan links die submenu's openen. De links in de submenu's hebben onvoldoende contrast als ze toetsenbordfocus krijgen. De huidige contrastverhouding is 1,4:1.

Oplossing:

Vergroot het contrast tussen de links met focus en de achtergrond naar minimaal 4,5:1.

Voldoet niet aan SC 1.4.3

Toetsenbordfocus gaat buiten het mobiele menu

Als je de website bekijkt op een klein scherm staat een menuknop bovenaan de pagina. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers uit het mobiele menu navigeren met het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft.

Oplossing:

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

Dit kun je op een van de volgende manieren oplossen:

Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.

Voldoet niet aan SC 2.4.3

Elementen die toetsenbordfocus krijgen vallen onder mobiel menu

Als je de website bekijkt op een klein scherm met het mobiele menu geopend, overlapt het menu interactieve elementen op de onderliggende pagina. Deze onderliggende elementen kunnen nog steeds toetsenbordfocus krijgen, ook al worden ze verborgen door het menu.

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: Houd de focus binnen het mobiele menu: zorg dat de toetsenbordfocus binnen het menu blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.van Sluit het mobiele menu automatisch: sluit het menu 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.

Voldoet niet aan SC 2.4.11

Tekst heeft niet genoeg contrast

De links in het navigatiemenu in de footer zijn oranje (#F49800) op een lichtoranje achtergrond (#FBF0E1) als ze toetsenbordfocus krijgen of als de muisaanwijzer eroverheen gaat (hover). Het kleurcontrast is 2,0:1.

Dezelfde kleurencombinatie wordt gebruikt om de huidige status van deze links aan te geven. Bijvoorbeeld de link "Oostkamer" op de pagina Oostkamer.

Oplossing:

Zorg dat het kleurcontrast ten minste 4,5:1 is, ook bij toetsenbordfocus en hover.

Voldoet niet aan SC 1.4.3

Kleurcontrast van informatieve iconen is niet voldoende

De iconen voor sociale media in de footer hebben onvoldoende kleurcontrast. De witte iconen tegen de oranje achtergrond hebben een contrastverhouding van 2,2:1.

Oplossing:

Zorg dat de iconen voldoende contrast hebben. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.

Voldoet niet aan SC 1.4.11

Logo heeft geen alt-tekst

De socialmedia-logo's in de footer die zijn geplaatst met een img-element, hebben geen alt-tekst.

Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Door de alt-tekst niet in te vullen, zeg je eigenlijk: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.

Oplossing:

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

Voldoet niet aan SC 1.1.1

Alt-tekst van het logo bevat niet alle tekst

Er staat een logo in de footer van de website. De volledige tekst van dit logo is "MM 360 agency" De alternatieve tekst is "MM Logo Wit". 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. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Voldoet niet aan SC 1.1.1

Linkdoel is niet duidelijk

Het logo met de tekst "MM 360 agency" werkt als een link. De toegankelijke naam van de link is "MM Logo Wit". De bestemming van de link is niet duidelijk. Hierdoor weten bezoekers die hulpsoftware gebruiken niet naar welke pagina of inhoud de link leidt. Dit kan worden opgelost door deze informatie toe te voegen aan de alt-tekst van de logo-afbeelding, of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label.

Voldoet niet aan SC 2.4.4

Tekstalternatief is onvolledig

Het tekstalternatief van het logo met de tekst 'MM 360 agency' bevat niet de volledige tekst van het logo: het gedeelte '360 agency' ontbreekt.

De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is, voorkomt in de toegankelijke naam, het liefst vooraan.

Voldoet niet aan SC 1.1.1

Tekst van het logo staat niet in toegankelijke naam

In de footer van de website staat in de rechterhoek een logo met de tekst: “MM 360 agency”. De toegankelijke naam van deze link is “MM Logo FC Wit”. Zoals je ziet is de toegankelijke naam van de link niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als je hem met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het logo ziet. Als de toegankelijke naam anders is, zal het systeem de link dus niet herkennen.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.

Voldoet niet aan SC 2.5.3

Contrast van de keuzevakjes is te laag

In de cookiebanner opent de knop "BEKIJK VOORKEUREN" een tab met cookie-opties met oranje keuzevakjes. Deze keuzevakjes hebben een witte kleur op een oranje achtergrond als ze zijn uitgeschakeld. Het kleurcontrast is te laag: 2,9:1.

Oplossing:

Zorg dat het contrast minimaal 3,0:1 is.

Voldoet niet aan SC 1.4.11

Keuzevakjes hebben geen toegankelijke naam

In de cookiebanner opent de knop "BEKIJK VOORKEUREN" een tab met cookie-opties met oranje keuzevakjes. De keuzevakjes hebben geen toegankelijke namen. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het keuzevakje een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

Voldoet niet aan SC 4.1.2

Toetsenbordfocus gaat buiten het dialoogvenster

De toetsenbordfocus kan ontsnappen uit de cookiebanner en terechtkomen op de onderliggende pagina.

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:

Je lost dit op door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten op het moment dat de focus eruit gaat.

Voldoet niet aan SC 2.4.3

Elementen die toetsenbordfocus krijgen vallen onder cookiebanner

De cookiebanner bedekt interactieve elementen op de onderliggende pagina. Deze onderliggende elementen kunnen nog steeds toetsenbordfocus krijgen, ook al zijn ze verborgen onder de banner.

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.

Voldoet niet aan SC 2.4.11

Kop is niet gemarkeerd als koptekst

De tekst “Cookies” in de cookiebanner is niet gemarkeerd als een koptekst.

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 springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.

Voldoet niet aan SC 1.3.1

Onjuiste nesting van elementen in summary-element

In de cookiebanner opent de knop "BEKIJK VOORKEUREN" een tab met cookie-opties met oranje keuzevakjes. Deze secties zijn gemarkeerd met het summary element. Sommige summary-elementen bevatten interactieve elementen: oranje of groene keuzevakjes.

Dit komt ook voor op de pagina Cookiebeleid onder “7.1 Beheer uw cookie toestemming”. Hier zijn summary-elementen die keuzevakjesbevatten.

Oplossing:

Interactieve elementen (zoals formulierelementen) moeten altijd buiten het summary-element worden geplaatst. Schermlezers kunnen hier namelijk niet goed mee overweg. Pas de structuur aan zodat er binnen het element <summary> alleen inline tekst staat.

Voldoet niet aan SC 4.1.2

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

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd wordt tot 400%, is de knop "Beheer toestemming" niet zichtbaar en niet bedienbaar. In de cookiebanner is de tekst bovenaan de banner niet meer leesbaar.

Oplossing:

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

Voldoet niet aan SC 1.4.10

De tekst op de knop is niet zichtbaar bij focus

Als je de cookiebanner sluit, verschijnt onderaan de pagina een knop. Deze knop heeft de zichtbare tekst 'Beheer toestemming', maar deze wordt alleen getoond als de muisaanwijzer erover beweegt. Als de knop toetsenbordfocus krijgt, blijft de tekst verborgen. Dit maakt de informatie ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken, omdat zij de knoptekst niet zien als ze met de Tab-toets er naartoe navigeren.

Oplossing:

Zorg dat de tekst zowel bij hover als bij focus zichtbaar is.

Voldoet niet aan SC 2.1.1 Voldoet niet aan SC 3.3.2

Link naar pagina: Home

Het type content in het iframe is niet beschreven in het title-attribuut

Deze pagina bevat een iframe onder de header van de website met het title-attribuut "HEEMwonen - Fietstocht V5".

Iframes moeten een goede beschrijving hebben. Die zet je 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.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Voldoet niet aan SC 2.4.6

Video speelt automatisch af

Deze pagina bevat een video die automatisch wordt afgespeeld en niet kan worden gepauzeerd of gestopt. Het kan storend zijn voor mensen met een cognitieve beperking als een video op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.

Oplossing:

Er moet een manier zijn waarmee bezoekers dit soort multimedia kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.

Voldoet niet aan SC 2.2.2

Video zonder geluid heeft geen transcriptie

Op deze pagina staat een video zonder geluid waarin tekst te zien is, die niet toegankelijk is voor blinde bezoekers.

Oplossing:

Maak deze informatie toegankelijk voor blinde bezoekers door een uitgeschreven tekst (transcriptie) toe te voegen. Zet deze tekst naast of onder de video op de pagina, zodat het duidelijk is dat het een beschrijving van de video-inhoud is.

Voldoet niet aan SC 1.2.1

Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de onduidelijke tekst "Lees meer", bijvoorbeeld onder "Nieuws". Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Dit komt ook voor onder "Woningaanbod in Rolduckerveld", hier staat een link met de onduidelijke tekst "Meer informatie".

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)’.

Voldoet niet aan SC 2.4.4

Kop-element gebruikt voor tekst die geen kop is

De tekst "In Rolduckerveld ben je thuis" op deze pagina is geen koptekst, maar is wel gemarkeerd met een <h2>-element om de letters groter te maken.

Het kop-element (h2) is dus niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h2-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h2-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.

Voldoet niet aan SC 1.3.1

Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Als je deze pagina bekijkt op een scherm van 1280 bij 1024 pixels en inzoomt tot 200%, valt de tekst "In Rolduckerveld ben je thuis" (boven "In de buurt") weg.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 200% bij een schermresolutie van 1280 bij 1024 pixels.

Voldoet niet aan SC 1.4.4

Slides kunnen niet met muis of gebaar worden bediend

Onder de secties “Nieuws” en “Activiteiten” staat een carrousel. In deze carrousel kunnen bezoekers de slides horizontaal verslepen om te navigeren.

Moet je speciale handelingen uitvoeren om door een carrousel te navigeren, zoals vegen of slepen met een muis? Dan moet er ook een eenvoudigere manier zijn om dit te doen. Dit is bedoeld voor bezoekers die geen precieze bewegingen kunnen maken of die hulpmiddelen gebruiken zoals hoofdaanwijzers, oogbesturingssystemen of spraakgestuurde muisemulators. Sommige aanwijsapparaten ondersteunen geen multi-touch- of trackpadgebaren, of zijn niet nauwkeurig genoeg voor complexe bewegingen.

Oplossing:

De carrousels moeten ook te bedienen zijn met eenvoudige klikken of tikken, of met knoppen of pijltjestoetsen.

Voldoet niet aan SC 2.5.1

Link naar pagina: Contact

Meerdere pagina’s hebben dezelfde title-tekst

Deze pagina heeft dezelfde titel (<title>) als een andere pagina in de steekproef: "Neem contact op | Rolduckerveld". Dit geldt voor zowel Contact (deze pagina) als Bewoners enquete.

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 Contact of Bewoners enquete (of beide), zodat elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.

Voldoet niet aan SC 2.4.2

Link naar pagina: Bouw

Er staan twee koppen van hetzelfde niveau direct onder elkaar

Op deze pagina wordt een kop van niveau 2 onmiddellijk gevolgd door een andere kop van hetzelfde niveau. Het gaat om de koppen "Bouw" en "Rolduckerveld: Samenwerken aan een vernieuwde toekomst!".

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

Oplossing:

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

Voldoet niet aan SC 1.3.1

Link naar pagina: Nieuwsberichten

Geen bevindingen.

Link naar pagina: Cookiebeleid

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de kopjes “5.1 Technische of functionele cookies”, “5.2 Statistieken cookies” en “5.3 Marketing/Tracking cookies” niet als kopteksten gemarkeerd. Blinde bezoekers hebben niets aan een (tussen)kop die fungeert 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 springen.

Oplossing:

Gebruik een kop-element, zoals <h3> of <h4>.

Voldoet niet aan SC 1.3.1

Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de onduidelijke tekst "Lees meer". Deze links staan in de secties met verborgen inhoud onder "6. Geplaatste cookies". 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)”.

Voldoet niet aan SC 2.4.4

Icoon ‘opent in nieuw venster’ heeft geen tekstalternatief

Op deze pagina staan onder "6. Geplaatste cookies" secties met verborgen inhoud. In deze secties staan links met iconen die aangeven dat de links worden geopend in een nieuw browsertabblad. Deze iconen hebben geen alternatieve tekst.

Hierdoor weet een blinde bezoeker niet dat deze links een nieuwe browsertab zullen 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.

Voldoet niet aan SC 1.1.1

Link naar pagina: Roda JC Wijktoer Terug in Rolduckerveld!

Geen bevindingen.

Link naar pagina: Koopwoningen

Tekst is als afbeelding geplaatst

Op deze pagina staat onder het menu een afbeelding met tekst erin ("Fraai vrouwen...").

Als je een tekst als afbeelding plaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen.

Oplossing:

Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding staat, kunnen ze dit niet doen.

Voldoet niet aan SC 1.4.5

Opsomming is onjuist opgebouwd in de HTML-code

Onder het kopje "Kenmerken woningen" op deze pagina staat een lijst met 8 items. Deze lijst is niet op de juiste manier gemarkeerd. Elk lijstitem wordt gemarkeerd als een aparte lijst.

Groepeer de lijstitems die bij elkaar horen in een enkel ul-element. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Voldoet niet aan SC 1.3.1

Tekst heeft niet genoeg contrast

Onder de kop "Interesse?" op deze pagina staan links met oranje tekst (#F49800) op een groene achtergrond (#23682F). Het kleurcontrast is te laag: 3,0:1. Bij hoveren worden deze links groen (#23682F) op een groene achtergrond (#23682F). De contrastverhouding is dan minder dan 1,1:1.

Dit komt ook voor op de pagina Bewoners enquete bij de derde stap in het formulier: "Je gegevens". De knop "Selecteer bestanden" heeft een oranje tekst op een groene achtergrond.

Oplossing:

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

Voldoet niet aan SC 1.4.3

Links in lopende tekst verschillen alleen in kleur, maar hebben niet genoeg contrast met de gewone tekst

In de tekst onder de kop "Interesse?" op deze pagina staan links die alleen door hun andere kleur verschillen van de gewone tekst, en het kleurcontrast is onvoldoende. 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.
• Verhoogd contrast: verhoog het contrast aanzienlijk tussen de kleur van de links en de omringende tekst tot minimaal 4,5:1.

**Voldoet niet aan SC 1.4.1

Link naar pagina: Activiteiten

Geen bevindingen.

Link naar pagina: Weekprogramma Sjevemethoes

‘strong`-element is gebruikt voor opmaak

Op deze pagina is het <strong>-element gebruikt om tekst vet te maken. De hele zin die begint met “Van maandag t/m vrijdag …” staat tussen strong-tags.

Het strong-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 (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

**Voldoet niet aan SC 1.3.1

Link naar pagina: Oostkamer

Iframe heeft geen toegankelijke naam

Deze pagina bevat een iframe met een kaart onder de kop "De Oostkamer". Het title-attribuut van het iframe bevat de tekst “Hertogenlaan 17, kerkrade”. Deze tekst is niet duidelijk genoeg.

Iframes moeten een goede beschrijving hebben. Die zet je 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.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Voldoet niet aan SC 2.4.6

Video heeft geen ondertiteling

Deze pagina bevat een video met gesproken tekst, maar er is geen ondertiteling. Ondertitels zijn essentieel voor bezoekers die doof of slechthorend zijn om toegang te krijgen tot alle inhoud van de video.

Oplossing:

Voeg ondertiteling toe aan de video.

Voldoet niet aan SC 1.2.2

Video bevat logo’s waarvoor geen alternatief is

Op deze pagina staat een video onder de kop "Ontmoet Lucienne en Swenn". In de video zijn op verschillende momenten logo's te zien (bijvoorbeeld rond 0:01, 0:44), maar hiervoor is geen alternatief. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

Voldoet niet aan SC 1.2.3

De video heeft geen audiobeschrijving, terwijl daar wel ruimte voor is

Deze video op deze pagina voldoet niet aan succescriterium 1.2.5, dat audiobeschrijving of een media-alternatief voor video's vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Oplossing:

Voeg een audiobeschrijving toe aan de video. Een media-alternatief is hier niet meer toegestaan als oplossing.

Voldoet niet aan SC 1.2.5

Koptekst is onduidelijk

Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten. De kop "Ontmoet Lucienne en Swenn" is niet duidelijk genoeg. Onder deze kop staat een video, maar dat blijkt niet uit deze kop. Dit is vooral lastig voor bezoekers die een schermlezer gebruiken. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is.

Oplossing:

Gebruik een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Duidelijker zou bijvoorbeeld zijn: “Video: ontmoet Lucienne en Swenn”.

Voldoet niet aan SC 2.4.6

Link naar pagina: Bewoners enquete

Kop-element gebruikt voor tekst die geen kop is

De tekst "Vul de onderstaande vragenlijst..." op deze pagina is geen koptekst, maar is wel gemarkeerd met een <h3>-element om de letters groter te maken. Het kop-element (h3) is hier dus niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Hetzelfde probleem komt voor bij de tekst van de foutmelding "Er was een probleem met je inzending. Controleer de onderstaande velden." die wordt getoond nadat het formulier is verzonden met lege velden of onjuiste gegevens. Ook deze tekst is ten onrechte gemarkeerd als kop, met een <h2>-element.

Oplossing:

Verwijder het h-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.

Voldoet niet aan SC 1.3.1

Foutmeldingen hebben te weinig contrast

Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnen foutmeldingen in rode tekst (#C02B0A) tegen een groene achtergrond (#23682F). De contrastverhouding is te laag, namelijk 1,2:1. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.

Oplossing:

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

Voldoet niet aan SC 1.4.3

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

Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnt het bericht "Dit veld is vereist.". Dit bericht is een instructie, niet een echte 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.

Voldoet niet aan SC 3.3.1

Informatie van laad-icoon wordt niet automatisch voorgelezen door schermlezers

Als je het formulier op deze pagina instuurt, verschijnt een laad-icoon. Deze animatie, die dient als statusbericht, is niet toegankelijk voor blinde bezoekers. Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt.

Oplossing:

Voeg om dit te bereiken bijvoorbeeld aria-live="polite" of role="status" toe aan het icoon. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22 .

Voldoet niet aan SC 4.1.3

Contrast van icoon op knop is te laag

In de derde stap ("Je gegevens") van het formulier op deze pagina kun je een bestand uploaden. Als een bestand is geüpload, verschijnt een prullenbak-icoontje om het te verwijderen. Dit roze pictogram (#CC3366) heeft onvoldoende kleurcontrast tegen de groene achtergrond (#23682F). De contrastverhouding van 1,4:1 is te laag. Het icoon is dus niet voor iedereen zichtbaar, waardoor het invoerveld geen geldig ‘visueel label’ heeft.

Oplossing:

Zorg voor een minimaal contrast van 3,0:1.

Voldoet niet aan SC 1.4.11

Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Als je in de derde stap van het formulier ("Je gegevens") een bestand uploadt, verschijnt een zwarte (#333333) tekst met informatie over het geüploade bestand, bijvoorbeeld "17 kb100%". De achtergrond van deze tekst is groen (#23682F), en dit geeft een te lage contrastverhouding van 1,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

De derde stap van het formulier ("Je gegevens") op deze pagina bevat invoervelden voor persoonlijke informatie (bijv. achternaam, e-mailadres, telefoonnummer). Het autocomplete-attribuut ontbreekt bij deze velden.

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.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: Input puposes

Voldoet niet aan SC 1.3.5

Link naar pagina: Nieuwsbrieven

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

Als je het formulier onder "Aanmelden nieuwsbrief" instuurt met lege velden of onjuiste gegevens, verschijnt de melding "Dit veld is verplicht" of "Voer een geldig e-mailadres in". Deze melding is een instructie, niet een echte 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.

Voldoet niet aan SC 3.3.1

Foutmelding is niet gekoppeld aan invoerveld

Als je het formulier onder "Aanmelden nieuwsbrief" instuurt met lege velden of onjuiste gegevens, verschijnt de foutmelding "Dit veld is verplicht" of "Voer een geldig e-mailadres in." De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan in de "formulier"-modus namelijk vaak de inhoud tussen invoervelden over, als deze niet in de code aan de velden is gekoppeld.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Voldoet niet aan SC 1.3.1

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier onder "Aanmelden nieuwsbrief" heeft invoervelden voor persoonlijke informatie (bijv. achternaam, e-mailadres, telefoonnummer). Het autocomplete-attribuut ontbreekt bij deze velden.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld.

Voldoet niet aan SC 1.3.5

Succesbericht wordt niet automatisch voorgelezen door schermlezers

Als je het formulier onder het kopje "Aanmelden nieuwsbrief" instuurt, verschijnt de statusmelding "Bedankt voor je inschrijving..." zonder dat de pagina opnieuw wordt geladen. Ook wordt de toetsenbordfocus niet verplaatst naar deze melding. Daarom is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt.

Oplossing:

Voeg aria-live="polite" of role="status" toe aan de melding. Meer informatie over role="status" is te vinden op de pagina Aria22.

Voldoet niet aan SC 4.1.3

Focusindicator is verwijderd, en daardoor is toetsenbordfocus niet zichtbaar

Op deze pagina is de standaard toetsenbordfocusstijl verwijderd van de knop "Aanmelden nieuwsbrief”, waarschijnlijk met behulp van outline: 0; in de CSS. Er zijn geen aangepaste focusindicatoren ingebouwd als alternatief.

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.

Oplossing:

Haal outline:none weg of voeg een eigen toegankelijke focusindicator toe.

Voldoet niet aan SC 2.4.7

Toetsenbordfocus verplaatst niet naar de foutmelding

Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnen foutmeldingen zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet automatisch verplaatst naar de eerste foutmelding. Dit dwingt toetsenbordgebruikers om achteruit te navigeren met Shift+Tab om de fout te vinden, en dat is onhandig.

Oplossing:

Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen.

Voldoet niet aan SC 2.4.3

Link naar pagina: Nieuwsbrief

Link naar PDF: Nieuwsbrief september

informatieve afbeelding toegevoegd via Figure-tag mist alt-tekst

In dit PDF-document staan informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Het gaat onder andere om de afbeeldingen op pagina 1 (het logo) en 3 (de qr-code, het WIJ.K-logo).

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu mist, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.

Oplossing:

Voeg alt-teksten toe aan deze informatieve afbeeldingen.

Voldoet niet aan SC 1.1.1

Decoratieve afbeeldingen zijn toegevoegd met Figure-tags

In dit PDF-document staan op pagina 1-4 decoratieve afbeeldingen die zijn toegevoegd via een Figure-tag en die geen beschrijving hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.

Oplossing:

Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

Voldoet niet aan SC 1.1.1

Kopteksten zijn verkeerd gebruikt voor styling

In dit PDF-document zijn heading-tags gebruikt om gewone tekst visueel te vergroten. Bijvoorbeeld de tekst die begint met "Voor je ligt de nieuwsbrief...". Deze is gemarkeerd als een koptekst, ook al is het geen koptekst. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de H-tag door de P-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

Voldoet niet aan SC 1.3.1

Koppen zijn niet correct gemarkeerd

In dit PDF-document zijn meerdere koppen niet gemarkeerd als kop. Het gaat bijvoorbeeld op pagina 2 om de koppen "Voortgang van de Bouw" en "Woning Huren? Zo werkt het". Hetzelfde probleem komt voor op andere pagina's. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

Voldoet niet aan SC 1.3.1

Alinea-tag voor tekst ontbreekt

Op pagina 2 van dit PDF-document staat een tekst die er visueel uitziet als een alinea. In de tags is deze tekst echter niet ingesloten in een P-tag. Het gaat om de tekst onder "2x22 Appartementen aan de Directeur Cortenstraat inRolduckerveld.". Dit probleem komt ook voor op andere pagina's.

Oplossing:

De visuele structuur van de informatie moet worden weerspiegeld in de tags. Als tekst eruitziet als een alinea, moet je deze markeren met een P-tag.

Voldoet niet aan SC 1.3.1

Onvoldoende kleurcontrast van tekst

Op verschillende plekken is het contrast tussen teksten en de achtergrond te laag. Op pagina 3 staat de oranje tekst "Programma Impuls Kerkrade - WIJ.K" op een witte achtergrond. Het contrast is 2,0:1, dit moet minstens 3,0:1 zijn. De oranje tekst "Voor meer informatie..." heeft op de witte achtergrond ook een onvoldoende contrast van 2,0:1. Dit moet minstens 4,5:1 zijn. De oranje tekst "Wil je meer informatie..." op een oranje achtergrond heeft een contrast van 1,7:1. Het contrast zou minstens 4,5:1 moeten zijn.

Op andere pagina’s komt hetzelfde probleem met oranje kleurencombinaties voor.

Voldoet niet aan SC 1.4.3

Link naar pagina: Nieuwsbrief

Link naar PDF: Nieuwsbrief juni-juli

De gevonden problemen in dit PDF-document zijn vergelijkbaar met of identiek aan de problemen die bij de andere PDF-documenten al zijn beschreven.

Onvoldoende kleurcontrast van tekst

Op verschillende plekken is het contrast tussen teksten en de achtergrond te laag. Op pagina 2 staat de oranje tekst "Scan de QR code voor meer informatie" op een lichtgroene achtergrond. De contrastverhouding is 2,0:1, dit moet minstens 4,5:1 zijn. De witte tekst "blok A" op een oranje achtergrond heeft ook onvoldoende contrast van 2,3:1. Het moet minstens 4,5:1 zijn. Hetzelfde probleem met witte tekst op een oranje achtergrond komt voor op andere pagina's.

Op pagina 4 staat de oranje tekst "Michel van Dinther..." op een donkergroene achtergrond. De contrastverhouding is 2,9:1, dit moet minstens 4,5:1 zijn.

Voldoet niet aan SC 1.4.3

Onvoldoende contrast van niet-tekstuele informatie

Op verschillende plekken is het contrast tussen niet-tekstuele informatie en de achtergrond te laag.

Op pagina 2 hebben de oranje stippellijnen die de twee secties in de afbeelding verbinden onvoldoende kleurcontrast tegen de achtergrond. De contrastverhouding is 1,7:1. Deze lijnen moeten een minimale contrastverhouding hebben van 3,0:1 ten opzichte van de achtergrond.

Op pagina 2 en 3 staan QR-codes met een witte voorgrond op een oranje achtergrond. De contrastverhouding is 2,1:1. Deze codes brengen informatie over en moeten daarom een minimale contrastverhouding van 3,0:1 tegen de achtergrond hebben.

Voldoet niet aan SC 1.4.11

Link naar pagina: In de buurt

Geen bevindingen.