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

De website heeft geen zoekfunctie, dus pagina's kunnen alleen gevonden worden 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

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

Toetsenbordfocus gaat niet naar de cookiebanner

De knop “Beheer toestemming” opent de cookiebanner. De toetsenbordfocus verplaatst zich op dat moment niet naar deze banner.

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 - Focus Order

Kop is niet gemarkeerd als koptekst

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. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet aan SC 1.3.1

Contrast van de keuzevakjes is te laag

In de cookiebanner opent de knop "BEKIJK VOORKEUREN" een tab met cookie-opties met oranje keuzevakjes. De contrastverhouding tussen het oranje keuzevakje (#F56E28) en de lichtgrijze achtergrond van de pagina (#F7F7F7) is 2,7:1.

Oplossing:

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

Voldoet niet aan SC 1.4.11

Keuzevakjes hebben geen toegankelijke naam

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

Onjuiste nesting van elementen in summary-element

Als je in de cookiebanner op de knop "Bekijk voorkeuren" klikt, worden secties met verborgen inhoud getoond. 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.

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

Als je deze pagina bekijkt met een scherm van 1280 bij 1024 pixels en inzoomt 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

Logo heeft meer tekst dan het tekstalternatief

Het logo bovenaan de website bevat de volledige tekst "Bleijerheide & Nulland hier ben je thuis", maar de alt-tekst is alleen "Bleijerheide & Nulland". 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: “Bleijerheide & Nulland hier ben je thuis”.

Voldoet niet aan SC 1.1.1

Hoofdnavigatiemenu is niet te openen met toetsenbord

Het hoofdnavigatiemenu op deze site is niet met het toetsenbord te bedienen.

Oplossing:

Zorg dat submenu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze submenu’s toegankelijk is voor alle bezoekers. De pagina’s waar de hoofdnavigatie-items naar linken, bevatten namelijk niet alle informatie die in de submenu’s staat.

Voldoet niet aan SC 2.1.1

Contrast van tekst is te laag bij toetsenbordfocus

Het hoofdmenu op deze site bevat submenu's. Als deze links toetsenbordfocus krijgen, wordt de tekst van de link volledig onzichtbaar. Dit gebeurt ook met deze links in het mobiele menu (via de hamburgerknop).

Oplossing:

Vergroot het contrast tussen de link/button met toetsenbordfocus en de achtergrond naar minimaal 4,5:1.

Voldoet niet aan SC 1.4.3

Content die verschijnt bij hover moet makkelijk gesloten kunnen worden

Als je met de muis over het hoofdmenu beweegt, verschijnt er extra inhoud die de bestaande pagina-inhoud overlapt.

Oplossing:

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

Voldoet niet aan SC 1.4.13

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 mobiele menu 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 geopend is, 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.

Voldoet niet aan SC 2.4.3

Submenu’s in mobiel menu niet te bereiken met het toetsenbord

Als je op deze pagina inzoomt, verschijnt bovenaan de pagina een menuknop waarmee je het mobiele menu opent. Elke menuoptie heeft nog meer verborgen inhoud om uit te vouwen. Deze submenu-opties zijn niet toegankelijk via het toetsenbord.

Oplossing:

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

Voldoet niet aan SC 2.1.1

Toetsenbordfocus gaat buiten het mobiele menu

Als je op deze pagina inzoomt, verschijnt bovenaan de pagina een menuknop waarmee je het mobiele menu opent. Op dit moment kunnen bezoekers uit het mobiele menu navigeren met behulp van het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan.

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

Tekst van het logo staat niet in toegankelijke naam

In de footer van de website staat 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

Logo heeft geen alt-tekst

In de footer staat een logo met de tekst "Bleijerheide & Nulland hier ben je thuis". Dit logo heeft 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

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. Zorg daarom dat de tekst die in het logo zichtbaar is, voorkomt in de toegankelijke naam, het liefst vooraan.

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 met hulpsoftware niet naar welke pagina of inhoud de link leidt.

Oplossing:

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

Kop is niet gemarkeerd als koptekst

In de footer zijn de kopjes “Gemeente Kerkrade”, “Heemwonen” en “Nieuwsbrief” 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 bezoekers met 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

Link naar pagina Homepagina

Linktekst is niet duidelijk genoeg

Op deze pagina hebben meerdere links dezelfde tekst maar verschillende bestemmingen. Het gaat bijvoorbeeld om de links met de tekst "Lees bericht" onder de nieuwsberichten in de sectie "Laatste nieuws", en om de "Lees verder"-links onder de kop "Over de Buurten". Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

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

Slides kunnen niet met muis of een gebaar worden bediend

Als je de website op een klein scherm bekijkt (bij een schermresolutie van 640px), verschijnt een sectie met een carrousel. Bezoekers kunnen de slides aanklikken en horizontaal verslepen met een muis. Deze carrousel staat onder de kop "Over de buurten".

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 carrousel moet ook te bedienen zijn met eenvoudige klikken of tikken, of met knoppen of pijltjestoetsen.

Voldoet niet aan SC 2.5.1

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

Als je deze pagina op een klein scherm bekijkt, is alleen het eerste nieuwsartikel zichtbaar onder de kop "Laatste nieuws". Twee andere artikelen zijn niet zichtbaar en de links "Lees bericht" werken niet. Dit gebeurt ook als iemand inzoomt tot 400%. Daarom is dit ook een issue bij succescriterium 1.4.10.

Oplossing:

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

Voldoet niet aan SC 1.4.4 en 1.4.10

Link naar pagina: Contactpagina

Logo heeft geen alt-tekst

De logo’s met de teksten “Samen Buurt Maken Heemwonen” en “Gemeente Kerkrade”, onder het kopje “Contact”, hebben een leeg alt-attribuut.

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

Taalwisseling ontbreekt op anderstalige content

Als je het formulier op deze pagina instuurt terwijl het veld "Voornaam", "Achternaam" of "Vraag of opmerking" leeg is, verschijnen er foutmeldingen. Deze bevatten Engelse zinnen zonder dat er een taalcode omheen staat: “We need to know your name. What if we wanted to send you a birthday cake?” en “Please enter your message”.

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 bij deze tekst op de taal van deze zin overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde. Hetzelfde probleem doet zich voor bij de meeste andere formulieren op de website.

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.

Voldoet niet aan SC 3.1.2

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina staat een formulier met invoervelden voor persoonlijke informatie (bijv. achternaam, e-mailadres, telefoonnummer). Bij het veld “E-mail” ontbreekt het autocomplete-attribuut.

Als een bezoeker in een formulier persoonlijke gegevens kan 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 purposes.

Voldoet niet aan SC 1.3.5

Link naar pagina: Buurtherinneringen

Knoppen hebben een te laag contrast

Op deze pagina staat onder het kopje "Buurtherinneringen" een carrousel met oranje knoppen in de vorm van pijlen om tussen de slides te navigeren. De contrastverhouding tussen de oranje pijlen (#FAA85D) en de beige achtergrond (#FFF6EE1) is 1,8:1, dit is te laag.

Ditzelfde probleem komt voor bij de bolletjes onder de carrousel waarmee je tussen de slides kunt navigeren. Een niet-geselecteerd grijs bolletje (#CCC5BE) tegen de beige achtergrond (#FFF6EE) heeft een contrastverhouding van 1,6:1.

Oplossing:

Zorg dat deze interactieve elementen minimaal een contrast van 3,0:1 met de achtergrond hebben.

Voldoet niet aan SC 1.4.11

Link naar pagina Over de buurten

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

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

Link met een afbeelding, linkdoel is onbekend

Op deze pagina staan naast de kop "Over de buurten" twee afbeeldingen die een link zijn, maar hun alt-attributen zijn leeg (alt=""), waardoor ze verborgen blijven voor schermlezers.

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.

Oplossing:

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen: Voeg een alt-tekst toe in het alt-attribuut. Dit is de beste oplossing. Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only). aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link. Combineren met aangrenzende tekst: je kunt de link semantisch koppelen aan bestaande tekst die erboven of eronder staat. Dit kan vaak met een kop-element of een lijststructuur.

Voldoet niet aan SC 2.4.4

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina staan naast de kop "Over de buurten" twee afbeeldingen die functioneren als links waarmee een dialoogvenster kan worden geopend. Dit dialoogvenster heeft geen ARIA-rol en geen toegankelijke naam.

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

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Voldoet niet aan SC 4.1.2

Toetsenbordfocus gaat buiten het dialoogvenster

Op deze pagina openen links met afbeeldingen een dialoogvenster. Momenteel kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende pagina-inhoud 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:

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

Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

Op deze pagina openen links met afbeeldingen een dialoogvenster. Na het sluiten van het dialoogvenster met de knop "x", gaat de toetsenbordfocus niet terug naar het element dat de focus heeft geactiveerd of naar het volgende logische element in de focusvolgorde van de pagina, maar naar de bovenkant 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

Toegankelijke namen zijn in het Engels geschreven

Oplossing:

Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Voldoet niet aan SC 3.1.2

Link naar pagina: De professionals in de buurt

Geen bevindingen.

Link naar pagina Nieuws

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staan onder het kopje "Nieuws" zes nieuwsartikelen met afbeeldingen. Drie daarvan hebben betekenisvolle alt-teksten, de andere drie hebben lege alt-teksten. Dit is niet consistent. Bovendien zijn de afbeeldingen puur decoratief. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Zorg dat decoratieve afbeeldingen verborgen zijn voor schermlezers. 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.

In dit geval is het dus een goed idee om de alt-teksten van de eerste drie afbeeldingen te verwijderen.

Voldoet niet aan SC 1.1.1

Link naar pagina: Thuis bij

Knoppen hebben een te laag contrast

Op deze pagina staat onder het kopje "Thuis bij" een carrousel met afbeeldingen en oranje pijlen om te navigeren. De contrastverhouding tussen de oranje pijlen (#FAA85D) en de beige achtergrond (#FFF6EE) is 1,8:1.

Hetzelfde probleem doet zich voor bij de bolletjes onder de carrousel waarmee je tussen de slides kunt navigeren. Een niet-geselecteerd grijs bolletje (#CCC5BE) heeft tegen de beige achtergrond (#FFF6EE) een contrastverhouding van 1,6:1.

Oplossing:

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

Voldoet niet aan SC 1.4.11

Linktekst is niet duidelijk genoeg

Op deze pagina hebben meerdere links in de carrousel dezelfde onduidelijke tekst: "VERHAAL LEZEN".

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

Link naar pagina ContactpaginaTerugblik opening Geef & Neem huis & Repairshop

Skiplink werkt niet: focus verplaatst niet naar de juiste plek

Deze pagina heeft een skiplink, maar deze werkt niet goed. De link is visueel aanwezig en toegankelijk via het toetsenbord, maar als je hem activeert, gaat de toetsenbordfocus niet naar de bedoelde locatie. De focus blijft bovenaan de pagina staan.

Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt.

Oplossing:

Stuur de skiplink naar de afbeelding met een alt-tekst.

Voldoet niet aan SC 2.4.1

strong-element in plaats van kop-element

Op deze pagina zijn alle vetgedrukte teksten gemarkeerd met <strong> in plaats van met de juiste kop-elementen, bijvoorbeeld de tekst “Geef & Neem huis: Een plek voor delen en ontmoeten".

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

Link naar pagina: Cookiebeleid

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

Op deze pagina staan veel rode koppen (#D44E5B) op een witte achtergrond ( #FFFFFF). De contrastverhouding is te laag: 4,2:1. Het gaat bijvoorbeeld om de kop “1. Introductie”.

Oplossing:

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

Voldoet niet aan SC 1.4.3

Icoon ‘opent in nieuw venster’ heeft geen tekstalternatief

Op deze pagina staan in de accordeons onder het kopje "6. Geplaatste cookies" verschillende links met een icoon dat aangeeft dat de link in een nieuw browsertabblad wordt geopend (bijvoorbeeld "Lees meer", "elementor" en "Google Fonts Privacyverklaring"). Dit icoon heeft echter 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.

Voldoet niet aan SC 1.1.1

Toegankelijke naаm is in het Engels

Op deze pagina staat onder het kopje "6. Geplaatste cookies" in het eerste "Elementor"-accordeon een keuzevakje met de naam “Statistieken (anoniem)”. De toegankelijke naam van dit keuzevakje staat in het Engels: "Consent to service elementor". Deze namen worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Oplossing:

Vertaal de teksten van de label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Voldoet niet aan SC 3.1.2

Keuzevakje niet met stem te bedienen

Op deze pagina staat onder het kopje "6. Geplaatste cookies" in het eerste "Elementor"-accordeon een keuzevakje met de naam “Statistieken (anoniem)”. De toegankelijke naam van dit keuzevakje staat in het Engels: "Consent to service elementor". Omdat deze tekst verschilt van het zichtbare label, is dit element niet met stem te bedienen.

Oplossing:

Verander de waarde van het onzichtbaar label. Zo wordt de toegankelijke naam van dit vakje aangepast.

Voldoet niet aan SC 2.5.3

Linktekst bevat onleesbare karakters

Op deze pagina staan onder het kopje "6. Geplaatste cookies" in de "WordPress"- en "LiteSpeed"-accordeons links waarvan de naam onleesbare tekens bevat (bijvoorbeeld streepjes, underscores of andere symbolen). Het gaat bijvoorbeeld om de link "wp-settings-time-", "lscache_vary".

De tekst van links mag geen symbolen bevatten zoals streepjes, underscores en andere. Deze karakters maken het doel van de link onduidelijk.

Oplossing:

Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de linktekst duidelijk en beschrijvend is.

Voldoet niet aan SC 2.4.4

Linktekst is niet duidelijk genoeg

In de accordeons onder het kopje "6. Geplaatste cookies" staan meerdere links met de onduidelijke tekst "Lees meer".

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

Link naar pagina: Aanmelden nieuwsbrief

Tekst van de knop heeft te weinig contrast

Op deze pagina staat onder het formulier een knop met de tekst "AANMELDEN NIEUWSBRIEF". Deze witte tekst (#FFFFFF) heeft tegen de rode achtergrond (#D44E5B) een contrastverhouding van 4,2:1.

Oplossing:

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

Voldoet niet aan SC 1.4.3

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de knop "AANMELDEN NIEUWSBRIEF".

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 op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op deze knop. Voldoet niet aan SC 2.4.7

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina staat een formulier met invoervelden voor persoonlijke informatie. Het autocomplete-attribuut ontbreekt voor alle velden, bijvoorbeeld bij het veld “Voornaam”, “Achternaam” en “Email”.

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

Voldoet niet aan SC 1.3.5

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

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

Succesbericht wordt niet automatisch voorgelezen door schermlezers

Als je het formulier onder het kopje "Aanmelden nieuwsbrief" in hebt gestuurd, verschijnt de statusmelding "Bedankt voor je inschrijving!.." zonder dat de pagina opnieuw wordt geladen. De toetsenbordfocus wordt niet verplaatst naar het bericht. 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. . Voldoet niet aan SC 4.1.3

Link naar pagina: Jouw verhaal

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

In het formulier op deze pagina hebben de invoervelden voor persoonlijke informatie (zoals achternaam, e-mailadres, telefoonnummer) niet het autocomplete-attribuut.

Oplossing:

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

Voldoet niet aan SC 1.3.5

Taalwisseling ontbreekt op anderstalige content

Als je het formulier op deze pagina instuurt terwijl het veld "Voornaam", "Achternaam" of "Vraag of opmerking" leeg is, verschijnen er foutmeldingen. Deze bevatten Engelse zinnen zonder dat er een taalcode omheen staat: “We need to know your name. What if we wanted to send you a birthday cake?” en “Please enter your message”.

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 bij deze tekst op de taal van deze zin 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.

Voldoet niet aan SC 3.1.2

Link naar pagina Aanmelden voor de club

Logo heeft meer tekst dan het tekstalternatief

Op deze pagina staat naast de kop "Doe mee met Club Bleijerheide-Nulland!" een logo met de volledige tekst "Bleijerheide & Nulland hier ben je thuis", maar de alt-tekst is alleen "Bleijerheide & Nulland."

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: “Bleijerheide & Nulland hier ben je thuis”.

Voldoet niet aan SC 1.1.1

Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut

Het formulier op deze pagina heeft een invoerveld met een onjuiste waarde: het veld "Straat + huisnummer" heeft het attribuut autocomplete="address-line1", maar dit bestaat niet. Bij het veld "E-mail" ontbreekt het autocomplete-attribuut helemaal.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld, en zorg dat de waarde klopt.

Voldoet niet aan SC 1.3.5

Link naar pagina: https://bleijerheide-nulland.nl/nieuws/nieuwsbrief/

Link naar PDF december

Codes ontbreken in dit PDF-document

Dit PDF-document heeft geen codes. Daardoor is voor hulpsoftware geen informatie beschikbaar om de PDF te interpreteren. 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:

Voorzie het document van codes die de structuur van het document weergeven.

Voldoet niet aan SC 1.3.1

Kleurcontrast van tekst is te laag (grote tekst)

Op pagina 1 staat de witte tekst "Nieuwsbrief Bleijerheide-Nulland" op een oranje achtergrond (#F6B372). De contrastverhouding is te laag: 1,8:1. Hetzelfde geldt voor de oranje koppen op pagina 3 en 4.

Oplossing:

Het contrast moet minstens 3,0:1 zijn.

Voldoet niet aan SC 1.4.3

Kleurcontrast van tekst is te laag (normale tekst)

Op pagina 2 staat een witte tekst beginnend met "In de afgelopen maanden..." op een oranje achtergrond. De contrastverhouding is te laag: 1,9:1. Hetzelfde geldt voor de witte teksten op een rode achtergrond op pagina's 3 en 4.

Oplossing:

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

Voldoet niet aan SC 1.3.1

Link naar pagina: https://bleijerheide-nulland.nl/nieuws/nieuwsbrief/

Link naar PDF september

Kleurcontrast van tekst is te laag (grote tekst)

Op pagina 1 staat de witte tekst "Nieuwsbrief Bleijerheide-Nulland" op een oranje achtergrond (#F6B372). De contrastverhouding is te laag: 1,8:1. Hetzelfde geldt voor de oranje koppen op pagina 2, 4 en 5.

Oplossing:

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

Voldoet niet aan SC 1.3.1

Kleurcontrast van tekst is te laag (normale tekst)

Op pagina 3 staat de witte tekst beginnend met "Club Bleijerheide-Nulland..." op een rode achtergrond (#D64E5B). De contrastverhouding is te laag: 4,1:1.

Oplossing:

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

Voldoet niet aan SC 1.3.1

Decoratieve afbeeldingen zijn toegevoegd met Figure-tags

Op alle pagina’s van dit PDF-document staan decoratieve afbeeldingen die zijn toegevoegd via een Figure-tag en die geen beschrijving hebben.

De Figure-tag is bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer de afbeelding als artefact om deze te verbergen voor schermlezers.

Voldoet niet aan SC 1.1.1

Informatieve afbeeldingen hebben geen alt-tekst

Dit PDF-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Het gaat om afbeeldingen op pagina 1 ("Bleijerheide & Nulland hier ben je thuis" logo), pagina 3, 4 en 5 (QR-Codes) en pagina 6 (meerdere logotypes).

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

Koppen niet correct gemarkeerd

In dit PDF-document zijn verschillende koppen niet gemarkeerd als koppen. Het gaat bijvoorbeeld om de kop "Geven en nemen in de buurt" en andere koppen op pagina 2, en de kop "Wat is het ambitieplan?" en andere koppen op pagina 4.

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

Gewone tekst is gemarkeerd als kop voor styling

In dit PDF-document zijn heading-tags gebruikt om gewone tekst visueel vet te maken. Op pagina 2 is de hele alinea die begint met "In Bleijerheide zijn recente..." gemarkeerd als een kop, ook al is het geen kop. Op pagina 3 zijn bijna alle gewone teksten getagd als koppen.

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

Kopjes niet correct gebruikt

In dit PDF-document bevatten bijna alle pagina's twee opeenvolgende koppen van hetzelfde niveau zonder tussenliggende inhoud. Op pagina 1 hebben de teksten "Nieuwsbrief Bleijerheide-Nulland" en "september" bijvoorbeeld beide een h1-tag. Als er een kop in een document staat waar geen inhoud op volgt, kunnen blinde bezoekers denken dat er inhoud ontbreekt.

Oplossing:

Pas het niveau van de kop aan of gebruik een andere tag.

Voldoet niet aan SC 1.3.1

Niet alle tekst is getagd

In dit PDF-document staan teksten die niet getagd zijn. Het gaat om de alinea’s met een grijze achtergrond in de PAC-software. Dit probleem met paragrafen is bijvoorbeeld te zien op pagina 5 onder de kopjes "Nationale burendag bij 't Patronaat op 28 september" en "Maak een wandeling door Bleijerheide of Nulland!". Ook bij andere teksten en lijsten gaat het mis.

Oplossing:

Zorg dat alle tekst getagd is.

Voldoet niet aan SC 1.3.1

Link naar pagina: Nieuwsbrief

Geen bevindingen.