Audit digitale toegankelijkheid van website deboekelermeer.nl

#1 - Issue nr. 3 — Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op alle pagina's is een skiplink aanwezig. De witte link "Naar hoofdinhoud" staat op een oranje achtergrond (#FD8204). De contrastratio is te laag: 2,5: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 kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#2 - Issue nr. 6 — Menuknop is niet toegankelijk

Op een klein scherm verschijnt de menuknop bovenaan de pagina. Deze knop mist de naam en status (open-gesloten).

Oplossing

Geef deze knop een toegankelijke naam, bijvoorbeeld door een beschrijvende knoptekst, een aria-label of een andere geschikte techniek te gebruiken. De status van de knop kan worden aangegeven door het attribuut aria-expanded aan de knop toe te voegen of door visueel verborgen tekst te gebruiken.

<button aria-expanded="false" aria-label="Menu"></button>

#3 - Issue nr. 7 — Mobiel menu werkt niet goed met toetsenbordfocus

Op alle pagina's verschijnt op het kleine scherm een mobiele menuknop. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina terwijl het menu geopend blijft.

Bij dit soort menu's moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

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.

#4 - Issue nr. 9 — Onvoldoende kleurcontrast bij toetsenbordfocus

Op deze pagina staan in de header links, bijvoorbeeld "HOME". De tekst van de link "HOME" verandert in lichtblauw (#0CB1AF) op een witte achtergrond wanneer deze link toetsenbordfocus krijgt. De contrastratio van deze tekst is 2,7:1.

Tekst van informatieve elementen, zoals links en knoppen, moet altijd voldoende contrast hebben. Dit geldt ook wanneer het element toetsenbordfocus krijgt of wanneer de bezoeker er met de muiscursor overheen beweegt (hover).

Oplossing

Zorg dat de tekst, ook als de muis eroverheen beweegt, minimaal een contrast van 4,5:1 heeft met de achtergrond. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#5 - Twee koppen van hetzelfde niveau staan direct onder elkaarNieuw

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: Op deze pagina wordt een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde niveau. Zie "Alkmaar" en "Jan Riepma".

Als twee kop-elementen van hetzelfde of hoger niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Pas de tekst en de kopniveaus aan, zodat de koppen de structuur van de inhoud correct weergeven.

Oplossing

Pas de tekst en de kopniveaus aan, zodat de koppen de structuur van de inhoud correct weergeven.

#6 - Issue nr. 14 — Leesvolgorde is niet logisch

Op deze pagina, boven de kop "Ontdek de Boekelermeerwaarde", is de HTML-volgorde van de elementen binnen nieuwsartikelen: afbeelding, kop, tekst en link.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Hetzelfde probleem doet zich boven de footer voor in de slider met artikelen.

Hetzelfde probleem komt voor:

• op de pagina https://www.deboekelermeer.nl/deelnemers;
• op de pagina https://www.deboekelermeer.nl/deelnemer/gpgroot;
• op de pagina https://www.deboekelermeer.nl/deelnemer/baza-seeds-holland en op andere pagina's.

Oplossing

Dit is op te lossen door alle inhoud (afbeeldingen en tekst) 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. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Dit kan door de alt-tekst leeg te laten (alt="" op het img-element). Hierdoor wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: koptekst – inhoud.

#7 - Issue nr. 17 — Video bevat tekst of logo's waarvoor geen alternatief is

Op deze pagina wordt onder de kop "Ontdek de Boekelermeerwaarde" een video getoond. In de video komen op verschillende momenten teksten en logo's voor (bijvoorbeeld rond 0:01 en 0:02). Er is echter geen media-alternatief of audiodescriptie beschikbaar. Deze video bevat visuele informatie (teksten en logo's) die niet toegankelijk is voor blinde gebruikers. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing

Voor dit succescriterium (1.2.3) kan dit worden opgelost met een geschreven tekst (media-alternatief). Om te voldoen aan succescriterium 1.2.5 moet echter een audiobeschrijving worden toegevoegd die de visuele elementen in de video toelicht, zoals namen, functies, logo's en teksten.

#8 - Issue nr. 19 — Naam van de knop beschrijft niet wat de knop doet

Op deze pagina staat boven de footer een slider met artikelen. Deze slider heeft knoppen met pijlpictogrammen. De toegankelijke namen "Volgende" en "Vorige" beschrijven hun functie niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.

