Audit digitale toegankelijkheid van website soesterkwartier.nu

#1 - Zoekresultaten in zoekbalk niet gegroepeerd

De zoekbalk bovenaan de website geeft een lijst met suggesties weer, die visueel gegroepeerd zijn. Deze groepering is echter niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of paginering bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

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

#2 - Link alleen te herkennen aan kleur

Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. De banner bevat tekst met een link naar "Privacy regels". Het enige verschil tussen de link en de omliggende tekst is de kleur. Deze link is nu dus alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. Hetzelfde probleem doet zich voor in de voettekst van de website met de link "Ontwerpgroep Lale".

Oplossing:

Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

#3 - Onvoldoende contrast in cookiebanner en voettekst

Wanneer een bezoeker de website voor het eerst bezoekt, verschijnt er een cookiebanner. Er staat grijze tekst (#8C8989) met als begin "Onze website..." op een donkergrijze achtergrond (#363839). De kleurcontrastverhouding is te laag: 3,4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Een soortgelijk probleem met onvoldoende kleurcontrast voor grijze tekst komt voor in de voettekst van de website.

Oplossing:

Pas de tekstkleur of achtergrondkleur aan zodat de contrastverhouding minimaal 4,5:1 is.

#4 - Onvoldoende contrast in zoekbalk

In de zoekbalk van de header van de website, wanneer deze is uitgevouwen, hebben de placeholdertekst en de zoekopdracht onvoldoende kleurcontrast ten opzichte van de achtergrond. De grijze (#9EA0A4) tekst op de witte achtergrond heeft een contrastverhouding van 2,6:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Pas de tekstkleur aan zodat de contrastverhouding minimaal 4,5:1 is.

#5 - Onvoldoende contrast zoekpictogram en hamburgermenu

In de zoekbalk van de websiteheader heeft het zoekpictogram, wanneer de zoekbalk is uitgevouwen, onvoldoende kleurcontrast ten opzichte van de achtergrond. Het grijze pictogram (#9EA0A4) op de witte achtergrond heeft een contrastverhouding van 2,6:1. Zorg dat het contrast van iconen en andere grafische elementen minimaal 3,0:1 is. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws. Een vergelijkbaar probleem doet zich voor bij het hamburgermenu-icoon (het icoon met drie lijnen) dat in de header wordt weergegeven wanneer de website op een klein scherm wordt bekeken.

Oplossing:

Pas de kleur van het zoekpictogram en het hamburgermenu-icoon aan zodat de contrastverhouding minimaal 3,0:1 is.

#6 - Zoeksuggesties niet bereikbaar met toetsenbord

In de header van de website geeft de zoekbalk suggesties weer in een vervolgkeuzelijst terwijl de bezoeker typt. Deze suggesties fungeren als links, maar zijn niet toegankelijk via het toetsenbord. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Zorg ervoor dat alle interactieve elementen, inclusief de zoeksuggesties, met het toetsenbord te bedienen zijn.

#7 - HTML5-validatiebericht in zoekbalk

In de header van de website bevindt zich een zoekbalk. Wanneer de zoekopdracht wordt verzonden met een lege zoekbalk, verschijnt er een HTML5-validatiebericht. HTML5-validatieberichten worden niet consistent ondersteund door alle browsers en schermlezers. Browsers geven deze berichten op verschillende manieren weer en er is geen garantie voor de zichtbaarheid of duur ervan. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Implementeer aangepaste foutmeldingen voor deze invoervelden om consistente en toegankelijke foutmeldingen te garanderen. Controleer ook of er andere formulieren op de site zijn die uitsluitend op HTML5-validatie vertrouwen en pas dezelfde oplossing toe.

#8 - Cookiebanner krijgt niet als eerste de toetsenbordfocus

De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiebanner. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt de inhoud van de pagina en als de toetsenbordfocus niet eerst daarheen gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten. Om deze banner te sluiten, moet de bezoeker met de tab-toets helemaal naar de onderkant van de pagina gaan.

Oplossing:

Zorg dat de focus als eerste naar de cookiebanner gaat.

#9 - Toetsenbordfocus niet zichtbaar op zoekknop

De zoekbalk in het bovenste menu heeft een probleem met de toetsenbordfocus: de toetsenbordfocus is niet zichtbaar op de zoekknop wanneer de zoekbalk is uitgevouwen. Interactieve elementen die toetsenbordfocus krijgen, moeten altijd een focusindicator hebben. Dat is een visueel kenmerk zoals een rand of onderstreping die aangeeft dat het element de toetsenbordfocus heeft. Als dat niet zo is, weet een bezoeker niet wanneer hij op Enter moet drukken om de knop of link te activeren. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Voeg een zichtbare focusindicator toe aan de zoekknop.

#10 - Cookiebanner verbergt focusindicator

Wanneer de website wordt verkleind naar een lagere resolutie, verbergt de cookiebanner een deel van de pagina-inhoud. Hoewel interactieve elementen zoals de link in de voettekst nog steeds de toetsenbordfocus krijgen, wordt de focusindicator verborgen achter de cookiebanner. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.

Oplossing:

Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Pas hiervoor bijvoorbeeld de z-index aan, herpositioneer elementen of verklein de header/footer dynamisch op kleinere schermen.

#11 - Logo heeft onjuiste toegankelijke naam

Bovenaan de pagina https://soesterkwartier.nu/ staat het logo met de tekst: "Perspectief Soesterkwartier". De toegankelijke naam van deze link is "Wijkperspectief Soesterkwartier Logo". De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

#12 - Engelstalig bericht in zoekbalk

In de header van de website geeft de zoekbalk feedback dat er geen items zijn gevonden. Het bericht luidt: "No search results match your query. Please try again". Deze zin is in het Engels zonder taalcode. Deze tekst zal worden uitgesproken volgens de regels van de primaire taal die is ingesteld in het lang-attribuut van de HTML-pagina, in dit geval "nl". Dit kan bezoekers van ondersteunende technologieën in verwarring brengen. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Vertaal deze tekst naar het Nederlands.

#13 - Ontoegankelijke foutmelding in zoekbalk

In de header van de website bevindt zich een zoekbalk. Wanneer de zoekopdracht wordt verzonden met een lege zoekbalk, verschijnt er een HTML5-validatiebericht. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

#14 - Zoekbalk mist ARIA-combobox-rol

De zoekbalk bovenaan de website geeft suggesties in een vervolgkeuzelijst terwijl de bezoeker typt, en functioneert als een combobox. De benodigde ARIA-rol ontbreekt echter. Er is ook een aria-expanded-attribuut nodig om de toestand van de verborgen content aan te geven (zichtbaar of niet). Er zijn meer attributen die nodig zijn om dit element toegankelijk te maken. Zie https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Voeg role="combobox" aan het invoerveld toe, samen met de benodigde ARIA-attributen zoals aria-expanded.

#15 - Laadanimatie zoekbalk niet toegankelijk

In de header van de website bevindt zich een zoekbalk. Wanneer de bezoeker iets in de zoekbalk typt, verschijnt een laadanimatie. Deze animatie is een statusmelding, maar is nu niet toegankelijk voor blinde bezoekers. Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt. Het probleem doet zich ook voor op de pagina https://soesterkwartier.nu/nieuws/, waar het klikken op de knop "Meer Berichten Laden" een wachttijdanimatie activeert.

Oplossing:

Voeg bijvoorbeeld aria-live="polite" toe aan het icoon. Meer informatie over ARIA is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

#16 - Zoekbalk "geen resultaten" wordt niet voorgelezen

In de header van de website geeft de zoekbalk feedback dat er geen items zijn gevonden. Dit is een statusbericht, maar wordt niet als zodanig voorgelezen. Dat zou wel moeten gebeuren. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Hetzelfde probleem doet zich voor bij de zoekbalken op pagina https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Voeg role="status" aan de melding toe.

#17 - Inconsistente alt-teksten bij nieuwsartikelen

Onder het kopje "Projecten" staan verschillende nieuwsartikelen met afbeeldingen. Sommige daarvan hebben zinvolle tekstalternatieven, andere hebben lege alt-attributen. Omwille van de consistentie kunnen de alt-teksten voor de nieuwsartikelen beter verwijderd worden, omdat de afbeeldingen in dit overzicht puur decoratief zijn. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Oplossing:

Verwijder de alt-teksten van de decoratieve afbeeldingen in het artikeloverzicht en gebruik een leeg alt-attribuut (alt="").

#18 - Nietszeggende alt-teksten bij decoratieve afbeeldingen

Onder de kop "Wijkperspectief in uitvoering" staan decoratieve afbeeldingen met nietszeggende tekstalternatieven. Het tekstalternatief van de afbeelding naast "Aanmelden Nieuwsbrief" is bijvoorbeeld "nieuwsbrief@3x-8". Een decoratieve afbeelding biedt geen aanvullende informatie en moet daarom worden verborgen voor schermlezers. Dit kan op verschillende manieren worden gedaan. Voor decoratieve afbeeldingen in een img-element moet het alt- en title-attribuut leeg worden gelaten. Hetzelfde probleem doet zich voor bij de afbeeldingen in de zoekresultaten in de zoekbalk bovenaan de website. Daar staat bijvoorbeeld een afbeelding met het tekstalternatief "Post Thumb2847".

Oplossing:

Laat het alt- en title-attribuut leeg voor decoratieve afbeeldingen.

#19 - Actieve pagina in menu niet gemarkeerd

De actieve link (naar de huidige pagina) in het hoofdmenu heeft visueel een andere weergave, maar dit onderscheid is niet aanwezig in de code. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Dit probleem komt ook op andere pagina's voor, bijvoorbeeld op pagina https://soesterkwartier.nu/wijkperspectief/.

Oplossing:

Voeg bijvoorbeeld aria-current="true" toe aan de actieve link. Andere opties zijn een h1-kop met dezelfde tekst als het menu-item of het gebruik van een broodkruimelpad.

#20 - Teksten niet gemarkeerd als kopteksten

De volgende teksten zijn niet gemarkeerd als kopteksten: "Wijkperspectief in uitvoering", "Nieuws", "Agenda" en andere. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar in de code niet als kop is gemarkeerd. Via de koppen op een pagina kunnen bezoekers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Hetzelfde probleem doet zich voor bij de kopjes op de pagina https://soesterkwartier.nu/wijkperspectief/, zie "Wijkperspectief", "Dit willen we bereiken".

Oplossing:

Markeer koppen altijd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS.

#21 - H3-element misbruikt voor styling

De tekst "Hier komen de verschillende projecten…" is geen koptekst, maar is ten onrechte gemarkeerd met een h3-element om de lettergrootte te vergroten. Het kop-element (h) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h-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.

Oplossing:

Verwijder het h-element en gebruik een ander element, zoals een p-element. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

#22 - Strong-element gebruikt voor koppen

De volgende teksten zijn onjuist gemarkeerd met vetgedrukte tekst in plaats van de juiste koptekstelementen: "Wijkspreekuur met wijkwethouder Jeroen Bulthuis", "Uitvoeringsnetwerk" en andere. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst mee te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/project/soesterpark/, zie "Waar gaat dit project over?", "Waar staan we nu?" en "Wat is de planning?", "Voortgang project" en andere kopjes.

Oplossing:

Gebruik kop-elementen (h2, h3, etc.) in plaats van strong-elementen voor koppen.

#23 - Meerdere h1-koppen op de pagina

Onder de kop "Projecten" staat een lijst met artikelen. Elk artikel heeft een h1-kop. Het h1-element is bedoeld voor de hoofdkop van een pagina. Door deze tag voor elk artikel te gebruiken, wordt de logische hiërarchie van de pagina verstoord, waardoor het voor bezoekers van schermlezers moeilijk wordt om effectief door de inhoud te navigeren. Hetzelfde probleem doet zich voor op de pagina https://soesterkwartier.nu/projecten/.

Oplossing:

Zorg voor een juiste hiërarchie van koppen door één h1 te gebruiken voor de hoofdtitel van de pagina en h2 tot en met h6 voor subkoppen.

#24 - Strong-element gebruikt voor styling

Naast de kop "Wijkperspectief in uitvoering" wordt het strong-element ten onrechte gebruikt voor stylingdoeleinden in de linkteksten "Aanmelden Nieuwsbrief" en "Neem contact met ons op". 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). Hetzelfde probleem doet zich voor bij de tekst onder de kop "Projecten" op de pagina https://soesterkwartier.nu/projecten/ en andere.

Oplossing:

Gebruik CSS voor visuele opmaak in plaats van het strong-element.

#25 - Actieve tabblad niet onderscheiden in code

Onder het kopje "Projecten" staan tabbladen met verborgen inhoud die zichtbaar wordt wanneer een bezoeker op het tabblad klikt. Het actieve tabblad onderscheidt zich visueel van de andere tabbladen, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Hetzelfde probleem doet zich voor op de pagina https://soesterkwartier.nu/projecten/.

Oplossing:

Voeg een verborgen tekst aan de link toe, of gebruik het aria-current-attribuut.

#26 - Tekst valt buiten beeld bij 320px

Als de website wordt bekeken bij een breedte van 320 pixels, valt de tekst "Wijkperspectief" deels buiten beeld. Dit komt vaker voor op de pagina, bijvoorbeeld ook het woord "Soesterkwartier". Dit probleem komt vaker voor op andere pagina's, bijvoorbeeld op pagina https://soesterkwartier.nu/wijkperspectief/ bij het woord "Wijkperspectief" en op pagina https://soesterkwartier.nu/wijkperspectief/kernwaarden/ bij het woord "Kernwaarden". Op pagina https://soesterkwartier.nu/winkelstraatmanager-bart-iedereen-is-welkom-aan-de-noordewierweg/ vallen ook verschillende woorden weg. Zie verder ook pagina https://soesterkwartier.nu/project/culturele-verbindingen-in-het-soesterkwartier/ en https://soesterkwartier.nu/vernieuwing-scholen-soesterkwartier-blijf-op-de-hoogte/.

Oplossing:

Zorg dat alle tekst goed zichtbaar blijft bij een breedte van 320 pixels. Gebruik CSS om lange woorden af te breken, bijvoorbeeld met word-break: break-word of overflow-wrap: break-word.

#27 - Tekst "Lees meer" wordt onleesbaar bij aangepaste tekstafstand

De tekst van de links "Lees meer" onder de kop "Nieuws" wordt gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers de tekstafstand toepassen zoals beschreven in dit succescriterium. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze 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 het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Hetzelfde probleem doet zich voor op de pagina's https://soesterkwartier.nu/nieuws/ en https://soesterkwartier.nu/?s=nieuws.

Oplossing:

Maak de hoogte en breedte van de containers van de tekst responsief, zodat de tekst leesbaar blijft bij aangepaste tekstafstand.

#28 - Vage linkteksten "MEER INFORMATIE"

Meerdere links bevatten de vage tekst "MEER INFORMATIE". Deze tekst beschrijft de bestemming van de link niet adequaat, wat tot onduidelijkheid leidt, vooral voor bezoekers met cognitieve beperkingen of bezoekers 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.

#29 - Afbeeldingslinks met niet-beschrijvend aria-label

Onder het kopje "Projecten", in het artikel "Betrekken van Soesterkwartierders", is de eerste link een gekoppelde afbeelding met een aria-label-attribuut "groepsfoto G1000Soesterkwartier". Dit aria-label beschrijft niet de functie of bestemming van de link. Het artikel bevat ook een link "Meer informatie", die naar dezelfde inhoud leidt, waardoor de afbeeldingslink overbodig is. Hetzelfde geldt voor andere artikelen onder de kop "Projecten". Dit probleem komt ook voor op pagina https://soesterkwartier.nu/projecten/, op pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/ en op pagina https://soesterkwartier.nu/winkelstraatmanager-bart-iedereen-is-welkom-aan-de-noordewierweg/.

Oplossing:

Verwijder de overbodige afbeeldingslinks of zorg dat het aria-label een beschrijvende naam geeft die het doel en de bestemming van de link weergeeft. Overweeg om het hele artikel tot één enkele link te maken.

#30 - Link "Ga naar de bovenkant" heeft geen zichtbare focus

De link met de visueel verborgen tekst "Ga naar de bovenkant" heeft geen zichtbare toetsenbordfocus. 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. Op pagina https://soesterkwartier.nu/wijkperspectief/ staan afbeeldingen met tekst die ook links zijn. Deze hebben ook geen zichtbare focusindicator.

Oplossing:

Voeg een zichtbare focusindicator toe aan deze link.

#31 - Afbeeldingslinks hebben geen zichtbare focusindicator

Onder het kopje "Projecten", in de artikelen met afbeeldingen, bijvoorbeeld onder het kopje "Winkelgebied versterken en aantrekkelijk maken", is de eerste link een afbeelding die ook als link dient. De toetsenbordfocus is niet zichtbaar als deze op de afbeelding staat. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/?s=nieuws in de artikelen in de zoekresultaten en op de pagina https://soesterkwartier.nu/projecten/.

Oplossing:

Voeg een zichtbare focusindicator toe. Neem ook het advies uit SC 2.4.4 over en verwijder deze link of combineer deze tot één link naar het betreffende artikel.

#32 - Zichtbare linktekst "Lees Meer" ontbreekt in toegankelijke naam

Onder het kopje "Nieuws" maakt de zichtbare linktekst "Lees Meer" geen deel uit van de toegankelijke naam van de link. Deze wordt in plaats daarvan overschreven via een aria-label. Momenteel zijn de toegankelijke namen van deze links bijvoorbeeld "More on Op zondag 12 april bruist de wijk tijdens Dagje Soesterkwartier". Als de zichtbare tekst van een link niet in de toegankelijke naam staat, kan de link niet met spraakbesturing worden bediend. Hetzelfde probleem doet zich voor op de pagina's https://soesterkwartier.nu/?s=nieuws en https://soesterkwartier.nu/nieuws/.

Oplossing:

Herschrijf het aria-label zodat deze overeenkomt met en een uitbreiding is van de zichtbare tekst, bijvoorbeeld: "Lees meer over Op zondag 12 april bruist de wijk tijdens Dagje Soesterkwartier".

#33 - Aria-labels in het Engels

De pagina bevat verschillende aria-label-attributen met tekst in het Engels. Zie bijvoorbeeld "Main menu" voor navigatie, "Close search" om de zoekopdracht te sluiten, "Post filters" onder de kop "Projecten", enz. 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-labels naar het Nederlands.

#34 - Onjuist gebruik van role="menu"

Onder de kop "Projecten" staat een lijst met links met role="menu". Deze functie is bedoeld voor applicatie-achtige menu's, zoals de menu's Bestand, Bewerken en Weergave in een desktopapplicatie. Filters op een webpagina, die vaak bestaan uit een reeks selectievakjes, keuzerondjes of links, zijn geen widget zoals een applicatiemenu. Het toepassen van role="menu" op de container en role="menuitem" op de afzonderlijke besturingselementen geeft daarom een verkeerde voorstelling van hun functie. Hetzelfde probleem doet zich voor op de pagina https://soesterkwartier.nu/projecten/.

Oplossing:

Gebruik native HTML-elementen zoals selectievakjes, keuzerondjes of links, gegroepeerd met semantische opmaak om hun doel correct weer te geven.

#35 - Tabbladen missen aria-selected

Onder het kopje "Projecten" staan tabbladen met secties met verborgen inhoud die zichtbaar worden wanneer een bezoeker op de tabknop klikt. Een blinde bezoeker weet niet welke sectie open is. Het actieve element heeft geen aria-selected-attribuut. Hetzelfde probleem doet zich voor op de pagina https://soesterkwartier.nu/projecten/.

Oplossing:

Zorg dat het aria-selected-attribuut goed is ingesteld, zodat schermlezers kunnen doorgeven welk tabblad actief is.

#36 - Pictogramlink zonder tekstalternatief

Onder de kop "Op de hoogte blijven" staat een link "Volg ons op Facebook" met daarnaast een pictogram. Zowel het pictogram als de tekst fungeren als links naar dezelfde bestemming. Het pictogram functioneert als een link, maar het tekstalternatief ontbreekt, waardoor de link ontoegankelijk is. Deze situatie voldoet hiermee ook niet aan SC 2.4.4 en 4.1.2.

Oplossing:

Verwijder de overbodige afbeeldingslink. Overweeg om zowel het pictogram als de tekst tot één enkele link te maken met behulp van CSS-styling, zodat het hele gebied aanklikbaar wordt.

#37 - Dubbele link naar Facebook

Onder de kop "Op de hoogte blijven" staat een link "Volg ons op Facebook" met een pictogram ernaast. Zowel het pictogram als de tekst fungeren als links naar dezelfde bestemming. Het pictogram functioneert als een link, maar het alt-attribuut is leeg (alt=""), waardoor de afbeelding niet zichtbaar is voor schermlezers en het doel van de link onduidelijk is. Deze situatie voldoet ook niet aan SC 1.1.1 en 4.1.2.

Oplossing:

Verwijder de overbodige afbeeldingslink. Overweeg om zowel het pictogram als de tekst tot één enkele link te maken met behulp van CSS-styling, zodat het hele gebied aanklikbaar wordt.

#38 - Facebook-link zonder toegankelijke naam

Onder het kopje "Op de hoogte blijven" staat een link "Volg ons op Facebook" met daarnaast een pictogram. Zowel het pictogram als de tekst fungeren als links naar dezelfde bestemming. De eerste link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Deze situatie voldoet nu ook niet aan succescriteria 1.1.1 en 2.4.4.

Oplossing:

Verwijder de overbodige afbeeldingslink. Overweeg om zowel het pictogram als de tekst tot één enkele link te maken met behulp van CSS-styling, zodat het hele gebied aanklikbaar wordt.

#39 - Actief paginanummer niet gemarkeerd

De paginering onder de zoekresultaten geeft visueel het huidige paginanummer aan, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker.

Oplossing:

Voeg een verborgen tekst aan de link toe, of gebruik het aria-current-attribuut.

#40 - Pagineringlinks niet gegroepeerd

De pagineringlinks onder de zoekresultaten zijn visueel gegroepeerd, maar deze groepering is niet aanwezig in de HTML-structuur. Wanneer elementen visueel gegroepeerd zijn, moet deze relatie ook in de HTML aanwezig zijn om ervoor te zorgen dat bezoekers met ondersteunende technologieën, zoals schermlezers, de groepering begrijpen. Als het voor een ziende bezoeker duidelijk is dat een groep links, zoals de paginering, bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

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

#41 - Paginalinks zonder context

Er ontbreekt voldoende context bij de paginalinks. Terwijl ziende bezoekers begrijpen dat "1", "2", "3", enz. paginanummers zijn, is dit niet duidelijk voor bezoekers met slecht zicht of bezoekers van schermlezers.

Oplossing:

Vul de linkteksten aan met het (visueel verborgen) woord "pagina".

#42 - Pijlpictogrammen submenu zonder alt-tekst

Onder de kop "Wijkperspectief" hebben sommige links pijlpictogrammen om submenu's aan te geven, maar deze pictogrammen hebben geen alternatieve tekst. Het pijltje is een afbeelding die informatie overdraagt ("er is een submenu"). Deze informatie moet ook beschikbaar zijn voor bezoekers die de afbeelding niet kunnen zien. Dat is op dit moment niet zo omdat alternatieve tekst ontbreekt.

Oplossing:

Voeg een alternatieve tekst toe, of maak gebruik van het aria-expanded-attribuut om deze informatie op een niet-visuele manier over te brengen.

#43 - Afbeeldingslinks met niet-beschrijvend tekstalternatief

Onder het kopje "Dit willen we bereiken" fungeren de afbeeldingen als een link, maar het tekstalternatief wordt overgenomen uit de toegankelijkheidsnaam van de links en is niet beschrijvend, bijvoorbeeld naam: "[email protected]". Bovendien is er geen tekstalternatief voor de inhoud van de afbeeldingen. Hierdoor is het nu niet duidelijk wat er op de afbeeldingen te zien is en ook niet waar de link naartoe leidt. Dit is ook in strijd met WCAG-succescriteria 2.4.4 en 4.1.2. Een soortgelijk probleem doet zich voor op de pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/.

Oplossing:

Zorg voor alternatieve tekst bij afbeeldingen die de bestemming van de link duidelijk beschrijft. Op die manier weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

#44 - Dialoogvensters met alt="null"

Afbeeldingslinks onder de kop "Dit willen we bereiken" openen modale dialoogvensters. Elk venster bevat een afbeelding als img-element met alt="null". Deze tekst beschrijft de informatieve afbeelding onvoldoende. Wanneer een afbeelding informatie overbrengt, moet de alternatieve tekst die informatie volledig en betekenisvol beschrijven. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/ en op pagina https://soesterkwartier.nu/vernieuwing-basisscholen-soesterkwartier-blijf-op-de-hoogte/.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe die de inhoud van de afbeelding volledig beschrijft.

#45 - Onvoldoende contrast in afbeeldingen met tekst

Onder de kop "Dit willen we bereiken" staan verschillende afbeeldingen met daarin tekst op een felgekleurde achtergrond. Bij het groene blok met de tekst "Soesterpark" heeft de witte tekst niet genoeg contrast met de felgroene (#8CB63C) achtergrond. Het contrast is 2,4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. De tekst "Soesterpark" valt onder grote tekst en moet daarom een contrast van 3,0:1 met de achtergrond hebben. Ook de tekst in het gele (#E3A51A) blok met de tekst "Samen opgroeien" heeft met 2,2:1 niet genoeg contrast. Dezelfde kleuren worden ook gebruikt op pagina https://soesterkwartier.nu/wijkperspectief/kernwaarden/.

Oplossing:

Pas de tekstkleur of achtergrondkleur aan zodat de contrastverhouding minimaal 4,5:1 is voor kleine tekst en 3,0:1 voor grote tekst.

#46 - Afbeeldingen met ingesloten tekst

Onder de kop "Dit willen we bereiken" staan afbeeldingen met ingesloten tekst. Als tekst als afbeelding wordt geplaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/wijkperspectief/kernwaarden/ onder de kop "Kernwaarden" en https://soesterkwartier.nu/project/soesterpark/ onder de koppen "Soesterpark: grote projecten voor jong en oud" en "Voortgang project".

Oplossing:

Plaats deze tekst als normale tekst op de pagina. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt.

#47 - Submenu niet te sluiten met Escape

Onder het kopje "Wijkperspectief" bevat het menu items met submenu's. Wanneer een bezoeker de muis over deze items beweegt, verschijnen de submenu's. Deze submenu's overlappen de inhoud van de pagina. De bezoeker moet deze extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen.

Oplossing:

Maak het mogelijk om de submenu's te sluiten door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

#48 - Dialoogvensters niet bedienbaar met toetsenbord

Afbeeldingslinks onder de kop "Dit willen we bereiken" openen modale dialoogvensters. In dit venster sluiten links met role="button" het dialoogvenster of openen ze het in volledige grootte. Deze links zijn niet toegankelijk met het toetsenbord. In dit geval is een a-element zonder href-attribuut standaard niet focusbaar met het toetsenbord. De aanwezigheid van role="button" vertelt ondersteunende technologieën alleen dat dit bedoeld is om als knop te fungeren, maar maakt het element niet focusbaar of bedienbaar via het toetsenbord. Hetzelfde probleem doet zich voor op de pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/ en op de pagina https://soesterkwartier.nu/kijk-hier-de-online-uitzending-van-13-mei/.

Oplossing:

Zorg ervoor dat het element focusbaar en bedienbaar is met het toetsenbord, hetzij door gebruik te maken van het native button-element, hetzij door tabindex en event handlers toe te voegen.

#49 - Toetsenbordfocus kan dialoogvenster verlaten

Afbeeldingslinks onder de kop "Dit willen we bereiken" openen modale dialoogvensters. Momenteel kan de toetsenbordfocus het geopende dialoogvenster verlaten en naar de onderliggende pagina-inhoud gaan. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/ en op de pagina https://soesterkwartier.nu/kijk-hier-de-online-uitzending-van-13-mei/, en andere pagina's.

Oplossing:

Houd de focus binnen het venster, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.

#50 - Afbeeldingslinks met nietszeggende toegankelijke naam

Onder het kopje "Dit willen we bereiken" hebben de links met afbeeldingen toegankelijkheidsnamen als "[email protected]", die niet duidelijk beschrijven wat de links doen. Omdat het klikken op deze links een grotere versie van de afbeelding opent, zou het beter zijn om een meer beschrijvende toegankelijke naam te gebruiken.

Oplossing:

Gebruik een meer beschrijvende toegankelijke naam, zoals "Afbeelding resultaten 1 vergroten".

#51 - Submenu mist aria-expanded

Onder het kopje "Wijkperspectief" hebben sommige links submenu's, maar een blinde bezoeker krijgt geen informatie of het submenu open of gesloten is. Als er een link is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen.

Oplossing:

Gebruik het aria-expanded-attribuut om de staat van het submenu aan te geven.

#52 - Dialoogvenster mist role="dialog"

Afbeeldingslinks onder de kop "Dit willen we bereiken" openen modale dialoogvensters. De schermlezer herkent dit venster niet als een dialoogvenster. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat. Hetzelfde probleem doet zich voor op pagina https://soesterkwartier.nu/op-zondag-12-april-bruist-de-wijk-tijdens-dagje-soesterkwartier/ en op de pagina https://soesterkwartier.nu/kijk-hier-de-online-uitzending-van-13-mei/, en andere pagina's.

Oplossing:

Voeg role="dialog" aan het dialoogvenster toe.

#53 - Focus verschuift naar voettekst bij laden nieuwe artikelen

Op deze pagina staan artikelen. Wanneer een bezoeker op de knop "MEER BERICHTEN LADEN" klikt, worden er meer artikelen toegevoegd. De toetsenbordfocus verschuift niet naar het eerste nieuw toegevoegde artikel, maar naar de voettekst. Dit is niet de bedoeling.

Oplossing:

Zorg dat de toetsenbordfocus bij het inladen van meer artikelen naar het eerste nieuwe artikel gaat.

#54 - Onvoldoende contrast socialmedia-iconen

Naast de tekst "Deel Dit Verhaal, Kies Je Platform!" hebben de social media-iconen een grijze kleur (#9E9FA3), wat resulteert in een contrastverhouding van 2,5:1 ten opzichte van de lichtgrijze achtergrond. De standaardkleur van deze socialmedia-logo's hoeft niet aan de contrasteisen te voldoen, omdat ze dan onder een uitzondering voor logo's vallen. Maar als de kleuren worden aangepast, dan moeten die wel voldoen aan de minimale contrasteisen van 3,0:1. Hetzelfde probleem doet zich voor op de pagina's https://soesterkwartier.nu/winkelstraatmanager-bart-iedereen-is-welkom-aan-de-noordewierweg/, https://soesterkwartier.nu/vernieuwing-scholen-soesterkwartier-blijf-op-de-hoogte/, https://soesterkwartier.nu/kijk-hier-de-online-uitzending-van-13-mei/.

Oplossing:

Pas de kleur van de socialmedia-iconen aan zodat de contrastverhouding minimaal 3,0:1 is.

#55 - Links met lege alt-attributen

Afbeeldingen onder de kop "Op zondag 12 april bruist de wijk tijdens Dagje Soesterkwartier" fungeren als links, maar hun alt-attributen zijn leeg (alt=""), waardoor afbeeldingen niet zichtbaar zijn voor schermlezers. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

Oplossing:

Voeg een alt-tekst aan de afbeelding toe die het doel van de link beschrijft. Andere oplossingen zijn mogelijk.

#56 - Links zonder toegankelijke naam

Er ontbreken toegankelijke namen bij links met afbeeldingen onder de kop "Op zondag 12 april bruist de wijk tijdens Dagje Soesterkwartier". Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Oplossing:

Geef deze link een toegankelijke naam die het doel van de link beschrijft.

#57 - Informatieve afbeelding zonder tekstalternatief

Onder de kop "Kernwaarden" staat een informatieve afbeelding met een leeg alt-attribuut. Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker. De alternatieve tekst mag dus niet leeg zijn.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

#58 - Nietszeggende alt-tekst bij informatieve afbeelding

Onder het kopje "Soesterpark: grote projecten voor jong en oud" staat een informatieve afbeelding met de alternatieve tekst "soeserpark@2x-8". Deze tekst beschrijft de afbeelding onvoldoende. Zie ook de afbeelding onder het kopje "Voortgang project". Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven. Om herhaling te voorkomen mag deze alternatieve tekst niet gelijk zijn aan tekst die al op de pagina staat, bijvoorbeeld als onderschrift van de afbeelding.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

#59 - Onvoldoende contrast "Project afgerond"

Onder het kopje "Voortgang project" staat een grijze (#8D8779) tekst "Project afgerond" op een gele (#E2A41B) achtergrond. De kleurcontrastverhouding is te laag: 1,6:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Oplossing:

Pas de tekstkleur of achtergrondkleur aan zodat de contrastverhouding minimaal 4,5:1 is.

#60 - Onvoldoende contrast "Voortgang project"

De witte tekst "Voortgang project" staat op een oranje achtergrond (#E3A51A). Het contrast is 2,2:1. Deze tekst valt onder grote tekst en moet daarom een contrast van ten minste 3,0:1 hebben.

Oplossing:

Pas de tekstkleur of achtergrondkleur aan zodat de contrastverhouding minimaal 3,0:1 is.

#61 - Afbeelding valt buiten beeld bij 320px

Bij een breedte van 320 pixels valt het woord "Soesterpark" buiten beeld. Daarnaast valt de afbeelding met de tekst "Hoe ziet jouw buurt er straks uit?" deels buiten beeld, waardoor de tekst daarop niet meer goed leesbaar is.

Oplossing:

Zorg dat alle inhoud, inclusief afbeeldingen met tekst, goed zichtbaar blijft bij een breedte van 320 pixels.

#62 - Onnauwkeurige automatische ondertiteling

De pagina bevat een video waarin een gesprek wordt gevoerd. Er zijn wel ondertitels aanwezig, maar deze worden automatisch gegenereerd en zijn daarom onnauwkeurig. Video's waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.

Oplossing:

Voeg handmatig gecorrigeerde ondertiteling toe aan de video.

#63 - Geen media-alternatief of audiodescriptie

De video bevat op verschillende plaatsen tekst en logo's (bijvoorbeeld rond 0:00, 57:53). Er wordt echter geen media-alternatief of audiodescriptie geboden. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft.

Oplossing:

Voeg een media-alternatief toe (een geschreven tekst die de visuele elementen beschrijft) of een audiodescriptie.

#64 - Ontbrekende audiodescriptie

De video voldoet niet aan succescriterium 1.2.5, dat audiodescriptie voor visuele informatie in video's vereist. Audiodescriptie is vereist omdat er voldoende ruimte is binnen het bestaande audiotrack. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video's niet (goed) kunnen zien.

Oplossing:

Voeg audiodescriptie toe die de visuele elementen in de video beschrijft, zoals namen, functies, logo's en teksten.

#65 - YouTube-video valt buiten beeld bij 320px

Bij een breedte van 320 pixels valt de YouTube-video op de pagina deels buiten beeld. Deze is hierdoor niet goed te bekijken.

Oplossing:

Zorg dat de video responsief is en goed past bij een breedte van 320 pixels, bijvoorbeeld door een responsieve container met max-width: 100% te gebruiken.

#66 - YouTube-sneltoetsen met één teken

De YouTube-videospeler op deze pagina maakt gebruik 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.

Oplossing:

Voeg de parameter disablekb=1 toe aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb.

#67 - Iframe met onvoldoende beschrijving

De pagina bevat een iframe met het title-attribuut "YouTube-videospeler". Iframes moeten een goede beschrijving hebben. Die komt 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:

Geef het iframe een beschrijvende titel, bijvoorbeeld "Video: online uitzending 13 mei".

#68 - Informatieve afbeeldingen zonder alt-tekst

Het pdf-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Dit komt voor op pagina's 1, 8, 9, 14-21 en andere. Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen "afbeelding" voor. Hetzelfde probleem doet zich voor in het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken op pagina's 1, 9, 13 en andere.

Oplossing:

Voeg alt-teksten toe aan deze informatieve afbeeldingen.

#69 - Nietszeggende alt-tekst bij afbeelding

De informatieve afbeelding op pagina 13 heeft het tekstalternatief "Afbeelding met tekst Automatisch gegenereerde beschrijving". Dit geeft niet aan wat er op de afbeelding te zien is. Deze tekst geeft geen duidelijke informatie over wat op de afbeelding staat. Hierdoor weten bezoekers die het document laten voorlezen niet wat op de afbeelding te zien is. Hetzelfde probleem doet zich voor bij het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken op pagina 7.

Oplossing:

Werk de alt-tekst van de afbeelding in de pdf bij om een nauwkeurige en betekenisvolle beschrijving te geven.

#70 - Decoratieve afbeeldingen ten onrechte gemarkeerd als figuren

Op pagina's 5, 6 en 10, en andere, staan decoratieve afbeeldingen die ten onrechte zijn getagd als figuren zonder beschrijving. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Hetzelfde probleem doet zich voor bij het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken. Zie bijvoorbeeld pagina 36 en 39.

Oplossing:

Markeer deze afbeeldingen als artefact, zodat deze worden verborgen voor schermlezers.

#71 - Inhoudsopgave mist Reference-tags

Het pdf-document bevat een inhoudsopgave op pagina 3. De links naar de pagina's maken echter geen gebruik van de Reference-tag. Deze tags zijn wel nodig: alleen dan kunnen schermlezers het document correct interpreteren. Hetzelfde probleem doet zich voor bij het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken, pagina 2.

Oplossing:

Gebruik de juiste tags voor de inhoudsopgave: TOC, TOCI, Reference, Link.

#72 - Tabel-tags verkeerd gebruikt voor niet-tabelinhoud

Op pagina's 24-27 staan tekstblokken op een roze achtergrond die beginnen met "Doel: ...". Deze tekst is opgemaakt als een tabel. Tabel-tags worden hier verkeerd gebruikt omdat ze worden toegepast op inhoud die niet echt tabelgegevens zijn, maar eerder een sectiekop en een beschrijving. Dit verkeerde gebruik kan verwarrend zijn voor bezoekers van schermlezers, die tabelinformatie verwachten, maar in plaats daarvan andere inhoud aantreffen.

Oplossing:

Gebruik de juiste tags (P, H) in plaats van tabel-tags voor deze inhoud.

#73 - Kopteksten niet als koppen getagd

In het pdf-document staan verschillende kopteksten die in de tags niet als koppen zijn gemarkeerd. Zie bijvoorbeeld pagina 24 "Speerpunten", "Duurzaam wonen", "Toegankelijkheid en bereikbaarheid" en andere. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

#74 - Koptekst getagd als lijstitem

Op pagina 46 staat de koptekst "B. Langs Eem en Spoor". Deze is in de code ten onrechte gemarkeerd als een lijstitem. Dit maakt navigatie en het begrijpen van de inhoudshiërarchie moeilijker voor bezoekers van schermlezers. Hetzelfde probleem doet zich voor op pagina 47. Hetzelfde probleem doet zich voor in het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken op pagina's 5-6.

Oplossing:

Vervang de L-tag door de H-tag, zodat de tagstructuur overeenkomt met de visuele structuur.

#75 - Doorlopende lijst gecodeerd als meerdere lijsten

Op pagina 53 is de inhoud visueel gestructureerd als één doorlopende lijst met opsommingstekens. Deze inhoud is echter gecodeerd als verschillende afzonderlijke lijsten, zodat ondersteunende technologieën zoals schermlezers elke lijst als een nieuwe, afzonderlijke lijst zullen identificeren en aankondigen.

Oplossing:

Groepeer alle gerelateerde items binnen één lijststructuur.

#76 - Tabelstructuur koppelt getallen niet aan items

Op pagina 58 staat een tabel. In de tabel is het getal 800.000 visueel gegroepeerd met de drie regels ernaast, en zijn de getallen 200.000, 300.000 en 190.000 elk duidelijk gekoppeld aan de kostenposten direct links ervan. Dit komt echter niet tot uiting in de code. Schermlezers zijn afhankelijk van de codestructuur van de tabel, dus als het verband tussen de nummers en de bijbehorende items niet expliciet is aangegeven, is het voor bezoekers van schermlezers moeilijk om de informatie te begrijpen.

Oplossing:

Zorg ervoor dat de codestructuur van de tabel elk nummer expliciet koppelt aan het bijbehorende item.

#77 - Onvoldoende contrast bij links

In het pdf-document worden links weergegeven in blauw (#5CCCFF) op een witte achtergrond. Zie pagina's 24 ("wijkscan Soesterkwartier"), 28 ("Langer thuis wonen (amersfoort.nl)") en andere. De kleurcontrastverhouding is te laag: 1,8:1.

Oplossing:

Pas de kleur van de links aan zodat de contrastverhouding minimaal 4,5:1 is.

#78 - Afbeeldingen met ingesloten tekst

Op pagina's 14-21 en andere zijn afbeeldingen met ingesloten tekst aanwezig. Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Hetzelfde probleem doet zich voor in het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken op pagina's 9, 13, 18 en andere.

Oplossing:

Plaats de tekst als gewone tekst in het document in plaats van als afbeelding.

#79 - Geen documenttitel ingesteld

Het pdf-document heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer, staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker. Hetzelfde probleem doet zich voor bij het pdf-document https://amersfoort.notubiz.nl/document/11246927/1/08b+Bijlage+Uitvoeringsagenda+Soesterkwartier+Vitale+Wijken.

Oplossing:

Stel een documenttitel in via de bestandseigenschappen van het bronbestand of van het pdf-document.

#80 - Decoratieve afbeeldingen ten onrechte als figuren getagd

In het pdf-document zijn decoratieve afbeeldingen ten onrechte opgemaakt met Figure-tags. Dit gebeurt op pagina 7. Het lijkt bijvoorbeeld te gaan om het oranje kader dat om de opsomming van een aantal statistieken heen staat. Deze afbeeldingen zijn decoratief. Daarom mag hier niet de Figure-tag voor worden gebruikt.

Oplossing:

Verander de afbeeldingen in een artefact, zodat ze verborgen worden voor schermlezers.

#81 - Succescriteria die niet voldoen

• 1.1.1 Niet-tekstuele content
• 1.2.2 Ondertiteling voor doven en slechthorenden
• 1.2.3 Audiodescriptie of media-alternatief
• 1.2.5 Audiodescriptie
• 1.3.1 Info en relaties
• 1.4.1 Gebruik van kleur
• 1.4.3 Contrast (minimum)
• 1.4.5 Afbeeldingen van tekst
• 1.4.10 Reflow
• 1.4.11 Contrast van niet-tekstuele content
• 1.4.12 Tekstafstand
• 1.4.13 Content bij hover of focus
• 2.1.1 Toetsenbord
• 2.1.4 Sneltoetsen met één teken
• 2.2.1 Timing aanpasbaar
• 2.4.2 Paginatitel
• 2.4.3 Focusvolgorde
• 2.4.4 Linkdoel (in context)
• 2.4.6 Koppen en labels
• 2.4.7 Focus zichtbaar
• 2.4.11 Focus niet verborgen
• 2.5.3 Label in naam
• 3.1.2 Taal van onderdelen
• 3.3.1 Foutidentificatie
• 4.1.2 Naam, rol, waarde
• 4.1.3 Statusberichten