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

Er is geen andere manier om pagina's van deze website te vinden. Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Oplossing:

Voeg een zoekveld of een sitemap toe.

Logo zonder tekstalternatief is de enige inhoud van een link

Het logo bovenaan de website fungeert als een link, maar de tekstalternatief ontbreekt, waardoor de link ontoegankelijk is.

De afbeelding is interactief, maar er is geen tekstalternatief. Daarom heeft de link geen inhoud en dus ook geen toegankelijke naam en doel.

Oplossing:

Om deze link toegankelijk te maken, moet je ervoor zorgen dat de afbeelding een betekenisvolle tekstalternatief heeft die duidelijk het doel of de bestemming van de link beschrijft. Op die manier weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Verander het alt-tekst in alt=”Provincie Noord-Holland”.

Toetsenbordfocus gaat buiten het mobiele menu

Wanneer de website op een klein scherm wordt bekeken, verschijnt de menuknop bovenaan de pagina. Deze knop opent een mobiel menu. Momenteel kunnen bezoekers met behulp van het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu open blijft.

Oplossing:

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

Dit kun je op een van de volgende manieren oplossen:

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

Naam van de knop beschrijft niet wat de knop doet

Op kleine schermen sluit een "X" knop met de toegankelijke naam "Menu tonen" het mobiele navigatiemenu wanneer het menu is geopend. Deze toegankelijke naam beschrijft de functie ervan niet.

Een blinde bezoeker krijgt een andere informatie voorgelezen. De functie van de knop is het menu sluiten, niet tonen.

Hetzelfde probleem doet zich voor op kleine schermen in het hoofdmenu voor pijlknoppen met toegankelijke namen "Toon onderliggende pagina's".

Oplossing:

Voeg tekst toe die de functie van de knop goed beschrijft.

Status van submenu wordt niet doorgegeven aan schermlezer

Op kleine schermen staan in het hoofdmenu pijltjesknoppen met toegankelijke namen zoals 'Toon onderliggende pagina's'. Deze knoppen openen submenu's, maar een blinde bezoeker krijgt geen informatie over of het submenu open of gesloten is, omdat de toegankelijke naam van de knop niet verandert en er geen attribuut is om de status van het submenu aan te geven.

Oplossing:

Voeg een aria-expanded-attribuut toe aan de knop en zorg ervoor dat de toegankelijke naam van de knop wordt bijgewerkt wanneer de functie ervan verandert, zodat gebruikers van schermlezers op de hoogte worden gebracht van de huidige status.

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

Op verschillende pagina's van de website zijn combinaties van blauw (#2F8FDF, #288FDF) en wit te zien; blauwe tekst op een lichtblauwe (#CFE2F7) achtergrond. De kleurcontrastverhouding is te laag: 2,6:1-3,4:1. Zie bijvoorbeeld de footer op alle pagina's en op pagina's zoals https://jouwnoord-holland.nl/jouwruimte/, https://jouwnoord-holland.nl/jouwruimte/themas/omgaan-met-water, https://jouwnoord-holland.nl/jouwruimte/bewonersbijeenkomsten.

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/

Kleurcontrast van informatieve iconen is niet voldoende

Op pagina's https://jouwnoord-holland.nl/jouwruimte/meer-oog-voor-beschermen-drinkwater-recreeren-dicht-bij-huis, https://jouwnoord-holland.nl/jouwruimte/overheden-en-belangenpartijen-in-gesprek-over-inrichting-noord-holland hebben de informatieve iconen onder de kop 'Deel dit artikel' onvoldoende kleurcontrast. De witte pictogrammen tegen de gele achtergrond (#FBAE00) hebben een contrastverhouding van 1,9: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.

Oplossing:

Zorg dat de iconen voldoende contrast hebben.

Relatie tussen de links in het kruimelpad is niet in de code vastgelegd

Op pagina's met breadcrumb-navigatie wordt dit geïmplementeerd als een verzameling links, maar de onderliggende structuur en relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Zie bijvoorbeeld pagina's https://jouwnoord-holland.nl/jouwruimte/themas/omgaan-met-water, https://jouwnoord-holland.nl/jouwruimte/themas.

Oplossing:

