Techniekaudit digitale toegankelijkheid van website magazine.noord-holland.nl

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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