Kleurcontrast van tekst is te laag

Op alle pagina’s staat witte tekst op een lichtblauwe achtergrond (#32A4DF) of omgekeerd, bijvoorbeeld bij links in het hoofdmenu “Inhoud” en andere. De contrastverhouding is te laag: 2,8:1.

Oplossing:

Voor tekst kleiner dan 24px en niet vetgedrukt moet het contrast minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Kleurcontrast van informatieve iconen is niet voldoende

Op alle pagina’s heeft de knop met een vergrootglaspictogram in de header onvoldoende kleurcontrast. Het lichtblauwe pictogram (#32A4DF) tegen de witte achtergrond heeft een contrastverhouding van 2,8:1, wat lager is dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.

Hetzelfde probleem doet zich voor bij links met pijlpictogrammen.

Oplossing:

Zorg dat de iconen voldoende contrast hebben.

Logo heeft geen alt-tekst

Op alle pagina’s staat in het hoofdmenu het logo van de Provincie Noord-Holland, dat ook gebruikt wordt als link. Dit logo heeft geen tekstalternatief.

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.

Dit probleem hangt ook samen met SC 4.1.2, omdat deze link geen toegankelijke naam heeft; met SC 2.4.4, omdat het linkdoel niet te bepalen is; en met SC 2.5.3, omdat bezoekers geen spraakbesturing kunnen gebruiken om de link te activeren.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Geef ook aan waar de link naartoe gaat, in dit geval naar de homepagina van de magazinewebsite. Zorg ervoor dat alle zichtbare tekst in het tekstalternatief voorkomt en dat het linkdoel duidelijk aangeeft waar iemand naartoe gaat.

Toegankelijke namen zijn in het Engels geschreven

Op alle pagina’s staat in de header een knop met een vergrootglaspictogram. Deze knop heeft een aria-label-attribuut met Engelse tekst “Search”. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Hetzelfde probleem doet zich voor bij de “x”-knop in het dialoogvenster dat verschijnt na het klikken op de knop met het vergrootglaspictogram.

Oplossing:

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

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina is een skiplink aanwezig. De toegankelijke naam van deze link is in het Engels: “Skip to main content”.

Deze namen worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Oplossing:

Vertaal de teksten naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Dialoogvenster heeft geen toegankelijke naam

Op alle pagina’s staat een knop met een vergrootglaspictogram die een dialoogvenster met een zoekveld opent. Dit dialoogvenster heeft geen toegankelijke naam.

Hulpsoftware kan hierdoor niet doorgeven welke inhoud het dialoogvenster heeft.

Oplossing:

Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.

Contrast tussen focusindicator en achtergrond is te laag

Op alle pagina’s staat een knop met een vergrootglaspictogram die een dialoogvenster met een zoekveld opent. Wanneer er tekst in het zoekveld wordt getypt, verschijnen zoekresultaten. Deze zoekresultaten krijgen de toetsenbordfocus, die zichtbaar is door een lichtblauwe focusrand (#3DBBDA). De contrastverhouding tussen de focusrand en de witte achtergrond (#FAFAFA) is 2,2:1.

Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Toetsenbordfocus is niet zichtbaar

Op alle pagina’s staat een knop met een vergrootglaspictogram die een dialoogvenster met een zoekveld opent. Op een klein scherm is de toetsenbordfocus niet zichtbaar op de zoekresultaten.

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 de genoemde elementen.

Het aantal dia’s en de huidige dia worden niet automatisch voorgelezen door schermlezers

Op alle pagina’s staat informatie over het aantal dia’s en welke dia momenteel wordt weergegeven, bijvoorbeeld “1/17”. Deze telling is een statusbericht dat automatisch door schermlezers moet worden voorgelezen wanneer het verandert. De benodigde code om deze functionaliteit mogelijk te maken ontbreekt echter.

Oplossing:

Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Dit bereik je door een aria-live-attribuut aan de melding toe te voegen. Zorg dat de tekst duidelijk is, bijvoorbeeld “XX dia van 17”.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staat een link met de tekst “Open editie 4 | augustus 2025”. De toegankelijke naam is “Ga naar Inhoud”, die is toegevoegd via een aria-label. Het aria-label overschrijft de zichtbare tekst. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Hetzelfde probleem doet zich verderop voor bij de links “Winkelen” en “Op pad of online?”. De toegankelijke naam voor beide links is “Ga naar Even aan Noord-Holland vragen”.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Open editie 4 | augustus 2025 - Ga naar Inhoud”.

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

Op deze pagina staat een link met witte tekst (#F7F7F7) “Open editie 4 | augustus 2025” op een lichtblauwe achtergrond (#32A4DF). De contrastverhouding is te laag: 2,6:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op een onzichtbaar interactief element na de link “Open editie 4 | augustus 2025”.

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.

Alternatieve tekst van een informatieve afbeelding is leeg

Op deze pagina staat een afbeelding met de tekst “Holland&Magazine van en voor Noord-Hollanders”. Deze afbeelding heeft een leeg alt-attribuut.

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/inhoud

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staan onder de kop “Inhoud” artikelen. Elk artikel bestaat uit drie links. Bij de meeste van deze links wordt de zichtbare tekst overschreven door een andere tekst. Zo heeft een link met de zichtbare tekst “6 vragen over bomenkap” de toegankelijke naam “Ga naar Bomenkap”, die is toegevoegd via een aria-label. De link “Schoner water” heeft als toegankelijke naam bijvoorbeeld “Ga naar Beeldverhaal waterkwaliteit”. Dit komt nog vaker voor bij de andere links in dit overzicht.

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Hetzelfde probleem doet zich voor bij de link “Vorige edities”, waarvan de toegankelijke naam “Overlay openen Edities” is.

Oplossing:

Zorg ervoor dat de zichtbare tekst voorkomt in de toegankelijke naam, bij voorkeur vooraan. In dit geval kan het aria-label het beste verwijderd worden, zodat de zichtbare tekst het linkdoel aangeeft. Mocht dat ergens onduidelijk zijn, dan kan het aria-label zo aangepast worden dat de zichtbare tekst er ook in staat en aangevuld wordt met eventuele extra informatie.

Het volgende is niet fout, maar een advies om de site nog toegankelijker te maken.

Herhaling van links

Op deze pagina staan onder de kop “Inhoud” artikelen. Elk artikel bestaat uit drie links naar dezelfde pagina. Dit zorgt voor herhaling en is bijvoorbeeld vervelend voor gebruikers van voorleessoftware.

Oplossing:

Combineer deze links tot één link.

Naam van het dialoogvenster beschrijft niet wat het dialoogvenster doet

Op deze pagina is er een link “Vorige edities” die een dialoogvenster opent. De toegankelijke naam van dit dialoogvenster is “overlay-container”, wat de functie ervan niet goed beschrijft. Een blinde bezoeker weet daardoor niet precies wat dit dialoogvenster doet.

Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/quiz, nadat op de knop "Antwoord" is geklikt; op de pagina https://magazine.noord-holland.nl/2025-4/noord-holland-van-boven, nadat op de knop "Lees het interview" is geklikt; op de pagina https://magazine.noord-holland.nl/2025-4/kort-nieuws; en andere.

Oplossing:

Voeg tekst toe die dit dialoogvenster goed beschrijft.

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina is er een link “Vorige edities” die een dialoogvenster opent. Dit dialoogvenster heeft een aria-label-attribuut met Engelse tekst “overlay-container”.

Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Oplossing:

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

Onlogische leesvolgorde van artikelen

Op deze pagina staat een link “Vorige edities”, die een dialoogvenster met artikelen opent. De volgorde van HTML-elementen binnen de artikelen is onjuist: afbeeldingen staan boven de koppen, bijvoorbeeld bij “Editie 3 - 2025”. De huidige volgorde is afbeelding, kop, tekst, link. Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/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.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina is er een link “Vorige edities” die een dialoogvenster opent met meerdere links met de tekst “Lees verder”. De toegankelijke naam van deze links bevat nu niet de zichtbare tekst. Bijvoorbeeld, de toegankelijke naam van de “Lees verder” links is “Open magazine.noord-holland.nl in een nieuw tabblad”. Dit wordt via een aria-label toegevoegd en overschrijft de zichtbare tekst. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Lees verder - Open magazine.noord-holland.nl in een nieuw tabblad”. Zorg er ook voor dat het linkdoel duidelijk is.

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina is er een link “Vorige edities” die een dialoogvenster opent met meerdere links met de tekst “Lees verder”. De toegankelijke namen van al deze links zijn hetzelfde: “Open magazine.noord-holland.nl in een nieuw tabblad”, maar ze hebben verschillende bestemmingen. Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn. In dit geval kan een goed linkdoel bijvoorbeeld zijn “Lees verder in Editie 3 - 2025”. De zichtbare tekst komt dan ook in het linkdoel voor.

Alternatieve tekst van een informatieve afbeelding is leeg

Op deze pagina is er een link “Vorige edities” die een dialoogvenster opent met artikelen. Elk artikel bevat een afbeelding. Sommige afbeeldingen hebben alt-tekst, terwijl andere dat niet hebben. Zorg ervoor dat dit consistent is binnen de set afbeeldingen.

Oplossing:

Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/busverbindingen

Kleurcontrast van tekst is te laag (tekst groter dan 24px)

Op deze pagina staat een witte kop “Noord-Holland met de bus” tegen de achtergrond van een afbeelding. De achtergrondkleuren variëren, bijvoorbeeld lichtgrijs (#EEEAE7). De contrastverhouding is te laag: 1,2:1.

Oplossing:

Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Kop-element gebruikt voor tekst die geen kop is

De tekst "Met geld van de … en chauffeurs delen hun ervaringen" op deze pagina is geen kop, maar is onjuist opgemaakt met een h4-element om de lettergrootte te vergroten. Het kop-element (h4) is 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 h4-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 doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/beeldverhaal-waterkwaliteit met “Noord-Holland is een zeer waterrijke … in 9 foto’s.”; op pagina https://magazine.noord-holland.nl/2025-4/quiz met “Van de grachten van Amsterdam …t oudste museum van Nederland.”; op pagina https://magazine.noord-holland.nl/2025-4/noord-holland-van-boven met “Bij Koninklijk besluit in 1819 is … ponten heen en weer”; en anderen.

Oplossing:

Verwijder het h4-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Kop is niet gemarkeerd als koptekst

Op deze pagina staan onder de kop “Fan van de Kustbus” de volgende teksten die niet als koppen zijn opgemaakt: “Even naar het strand”? “Dagje weg”, “Blij verrast” en “3 kustbussen”.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet 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. 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. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/. Hetzelfde probleem doet zich verderop voor onder de kop “Een gevoel van vrijheid in de nachtbus”, “Een taxiservice, maar dan goedkoper” en “Buurtbus vervoert jong en oud”.

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.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/quiz

Kleurcontrast van tekst is te laag (tekst groter dan 24px)

Op deze pagina staan de witte koppen “Knappe koppen uit Noord-Holland” en “De uitvindersquiz!” tegen de achtergrond van een afbeelding. De achtergrondkleuren variëren, bijvoorbeeld lichtgrijs (#DEDAD5). De contrastverhouding is te laag: 1,4:1.

Oplossing:

Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina staat een quiz. Onder elke vraag staat een lijst met 4 mogelijke antwoorden, maar deze mist de juiste markering.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. 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. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

Oplossing:

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

Kleurcontrast van tekst is te laag (tekst groter dan 24px)

Op deze pagina staat een blauwe (#32A4DF) kop “Prijsvraag” op een lichtblauwe (#E9F4FF) achtergrond. De kleurcontrastverhouding is te laag: 2,5:1.

Oplossing:

Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Placeholder-tekst is gebruikt als label voor invoerveld

Op deze pagina staat onder de kop "Prijsvraag" een formulier. Alle invoervelden missen een permanent label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen.

Oplossing:

Voeg een label toe in de vorm van een tekst of een icoon.

Invoerveld heeft geen toegankelijke naam

Op deze pagina staat onder de kop "Prijsvraag" een formulier. Alle invoervelden missen een toegankelijke naam. 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 invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina staat onder de kop "Prijsvraag" een formulier met een invoerveld voor de persoonlijke informatie “E-mailadres” dat het autocomplete-attribuut mist.

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.

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

Op deze pagina staat onder de kop "Prijsvraag" een formulier. De foutmelding in het formulier toont de boodschap "Dit veld is verplicht en kan niet leeg gelaten worden".

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.

Er staan twee kopregels van hetzelfde niveau direct onder elkaar

Op deze pagina volgt een kop van niveau 4 direct op een andere kop van een hoger niveau. Zie “Van de grachten van Amsterdam tot … van Nederland.” en “Vraag 1”. Een kop mag niet direct opgevolgd worden door een kop van hetzelfde of een hoger niveau. Bijvoorbeeld: direct onder een h3-element mag een h4-element komen of andere content, maar niet opnieuw een h3-element of een h2-element.

Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/noord-holland-van-boven bij de koppen “Bij Koninklijk besluit in 1819 is … heen en weer” en “Waar kijken we naar?”.

Oplossing:

Pas de tekst aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven. Zorg er in dit geval in ieder geval voor dat de alinea niet meer als kop is opgemaakt. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Logo heeft geen alt-tekst

Op deze pagina staat bij de kop “Knappe koppen uit Noord-Holland” een logo met de tekst “&quiz”. Dit logo heeft geen tekstalternatief.

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 en geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.

Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/noord-holland-van-boven met “&regio”; op de pagina https://magazine.noord-holland.nl/2025-4/even-aan-noord-holland-vragen met “&video”; op de pagina https://magazine.noord-holland.nl/2025-4/instagram met “&instagram”; en andere.

Oplossing:

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

Het volgende is niet fout, maar een advies om de werking van de quiz te verbeteren.

De alternatieve tekst van de afbeeldingen bevat de antwoorden op de quiz

Op deze pagina staat een quiz met knoppen om de antwoorden te bekijken. Maar de antwoorden staan ook in de alternatieve tekst van de afbeeldingen. Gebruikers van schermlezers weten de antwoorden daardoor al van tevoren, zelfs als ze dat niet willen.

Oplossing:

Verwijder de antwoorden uit de alternatieve tekst.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/even-aan-noord-holland-vragen

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staat boven de video een link met de zichtbare tekst “een subsidie aanvragen”, maar de toegankelijke naam is “Open noord-holland.nl in een nieuw tabblad”, die wordt meegegeven via een aria-label.

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”een subsidie aanvragen - Open noord-holland.nl in een nieuw tabblad”.

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina wordt boven de kop "Deel op social media" een video getoond. De video bevat op verschillende momenten tekst en een logo (bijvoorbeeld rond 0:07, 0:10). Er is echter geen media-alternatief of audiobeschrijving beschikbaar. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Dit probleem wordt ook afgekeurd voor SC 1.2.5, omdat er geen audiobeschrijving aanwezig is.

Oplossing:

Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/instagram

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Op deze pagina wordt sommige content gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium, bijvoorbeeld de locatie in een Instagram-bericht.

Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.

Oplossing:

Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.

Bezoekers die inzoomen tot 200% (of 400%) kunnen niet meer alle tekst lezen

Impact: Klein Type: Techniek WCAG: 1.4.4, 1.4.10

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200% (of 400%), gaat sommige content gedeeltelijk verloren, bijvoorbeeld de locatie in een Instagram-bericht.

Oplossing:

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

Link naar pagina: https://magazine.noord-holland.nl/2025-4/kort-nieuws

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staan links met de zichtbare tekst “Lees meer”, “Bekijk video”, “Bekijk video” en “Lees verder”, maar de toegankelijke namen zijn respectievelijk “Overlay openen Kort nieuws 2 - WATERPROOF”, “Overlay openen Kort nieuws 1 - In de keuken met de CvdK”, “Overlay openen Kort nieuws 3 - Terugblik Pride2025” en “Overlay openen Meld je aan”. Deze worden overschreven door middel van een aria-label.

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Lees meer - Overlay openen Kort nieuws 2 - WATERPROOF”.

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina opent na het klikken op de knop “Bekijk video” onder de kop “In de keuken met Arthur van Dijk” een dialoogvenster met een video. De video bevat op verschillende momenten tekst en een logo (bijvoorbeeld rond 4:37). Er is echter geen media-alternatief of audiobeschrijving beschikbaar. Deze video bevat visuele informatie (tekst en logo’s) die ontoegankelijk is voor blinde gebruikers. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit probleem wordt ook afgekeurd onder SC 1.2.5, omdat er geen audiobeschrijving aanwezig is.

Hetzelfde probleem doet zich voor bij een andere video, na het klikken op de knop “Bekijk video” onder de kop “Terugblikvideo Pride”.

Oplossing:

Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina verschijnt na het klikken op de link “Lees verder” een dialoogvenster met de link “Aanmelden”. De toegankelijke naam van deze link is “Open formulieren.noord-holland.nl in een nieuw tabblad”. Het gebruik van het aria-label overschrijft de zichtbare tekst. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Aanmelden - Open formulieren.noord-holland.nl in een nieuw tabblad”.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/colofon

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet opgemaakt als koppen: “Redactie”, “Redactieraad” en andere. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet 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. 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. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

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.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staat een link “www.noord-holland.nl/aanmeldenmagazine”, maar de toegankelijke naam van deze link is “Open noord-holland.nl in een nieuw tabblad”. Het aria-label overschrijft de zichtbare tekst. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan.

Bijvoorbeeld: aria-label=”www.noord-holland.nl/aanmeldenmagazine - Open noord-holland.nl in een nieuw tabblad”.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/bomenkap

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina staat een knop met een pijltje-omlaag-pictogram om te scrollen. Deze knop heeft een aria-label-attribuut met Engelse tekst “Scroll down button”. Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/busverbindingen; op de pagina https://magazine.noord-holland.nl/2025-4/beeldverhaal-waterkwaliteit; op de pagina https://magazine.noord-holland.nl/2025-4/quiz; en andere.

Oplossing:

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

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staan in de footer links waarvan de zichtbare tekst niet voorkomt in de toegankelijke naam. Bijvoorbeeld: de zichtbare tekst is “Vorige pagina”, maar de toegankelijke naam is “Ga naar Inhoud”, die via een aria-label wordt toegevoegd. Het aria-label overschrijft de zichtbare tekst. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/busverbindingen; op de pagina https://magazine.noord-holland.nl/2025-4/beeldverhaal-waterkwaliteit; op de pagina https://magazine.noord-holland.nl/2025-4/quiz; en andere.

Oplossing:

Zorg ervoor dat de zichtbare tekst voorkomt in de toegankelijkheidsnaam. In dit geval is dat “Vorige pagina”. Dit geeft op zichzelf al duidelijk aan wat het linkdoel is, maar als het eventueel onduidelijk is kan het aangevuld worden. Zorg er dan voor dat het aria-label in ieder geval de zichtbare tekst bevat.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/beeldverhaal-waterkwaliteit

Er staan twee kopregels van hetzelfde niveau direct onder elkaar

Op deze pagina volgt direct na een kop van niveau 1 een andere kop van hetzelfde niveau. Zie “Een helder beeldverhaal” en “3 projecten voor schoner water”.

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 h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element. Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/quiz en op de pagina https://magazine.noord-holland.nl/2025-4/even-aan-noord-holland-vragen.

Oplossing:

Pas de tekst aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet als koppen opgemaakt: “Watertuinen Heemskerk”, “Watertuinen Heemskerk”, “Watertuinen Heemskerk”, “Waterzuiverende Grachten Amsterdam”, “Waterzuiverende Grachten Amsterdam” en andere. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet 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. 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. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

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.

Link naar pagina: https://magazine.noord-holland.nl/2025-4/noord-holland-van-boven

Kleurcontrast van tekst is te laag

Op deze pagina staan de kop “Al 40 jaar heen en weer” en de tekst onder de kop in wit op een gele (#FFC823) achtergrond. De kleurcontrastverhouding is te laag: 1,6:1. Hetzelfde probleem doet zich voor op de pagina https://magazine.noord-holland.nl/2025-4/kort-nieuws.

Oplossing:

Voor tekst kleiner dan 24px en niet vetgedrukt moet het contrast minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Kop-element gebruikt voor tekst die geen kop is

De teksten “Op een zonnige zaterdag of zondag zet ik zo 700 tot 800 mensen over” en “Ook als het sneeuwt of stormt varen we zo lang mogelijk door” op deze pagina zijn geen koppen, maar ze zijn onterecht opgemaakt met een h4-element om de lettergrootte te vergroten. Het kop-element (h4) is 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 h4-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 h4-element en gebruik een ander element, zoals een blockquote-element. De gewenste stijl kun je met CSS toevoegen. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staat onder de kop “Al 40 jaar heen en weer” een link met de zichtbare tekst “Lees het interview”, maar de toegankelijke naam is “Overlay openen NH van boven - Interview”, die wordt meegegeven via een aria-label. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Lees het interview - Overlay openen NH van boven - Interview”.