Plaats de links in een nav- of een ul-element.

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/

Tekst op de knop is toegevoegd als inhoud van CSS-pseudo-element

Op deze pagina onder 'Denk mee' verandert de zichtbare knoptekst 'Lees meer' in 'Lees minder' om aan te geven of de accordeon is uitgevouwen of ingeklapt, maar het gedeelte 'Lees minder' wordt alleen weergegeven met behulp van het CSS ::after pseudo-element waarin tekst staat. Dit betekent dat 'Lees minder' niet aanwezig is in de HTML en mogelijk niet wordt aangekondigd door schermlezers of wordt aangekondigd als één woord 'Lees meer Lees minder'.

Hetzelfde probleem doet zich voor op deze pagina bij de knop "Lees minder" boven "Fase 1: reacties op 4 thema's".

Oplossing:

Plaats zowel "Lees meer" als "Lees minder" als echte tekst in de HTML en controleer de zichtbaarheid van tekst met JavaScript, zodat alle gebruikers, inclusief gebruikers van schermlezers, de juiste tekst krijgen.

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

Deze pagina bevat een iframe met in het title-attribuut de tekst "YouTube video player".

Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

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

De videospeler gebruikt letters als sneltoetsen

Deze pagina bevat een YouTube-videospeler die gebruikmaakt van sneltoetsen met één teken.

De Youtube-speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.

Oplossing:

Je lost dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Linktekst is niet duidelijk genoeg

Op deze pagina onder het kopje 'Nieuws' bevatten meerdere links de vage tekst 'Lees verder'. Deze tekst beschrijft de bestemming van de link niet adequaat, wat voor onduidelijkheid zorgt, vooral voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers.

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

Huidige stap in de tijdlijn is alleen visueel aangegeven

Op deze pagina wordt onder het kopje 'Tijdlijn' de huidige stap in de tijdlijn alleen aangegeven door een visuele verandering, maar deze status wordt niet gemarkeerd in de code. Daardoor kunnen mensen die een schermlezer gebruiken niet zien welke stap de huidige is, waardoor belangrijke informatie ontoegankelijk is.

Oplossing:

Zorg ervoor dat alle informatie die visueel wordt weergegeven ook op een manier wordt aangeboden die toegankelijk is voor schermlezers. Voeg bijvoorbeeld verborgen tekst toe om duidelijk aan te geven wat de huidige stap is.

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/themas

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina bevatten meerdere links onder het kopje 'Denk mee over de thema's' de vage tekst "Lees meer". Deze tekst beschrijft de bestemming van de link niet adequaat, wat voor onduidelijkheid zorgt, vooral voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers.

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

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/achtergrondinformatie

Alternatieve tekst van een informatieve afbeelding is leeg

Op deze pagina staan onder het kopje 'Meer informatie?' twee informatieve afbeeldingen met 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.

Beschrijving van complexe afbeelding ontbreekt

Op deze pagina staan onder de kop 'Meer informatie?' twee informatieve afbeeldingen met een leeg alt-attribuut.

Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alternatieve tekst past. Die informatie maak je toegankelijk door twee tekstalternatieven te bieden: een korte en een lange beschrijving.

Oplossing:

De korte beschrijving, meestal de alternatieve tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kun je als tekst op de pagina zelf plaatsen, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Kleur is gebruikt als enige manier om informatie over te dragen

Op deze pagina staat onder het kopje 'Meer informatie?' een grafiek. Kleur wordt gebruikt om informatie weer te geven. Zie de legenda en de balken in de grafiek.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/meer-oog-voor-beschermen-drinkwater-recreeren-dicht-bij-huis

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/bewonersbijeenkomsten/verslag-bewonersbijeenkomst-alkmaar

em-element is gebruikt voor opmaak

Op deze pagina worden onder het kopje "Verslag Bewonersbijeenkomst Alkmaar" de em-elementen gebruikt voor styling doeleinden.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/404

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/toegankelijkheid

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/middelbare-scholieren-uit-castricum-denken-mee-over-de-toekomst-van-noord-holland

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/praat-mee-over-de-toekomst-van-noord-holland-bijeenkomsten-in-amsterdam-en-purmerend

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/iedereen-moet-toegang-kunnen-hebben-tot-recreatie