Oplossing

Voeg tekst toe die deze knop duidelijk beschrijft, bijvoorbeeld door het woord "slide" toe te voegen aan "Volgende" en "Vorige".

Een andere oplossing is het toevoegen van een aria-label aan het element <section id="Deelnemers">. Op deze manier wordt een aparte regio binnen de webpagina gecreëerd en wordt duidelijk dat deze knoppen bij een slider horen.

Let op: deze oplossing werkt alleen op een <section>-element, niet op een <div>.

<section id="Deelnemers" aria-label="Carrousel met feedback van deelnemers">

#9 - Issue nr. 20 — Informatieve elementen zijn verborgen voor hulpsoftware

Op deze pagina staat boven de footer een slider met artikelen. Deze artikelen hebben het attribuut aria-hidden="true". Het attribuut aria-hidden="true" zorgt ervoor dat inhoud wordt verborgen voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.

Oplossing

Verwijder het attribuut aria-hidden="true".

#10 - Issue nr. 21 — Citaat is gemarkeerd met em-element

Op deze pagina staat boven de footer een slider met artikelen. In deze artikelen zijn citaten visueel vormgegeven als quotes, maar het em-element wordt onjuist gebruikt om dit effect te bereiken.

Dit is niet de beste manier om een citaat te markeren, omdat het semantisch niet correct is. De elementen i en em zijn bedoeld om een tekst italic te maken (i) of extra nadruk te geven (em).

Oplossing

Gebruik voor citaten geschikte HTML-elementen:

• blockquote: voor langere citaten die op zichzelf een alinea vormen.
• q: voor kortere citaten in een lopende zin. Je kunt eventueel ook aanhalingstekens gebruiken.

#11 - Issue nr. 22 — Alternatieve tekst zorgt voor herhaling van tekst

Op deze pagina staat boven de footer een slider met artikelen. Deze artikelen bevatten afbeeldingen, maar de tekstalternatieven van de afbeeldingen herhalen de koptekst, bijvoorbeeld "GP Groot".

Deze afbeeldingen dragen geen andere informatie over dan al in de kopteksten staat. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt="").

#12 - Issue nr. 24 — Kleurcontrast van tekst is niet voldoende bij toetsenbordfocus

Op deze pagina onder de kop "Bedrijfskavels te koop in Alkmaar en Heiloo!" staan links, bijvoorbeeld "Download kavelkaart". Wanneer de link "Download kavelkaart" toetsenbordfocus krijgt, verandert de tekstkleur naar donkerblauw (#23527C) tegen een blauwe achtergrond (#007E9E). De contrastratio van deze tekst is 1,7:1.

Tekst van informatieve elementen, zoals links en knoppen, moet altijd voldoende contrast hebben, ook als het element toetsenbordfocus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).

Oplossing

Zorg dat de tekst ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#13 - Issue nr. 25 — Contrast tussen focusindicator en achtergrond is te laag

