Audit digitale toegankelijkheid van website hoefkwartier.nl

#1 - Logo in de voettekst heeft geen tekstalternatief

In de voettekst van de website staat een logo zonder tekstalternatief. Het alt-attribuut ontbreekt.

Een logo is een informatieve afbeelding en heeft een alt-tekst nodig. Daarin hoort alle tekst te staan die in het logo zichtbaar is. Zo krijgen bezoekers die de afbeelding niet zien dezelfde informatie.

User story

Ik lees de website met een schermlezer. Ik wil dat het logo in de voettekst een betekenisvol tekstalternatief heeft, zodat ik begrijp wat het voorstelt.

Hoe te testen

Navigeer met een schermlezer naar de link met het logo in de voettekst. Controleer of het logo wordt aangekondigd met een tekstalternatief dat de organisatie of de website benoemt, en niet als een naamloze link of afbeelding. De volledige zichtbare tekst hoort in dat alternatief te staan.

Oplossing

Voeg een alt-attribuut toe aan het img-element en zet daar alle zichtbare tekst in, bijvoorbeeld: "Logo van Hoefkwartier Amersfoort".

#2 - Tekst op de kaart heeft te weinig contrast

Naast de kop "Alles dichtbij" staat een kaart. Daarop staan witte teksten als "A2", "B10b" en "C1" op een beige achtergrond met kleurcode #C6BB9F. De contrastverhouding is 1,9:1. Een deel van de bezoekers kan die tekst niet lezen.

User story

Ik heb een visuele beperking. Tekst met te weinig contrast met de achtergrond kan ik moeilijk lezen. Ik verwacht genoeg contrast om de tekst makkelijk te kunnen lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een kleurverloop meet je met de twee pipetten de kleur van de tekst en van de achtergrond. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet placeholders, tekst op afbeeldingen en uitgeschakeld ogende elementen niet.

Oplossing

Deze tekst is kleiner dan 19px. De contrastverhouding moet daarom minimaal 4,5:1 zijn.

#3 - Skiplink verplaatst de focus niet naar de hoofdinhoud

Deze pagina heeft meerdere skiplinks. De belangrijkste, "Naar hoofdinhoud", werkt niet. De focus gaat niet naar de hoofdinhoud, maar staat daarna nog steeds bovenaan de pagina. Dat komt doordat het id page-title waarnaar de skiplink verwijst, niet in de code van de pagina staat.

Met een skiplink sla je herhalende blokken over en ga je direct naar de hoofdinhoud.

User story

Ik gebruik de website met een toetsenbord. Als ik de skiplink gebruik om de navigatie over te slaan, staat de focus daarna nog steeds bovenaan de pagina. Ik verwacht dat de focus direct naar de hoofdinhoud gaat.

Hoe te testen

Druk vanuit de adresbalk één keer op Tab. De skiplink "Naar hoofdinhoud" hoort het eerste onderdeel te zijn dat focus krijgt, hoort zichtbaar te worden zodra hij focus heeft, en hoort de focus naar de hoofdinhoud te verplaatsen als je hem activeert. Landmarks en een goede koppenstructuur zijn daar een aanvulling op.

Oplossing

Laat de skiplink verwijzen naar het id van de hoofdinhoud en zorg dat dat doel focus kan krijgen. Voeg tabindex="-1" toe aan het doel als het niet vanzelf focusbaar is. Dan verplaatst de skiplink de toetsenbordfocus wel naar de hoofdinhoud.

#4 - Knoppen in de paginering hebben geen toegankelijke naam

Zet je filters aan waarna er paginering verschijnt, bijvoorbeeld "Afgerond" en "Nog te bouwen" tegelijk, dan hebben de knoppen "Vorige pagina" en "Volgende pagina" geen toegankelijke naam. Bezoekers die een schermlezer gebruiken horen daardoor niet waar de knoppen voor zijn.

User story

Ik lees de website met een schermlezer. Als ik bij de knoppen voor de paginering kom, hoor ik alleen "knop" en verder niets. Ik verwacht dat mijn schermlezer de naam of de functie van de knop voorleest.

Hoe te testen

Loop elk interactief onderdeel langs: link, knop, invoerveld en eigen component. Gebruik daarbij het toegankelijkheidspaneel in DevTools en een schermlezer. Elk onderdeel hoort door te geven wat het is, hoe het heet, in welke stand het staat en welke waarde het heeft. Gebruik liever standaard-HTML dan eigen ARIA.