Geen nieuwe bevindingen

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/meer-oog-voor-beschermen-drinkwater-recreeren-dicht-bij-huis Link naar PDF: https://www.noord-holland.nl/bestanden/pdf/Ruimtelijke_inrichting/Tussentijdse participatierapportage actualisatie Omgevingsvisie.pdf

PDF-document heeft geen titel

Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Dit pdf-document heeft geen titel in de bestandseigenschappen.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

Structuur van pdf-document is niet in codes vastgelegd

Dit pdf-document bevat geen codes, waardoor de inhoud niet toegankelijk is voor schermlezers.

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

Oplossing:

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

Kleurcontrast van kleine tekst is te laag

In het PDF-document worden kleurcombinaties gebruikt waarvan de contrastratio niet voldoet aan de minimale vereisten. Voor tekst tot een lettergrootte van 24 px of vet moet de contrastratio minimaal 4,5:1 zijn en voor grote tekst vanaf 24 px of vet minimaal 3,0:1. Op pagina 2 staan bijvoorbeeld de combinaties blauw (#32A4DF) en geel (#FEC823) of wit. Op pagina 3 staan de combinaties geel (#FEC823) en wit en blauw (#32A4DF) en geel (#FEC823). Op pagina 7 staat de combinatie roze (#F09080) en wit. Op pagina 8 staat de combinatie lichtblauw (#98C9EF) en wit.

Oplossing:

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

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/themas/omgaan-met-water

Kop-element gebruikt voor tekst die geen kop is

De tekst "Reageren kon tot 20 augustus, de reactiemogelijkheid is gesloten tot 3 november. Dan start de volgende ronde." op deze pagina is geen koptekst, maar is ten onrechte gemarkeerd 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 p-element. De gewenste stijl kun je met CSS toevoegen. Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/ .

Naam van de knop beschrijft niet wat de knop doet

Op deze pagina hebben de knoppen met de tekst "1", "2", "3", enz. in de paginering de functie om de juiste reacties te laden, maar hun toegankelijke namen zijn "1", "2", "3", enz., die hun functie niet nauwkeurig beschrijven.

Een blinde bezoeker weet daardoor niet wat deze knop precies doet.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

Huidige pagina in paginering is alleen visueel aangegeven, maar niet in de code

Op deze pagina onderscheidt de paginering onder de zoekresultaten visueel het huidige paginanummer, maar dit onderscheid is niet aanwezig in de HTML-code.

Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker.

Oplossing:

Voeg visueel verborgen tekst toe binnen de knoppen van de huidige pagina die aangeeft dat dit de huidige pagina is. Bijvoorbeeld <span class=”sr-only”>Huidige pagina</span>.

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

Wanneer de tekst op deze pagina wordt vergroot tot 200%, zijn de eerste en laatste knoppen in de paginering niet zichtbaar.

Oplossing:

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

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/bewonersbijeenkomsten

Er zijn links met dezelfde tekst maar verschillende bestemmingen

Op deze pagina verwijst de link "Lees het verslag" onder het kopje "Maandag 12 mei 15:00 - 17:00" naar https://jouwnoord-holland.nl/jouwruimte/bewonersbijeenkomsten/verslag-bewonersbijeenkomst-alkmaar. Onder de kop "Dinsdag 13 mei 10:00 - 12:00" staat een link met dezelfde tekst, maar de bestemming van deze tweede link is anders.

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.

Link naar pagina: https://jouwnoord-holland.nl/jouwruimte/overheden-en-belangenpartijen-in-gesprek-over-inrichting-noord-holland

em-element is gebruikt voor opmaak

Op deze pagina onder de kop “Overheden en belangenpartijen in gesprek over inrichting Noord-Holland” worden de em-elementen ten onrechte gebruikt voor stylingdoeleinden.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

strong-element is gebruikt voor opmaak

Op deze pagina, onder de kop "Overheden en belangenpartijen in gesprek over inrichting Noord-Holland", wordt het strong-element ten onrechte gebruikt voor opmaakdoeleinden. Volledige zinnen worden omgeven door een strong-element om ze vetgedrukt weer te geven.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

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