Hercontrole van de audit digitale toegankelijkheid van website jouwnoord-holland.nl/jouwruimte

#1 - Alternatieve tekst van een informatieve afbeelding is leeg

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

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker. #### Oplossing: Voeg een beschrijvende alternatieve tekst toe aan het `alt`-attribuut. ### Beschrijving van complexe afbeelding ontbreekt

Op deze pagina staan onder de kop 'Meer informatie?' twee informatieve afbeeldingen met een leeg alt-attribuut. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alternatieve tekst past. Die informatie maak je toegankelijk door twee tekstalternatieven te bieden: een korte en een lange beschrijving.

Oplossing:

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

#2 - Kleur is gebruikt als enige manier om informatie over te dragen

Op deze pagina staat onder het kopje 'Meer informatie?' een grafiek. Kleur wordt gebruikt om informatie weer te geven. Zie de legenda en de balken in de grafiek. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

#3 - Er is maar één manier om een webpagina te vinden

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

Oplossing:

Voeg een zoekveld of een sitemap toe. Tijdens de hercontrole is gebleken dat een link naar de sitemap aan de footer is toegevoegd. Echter deze link werkt niet.

#4 - Toetsenbordfocus gaat buiten het mobiele menu

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

Oplossing:

Bij dit soort menu’s moet je de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen. Dit kun je op een van de volgende manieren oplossen:

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

#5 - Naam van de knop beschrijft niet wat de knop doet

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

Een blinde bezoeker krijgt een andere informatie voorgelezen. De functie van de knop is het menu sluiten, niet tonen. Hetzelfde probleem doet zich voor op kleine schermen in het hoofdmenu voor pijlknoppen met toegankelijke namen "Toon onderliggende pagina's". #### Oplossing: Voeg tekst toe die de functie van de knop goed beschrijft. ### Status van submenu wordt niet doorgegeven aan schermlezer

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

Oplossing:

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

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

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

#### Oplossing: Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/ ### Relatie tussen de links in het kruimelpad is niet in de code vastgelegd

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

Oplossing:

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

#7 - Huidige stap in de tijdlijn is alleen visueel aangegeven

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

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

#8 - Kop-element gebruikt voor tekst die geen kop is

De tekst "Reageren kon tot 20 augustus, de reactiemogelijkheid is gesloten tot 3 november. Dan start de volgende ronde." op deze pagina is geen koptekst, maar is ten onrechte gemarkeerd met een h4-element om de lettergrootte te vergroten.

Het kop-element (`h4`) is niet betekenisvol gebruikt, maar alleen om een *visueel* effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het `h4`-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. #### Oplossing: Verwijder het `h4`-element en gebruik een ander element, zoals een `p`-element. De gewenste stijl kun je met CSS toevoegen. Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/ . ### Naam van de knop beschrijft niet wat de knop doet

Op deze pagina hebben de knoppen met de tekst "1", "2", "3", enz. in de paginering de functie om de juiste reacties te laden, maar hun toegankelijke namen zijn "1", "2", "3", enz., die hun functie niet nauwkeurig beschrijven. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

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

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

Oplossing:

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

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

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

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

#11 - PDF-document heeft geen titel

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

Dit pdf-document heeft geen titel in de bestandseigenschappen. #### Los het op in Adobe Acrobat:

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

#12 - Structuur van pdf-document is niet in codes vastgelegd

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

Oplossing:

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

#13 - Kleurcontrast van kleine tekst is te laag

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

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