Oplossing

Geef elke knop een toegankelijke naam. Zorg dat de volledige zichtbare tekst daarin staat.

#5 - PDF-document heeft geen titel

Dit PDF-document heeft geen titel in de bestandseigenschappen. Een PDF hoort een titel te hebben die zegt waar het document over gaat. Die titel hoort ook in de titelbalk te staan, in plaats van de bestandsnaam. Zo ziet een bezoeker meteen of het document gaat over wat hij zoekt. Je stelt de titel in in het bronbestand of in de eigenschappen van de PDF.

User story

Ik lees de PDF met een schermlezer. Als ik een PDF open, hoor ik alleen een bestandsnaam zonder betekenis, zoals "document123.pdf". Ik verwacht dat de schermlezer een duidelijke documenttitel voorleest, zodat ik weet wat ik open.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en kijk bij Bestand, Eigenschappen, Beschrijving. In het veld Titel hoort te staan waar het document over gaat, niet de bestandsnaam. Controleer daarna bij Beginweergave, Weergeven of "Documenttitel" is gekozen. Dan staat de titel in de titelbalk en niet de bestandsnaam. Controleer met NVDA of VoiceOver of de titel wordt voorgelezen als de PDF opent. Draai PAC voor een machinale controle.

Oplossing

Voeg een beschrijvende titel toe aan de bestandseigenschappen. In Adobe Acrobat ga je naar Bestand, Eigenschappen, tabblad Beschrijving. Vul daar een beschrijvende titel in en zet de titelbalk op de documenttitel in plaats van de bestandsnaam.

#6 - Logo is als artefact toegevoegd en heeft geen tekstalternatief

Op meerdere pagina's van dit PDF-document staat het logo "Hoefkwartier Amersfoort" als artefact. Afbeeldingen die als artefact zijn gemarkeerd, zijn niet beschikbaar voor schermlezers. De informatie in die afbeeldingen komt daardoor niet door bij bezoekers die blind of slechtziend zijn.

User story

Ik kan het document niet zien en gebruik een schermlezer. Als ik de PDF lees, hoor ik niets over het logo van de organisatie, omdat het logo niet is opgeslagen als een echte afbeelding met een tekstalternatief. Ik verwacht dat mijn schermlezer een beschrijving van het logo voorleest.

Hoe te testen

Bekijk de tagstructuur en controleer of het logo een Artifact is of een Figure met een alt-tekst.

Oplossing

Een logo is een informatieve afbeelding. Markeer het als Figure en geef het een beschrijvend tekstalternatief. Staat het logo op alle pagina's van het document, dan is één keer genoeg, op de eerste pagina.

#7 - Koppen zijn niet als kop gemarkeerd

In dit PDF-document zijn de koppen niet als kop gemarkeerd. Kijk bijvoorbeeld naar "Hartelijk welkom bij het Hoefcafé", "Huishoudelijke mededelingen" en "Programma".

Wie het document met een schermlezer leest, hoort daardoor een andere structuur dan er op het scherm staat.

User story

Ik lees het document met een schermlezer. Als ik via koppen door het document navigeer, sla ik zichtbare koppen over, omdat mijn schermlezer ze niet als kop herkent. Ik verwacht dat elke zichtbare kop ook als kop wordt aangekondigd.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de tagstructuur via Beeld, Tonen of verbergen, Navigatiedeelvensters, Tags. Zichtbare koppen, lijsten, tabellen en formuliervelden horen allemaal als tag te bestaan: <H1> tot en met <H6>, <L>, <Table> met <TH>, <TR> en <TD>, en <Form>. Draai de ingebouwde toegankelijkheidscontrole en PAC voor een machinale controle. Lees daarna na of de structuur klopt als je het document van boven naar beneden met een schermlezer leest.

Oplossing

Vervang de P-tags door H1- tot en met H6-tags, zodat de structuur in de tags gelijk is aan wat je in het document ziet.

#8 - Lijst is niet als lijst gemarkeerd

Op pagina 3 van dit PDF-document staat een lijst van 8 items. Bij een deel van die items ontbreekt de opmaak als lijst in de tags.

