Audit digitale toegankelijkheid van website magazine.zuid-holland.nl

#1 - Onjuiste taalinstelling van pagina

De primaire taal van de website is Nederlands, maar het lang-attribuut op alle pagina's is onjuist ingesteld op "en". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Wanneer de taal van de pagina niet correct is vastgelegd, wordt de inhoud met onjuiste uitspraakregels voorgelezen. Daardoor is de tekst lastiger te begrijpen voor bezoekers die schermlezers gebruiken.

Oplossing:

Zorg ervoor dat de taal van de pagina is ingesteld op Nederlands ( lang="nl" ), zodat hulpsoftware de inhoud op de juiste manier kan voorlezen. Vergeet niet om de taalcode (lang="en") toe te voegen voor specifieke teksten die in het Engels moeten worden uitgesproken, zoals "Happy employees" op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/de-nieuwe-lunchcultuur, "Healthy Society" op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/gezonde-samenleving en enkele andere.

#2 - Logo heeft geen tekstalternatief

Het logo "Provincie Zuid-Holland" bovenaan de website heeft geen tekstalternatief. Het alt-attribuut is leeg. Informatieve afbeeldingen, zoals een logo, moeten altijd een alt-tekst hebben waarin de volledige tekst is opgenomen die in het logo zichtbaar is. Zonder dit alternatief is de informatie in het logo niet beschikbaar voor bezoekers die de afbeelding niet kunnen waarnemen. Het logo functioneert ook als link, waardoor de linkbestemming niet duidelijk is (2.4.4) en de link geen toegankelijke naam heeft (4.1.2).

Oplossing:

Zorg ervoor dat het logo is voorzien van een tekstalternatief (alt-tekst) waarin de volledige tekst van het logo is opgenomen. Hierdoor krijgt de bijbehorende link ook een duidelijke bestemming en toegankelijke naam.

#3 - Onjuiste taal van toegankelijke namen

Onderaan elke pagina staan iconen met pijlen die dienen voor navigatie tussen de pagina's. Deze hebben aria-label-attributen met Engelstalige tekst: "Previous page" en "Next page". Schermlezers lezen deze labels voor volgens de uitspraakregels van de primaire taal van de pagina, in dit geval Nederlands. Omdat de teksten van de aria-label-attributen Engelstalig zijn, worden deze met onjuiste uitspraakregels voorgelezen. Daardoor kan dit leiden tot verwarring en verminderde begrijpelijkheid voor bezoekers die schermlezers gebruiken. Andere voorbeelden zijn:

• "Skip to main content"-link op alle pagina's
• Het woord "Pages" en de X-knop met de toegankelijke naam "Close" die bovenaan het menu worden weergegeven nadat op de hamburgerknop is geklikt
• X-knop ("Close") in hetzelfde scherm
• Knop met een pijl naar beneden op alle pagina's ("Scroll down button")

Oplossing:

Vertaal de teksten en de aria-label-attributen naar het Nederlands, zodat schermlezers deze correct kunnen voorlezen.

#4 - Groepering links ontbreekt

Op de pagina's van de website staan navigatielinks met pijliconen om tussen de pagina's te wisselen. Dit is een groep links die visueel als groep worden gepresenteerd, maar deze groepering is niet terug te vinden in de HTML-structuur.

Voor een ziende bezoeker is zichtbaar dat deze links bij elkaar horen. Deze relatie is niet vastgelegd in de HTML-code.

Oplossing:

Leg de relatie tussen de links vast in de code. Plaats de links bijvoorbeeld in een ul-element met meerdere li-elementen of binnen een nav-element. Daardoor is ook voor hulpsoftware duidelijk dat de links bij elkaar horen.

Alt-attribuut is leeg bij een informatieve afbeelding

Onderaan de meeste pagina's staat een informatieve afbeelding "Gezond verstand", maar het alt-attribuut is leeg. Als een informatieve afbeelding wordt opgenomen met een img-element, mag het alt-attribuut niet leeg zijn.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut en neem alle zichtbare tekst erin op - "Gezond verstand".

#5 - Onjuiste beschrijving van een knop

Bovenaan de pagina's is een hamburgerknop aanwezig. Deze knop opent het menu, maar de toegankelijke naam is "Index", wat de functie niet correct beschrijft.

De toegankelijke naam van de knop beschrijft niet wat de knop doet. Daardoor is voor bezoekers die een schermlezer gebruiken niet duidelijk welke actie wordt uitgevoerd.

