Logo heeft geen tekstalternatief waardoor links leeg zijn

Op alle pagina’s staan in het hoofdmenu klikbare logo’s van social media. Deze logo’s zijn als achtergrondafbeelding geplaatst, waardoor ze niet zichtbaar zijn voor schermlezers. Bovendien ontbreekt een tekstalternatief.

Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s geven informatie en moeten daarom altijd een tekstalternatief hebben. Ze mogen niet als achtergrond worden geplaatst, tenzij een tekstalternatief aanwezig is.

Dit probleem hangt samen met succescriterium 4.1.2: de links hebben geen toegankelijke naam. Het hangt ook samen met succescriterium 2.4.4, omdat de links geen doel aangeven.

Oplossing:

Je kunt het logo als een img-element plaatsen en een alt-tekst toevoegen die alle tekst van het logo bevat. Hierdoor zullen mensen met een schermlezer dezelfde informatie ontvangen als ziende bezoekers, bijvoorbeeld: <a href=””><img alt=”Facebook”></a>.

Of voeg een aria-label-attribuut toe aan het a-element met de naam van het kanaal, bijvoorbeeld <a href=”” aria-label=”Facebook”></a>.

Of voeg een beschrijvende tekst toe binnen het a-element en verberg deze visueel met CSS, terwijl je de tekst toegankelijk houdt voor schermlezers. Bijvoorbeeld: <a href=””><span class=”sr-only”>Facebook</span></a>.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op alle pagina’s staat in de footer een groep links die visueel als één geheel wordt weergegeven, maar deze groepering is niet aanwezig in de HTML-structuur.

Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet deze structuur ook in de HTML-code terugkomen. Bovendien wordt het voor een blinde bezoeker gemakkelijker om direct naar deze navigatie te navigeren.

Oplossing:

Neem de elementen op in een ul- of nav-element.

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

Elementen die toetsenbordfocus krijgen, zijn bedekt door sticky header

Op deze pagina bedekt een sticky header een deel van de inhoud wanneer de website in een kleinere resolutie wordt weergegeven. Hoewel interactieve elementen nog steeds toetsenbordfocus krijgen, is de focusindicator verborgen achter de header. Hierdoor kunnen toetsenbordgebruikers niet zien waar de focus zich bevindt.

Oplossing:

Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.

Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op alle pagina’s staat in het head-element van de HTML-code user-scalable=no.

Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

Menuknop heeft niet de juiste rol

Op een klein scherm mist de menuknop bovenaan de juiste toegankelijke rol, naam en status (open-gesloten).

De juiste rol voor de menuknop zou button (knop) moeten zijn, omdat je er een actie mee uitvoert: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kan een schermlezer of ander hulpmiddel de knop niet goed herkennen, waardoor deze moeilijker is te gebruiken voor mensen die deze hulpsoftware gebruiken.

Oplossing:

Zorg dat de menuknop de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen.

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>

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.

Elementen die toetsenbordfocus krijgen, zijn bedekt door een mobiel menu

Op alle pagina’s verschijnt op het kleine scherm een mobiele menuknop. Het mobiele menu overlapt interactieve elementen op de onderliggende pagina. Deze onderliggende elementen kunnen nog steeds toetsenbordfocus krijgen, ook al worden ze door het menu bedekt.

Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.

Oplossing:

Dit is op te lossen op een van de volgende manieren op:

1. Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het chatvenster automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat. Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.

Kleurcontrast van tekst is niet voldoende 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,6: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/.

Link naar pagina: https://www.deboekelermeer.nl

strong-element is gebruikt in koptekst

Op deze pagina staat een kop “Criteria”. In deze kop worden het heading-element en het strong-element gebruikt.

Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Hetzelfde probleem komt voor:

• op de pagina https://www.deboekelermeer.nl/nieuws bij “Alkmaar”, “Heiloo”;
• op de pagina https://www.deboekelermeer.nl/nieuws/sustenso, bijvoorbeeld bij “Strategisch en volop kennis”;
• op de pagina https://www.deboekelermeer.nl/nieuws/ondernemen-en-coronavirus, bijvoorbeeld bij “Alkmaar”, “Heiloo”; en op andere pagina’s.

Oplossing:

Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.

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: “Jan Riepma”.

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/nieuws/overslagkade, bijvoorbeeld bij “Een Strategische Stap”, “Gezocht: een exploitant”;
• op de pagina https://www.deboekelermeer.nl/nieuws/sustenso, bijvoorbeeld bij “Betekenis voor de regio”;
• op de pagina https://www.deboekelermeer.nl/deelnemer/gpgroot, bijvoorbeeld bij “De Boekelermeer is de meest geschikte locatie voor ons NXT-station”; 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.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt onder de kop “Blijf op de hoogte” bij het formulier met het invoerveld voor persoonsgegevens “E-mailadres” het attribuut autocomplete.

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 automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waarin persoonlijke informatie moet worden ingevuld. 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