Inhoud die eruitziet als een lijst, hoort in de tags ook een lijst te zijn. Zo krijgt een blinde bezoeker dezelfde structuur door als een ziende bezoeker. Een schermlezer kondigt bij een lijst ook het aantal items aan, zodat de bezoeker weet hoeveel er volgt.

User story

Ik lees PDF's met een schermlezer en verwacht structuur in lijsten. Ik wil dat elke zichtbare lijst met de juiste tags is opgemaakt. Anders hoor ik het aantal items niet en mis ik de structuur.

Hoe te testen

Open de PDF in een PDF-lezer of een toegankelijkheidstool en bekijk de tagstructuur. Controleer of elke zichtbare lijst is opgemaakt met de lijst-tags L, LI, Lbl en LBody. Een lijst hoort niet uit gewone alinea's te bestaan met bolletjes of nummers die met de hand zijn ingevoegd.

Oplossing

Markeer alle items van de lijst met L-, LI-, Lbl- en LBody-tags.

#9 - Afbeeldingen met een Figure-tag hebben geen tekstalternatief

Dit PDF-document bevat afbeeldingen die niet goed zijn afgehandeld. Een deel heeft de tag <Figure> zonder tekstalternatief, bijvoorbeeld op pagina 4, 8 en 9. Afbeeldingen die informatie overbrengen, horen een beschrijving te hebben die die informatie doorgeeft.

Ook staan er decoratieve afbeeldingen met de tag <Figure> zonder beschrijving, bijvoorbeeld op pagina 7, 8 en 25. Die afbeeldingen brengen geen informatie over. Markeer ze als artefact, zodat hulpsoftware ze overslaat.

De <Figure>-tag is bedoeld voor afbeeldingen die informatie overbrengen. Die hebben altijd een tekstalternatief nodig.

User story

Ik lees de PDF met een schermlezer. Als ik een afbeelding zonder tekstalternatief tegenkom, weet ik niet of ik informatie mis. Decoratieve afbeeldingen worden ook aangekondigd, en dat levert ruis op. Ik verwacht dat informatieve afbeeldingen een beschrijving hebben en dat decoratieve afbeeldingen worden overgeslagen.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de tagstructuur via Beeld, Tonen of verbergen, Navigatiedeelvensters, Tags. Elke informatieve afbeelding hoort een <Figure>-tag te zijn met een Alt-attribuut dat de inhoud beschrijft. Je vindt dat onder Eigenschappen, Tag. Decoratieve afbeeldingen horen als artefact te zijn gemarkeerd, zodat hulpsoftware ze overslaat. Draai PAC voor een machinale controle en lees het document daarna met NVDA of VoiceOver, om na te gaan of er geen bestandsnamen of het woord "afbeelding" worden voorgelezen.

Oplossing

Loop per afbeelding na waar hij voor is. Brengt de afbeelding informatie over, houd dan de <Figure>-tag en geef een tekstalternatief dat die informatie beschrijft. Is de afbeelding decoratief, of staat de informatie al in de tekst eromheen, markeer hem dan als artefact, zodat hulpsoftware hem overslaat.

#10 - Afbeelding bevat tekst

Op pagina 8, 9 en 14 van dit PDF-document staan afbeeldingen met tekst erin.

Tekst die informatie overbrengt, hoort niet in een afbeelding te staan. Er zijn twee uitzonderingen: tekst waarbij de vormgeving zelf de informatie is, zoals een logo, en tekst waarvan de bezoeker het lettertype, de grootte, de kleur en de achtergrond zelf kan instellen.

User story

Ik heb een visuele beperking. Tekst in een afbeelding kan ik niet groter maken of aanpassen. Ik verwacht dat tekst als echte tekst in de tags van het document staat, zodat ik hem leesbaar kan maken.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en selecteer alle tekst met Cmd + A of Ctrl + A. Wat eruitziet als tekst maar niet wordt geselecteerd, is een afbeelding van tekst. Dat zijn meestal banners, koppen, infographics of gescande pagina's. Controleer in de tagstructuur of het element een <Figure> is en geen tekst. Logo's, foto's, labels in een grafiek en tekst waarbij de vormgeving zelf de informatie is, vallen hier niet onder.

Oplossing

Zet deze tekst als echte tekst op de pagina in het document, in plaats van in een afbeelding.

#11 - Decoratieve afbeeldingen hebben automatisch gegenereerde alt-tekst