Op deze pagina staat boven de footer een slider met artikelen. Deze slider heeft knoppen met pijlpictogrammen. Wanneer deze knoppen toetsenbordfocus krijgen, wordt dit zichtbaar door een lichtblauwe (#1199FF) focusrand. De achtergrondkleur varieert, bijvoorbeeld grijs (#C6D1DB). De contrastratio is 1,9:1.

Op dit moment 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.

#14 - Issue nr. 26 — Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Op deze pagina wordt de tekst van de artikelen boven de footer — "De Boekelermeer: de ideale locatie om Baza Seeds … het open karakter van ons bedrijf hier ook behouden" — gedeeltelijk onzichtbaar en onleesbaar. Dit gebeurt wanneer bezoekers tekstafstanden toepassen zoals beschreven in dit succescriterium.

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. Op deze pagina lees je hoe je dit succescriterium kunt testen: https://properaccess.nl/sc-1-4-12-wat-betekent-tekstafstand/.

#15 - Issue nr. 27 — img-element heeft geen alt-attribuut

Op deze pagina, onder "Start aanbesteding concessie Overslagkade in Boekelermeer!", is een afbeelding opgenomen met een img-element, maar het alt-attribuut ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg (alt=""). Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Hetzelfde probleem komt voor:

• op de pagina https://www.deboekelermeer.nl/nieuws/sustenso naast de kop "Strategisch en volop kennis";
• op de pagina https://www.deboekelermeer.nl/nieuws/ondernemen-en-coronavirus naast de kop "Ondernemen en coronavirus";
• op de pagina https://www.deboekelermeer.nl/nieuws/alkmaar-mkb-vriendelijste-gemeente-noord-holland-2019 onder de kop "Alkmaar: MKB-vriendelijkste gemeente N-H"; en op andere pagina's.

Oplossing

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding blijft de waarde leeg en bij een informatieve afbeelding wordt een duidelijke alternatieve tekst toegevoegd.

#16 - Issue nr. 28 — Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staat lichtgroene tekst (#99CC00) op een witte achtergrond, bijvoorbeeld "Een Strategische Stap". De contrastratio is te laag: 1,9: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 kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#17 - Issue nr. 29 — strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element onjuist gebruikt voor opmaakdoeleinden, bijvoorbeeld bij "Benieuwd naar de details? Raadpleeg de stukken op TenderNed en ontdek hoe de Boekelermeer uw bedrijf kan versterken!".

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 worden gebruikt om alleen een visueel effect te bereiken (vetgedrukte tekst).

Hetzelfde probleem komt voor op de pagina https://www.deboekelermeer.nl/deelnemer/rumpinggroep, bijvoorbeeld bij "In 1928 startte J.W.J. Rumping … Jaap Rumping, algemeen directeur".

Oplossing

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

#18 - Issue nr. 11 — strong-element in plaats van kop-element

Op deze pagina is de volgende tekst onjuist gemarkeerd met strong in plaats van met een correct heading-element: "Een Strategische Stap", "Gezocht: een exploitant".

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h4. 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.

Hetzelfde probleem doet zich voor:

• op de pagina https://www.deboekelermeer.nl/deelnemer/gpgroot, bijvoorbeeld bij "De Boekelermeer is de meest geschikte locatie voor ons NXT-station";
• op de pagina https://www.deboekelermeer.nl/deelnemer/baza-seeds-holland, bijvoorbeeld bij "Duurzaamheid zit in de genen", "Persoonlijk contact erg prettig" en "Groen, bereikbaar en veilig";
• op de pagina https://www.deboekelermeer.nl/deelnemer/rumpinggroep, bijvoorbeeld bij "Centraal" en "Duurzaam"; en op andere pagina's.

Oplossing

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h4 of h5. Dit element wordt vaak toegevoegd met een knop "B" in een tekstbewerker.

#19 - Onjuist gebruik van een kopelementNieuw

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: De tekst "De Boekelermeer is weer een duurzaam … en het leveren van groen gas" op deze pagina is geen kop, maar is onterecht als h4-element opgemaakt om het lettertype groter te maken.

Het kop-element (h4) is niet betekenisvol gebruikt, maar om een visueel effect te creëren. De tekst die als kop is gemarkeerd, is inhoudelijk geen kop, omdat er geen inhoud onder staat. Kop-elementen zijn bedoeld om structuur te geven aan informatie op een pagina. Gebruikers van schermlezers vertrouwen op koppen om te navigeren en de opbouw van de pagina te begrijpen. Kop-elementen zijn daarom niet bedoeld voor uitsluitend visuele opmaak.

Oplossing

Verwijder het <h4>-element en gebruik een ander passend element, zoals een <p>-element. De gewenste visuele stijl kan vervolgens met CSS worden toegepast.

#20 - Issue nr. 30 — Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raken de artikelteksten gedeeltelijk uit beeld, bijvoorbeeld "Het innovatieve en duurzame … behoefte in de regio".

Hetzelfde probleem komt voor:

• op de pagina https://www.deboekelermeer.nl/deelnemer/gpgroot;
• op de pagina https://www.deboekelermeer.nl/deelnemer/baza-seeds-holland;
• op de pagina https://www.deboekelermeer.nl/deelnemer/rumpinggroep; en op andere pagina's.

Oplossing

Zorg dat alle functionaliteit en inhoud behouden blijven en leesbaar zijn bij 400% zoom op een scherm van 1280 × 1024 pixels.

#21 - Issue nr. 23 — Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staat boven de footer een slider met artikelen. Sommige artikelen bevatten zwarte tekst (#000000) op een blauwe achtergrond (#007E9E), bijvoorbeeld "Directeur brandstoffen en oliehandel", "GP Groot", "Directeur" en andere. De contrastratio is te laag: 4,47:1.

Hetzelfde probleem komt voor:

• op de pagina https://www.deboekelermeer.nl/deelnemer/gpgroot;
• op de pagina https://www.deboekelermeer.nl/deelnemer/baza-seeds-holland; en op andere pagina's.

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 kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#22 - Issue nr. 31 — Structuur van pdf-document is niet in codes vastgelegd

Dit pdf-document mist 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. Bij het oplossen hiervan kunnen nieuwe toegankelijkheidsproblemen ontstaan die momenteel nog niet aan het licht zijn gekomen.

Hetzelfde probleem doet zich voor bij het pdf-document: https://www.deboekelermeer.nl/assets/docs/userfiles///BeeldkwaliteitsplanBoekelermeer.pdf.

Oplossing

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

Opslaan als getagde PDF in Word (Windows) Ga naar Bestand. Kies Opslaan als Adobe PDF (als je Acrobat hebt) of ga naar Meer → Exporteren → PDF/XPS-document maken. In het venster dat opent, klik je op Opties. Zet een vinkje bij Documentstructuurtags voor toegankelijkheid en bij Bladwijzers maken met koppen. Op deze manier kunnen gebruikers met het toetsenbord snel van sectie naar sectie springen. Dit werkt alleen wanneer echte kopstijlen zijn gebruikt.

Opslaan als getagde PDF in Word (Mac) Ga naar Bestand → Opslaan als, kies PDF in het keuzemenu en selecteer Best voor elektronische distributie en toegankelijkheid, dat gebruikmaakt van de Microsoft online service. Op Mac worden bladwijzers automatisch op basis van de koppen gegenereerd, zonder dat hiervoor instellingen hoeven te worden aangepast.

#23 - Issue nr. 32 — PDF-document heeft geen titel

Dit pdf-document heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet in de PDF-instellingen ook een documenttitel worden ingesteld. Bij het openen van een pdf in een pdf-lezer (zoals Adobe Acrobat of een browser) wordt meestal de bestandsnaam bovenaan in de titelbalk getoond, bijvoorbeeld document123.pdf. Wanneer in de pdf-metadata echter een documenttitel is ingesteld, wordt deze titel in plaats van de bestandsnaam weergegeven. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen, omdat zij dan snel en gemakkelijk kunnen bepalen of het document relevant is.

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

#24 - Issue nr. 33 — De taal is niet ingesteld in de metadata

In de metadata van deze pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen, zodat hulpsoftware de informatie uit het bestand met de juiste uitspraakregels kan voorlezen.

Hetzelfde probleem doet zich voor bij het pdf-document: https://www.deboekelermeer.nl/assets/docs/userfiles///BeeldkwaliteitsplanBoekelermeer.pdf.

Oplossing — los het op in Adobe Acrobat

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Geavanceerd.
4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
5. Klik op OK en sla het bestand op.

#25 - Issue nr. 34 — Alleen kleur gebruikt in legenda bij kaart

In dit pdf-document wordt in de legenda en op de kaart alleen kleur gebruikt om informatie over te brengen. Zie bijvoorbeeld de paarse kleur in de legenda en op de kaart.

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

Oplossing

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

#26 - Issue nr. 35 — Kleurcontrast tussen lijnen of balken in legenda is niet voldoende

In dit pdf-document hebben sommige kleurcombinaties op de kaart een onvoldoende contrast, zoals lichtgeel (#FFFF99) op een witte achtergrond met een contrastratio van 1,1:1, lichtblauw (#40E0D0) op een witte achtergrond met een contrastratio van 1,6:1 en enkele andere combinaties.

Oplossing

Zorg dat het contrast tussen informatieve elementen van een kaart minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de kaart voldoende contrast hebben.

#27 - Issue nr. 36 — Kleurcontrast tussen lijnen of balken bij kaart is niet voldoende

Dit pdf-document bevat kaarten waarop informatie is aangeduid met verschillende elementen, bijvoorbeeld op pagina 10: lichtblauwe pijlen (#6CCFDC) op een lichtgroene achtergrond (#CDDE5C). De contrastratio is 1,2:1. Dit komt ook voor op andere pagina's.

Oplossing

Zorg dat het contrast tussen informatieve elementen van een kaart minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de kaart voldoende contrast hebben.