Oplossing:

Zorg ervoor dat de toegankelijke naam van de knop de functie duidelijk beschrijft.

#6 - Zichtbare linktekst ontbreekt in toegankelijke naam

Vanaf alle pagina's wordt na een klik op de hamburgerknop een pagina-overzicht geopend met klikbare afbeeldingen van de magazinepagina's. Vanaf de afbeelding "09: Pilot gemeenten" wijkt het paginanummer in de linknaam af van wat visueel wordt weergegeven. Bijvoorbeeld: de zichtbare tekst is "09: Pilot gemeenten" en de toegankelijke naam, aangeleverd via het aria-label, is "Page 10: Pilot gemeenten". Als de zichtbare linktekst niet overeenkomt met de toegankelijke naam, kan dit problemen veroorzaken voor spraakbesturingssystemen. Door de gebruiker uitgesproken opdrachten activeren zo'n link mogelijk niet.

Oplossing:

Pas in dit geval het aria-label aan zodat de zichtbare tekst daarin wordt opgenomen, bijvoorbeeld: aria-label="Pagina 09: Pilot gemeenten".

#7 - Kop niet gemarkeerd als kop

Op deze pagina zijn de volgende teksten niet als kop gemarkeerd: "Ambitie van de provincie", "Pijler 1: Gezonde leefomgeving", "Pijler 2: Voedsel" en andere. Voor bezoekers die hulpsoftware gebruiken, is tekst die visueel als kop is vormgegeven maar niet als kop is gemarkeerd in de code niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te gaan. Dit is alleen mogelijk wanneer koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven, bijvoorbeeld door vetgedrukte tekst, wijkt de informatiestructuur in de code af van de visuele structuur van de pagina. Hetzelfde probleem doet zich voor met vergelijkbare koppen op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/terugblik-festival-gezond-verstand, op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/positieve-gezondheid met vergelijkbare koppen en de kop "Meer weten?", op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/onderzoek-gezonde-verstedelijking en op andere pagina's.

Oplossing:

Markeer koppen met het juiste HTML-element en gebruik daarbij het correcte kopniveau (h1 tot en met h6).

#8 - Video bevat tekst en logo's waarvoor geen alternatief is

Op deze pagina wordt een video getoond onder de kop "Aftermovie festival Gezond Verstand". De video bevat op verschillende momenten namen van sprekers en logo's (bijvoorbeeld rond 0:04, 0:12, 0:42 en andere). Er is echter geen media-alternatief of audiobeschrijving beschikbaar. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Daarnaast wordt op sommige momenten in deze video, bijvoorbeeld van 1:25 tot 1:47, alleen muziek afgespeeld en worden ondertussen beelden van het festival getoond. Deze informatie is niet toegankelijk voor blinde bezoekers; zij worden niet geïnformeerd over wat er op het scherm te zien is.

Oplossing:

Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor succescriterium 1.2.5 is dat echter niet genoeg. Hiervoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo's en teksten. Audiobeschrijving moet alleen op de plekken worden toegevoegd waar de ruimte voor is. De meeste video's hebben deze ruimte aan het begin en op het eind.

#9 - Twee koppen van hetzelfde niveau staan direct onder elkaar

Op deze pagina wordt een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau. Zie "Gezonde leefomgeving" en "Positieve gezondheid op de tekentafel". Wanneer twee kop-elementen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, is ten minste één van deze koppen niet correct toegepast. Direct onder een h1-element mag bijvoorbeeld een h2-element of andere content volgen, maar niet opnieuw een h1-element. Hetzelfde probleem doet zich voor op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/onderzoek-gezonde-verstedelijking met de koppen "Gezonde leefomgeving" en "Een nieuwe kijk op ruimtelijk ontwerpen", op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/de-nieuwe-lunchcultuur met de koppen "Gezonde voedsel omgeving" en "Groenterijk, relaxt en sociaal lunchen" en op andere pagina's.

Oplossing:

Pas de tekst en de kopniveaus aan, zodat de koppen de structuur van de inhoud correct weergeven.