In dit PDF-document hebben decoratieve afbeeldingen de tag <Figure> met een automatisch gegenereerde beschrijving, bijvoorbeeld "A white lines on a green and yellow background AI-generated content may be incorrect.". Dat staat op pagina 29, 30 en 31, en op andere pagina's.

Een deel van deze afbeeldingen voegt niets toe aan het document.

User story

Ik lees het document met een schermlezer. Als ik een PDF open, hoor ik automatisch gegenereerde tekst bij afbeeldingen. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen en dat informatieve afbeeldingen een duidelijke beschrijving hebben.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de tagstructuur via Beeld, Tonen of verbergen, Navigatiedeelvensters, Tags. Elke informatieve afbeelding hoort een <Figure>-tag te zijn met een Alt-attribuut dat de inhoud beschrijft. Decoratieve afbeeldingen horen als artefact te zijn gemarkeerd. Draai PAC voor een machinale controle en lees het document daarna met NVDA of VoiceOver.

Oplossing

Markeer decoratieve afbeeldingen als artefact, zodat schermlezers ze overslaan. Geef informatieve afbeeldingen een alt-tekst die de inhoud beschrijft.

#12 - Kleurcontrast van grote tekst is te laag

Op pagina 3 van dit PDF-document staat de witte tekst "Programma" op een gele achtergrond met kleurcode #FEC901. De contrastverhouding is 1,5:1, terwijl die minimaal 3,0:1 moet zijn. Hetzelfde geldt voor de teksten "Stukje historie" en "Waar staan we nu?" op pagina 57 en 58.

Op pagina 55 staat de witte tekst "Stand van zaken Hoefpark" op een groene achtergrond met kleurcode #50B466. Daar is de verhouding 2,6:1.

Controleer ook de andere pagina's op contrast.

User story

Als bezoeker met slechtziendheid heb ik goed contrast nodig. Zonder dat contrast kan ik de tekst niet goed lezen.

Hoe te testen

Open de PDF in een browser of een PDF-lezer en meet met de Colour Contrast Analyser de contrastverhouding tussen de tekst en de achtergrond. Controleer of het contrast voldoet aan de eis die hoort bij de grootte en de dikte van de tekst.

Oplossing

Zorg dat het contrast minimaal 3,0:1 is voor grote tekst.

#13 - Kleurcontrast van tekst is te laag

Op pagina 48 van dit PDF-document staat witte tekst in verschillende groottes op een grijze achtergrond met kleurcode #ABACAE. De contrastverhouding is 2,3:1. Voor tekst van normale grootte moet het contrast minimaal 4,5:1 zijn, voor grote tekst minimaal 3,0:1.

Controleer ook de andere pagina's van dit PDF-document op contrast.

User story

Als bezoeker met slechtziendheid heb ik goed contrast nodig. Zonder dat contrast kan ik de tekst niet goed lezen.

Hoe te testen

Draai PAC voor een machinale contrastcontrole en meet de twijfelgevallen met de Colour Contrast Analyser op een schermafdruk van de pagina. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet tekst op achtergrondafbeeldingen, watermerken, placeholders in formuliervelden en voetnoten niet.

Oplossing

Pas de kleur van de tekst of van de achtergrond aan, zodat het contrast minimaal 4,5:1 is voor kleine tekst en 3,0:1 voor grote tekst. Controleer de nieuwe combinatie met de Colour Contrast Analyser op een schermafdruk van de pagina voordat je de PDF publiceert.

#14 - Alleen kleur gebruikt in de legenda bij kaarten en schema's

In dit PDF-document staan op veel pagina's kaarten en schema's, bijvoorbeeld op pagina 24 en 36. In de legenda daarbij geeft kleur de informatie door. Daarnaast is de contrastverhouding tussen kleuren die naast elkaar liggen lager dan 3,0:1.

Alleen bezoekers die de kleuren zien en uit elkaar houden, weten welke balk of lijn bij welke categorie in de legenda hoort.

User story

Ik kan kleuren slecht uit elkaar houden. Als alleen kleur wordt gebruikt in kaarten en schema's, kan ik de onderdelen niet aan de legenda koppelen.

Hoe te testen

Open de PDF in Adobe Acrobat Pro, maak van elke pagina een schermafdruk en zet die om naar grijstinten. Zwart-wit afdrukken kan ook. Overal waar kleur informatie doorgeeft, hoort een tweede aanwijzing te staan: tekst, een icoon, een arcering of een vorm.

