Content audit digitale toegankelijkheid van website vooruitindrenthe.nl

#1 - Te weinig contrast van tekst

In de footer staan blauwe (#117cbd) links op een witte (#f4f5f6) achtergrond, zoals "Vacatures", "Job alerts" en "Talentpool". De contrastverhouding is 4,1:1. Dat is te laag, en niet alle bezoekers kunnen deze tekst goed lezen.

Zie ook:

• https://www.vooruitindrenthe.nl/talentpool: de link "Registreren" of "Mijn Account".
• https://www.vooruitindrenthe.nl/account: de link "Maak job alert".
• https://www.vooruitindrenthe.nl/vacatures/junior-beleidsadviseur-sociaal-domein/208b96cc-9514-4f4a-931c-6747e8878fc2: de link "Lees meer".
• Andere pagina's.

User story

Ik ben slechtziend. Als tekst te weinig contrast heeft met de achtergrond, kan ik die moeilijk lezen. Ik verwacht dat tekst genoeg contrast heeft om hem makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt vanzelf gemarkeerd. Bij tekst op een foto of een kleurverloop meet je met de twee pipetten de kleur van de tekst en van de achtergrond. Normale tekst heeft minimaal 4,5:1 nodig, grote tekst (vanaf 24 px, of vanaf 18,7 px vet) minimaal 3,0:1.

Oplossing

Deze tekst is kleiner dan 19 px. Zorg voor een contrastverhouding van minimaal 4,5:1.

#2 - De toegankelijke naam van een knop wijkt af van de zichtbare tekst

Op deze pagina staat een knop met de zichtbare tekst "Vacatures: [aantal]". De toegankelijke naam van de knop is "Bekijk...", en die komt uit het aria-label.

Een aria-label gaat voor op elke andere manier om een element een naam te geven. Schermlezers en spraakbesturing gebruiken die naam. Wijkt de naam af van de zichtbare tekst, dan leest de schermlezer iets anders voor dan er op de knop staat. Wie met spraak werkt, zegt de tekst die op de knop staat. De spraaksoftware vindt dan geen knop met die naam en doet niets.

Daarnaast hebben meerdere knoppen dezelfde toegankelijke naam. Wie met een schermlezer door een lijst met knoppen gaat, weet dan niet welke knop bij welk onderdeel hoort.

Zie ook de knop "Normaal" met de toegankelijke naam "Opmaak" in de teksteditor op pagina's met een formulier, zoals:

• https://www.vooruitindrenthe.nl/vacatures/junior-beleidsadviseur-sociaal-domein/208b96cc-9514-4f4a-931c-6747e8878fc2
• https://www.vooruitindrenthe.nl/vacatures/jeugdconsulent/e0619320-182e-4944-bf4b-06f95a174dfe
• Andere pagina's.

User story

Ik bedien de website met spraak. Als ik de tekst op een knop uitspreek, reageert de knop soms niet. Ik verwacht dat mijn gesproken opdracht altijd past bij de tekst die ik op de knop zie.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan bij elk element de toegankelijke naam naast de zichtbare tekst. De zichtbare tekst hoort in de toegankelijke naam te staan, het liefst aan het begin. Controleer het met spraakbesturing door "klik [zichtbare tekst]" te zeggen.

Oplossing

Zorg dat de toegankelijke naam de zichtbare tekst bevat, het liefst aan het begin. De toegankelijke naam mag ook precies gelijk zijn aan de zichtbare tekst.

#3 - De koppenstructuur klopt niet

Op deze pagina volgt een kop van niveau 2 direct op een andere kop van niveau 2: "Bouw mee aan jouw talent" en "Zijn dit jouw nieuwe collega's?". Koppen horen een logische volgorde te hebben. Een kop wordt niet direct gevolgd door een kop van hetzelfde of een hoger niveau zonder dat er inhoud tussen staat.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, staan er twee koppen van hetzelfde niveau direct achter elkaar. Ik denk dan dat er inhoud ontbreekt. Ik verwacht dat elke kop een eigen stuk inhoud inleidt.

Hoe te testen

1. Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Je ziet het niveau van elke kop, van h1 tot en met h6.
2. Kijk of er twee koppen van hetzelfde niveau direct achter elkaar staan zonder inhoud ertussen, en of er een niveau wordt overgeslagen, bijvoorbeeld een h2 die direct gevolgd wordt door een h4. Allebei wijzen op een onjuiste koppenstructuur.

Oplossing

Haal het kopelement weg bij de tekst "Bouw mee aan jouw talent". Geef de tekst met CSS het uiterlijk van een kop.

#4 - De zichtbare linktekst staat niet in de toegankelijke naam

Op deze pagina staat een link met de zichtbare tekst "Bekijk alle organisaties". De toegankelijke naam van de link is "Ga naar het organisatie overzichtspagina", en die komt uit een aria-label. De zichtbare tekst staat daar niet in. Wie de link met spraak wil openen, zegt de zichtbare tekst, en de spraaksoftware vindt dan geen link met die naam.

Zie ook:

• De links met de zichtbare tekst "Lees verhaal" onder de kop "Zijn dit jouw nieuwe collega's?".
• https://www.vooruitindrenthe.nl/testimonials/0211e5a6-ab36-43b7-8ee4-e792d2cfdb6c

User story

Ik bedien de website met spraak. Als ik de zichtbare linktekst uitspreek, herkent de website mijn opdracht niet en gebeurt er niets. Ik verwacht dat de link opent als ik de zichtbare tekst zeg.

Hoe te testen

Vergelijk bij elk element met een zichtbare tekst die tekst met de toegankelijke naam. Dat kan met het toegankelijkheidspaneel van de ontwikkelaarstools of met een schermlezer. De zichtbare tekst hoort aan het begin van de toegankelijke naam te staan. Controleer het met spraakbesturing door "klik [zichtbare tekst]" te zeggen.

Oplossing

Zet de zichtbare tekst in de toegankelijke naam, het liefst aan het begin. Pas in dit geval het aria-label aan, bijvoorbeeld naar aria-label="Bekijk alle organisaties - Ga naar het organisatie overzichtspagina".

#5 - Het tekstalternatief van een afbeelding bevat overbodige tekens

Het logo op deze pagina heeft het tekstalternatief "Logo van vooruit-in-drenthe". Door de streepjes tussen de woorden klinkt de naam minder natuurlijk als een schermlezer hem voorleest.

Zie ook:

• De iconen met een koffer op de homepage, met het tekstalternatief "soort-vacature".
• https://www.vooruitindrenthe.nl/vacatures/junior-beleidsadviseur-sociaal-domein/208b96cc-9514-4f4a-931c-6747e8878fc2: het icoon voor de tekst "Vacatures".
• https://www.vooruitindrenthe.nl/vacatures/meewerkstage-buitendienst/d5a588f0-3bea-468c-91bb-7616fc20e660: het icoon voor de tekst "Stages".
• Andere pagina's.

User story

Ik lees de website met een schermlezer. Bij een afbeelding hoor ik tekens die geen betekenis hebben. Ik verwacht dat de beschrijving van een afbeelding als gewone woorden wordt voorgelezen.

Hoe te testen

Bekijk de tekstalternatieven op de pagina met de WCAG Radar of met axe DevTools. Let op overbodige tekens, zoals liggende streepjes, koppeltekens, bestandsextensies of overgenomen bestandsnamen. Luister met een schermlezer of het tekstalternatief als gewone taal klinkt.

Oplossing

Haal de overbodige tekens uit het tekstalternatief, bijvoorbeeld "Logo van Vooruit in Drenthe".

#6 - Een fout wordt alleen met kleur aangegeven

Vul je in het veld "E-mailadres" een onjuist adres in, bijvoorbeeld alleen "t", dan krijgt het veld een rode rand. Er komt geen tekst en geen icoon bij. Bezoekers die kleuren slecht onderscheiden of slechtziend zijn, zien de kleurverandering niet en weten dan niet welk veld fout is.

User story

Ik kan kleuren slecht onderscheiden. Als ik een formulier invul en een fout maak, zie ik alleen een rode rand en weet ik niet welk veld fout is. Ik verwacht dat een fout ook met een icoon of tekst wordt aangegeven.

Hoe te testen

Verstuur het formulier met lege of onjuiste velden, zodat de foutmeldingen verschijnen. Open daarna de WCAG Radar en zet de optie "Grijstinten" aan. Kijk of de velden met een fout en de verplichte velden zonder kleur nog opvallen. Daarvoor is een tweede kenmerk nodig: tekst, een icoon, een onderstreping of een patroon.

Oplossing

Geef een fout ook aan zonder kleur. Zet bij het veld een foutmelding in tekst die zegt wat er mis is, bijvoorbeeld "Vul een geldig e-mailadres in", eventueel met een icoon ervoor.

#7 - Te weinig contrast van tekst

Onder de kop "Contactpersonen" staan groene (#518413) teksten "Vacatureinhoud" op een lichtgroene (#e7ece4) achtergrond. De contrastverhouding is 3,8:1. Dat is te laag, en niet alle bezoekers kunnen deze tekst goed lezen.

Zie ook:

• https://www.vooruitindrenthe.nl/vacatures/jeugdconsulent/e0619320-182e-4944-bf4b-06f95a174dfe
• https://www.vooruitindrenthe.nl/vacatures/meewerkstage-buitendienst/d5a588f0-3bea-468c-91bb-7616fc20e660

User story

Ik ben slechtziend. Als tekst te weinig contrast heeft met de achtergrond, kan ik die moeilijk lezen. Ik verwacht dat tekst genoeg contrast heeft om hem makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt vanzelf gemarkeerd. Bij tekst op een foto of een kleurverloop meet je met de twee pipetten de kleur van de tekst en van de achtergrond. Normale tekst heeft minimaal 4,5:1 nodig, grote tekst (vanaf 24 px, of vanaf 18,7 px vet) minimaal 3,0:1.

Oplossing

Deze tekst is kleiner dan 19 px. Zorg voor een contrastverhouding van minimaal 4,5:1.

#8 - De leesvolgorde klopt niet

In de informatie over de werkgever staat de afbeelding in de HTML boven de kop. De volgorde is nu: afbeelding, kop, tekst, link. Staan er op een pagina meerdere blokken met een afbeelding, een kop en tekst, dan hoort de kop als eerste in de HTML te staan. De volgorde wordt dan: kop, afbeelding, tekst. Een schermlezer leest de inhoud dan onder de kop voor waar die bij hoort, hoe de blokken er ook uitzien.

Zie ook:

• https://www.vooruitindrenthe.nl/vacatures/jeugdconsulent/e0619320-182e-4944-bf4b-06f95a174dfe
• https://www.vooruitindrenthe.nl/vacatures/meewerkstage-buitendienst/d5a588f0-3bea-468c-91bb-7616fc20e660
• https://www.vooruitindrenthe.nl/vacatures/strategisch-adviseur-openbare-orde-en-veiligheid/65f44485-bd28-42e1-85d9-0d89b3d03a30
• Andere pagina's.

User story

Ik lees de website met een schermlezer. Bij de informatie over de werkgever hoor ik afbeeldingen en tekst in een volgorde zonder duidelijk begin. Ik verwacht dat alle informatie die bij een kop hoort onder die kop staat, zodat ik weet welke inhoud bij welke kop hoort.

Hoe te testen

Zet de stijlbladen uit in de ontwikkelaarstools en lees de pagina van boven naar beneden. De volgorde moet dan nog steeds logisch zijn. Let vooral op lijsten met berichten, waar datum, afbeelding en titel van plaats kunnen wisselen.

Oplossing

Zet de elementen in de HTML in een andere volgorde, zodat de kop als eerste staat.

#9 - Een kop staat niet als kop in de code

Op deze pagina staan teksten die eruitzien als een kop, maar die niet als kop in de code staan. Het gaat onder andere om "Twee gemeenten, één organisatie", "Medewerkers in hun kracht zetten" en "Persoonlijke ontwikkeling met S.K.I.K.". Koppen laten zien hoe de informatie op de pagina is opgebouwd. Staan ze niet als kop in de code, dan missen bezoekers met een schermlezer die opbouw.

Zie ook:

• https://www.vooruitindrenthe.nl/vacatures/jeugdconsulent/e0619320-182e-4944-bf4b-06f95a174dfe: onder andere "Wat ga je doen?", "Wat vragen wij?" en "Wie ben jij?".
• https://www.vooruitindrenthe.nl/vacatures/meewerkstage-buitendienst/d5a588f0-3bea-468c-91bb-7616fc20e660: onder andere "Team ROVA", "Meewerkstage buitendienst" en "Wat ga je doen?".
• https://www.vooruitindrenthe.nl/vacatures/strategisch-adviseur-openbare-orde-en-veiligheid/65f44485-bd28-42e1-85d9-0d89b3d03a30: onder andere "Jouw advies doet ertoe", "De strategische opgave" en "Dit ga je doen".
• Andere pagina's.

User story

Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de inhoud van de pagina te scannen, en ik ga van kop naar kop. Staat een kop niet als kop in de code, dan mis ik dat deel van de pagina en kan ik minder makkelijk navigeren.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan.

1. Zoek op de pagina alle teksten die eruitzien als een kop: groter, vetter, in een andere kleur of op een opvallende plek.
2. Kijk of de WCAG Radar bij al deze teksten een kopniveau laat zien. Is dat niet zo, dan staat de tekst niet in een h1 tot en met h6.
3. Controleer het met een schermlezer: ga met de toets H (NVDA, JAWS) of met de rotor (VoiceOver) langs de koppen. Elke tekst die eruitziet als een kop moet als kop worden voorgelezen.

Oplossing

Zet deze teksten in een kopelement van h2 tot en met h6, op het niveau dat past bij hun plaats in de inhoud.

#10 - Een lijst staat niet als lijst in de code

Op deze pagina staan de links naar sociale media er als een lijst uit, maar in de code is het geen lijst: de elementen ul, ol en li ontbreken. Een schermlezer kan dan niet melden dat het een lijst is en ook niet hoeveel onderdelen erin staan.

User story

Ik lees de website met een schermlezer. Als informatie als lijst wordt getoond, wil ik dat ook horen. Ik verwacht dat mijn schermlezer meldt dat het een lijst is en hoeveel onderdelen erin staan.

Hoe te testen

Bekijk de pagina met een schermlezer of met de ontwikkelaarstools van de browser. Controleer of teksten die eruitzien als een lijst in de code de elementen ul, ol en li hebben.

Oplossing

Zet de links in een ul-element en elke link in een eigen li-element.

#11 - Automatisch gemaakte ondertiteling

Op deze pagina staat een video. De video heeft ondertiteling, maar die is automatisch gemaakt en bevat fouten. Ondertiteling moet precies weergeven wat er gezegd wordt, zodat bezoekers die doof of slechthorend zijn de video kunnen volgen.

User story

Ik kan de video niet horen. De automatische ondertiteling bevat fouten en mist leestekens, dus ik kan er niet op vertrouwen. Ik verwacht dat de ondertiteling precies weergeeft wat er gezegd wordt.

Hoe te testen

Zoek elke vooraf opgenomen video met geluid en zet de ondertiteling aan in de speler. Bekijk de video en controleer of de ondertiteling alle gesproken tekst en belangrijke geluiden bevat, of sprekers die niet in beeld zijn bij naam worden genoemd, en of de ondertiteling in dezelfde taal is als de gesproken tekst.

Oplossing

Zorg voor ondertiteling die precies weergeeft wat er in de video gezegd wordt.

#12 - Visuele informatie in de video is niet toegankelijk

In de video op deze pagina staat rond 0:05 de tekst "Leonie Kooiker / HR Adviseur" in beeld. De naam en de functie worden niet uitgesproken, en er is geen audiodescriptie of media-alternatief. Blinde bezoekers missen deze informatie.

User story

Ik kan de video niet zien. Als er tekst in beeld staat, mis ik die informatie. Ik verwacht een audiodescriptie die deze informatie voorleest.

Hoe te testen

Controleer bij elke vooraf opgenomen video met geluid of er een audiodescriptie is, of dat de gesproken tekst de visuele informatie al noemt. Een tekstversie alleen is op niveau AA niet genoeg. Zet de audiodescriptie aan en controleer of dat met het toetsenbord en met een schermlezer kan.

Oplossing

Voeg een audiodescriptie toe die de naam en de functie noemt.