#10 - Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Op deze pagina, onder de kop "Positieve gezondheid op de tekentafel", staat een informatieve afbeelding zonder beschrijvende alternatieve tekst - het alt-attribuut is leeg. Wanneer een afbeelding informatie overbrengt, moet de alternatieve tekst die informatie volledig en betekenisvol beschrijven. In dit geval wordt de visueel aangeboden informatie niet overgebracht aan bezoekers die schermlezers gebruiken. Hetzelfde probleem doet zich voor met de afbeelding op pagina https://magazine.zuid-holland.nl/magazine-gezond-verstand-groeit/onderzoek-gezonde-verstedelijking onder de tekst "Model: Omgekeerde driehoek van omgekeerd ontwerpen".

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Om herhaling te voorkomen mag deze alternatieve tekst niet gelijk zijn aan tekst die al op de pagina staat.

#11 - Tekstcontrast in afbeelding

Op deze pagina onder de kop "Positieve gezondheid op de tekentafel" staat een kleurrijke afbeelding met teksten. De meeste van deze teksten hebben onvoldoende contrast met de achtergrond. Bijvoorbeeld: de groene (#97BF1C) tekst "Dagelijks functioneren" op de witte achtergrond en witte teksten zoals "Winkels en voorzieningen" op dezelfde groene achtergrond hebben een contrastverhouding van 2,1:1. Een vergelijkbaar probleem doet zich voor met andere teksten in verschillende kleuren. Bezoekers met een visuele beperking kunnen de tekst dan niet goed lezen. Het contrast moet minimaal 4,5:1 zijn voor kleine tekst en 3,0:1 voor grote tekst.

Oplossing:

Pas de afbeelding aan zodat de tekst voldoende contrast heeft met de achtergrond.

#12 - De automatisch gegenereerde ondertiteling heeft fouten

Deze pagina bevat een video met een voice-over. Ondertiteling is aanwezig, maar deze is automatisch gegenereerd en daardoor 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:

Zorg dat de ondertiteling van hoge kwaliteit is en exact weergeeft wat wordt gezegd in de video.

#13 - Onduidelijke linktekst

Op deze pagina bevatten meerdere links de niet-informatieve tekst "Lees meer". Deze tekst beschrijft de bestemming van de link niet voldoende, wat tot onduidelijkheid leidt, vooral voor bezoekers met cognitieve beperkingen of bezoekers die schermlezers gebruiken. Meerdere links op deze pagina hebben dezelfde, nietszeggende linktekst. Daardoor is op basis van de linktekst niet duidelijk waar de link naartoe leidt. Dit maakt het lastig om links van elkaar te onderscheiden, met name voor bezoekers die een schermlezer gebruiken of links buiten de context bekijken.

Oplossing:

Zorg ervoor dat de linktekst het doel van de link duidelijk beschrijft. Dit kan bijvoorbeeld door een algemene tekst zoals 'lees meer' aan te vullen met extra context. Als visueel duidelijk is waar de link bij hoort, kan deze aanvullende tekst visueel worden verborgen. Bijvoorbeeld: 'lees meer (over het project)' of 'lees meer (in onze blog)'. Voorbeeld: "Lees meer (over Nieuwe pilotwijken)".

#14 - Beschrijving van complexe afbeelding ontbreekt

Op deze pagina, onder de kop "Welke plek geven gemeenten en provincie aan gezondheid?", staat een complexe afbeelding met een leeg alt-attribuut. Complexe afbeeldingen zoals infographics en schema's bevatten veel informatie die niet toegankelijk is voor iemand die de afbeelding niet kan zien.

Oplossing:

Deze informatie kan gegeven worden via een uitgebreide alt-tekst of een uitgeschreven tekst die op de pagina zelf (in dit geval bijvoorbeeld in de vorm van een tabel) geplaatst kan worden, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan. Als auteur van de pagina weet je zelf beter welke informatie je aan je lezer wil geven: alle getallen uit de grafiek of alleen de trend in de ontwikkeling van de cijfers. Op dit moment staat er naast de afbeelding een link naar het onderzoek, maar via die link wordt niet de juiste pagina geopend.

#15 - Kleurcontrast tussen lijnen in grafiek is niet voldoende

Op deze pagina staat een afbeelding met een spindiagram. De blauwe (#76AFD7) datalijn en de grijze (#BEB5AF) rasterlijnen hebben onvoldoende contrast met de witte achtergrond: 2,4:1 en 2,0:1. Het contrast tussen informatieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.

Oplossing:

Pas de kleuren in de grafiek aan zodat het contrast tussen informatieve elementen en de achtergrond minimaal 3,0:1 is. Gebruik bijvoorbeeld donkerdere tinten voor de datalijnen en rasterlijnen.