Hercontrole digitale toegankelijkheid van website wapenfeiten.zuid-holland.nl

#Nieuw-1 - Link in het secundaire menu heeft een onjuiste statusNieuw

In het secundaire menu dat op sommige pagina's voorkomt, hebben sommige items een submenu dat in- en uitgeklapt kan worden. Zie bijvoorbeeld https://wapenfeiten.zuid-holland.nl/bouwstenen, "Bouwstenen" en "Richtlijnen stijlvakken". Elk van deze items bestaat uit een link naar de pagina en een knop "Toon submenu voor …" waarmee het submenu in- en uitgeklapt wordt. Het attribuut aria-expanded staat op de knop, maar ook op de link ervoor, bijvoorbeeld:

<a href="/bouwstenen" aria-expanded="true">Bouwstenen</a>

Een schermlezer leest de link daardoor voor als "uitgeklapt" of "samengevouwen". De link klapt echter niets in of uit, maar gaat naar een andere pagina. Gebruikers van schermlezers krijgen zo een onjuiste status te horen en kunnen denken dat de link het submenu bedient.

Deze bevinding is ontstaan bij het oplossen van bevinding #3 (Informatieve afbeelding heeft onvoldoende tekstalternatief).

Oplossing:

Verwijder het attribuut aria-expanded van de link. Het attribuut aria-expanded mag alleen op de knop staan die het submenu in- en uitklapt.

#Nieuw-2 - Toegankelijke namen van navigatie-elementen staan in een andere taalNieuw

Op veel pagina's van de website zijn er meerdere navigatie-elementen: het hoofdmenu, een secundair menu en een kruimelpad. Zie bijvoorbeeld de pagina https://wapenfeiten.zuid-holland.nl/contact. Deze navigatie-elementen hebben de toegankelijke namen "Main navigation", "Side navigation" en "Breadcrumb". Die namen komen uit visueel verborgen koppen, bijvoorbeeld:

<h2 class="visually-hidden" id="block-huisstijlhandleiding-main-menu-menu">Side navigation</h2>

De primaire taal van de pagina is Nederlands (lang="nl"), maar deze namen zijn Engels. Ze hebben geen eigen lang-attribuut. Schermlezers lezen deze Engelse teksten daardoor met Nederlandse uitspraakregels voor, en dan zijn ze lastig te verstaan.

Deze bevinding is ontstaan bij het oplossen van twee andere bevindingen:

• Bevinding #4 (Navigatie elementen hebben dezelfde naam). Bij die oplossing heeft het secundaire menu de nieuwe Engelse naam "Side navigation" gekregen.
• Bevinding #9 (Taalcode van de webpagina's klopt niet). Het lang-attribuut is gewijzigd van en naar nl. Daardoor worden de Engelse namen, die eerder met Engelse uitspraakregels werden voorgelezen, nu als Nederlandse tekst behandeld.

Oplossing:

De toegankelijke namen van de navigatie-elementen moeten in de taal van de pagina staan, bijvoorbeeld "Hoofdmenu", "Secundair menu" en "Kruimelpad". Als de Engelse namen blijven, moet de taal van die tekst aangegeven zijn met een lokaal lang-attribuut: lang="en".

#Nieuw-3 - Zoekfunctie is niet beschikbaar bij inzoomen tot 200% en 400%Nieuw

Wanneer pagina's van de website worden bekeken met een schermresolutie van 1280 bij 1024 pixels en worden ingezoomd tot 200% of 400%, verschijnt de knop "Menu". Het hoofdmenu en de link naar de zoekpagina met het vergrootglasicoontje zijn dan verborgen. Het menu dat met de knop "Menu" geopend wordt, bevat geen link naar de zoekpagina. Er is op de pagina ook geen andere manier om de zoekfunctie te bereiken. Zie bijvoorbeeld:

• https://wapenfeiten.zuid-holland.nl/
• https://wapenfeiten.zuid-holland.nl/bouwstenen

Bezoekers die inzoomen tot 200% of 400% kunnen de zoekfunctie daardoor niet gebruiken. Als een bezoeker inzoomt, moet alles nog werken.

Deze bevinding is ontstaan bij het oplossen van bevinding #5 (Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken). Bij die oplossing is voor ingezoomde weergave een menu met de knop "Menu" gekomen. De link naar de zoekpagina is daarbij niet in dat menu opgenomen.

Oplossing:

De link naar de zoekpagina moet ook bij inzoomen tot 200% en 400% beschikbaar zijn, bijvoorbeeld in het menu dat met de knop "Menu" geopend wordt.

#13 - Onduidelijke bestemming van een link

Op deze pagina staan in het kruimelpad twee links met dezelfde tekst "Zoeken". De eerste link verwijst naar https://wapenfeiten.zuid-holland.nl/search, de tweede naar https://wapenfeiten.zuid-holland.nl/search/node. Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

#40 - Onvoldoende tekstalternatief bij informatieve afbeeldingen

Op deze pagina staat een afbeelding die de opmaakstijlen voor drukwerk aangeeft. Dit is niet alleen een voorbeeld van hoe deze stijlen eruitzien, er staat ook informatie in over wat de eisen zijn qua grootte van de tekst en welke lettertypes gebruikt moeten worden. Deze informatie is nu niet beschikbaar voor gebruikers die de afbeelding niet kunnen zien. Ook als ze de lettertypen niet kunnen zien, kan het wel relevant zijn om te weten welke lettertypen gebruikt moeten worden. Deze informatie moet daarom toegankelijk gemaakt worden buiten de afbeelding.

Oplossing:

Plaats deze informatie ook als tekst op de pagina.

#22 - Onvoldoende tekstalternatief

Op deze pagina staat onder de kop "Blauwe kleurschaal en huisstijlkleurtabel" een afbeelding met kleurvlakken. In deze afbeelding staan de kleuren van de blauwe kleurschaal en de huisstijlkleuren die gebruikt moeten worden, bijvoorbeeld "PZH Lichtblauw 25%", "PZH Blauw" en "PZH Appelgroen". Bij elke kleur staan in de afbeelding ook de naam en de Hex-, RGB- en CMYK-waarden. Het tekstalternatief van de afbeelding is "kleuren datavisualisatie". Deze informatie staat verder niet als tekst op de pagina. Iemand die de afbeelding niet (goed) kan zien, mist hierdoor informatie over welke kleuren gebruikt moeten worden en wat de kleurwaarden zijn.

Oplossing:

Plaats deze informatie als tekst op de pagina.

#25 - Advies

Het volgende wordt niet afgekeurd, maar kan wel verbeterd worden: op deze pagina wordt informatie gegeven over hoe om te gaan met grafieken. Hierin wordt advies gegeven over het gebruik van bepaalde kleuren binnen grafieken. Als dit advies gevolgd wordt, bijvoorbeeld over de blauwe kleurschaal, dan zal niet worden voldaan aan de eisen van succescriterium 1.4.1 Gebruik van kleur, omdat de kleuren te dicht bij elkaar liggen.

#26 - Kleurcontrast van tekst is te laag

Op deze pagina, onder het "Voorbeeld van grafieken in blauwe kleurschaal", staat een afbeelding met ingesloten tekst. De blauwe tekst "Jaar" (#A8BFD9) op de witte achtergrond heeft een contrastverhouding van 1,9:1. Zie ook andere teksten op afbeeldingen hieronder.

Oplossing:

Tekst die kleiner is dan 18pt moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 18pt of 14pt vetgedrukt is dit minimaal 3,0:1.

#29 - Tabel wordt gebruikt voor opmaak

Deze bevinding (Meerdere alinea's in een p-element) is gedeeltelijk opgelost. De beschrijving van elke kleur onder "Logo kleuren" was eerder als één p-element met meerdere alinea's gemarkeerd. Nu heeft elke kleur een kop (h4) en een lijst (ul). Het deel van de bevinding dat over de tabel gaat, is nog niet opgelost.

De kleuren onder "Logo kleuren" ("PZH Rood", "PZH Geel" en "PZH Blauw") staan in een tabel. Deze tabel wordt alleen gebruikt om de kleuren naast elkaar te plaatsen. De tabel heeft geen kopcellen (th) en is ook niet gemarkeerd als opmaaktabel (role="presentation"). In de cellen van de eerste rij staan bovendien aparte tabellen met alleen een afbeelding van de kleur. De naam en de beschrijving van elke kleur staan in de tweede rij.

Schermlezers presenteren dit als een datatabel met rijen en kolommen, terwijl het geen tabelgegevens zijn. Doordat de afbeeldingen en de beschrijvingen in verschillende rijen staan, horen gebruikers van hulpsoftware eerst alle afbeeldingen en daarna pas de namen en beschrijvingen van de kleuren. De relatie tussen een kleur en de beschrijving ervan is daardoor niet duidelijk.

Oplossing:

Het advies is om geen tabellen te gebruiken om een bepaalde weergave te bereiken. Als er toch een tabel wordt gebruikt, moet deze gemarkeerd zijn als opmaaktabel met role="presentation", zonder geneste tabellen. De afbeelding, de naam en de beschrijving van een kleur moeten dan in dezelfde cel staan.

#31 - Bij 400% zoom moet horizontaal gescrold worden

Deze bevinding (Bij 400% zoom is een horizontale scrollbar aanwezig) is gedeeltelijk opgelost. Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, verschijnt er geen horizontale schuifbalk meer voor de hele pagina. Wel moet nu binnen de blokken met kleuren horizontaal gescrold worden. Dit geldt voor de blokken onder "Logo kleuren", "Secundaire kleuren", "Lichte tinten" en "Donkere tinten".

Deze blokken zijn als tabel opgemaakt en hebben een eigen horizontale schuifbalk. De tweede kolom valt voor een deel buiten beeld en de tekst daarin is afgesneden, bijvoorbeeld "CMYK C: 0/13/10…" bij "PZH Geel". Om alle informatie over de kleuren te kunnen lezen, moet de bezoeker binnen elk blok horizontaal scrollen. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed.

Tabellen vallen onder de uitzonderingen, maar alleen als het om echte datatabellen gaat. Hier wordt de tabel alleen voor opmaak gebruikt: de kleuren staan naast elkaar met per kleur een kop en een lijst met kleurwaarden. Zie ook de bevinding "Tabel wordt gebruikt voor opmaak" hierboven. De uitzondering geldt hier dus niet.

Oplossing:

Zorg ervoor dat de inhoud van de blokken met kleuren bij 320 CSS-pixels breed binnen het scherm past, zonder horizontaal scrollen. Plaats de kleuren bijvoorbeeld onder elkaar in plaats van naast elkaar. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud, mag het wel.

#34 - Dialoogvenster heeft geen toegankelijke naam

Op deze pagina opent het interactieve element onder "Toegankelijkheidseisen" (de afbeelding met de kleurcontrasttabel) een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Een blinde bezoeker heeft deze naam nodig om de inhoud van het dialoogvenster te begrijpen. Schermlezers kunnen hierdoor niet doorgeven wat hier staat.

Oplossing:

Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.