Er zit een tijdslimiet op de reCAPTCHA

Op deze pagina staat onder de kop “Blijf op de hoogte” een formulier met de verificatiemethode reCAPTCHA. Wanneer het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt na enige tijd de melding “Verification expired. Please check the checkbox again”. Er is daardoor een tijdslimiet aanwezig. Dit kan een probleem zijn voor bezoekers die meer tijd nodig hebben.

Oplossing:

Zorg dat bezoekers de tijdslimiet kunnen uitzetten, aanpassen of verlengen. Overweeg om reCAPTCHA helemaal te verwijderen omdat het geen toegankelijke oplossing is.

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.

Linktekst is niet duidelijk genoeg

Op deze pagina staan boven de kop “Ontdek de Boekelermeerwaarde” nieuwsartikelen met een link “Lees meer >”. Deze linktekst beschrijft de bestemming van de link niet duidelijk genoeg, wat verwarring kan veroorzaken, vooral voor bezoekers met cognitieve beperkingen en voor gebruikers van schermlezers.

Hetzelfde probleem komt voor op de pagina https://www.deboekelermeer.nl/nieuws

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

Iframe heeft geen toegankelijke naam

Op deze pagina staat onder de kop “Ontdek de Boekelermeerwaarde” een iframe met een video zonder beschrijving die zichtbaar is voor schermlezers. Het attribuut title ontbreekt.

Iframes moeten een goede beschrijving hebben, meestal via het title-attribuut. Daarin moet worden aangegeven welk type inhoud wordt weergegeven (bijvoorbeeld een podcast of video) en waar die inhoud over gaat. De beschrijving moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware bepalen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

<iframe title=”Video Ontdek de Boekelermeerwaarde”>

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.

De Vimeo-video’s gebruiken letters als sneltoetsen

Op deze pagina, onder de kop “Ontdek de Boekelermeerwaarde”, is de video opgenomen in een Vimeo-videospeler die gebruikmaakt van sneltoetsen met één teken.

De toets ‘s' kan worden gebruikt om een video te delen en de toets 'd’ om technische details te bekijken. Deze sneltoetsen botsen met hulpsoftware, omdat ze ook actief zijn wanneer de toetsenbordfocus op een ander element van de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in uitgesproken woorden voorkomen. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken, is het onhandig.

Oplossing:

Dit is op te lossen door de parameter keyboard=false 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://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).

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 apart regio binnen de webpagina gecreëerd en wordt duidelijk dat deze knoppen bij een slider horen.

<section id=”Deelnemers” aria-label=”Caroussel met feedback van deelnemers”>

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

Citaat is gemarkeerd met em-element

Op deze pagina staat boven de footert 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.

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=””).

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 “Het innovatieve en duurzame karakter ... bij de behoefte in de regio”. De contrastratio is te laag: 4,47:1.

Hetzelfde probleem komt voor

• op de pagina https://www.deboekelermeer.nl/deelnemers, bijvoorbeeld bij “GP Groot”;
• 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/.

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 toetsenbord focus 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/.

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 (#D2CAC7). 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.

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

Link naar pagina: https://www.deboekelermeer.nl/sitemap

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/nieuws/overslagkade

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.

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

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/nieuws/sustenso, bijvoorbeeld bij “De Boekelermeer is weer een duurzaam … en het leveren van groen gas”;
• en 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.

Link naar pagina: https://www.deboekelermeer.nl/nieuws/sustenso

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/beeldkwaliteitplan

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/deelnemers

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.

Link naar pagina: https://www.deboekelermeer.nl/deelnemer/gpgroot

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/deelnemer/baza-seeds-holland

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/deelnemer/rumpinggroep

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/nieuws/alkmaar-mkb-vriendelijste-gemeente-noord-holland-2019

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl

Link naar PDF: https://www.deboekelermeer.nl/assets/docs/userfiles/kavelkaart2025.pdf

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 Microsoft online service. Op Mac worden bladwijzers automatisch op basis van de koppen gegenereerd, zonder dat hiervoor instellingen hoeven te worden aangepast.

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.

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.

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.

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.

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

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.

Link naar pagina: https://www.deboekelermeer.nl/beeldkwaliteitplan

Link naar PDF: https://www.deboekelermeer.nl/assets/docs/userfiles///BeeldkwaliteitsplanBoekelermeer.pdf

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.

Link naar pagina: https://www.deboekelermeer.nl/nieuws

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/toegankelijkheid

Geen nieuwe bevindingen.

Link naar pagina: https://www.deboekelermeer.nl/nieuws/ondernemen-en-coronavirus

Geen nieuwe bevindingen.