Oplossing

Gebruik naast kleur ook verschillende soorten arcering of vormen.

#15 - PDF-document heeft geen titel

Dit PDF-document heeft geen titel in de bestandseigenschappen. Een PDF hoort een titel te hebben die zegt waar het document over gaat. Die titel hoort ook in de titelbalk te staan, in plaats van de bestandsnaam. Zo ziet een bezoeker meteen of het document gaat over wat hij zoekt. Je stelt de titel in in het bronbestand of in de eigenschappen van de PDF.

User story

Ik lees de PDF met een schermlezer. Als ik een PDF open, hoor ik alleen een bestandsnaam zonder betekenis, zoals "document123.pdf". Ik verwacht dat de schermlezer een duidelijke documenttitel voorleest, zodat ik weet wat ik open.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en kijk bij Bestand, Eigenschappen, Beschrijving. In het veld Titel hoort te staan waar het document over gaat, niet de bestandsnaam. Controleer daarna bij Beginweergave, Weergeven of "Documenttitel" is gekozen. Dan staat de titel in de titelbalk en niet de bestandsnaam. Controleer met NVDA of VoiceOver of de titel wordt voorgelezen als de PDF opent. Draai PAC voor een machinale controle.

Oplossing

Voeg een beschrijvende titel toe aan de bestandseigenschappen. In Adobe Acrobat ga je naar Bestand, Eigenschappen, tabblad Beschrijving. Vul daar een beschrijvende titel in en zet de titelbalk op de documenttitel in plaats van de bestandsnaam.

#16 - Koppen zijn niet als kop gemarkeerd

In dit PDF-document zijn de koppen niet als kop gemarkeerd. Kijk bijvoorbeeld naar "Verslag Hoefcafé", "Opening" en "Ontwikkeling Netwerklaan 500".

Wie het document met een schermlezer leest, hoort daardoor een andere structuur dan er op het scherm staat.

User story

Ik lees het document met een schermlezer. Als ik via koppen door het document navigeer, sla ik zichtbare koppen over, omdat mijn schermlezer ze niet als kop herkent. Ik verwacht dat elke zichtbare kop ook als kop wordt aangekondigd.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de tagstructuur via Beeld, Tonen of verbergen, Navigatiedeelvensters, Tags. Zichtbare koppen, lijsten, tabellen en formuliervelden horen allemaal als tag te bestaan: <H1> tot en met <H6>, <L>, <Table> met <TH>, <TR> en <TD>, en <Form>. Draai de ingebouwde toegankelijkheidscontrole en PAC voor een machinale controle. Lees daarna na of de structuur klopt als je het document van boven naar beneden met een schermlezer leest.

Oplossing

Vervang de P-tags door H1- tot en met H6-tags, zodat de structuur in de tags gelijk is aan wat je in het document ziet.

#17 - Afbeeldingen met een Figure-tag hebben geen tekstalternatief

Op pagina 2, 5 en 6 van dit PDF-document staan afbeeldingen met de tag <Figure> zonder tekstalternatief. Deze foto's lijken vooral decoratief. Als dat zo is, kun je ze als artefact markeren. De lezer mist dan geen informatie.

Vindt de redactie deze foto's belangrijk voor het begrip van de inhoud, dan blijven ze een <Figure> en horen ze een tekstalternatief te krijgen dat beschrijft wat erop staat.

User story

Ik lees de PDF met een schermlezer. Als ik deze afbeeldingen tegenkom, kan ik niet vaststellen of er informatie in staat die bij de inhoud hoort. Ik verwacht dat afbeeldingen met betekenis worden beschreven en dat decoratieve afbeeldingen worden overgeslagen.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de tagstructuur via Beeld, Tonen of verbergen, Navigatiedeelvensters, Tags. Elke informatieve afbeelding hoort een <Figure>-tag te zijn met een Alt-attribuut dat de inhoud beschrijft. Decoratieve afbeeldingen horen als artefact te zijn gemarkeerd, zodat hulpsoftware ze overslaat.

Oplossing

Bepaal per afbeelding waar hij voor is. Zijn de foto's decoratief, markeer ze dan als artefact. Horen ze bij de inhoud, geef elke <Figure> dan een tekstalternatief dat beschrijft wat erop staat.