Rapport:
Audit digitale toegankelijkheid Werkgeversservicepunt Drenthe

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/default.aspx en alle andere onderzochte webpagina's (behalve het inlogscherm) staat in het hoofdmenu een icoon met drie liggende streepjes, waarmee een menu geopend kan worden. Dit icoon is functioneel en heeft een tekstalternatief nodig, zodat mensen die blind zijn ook kunnen begrijpen wat dit icoon doet. Dit geldt ook voor het icoon van een kruis dat getoond wordt als het menu geopend is. Let op: dit icoon is nu niet met het toetsenbord te bedienen, zie 2.1.1.

Op pagina https://www.wspdrenthe.nl/default.aspx en alle andere onderzochte webpagina's (behalve het inlogscherm) staan twee iconen in de footer, onder "Volg ons op sociale media". Deze iconen zijn links en hebben daarom een tekstalternatief nodig dat aangeeft waar de links naartoe gaan. Zie ook 2.4.4 voor een toelichting en mogelijke oplossing.

Op pagina https://www.wspdrenthe.nl/default.aspx staan onder "Nieuws", "Verhalen" en "Projecten" afbeeldingen die allemaal een link zijn. Dit zijn daarmee functionele afbeeldingen die tekstalternatieven nodig hebben die aangeven waar de afbeeldingen naartoe linken. Zie ook 2.4.4 voor een toelichting en mogelijke oplossingen.

Op pagina https://www.wspdrenthe.nl/nieuws+wspd/1267976.aspx staan drie informatieve afbeeldingen zonder tekstalternatief. Dit houdt in dat mensen die blind zijn de informatie in deze afbeeldingen missen. Het gaat om de afbeelding met de logo's van Gezond in Drenthe, Provincie Drenthe en Interreg; de afbeelding van de tabel en de afbeelding over duurzame inzet.
De eerste afbeelding geeft aan wie de afzenders zijn. Dit kan eventueel in de alternatieve tekst geplaatst worden, maar let op: deze afbeelding is ook verborgen via aria-hidden="true". Dit moet dan ook verwijderd worden. Als alternatief kan deze informatie ook op de pagina geplaatst worden.
Bij de tweede afbeelding kan de informatie uit de tabel niet in de alternatieve tekst van de afbeelding gezet worden. Deze tabel kan daarom beter als echte tabel op de pagina gezet worden en niet als afbeelding.
Bij de derde afbeelding kan de informatie uit de afbeelding worden uitgeschreven op de pagina. Dan kan de afbeelding zelf een alternatieve tekst krijgen die verwijst naar de uitgeschreven tekst. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat onder de titel een grote afbeelding. Deze afbeelding heeft ook een alternatieve tekst die goed omschrijft wat op de afbeelding te zien is. Deze afbeelding is echter verborgen voor hulpsoftware vanwege aria-hidden="true". Hierdoor is deze afbeelding niet beschikbaar voor mensen die blind zijn. Dit komt vaker voor, bijvoorbeeld op pagina https://www.wspdrenthe.nl/projecten/2568947.aspx.

Op pagina https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx wordt een CAPTCHA-afbeelding gebruikt. Er wordt een toegankelijk alternatief aangeboden waarvoor bezoekers een e-mailadres moeten geven en eventueel andere privacygevoelige informatie. Het volgen van deze procedure valt buiten de scope van dit onderzoek en is daarnaast door de aard van de procedure geen toegankelijk alternatief.

In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 staan twee afbeeldingen van het logo van Werkgevers Servicepunt Drenthe en een afbeelding van een QR-code. Deze informatieve afbeeldingen hebben een tekstalternatief nodig dat aangeeft wat op de afbeeldingen staat. Bij de logo's kan dit bijvoorbeeld "Logo Werkgevers Servicepunt Drenthe" zijn. Bij de afbeelding van de QR-code kan bijvoorbeeld "QR-code" en het linkdoel in het tekstalternatief staan.

In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 staat vooraan in de codes een achtergrondafbeelding zonder tekstalternatief. Deze afbeelding is decoratief en moet daarom uit de codes gehaald worden. Mocht dit niet mogelijk zijn, dan moet de afbeelding wel een tekstalternatief krijgen.

Advies: Op meerdere pagina's, waaronder pagina https://www.wspdrenthe.nl/default.aspx, staan afbeeldingen met tekstalternatieven die beginnen met "Foto (van)" of "Afbeelding (van)". Dit is overbodige informatie, omdat een screenreader al aan de gebruiker presenteert dat het een afbeelding is. Deze tekst kan daarom beter verwijderd worden.

Advies: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat het logo van "Iedereen doet mee". In principe zijn logo's altijd informatief en hebben zij een tekstalternatief nodig. Deze afbeelding heeft nu echter geen alternatieve tekst en dit kan daarom beter wel toegevoegd worden. Dit is nu niet afgekeurd, omdat op de pagina al meerdere keren "Iedereen doet mee" staat. Dat zijn alternatieven voor de informatie in deze afbeelding.

Advies: Op pagina https://www.wspdrenthe.nl/agenda/default.aspx staan in de tabel meerdere iconen van kalenders. Deze iconen lijken niet informatief te zijn, omdat ze allemaal hetzelfde zijn (afgezien van de kleur, zie 1.4.1) en hebben dan ook geen tekstalternatief nodig. Als deze iconen wel informatief zijn, bijvoorbeeld als zij een type agenda-onderdeel weergeven, dan moeten ze wel een tekstalternatief krijgen dat dit beschrijft.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video met een automatische ondertiteling. Dit gaat voor een groot deel goed, maar niet overal. Zo zegt de spreker rond 0:30 "…onze dienstverlening aan jongeren…", terwijl in de ondertiteling "…onze en jongeren…" staat. Rond 0:44 zegt de spreker "…om leden bij elkaar te brengen…". Hier is de ondertiteling "…om lenen bij elkaar te brengen…". Dit is aan te passen door de video te bewerken in YouTube Studio.

Advies: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video met een automatische ondertiteling. Hierin komen verschillende mensen aan het woord. In de ondertiteling zijn geen leestekens zoals punten en komma's gebruikt. Het toevoegen van deze leestekens kan de leesbaarheid bevorderen.

Advies: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video. Aan het begin is het geluid van een telefoon te horen. Mensen die doof of slechthorend zijn missen dit geluid nu. Dit kan worden toegevoegd aan de ondertiteling. Dit is echter niet noodzakelijk, omdat dit geluid niet nodig is om de video te kunnen begrijpen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video met visuele informatie. Het gaat bijvoorbeeld om het logo die in beeld komt aan het begin van de video en de namen en functies van de sprekers die tijdens de video aan het woord zijn. Mensen die blind of slechtziend zijn, missen deze informatie en daarom moet hier een alternatief voor komen. Volgens dit succescriterium kan dit op twee manieren, namelijk via een (extra) audiospoor (audiodescriptie) of via een uitgeschreven tekst (transcript). Zie ook 1.2.5.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video met visuele informatie. Het gaat bijvoorbeeld om het logo dat in beeld komen aan het begin van de video. Mensen die blind of slechtziend zijn, missen deze informatie en daarom moet hier een alternatief voor komen. Dit succescriterium lijkt op 1.2.3, maar nu is een uitgeschreven tekst niet meer mogelijk. De missende visuele informatie moet via een audiodescriptie toegankelijk zijn. Dit hoeft niet een extra geluidsspoor te zijn, maar dit kan ook via bijvoorbeeld een voice-over.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/default.aspx staan twee koppen van niveau 2 direct na elkaar, namelijk "#VANWENSNAARMENS" en "Kijk met een nieuw perspectief…". Koppen van hetzelfde niveau mogen elkaar niet direct opvolgen, omdat hiermee de eerste kop geen content eronder heeft. Dit kan opgelost worden door de tweede kop een niveau te verlagen. Dit komt verderop op de pagina ook voor bij "Nieuws", "Verhalen" en "Projecten".

Op pagina https://www.wspdrenthe.nl/nieuws+wspd/1267976.aspx zijn kopteksten visueel herkenbaar doordat ze schuingedrukt zijn. Deze teksten zijn echter niet als kop opgemaakt, maar als tekst die nadruk krijgt. Dit komt doordat het em-element is gebruikt in plaats van h2 of h3. Het em-element is bedoeld om één of meerdere woorden de nadruk te geven en niet om koppen mee aan te duiden.

Op pagina https://www.wspdrenthe.nl/nieuws+wspd/2076233.aspx zijn kopteksten goed opgemaakt met kopelementen h4. Deze teksten zijn echter ook opgemaakt met de elementen strong en em. Deze elementen geven aan dat deze teksten nadruk nodig hebben en dat is hier niet de bedoeling. Dit geldt ook voor de tekst onder de kop "Social Return On Investment (SROI)". Deze tekst is nu onterecht opgemaakt met het em-element. Dit hoort via CSS of eventueel het i-element opgemaakt te worden.

Op pagina https://www.wspdrenthe.nl/nieuws+wspd/1267976.aspx staat onder "Aandacht voor mantelzorg levert betere cijfers op:" een opsommingslijst met drie onderdelen. Dit is niet als opsommingslijst (ul-element met li-elementen) opgemaakt en dat is wel nodig, zodat hulpsoftware dit ook als een opsommingslijst kan presenteren aan de gebruiker.

Op pagina https://www.wspdrenthe.nl/default.aspx en de vervolgpagina's zijn de onderdelen van het hoofdmenu niet opgemaakt als navigatie (bijvoorbeeld via het nav-element) of een lijst, maar slechts als een aantal losse links. De relatie tussen deze onderdelen onderling en met de rest van de pagina is daardoor niet door software te bepalen. Maak hier een nav-element van of een ul-element met meerdere li-elementen.

Op pagina https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd staat een video in een iframe. Dit iframe heeft de naam "Video" en dat geeft niet duidelijk aan waar de video over gaat. Dit moet dus aangepast worden, zodat mensen die blind of slechtziend zijn ook kunnen begrijpen waar de video over gaat.

Op pagina https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staan drie select-elementen onder het label "Geboortedatum". Hier is het label "Geboortedatum" gekoppeld aan het select-element met de waarde "Kies dag" via de attributen "for" en "id". Daardoor is niet voor iedereen duidelijk dat hier een dag ingevuld moet worden. Verwijder deze relatie tussen het label en dit select-element. Let op: "Geboortedatum" moet wel binnen het legend-element blijven staan, omdat hiermee de relatie tussen deze tekst en de drie select-elementen duidelijk gemaakt wordt.

De PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2550796 is niet gecodeerd en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van deze bevinding nieuwe toegankelijkheidsbevindingen kunnen ontstaan.

De PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 is wel gecodeerd, maar hier zijn een paar problemen mee. Zo zijn alle kopteksten van "Dé training om…" tot en met "Aanmelden" niet opgemaakt als koppen (h1, h2 etc.). Ook zijn sommige stukken content die bij elkaar horen gesplitst in meerdere codes. Zie bijvoorbeeld de codes "Dé training om de" en "ideale collega op de werkvloer…". Dit hoort in één code te staan. Dit gebeurt ook bij de tekst hier direct onder. Andersom gebeurt ook: onder "Voordelen" staan de teksten "Leren van andere Harries…" en "Relevante gesprekstechnieken…" in één code, maar dit moeten twee afzonderlijke codes zijn.

Advies: Op de volgende pagina's worden koppen gebruikt en dat is goed. In de koppenstructuur worden echter niveaus overgeslagen. Zo wordt bijvoorbeeld van h1 (niveau 1) direct naar h3 of h4 (niveau 3 of 4) gesprongen. Dit is geen fout in de zin van WCAG, maar dit kan wel verwarrend zijn voor gebruikers die via koppen door de pagina's navigeren. Dit kan vaker voorkomen.
https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx,
https://www.wspdrenthe.nl/nieuws+wspd/1891234.aspx,
https://www.wspdrenthe.nl/nieuws+wspd/2076233.aspx,
https://www.wspdrenthe.nl/werkgevers/regelingen/default.aspx

Advies: Op pagina https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staan drie select-elementen onder het label "Geboortedatum". Zij hebben alledrie een title-attribuut gekregen die een naam geeft aan de elementen. Dit title-attribuut wordt echter niet in alle hulpsoftware goed ondersteund en daarom is het beter om hier een andere oplossing voor te vinden. Bijvoorbeeld door het toevoegen van visueel zichtbare en gekoppelde labels (zie 3.3.2) of door de title-attributen te wijzigen naar aria-label-attributen.

Uitkomst: Onvoldoende

Bevindingen: In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 is één probleem met de leesvolgorde gevonden. Onder "Reacties van een deelnemer" komen eerst de aanhalingstekens voor het openen van de quote. Vervolgens komt de afbeelding van de QR-code in de leesvolgorde en daarna pas de tekst van de quote. Hierna komt de tekst "Lees meer Harrie verhalen". Laatstgenoemde tekst hoort echter bij de QR-code. Dit kan worden opgelost door de afbeelding te verplaatsen naar een plek tussen de quote en de tekst "Lees meer Harrie verhalen".

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/projecten/2568947.aspx staat een formulier. De invoervelden voor "Organisatie" tot en "E-mail" vragen om gegevens van de gebruiker. Het moet mogelijk zijn om deze gegevens automatisch in te vullen en dat is nu niet het geval. Dit kan worden opgelost door het attribuut autocomplete te voorzien van de juiste waarde. Dit attribuut is wel aanwezig, maar bevat geen waarden. Zie pagina https://www.w3.org/Translations/WCAG21-nl/#input-purposes voor een overzicht van alle benodigde velden en waarden.

Op pagina https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staat ook een formulier waarin naar gegevens van de gebruiker worden gevraagd. Bij veel invoervelden is het autocomplete-attribuut toegevoegd, maar hier zijn nog een aantal problemen mee. In het eerste tabblad "Account" is bij "Achternaam" de waarde van het autocomplete-attribuut "last-name". Dit is echter geen geldige waarde. Dit moet "family-name" zijn. De select-elementen bij "Geboortedatum" hebben ook het autocomplete-attribuut nodig met de waarden "bday-day", "bday-month" en "bday-year". In het tweede tabblad "Adres" staat bij "Land" het autocomplete-attribuut met de waarde "country". Deze waarde moet "country-name" zijn. In het derde tabblad "Organisatie" moet het autocomplete-attribuut met de juiste waarde worden toegevoegd bij "Organisatie / afdeling" en "Functie".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/agenda/default.aspx is de optie "Toegankelijke lijstweergave" gebruikt. Hierbij is een probleem gevonden met het gebruik van kleur. In de tabel met agenda-onderdelen is de titel van een onderdeel een link. Dit is momenteel visueel alleen door middel van kleur duidelijk gemaakt. Mensen die slechtziend of kleurenblind zijn, missen deze informatie. Linkteksten mogen alleen via kleur onderscheiden worden van omringende tekst als de linkkleur een contrast heeft van minimaal 3,0:1 met de omringende tekst én als er een andere visuele hint is als met de muis over de link wordt gegaan. Aan beide voorwaarden wordt echter niet voldaan. Het contrast tussen de linktekst (#FF0020) en de omringende tekst (HEX #555555) is met 1,9:1 te laag. Als met de muis over de linktekst wordt gegaan, verandert deze alleen van kleur. Dit is op te lossen door de linktekst standaard te onderstrepen, maar andere oplossingen zijn ook mogelijk.

Advies: Op pagina's https://www.wspdrenthe.nl/default.aspx, https://www.wspdrenthe.nl/agenda/default.aspx en https://www.wspdrenthe.nl/intranet/strategisch+managersoverleg/agenda+strategisch+managersoverleg/2738956.aspx worden verschillende kleuren gebruikt voor de agenda-onderdelen. Op de eerste pagina staat dit onder "Agenda" als achtergrondkleur bij de data, op de tweede pagina komt dit voor als achtergrondkleur bij het kalender-icoon en op de derde pagina is dit een gekleurde bol vóór de eerste koptekst. Hier lijkt informatie alleen via kleur te worden overgedragen en dat is niet toegestaan. Dit is nu echter niet afgekeurd, omdat deze informatie nu voor niemand duidelijk is.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op vrijwel alle pagina's en op meerdere plekken wordt de kleurencombinatie rood (HEX #FF0020) en wit (HEX #FFFFFF) gebruikt. Bijvoorbeeld bij de linkteksten op pagina's https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx, https://www.wspdrenthe.nl/werkgevers/regelingen/default.aspx en https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd; de kopteksten op pagina's https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx en https://www.wspdrenthe.nl/over+ons/team/default.aspx en de linkteksten in de footer. Deze kleurencombinatie heeft een contrast van minder dan 4,0:1. Voor teksten die kleiner zijn dan 24 pixels (of 19 pixels bij dikgedrukte teksten) is een minimaal contrast van 4,5:1 vereist. Dit is dus niet overal voldoende.

In de footer op pagina https://www.wspdrenthe.nl/default.aspx en vrijwel alle andere webpagina's staat de grijze tekst "Volg ons op sociale media" (HEX #555555) op een rode achtergrond (HEX #FF0020). Deze tekst heeft een te laag contrast. De contrastverhouding is 1,9:1 waar dit 4,5:1 moet zijn.

Op meerdere pagina's, waaronder https://www.wspdrenthe.nl/default.aspx, staat een bannerafbeelding met daarop witte tekst. Het contrast van deze witte tekst op de achtergrondafbeelding is niet altijd voldoende. Dit kan opgelost worden door deze tekst een schaduwrand te geven. Dat is al gedaan bij de grote tekst, maar niet bij de kleine tekst.

Op pagina https://www.wspdrenthe.nl/nieuws+wspd/2076233.aspx staat een blauwe kleur tekst (HEX #3498DB) op een witte achtergrondkleur (HEX #FFFFFF). Deze tekst heeft een te laag contrast. De contrastverhouding is 3,2:1 waar dit 4,5:1 moet zijn.

Op meerdere pagina's, waaronder https://www.wspdrenthe.nl/werkzoekenden/ervaringsverhalen/default.aspx en https://www.wspdrenthe.nl/projecten/2603522.aspx?t=Conferentie-%e2%80%98Iedereen-doet-mee%e2%80%99-meer-dan-geslaagd kan een ingelogde gebruiker een pagina leuk vinden. Dan kleur een hart-icoon groen en staat er een groen cijfer achter. Deze groene tekst (HEX #0E8A2D) heeft een contrast van net geen 4,5:1. Dit geldt ook voor de tekst "Volgend" die op de pagina's kan staan.

Op pagina https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staat onder "Persoonlijke links" een knop met witte tekst op een groene achtergrond (HEX #0E8A2D) met een contrast van net geen 4,5:1. Als hier met de muis overheen wordt gegaan, is het contrast nog lager.

Op meerdere pagina's, waaronder https://www.wspdrenthe.nl/over+ons/team/default.aspx en https://www.wspdrenthe.nl/intranet/strategisch+managersoverleg/agenda+strategisch+managersoverleg/2738956.aspx, staan aan de linkerkant vóór de hoofdcontent grijze teksten (HEX #9D9D9D) op een witte achtergrond (HEX #FFFFFF). Deze teksten hebben een te laag contrast van 2,7:1 waar dit minimaal 3,0:1 moet zijn. Dit zijn namelijk grote teksten.

Op pagina https://www.wspdrenthe.nl/agenda/default.aspx staan onder "Neem contact met ons op!" rode linkteksten (HEX #FF0020) op een grijze achtergrond (HEX #E5E5E5) met een te laag contrast van 3,2:1. Dit kan vaker voorkomen.

Op pagina https://login.mett.nl/Account/Login staat de rode tekst "Wachtwoord vergeten?" (HEX #FF0020) op een grijze achtergrond (HEX #F2F2F2). Deze tekst heeft een te laag contrast van 3,6:1 op de achtergrond.

Op pagina https://login.mett.nl/Account/Login staat onder het logo de link "Home". Dit is witte tekst op een witte achtergrond die nu geen contrast heeft. Alleen als met de muis over deze link wordt gegaan, is deze zichtbaar, maar ook dan heeft de witte tekst een te laag contrast op de rode achtergrondkleur (zie eerdere bevinding over deze kleurencombinatie).

Als wordt ingezoomd naar 200% en 400% bij een schermbreedte van 1280 pixels, treedt een contrastprobleem op bij de menu-onderdelen "Werkgevers", "Werkzoekenden" en "Inloggen" in het hoofdmenu. Deze zwarte teksten (HEX #000000) krijgen dan een donkergrijze achtergrond (HEX #2D2223). Deze kleurencombinatie heeft een te laag contrast van 1,4:1.

Als de website wordt bekeken bij een schermbreedte van 320 pixels, zijn de menu-onderdelen verplaatst onder de knop "Menu". Wanneer deze wordt geopend, zijn er meerdere witte (link)teksten op een witte achtergrond, die dan dus helemaal geen contrast met elkaar hebben. Het gaat om de onderdelen in het topmenu ("Inloggen" of "Favorieten" tot en met "Contact") en de onderdelen in het submenu ("Over ons" tot en met "Nieuws" of "Intranet").

In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 staat onderaan het document de witte tekst "Meld je aan voor…". Deze tekst heeft een contrast van 4,4:1 op de rode achtergrond (HEX #ED1C29). Dit is net te laag, want dit moet minimaal 4,5:1 zijn. Let op: dezelfde kleurencombinatie wordt gebruikt voor de teksten "Hulpvaardig" tot en met "Eerlijk" en de kopteksten "Waarom een HARRIE training?" tot en met "Aanmelden". Deze teksten worden echter gezien als grote tekst. Voor grote tekst is minimaal een contrast van 3,0:1 vereist, dus hier is het contrast wel voldoende.

In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2550796 staan de rode teksten (HEX #FF0020) "Je moet als leidinggevende…" en "Je accountmanager van…" op een grijze achtergrond (HEX #E5E5E5) met een te laag contrast van 3,2:1. Dit moet minimaal 4,5:1 zijn.

In de PDF op pagina https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2550796 staat vooraan de witte tekst "Anders kijken, anders doen" op een achtergrondafbeelding. Het contrast van deze tekst op de achtergrond is niet overal voldoende. Bijvoorbeeld bij de laatste "en" is dat ongeveer 2,2:1. Voor deze grote tekst moet dat minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Als de website wordt ingezoomd tot 200% bij een schermbreedte van 1280 pixels, valt in de grote bannerafbeelding bovenaan op pagina https://www.wspdrenthe.nl/default.aspx (en andere pagina's met een dergelijke afbeelding) de tekst "…Doe mij nog maar 10…" over de link "Lees het verhaal van Wout". Die link is daardoor niet meer goed leesbaar en niet meer bedienbaar. In de browser Edge valt een deel van de genoemde tekst weg onder de rode balk met de tekst "VANWENSNAARMENS".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/default.aspx staan naast de koptekst "Kijk met een nieuw perspectief naar je personeelswensen!" twee afbeeldingen van tekst. Het gaat om de afbeelding met de tekst "#VAN WENS" en de afbeelding met de tekst "NAAR MENS". Voor mensen die slechtziend zijn is het nodig dat dit als echte tekst op de pagina staat, zodat zij deze tekst kunnen aanpassen naar wat voor hen leesbaar is. Dit is nu niet het geval. Deze tekst staat wel ongeveer in dezelfde vorm boven de hierboven genoemde koptekst. Dit is echter geen voldoende alternatief, omdat hier de relatie met de content onder de afbeeldingen niet duidelijk is.

Op pagina https://www.wspdrenthe.nl/intranet/default.aspx en andere pagina's van het intranet staat een bannerafbeelding met daarin de tekst "Werkt!". Dit is een afbeelding van tekst. Deze tekst moet als echte tekst op de pagina's geplaatst worden om toegankelijk te zijn voor mensen die slechtziend zijn.

Uitkomst: Onvoldoende

Bevindingen: Als de website wordt ingezoomd tot 400% bij een schermbreedte van 1280 pixels, komen de onderdelen in het hoofdmenu terecht onder de knop voor het tonen van de sub-onderdelen. Deze sub-onderdelen zijn daarnaast ook niet zichtbaar als deze knop geactiveerd wordt. Dit komt voor op pagina https://www.wspdrenthe.nl/default.aspx en andere pagina's op de website.

Op pagina https://www.wspdrenthe.nl/intranet/default.aspx en andere pagina's van het intranet valt het broodkruimelpad deels weg achter het hoofdmenu. De bannerafbeelding is nu ook helemaal verborgen.

Op pagina https://www.wspdrenthe.nl/projecten/2568947.aspx staat een formulier in een iframe. De inhoud van dit formulier valt deels buiten het scherm. Let op dat horizontaal scrollen hier geen oplossing is.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/werkgevers/regelingen/default.aspx staat een headerafbeelding met daarop onder andere de tekst "Het gaat er niet om wat je kunt, het gaat erom dat je wilt". Als de tekstafstanden uit dit succescriterium worden toegepast bij een schermbreedte van 1280 pixels, valt het laatste deel van deze tekst weg achter de hoofdcontent op de pagina. Dit kan ook op andere pagina's voorkomen en kan worden opgelost door de hoogte van het element met de afbeelding en tekst dynamisch te laten vergroten.

Op pagina https://www.wspdrenthe.nl/intranet/telefoongids/default.aspx kunnen filteropties getoond worden. Als de tekstafstanden uit dit succescriterium worden toegepast bij een schermbreedte van 1280 pixels, valt onder "Filter op…" het laatste deel van de optie "Toon alle gebruikers" weg.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van het domein wspdrenthe.nl staat in het hoofdmenu een icoon met drie liggende streepjes. Dit kan via de muis geactiveerd worden om een menu te tonen. Dit is echter niet mogelijk met het toetsenbord, omdat dit icoon niet bereikt kan worden met het toetsenbord. Dit wordt waarschijnlijk veroorzaakt doordat dit geen button-element is. Let op: het toevoegen van role="button" aan dit div-element maakt dit nog niet toetsenbordtoegankelijk. Dit is ook afgekeurd bij 4.1.2. Let op dat dit onderdeel nu dus ook niet volledig onderzocht kan worden en dat er nieuwe problemen kunnen ontstaan als dit wordt aangepast.
Bij een breedte van 320 pixels verschijnt een andere menu-knop. Deze is wel met het toetsenbord te bedienen.

Advies: Op pagina https://www.wspdrenthe.nl/shortcuts/Users_ShowProfile.aspx staat onder de gebruikersnaam de knop "Wie ziet mijn gegevens?". Deze knop is niet met het toetsenbord te bereiken en te bedienen. Dit is echter niet afgekeurd, want boven de gebruikersnaam staat ook een knop met dezelfde naam en deze knop kan wel bereikt en bediend worden met het toetsenbord. Het zou goed zijn om beide knoppen toegankelijk te maken voor toetsenbordgebruikers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina's https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx en https://www.wspdrenthe.nl/projecten/2568947.aspx staat een formulier met een captcha. Op deze test zit een tijdslimiet van ongeveer 2 minuten. Voor tijdslimieten geldt dat de bezoeker die moet kunnen uitzetten, aanpassen of verlengen. Dat is nu niet het geval.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: Pagina https://www.wspdrenthe.nl/default.aspx en de meeste andere onderzochte pagina's hebben geen main-element. Dit element wordt vaak gebruikt om aan te geven waar de hoofdcontent zich bevindt en kan gebruikt worden om direct naartoe te navigeren. Er is al een andere manier om naar deze hoofdcontent te navigeren, namelijk via een zogenaamde skiplink. Daarom is het toevoegen van een main-element niet noodzakelijk, maar dit verbetert wel de gebruiksvriendelijkheid.

Uitkomst: Onvoldoende

Bevindingen: PDF-documenten hebben een documenttitel nodig in de bestandseigenschappen. De PDF's op pagina's https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2568253 en https://www.wspdrenthe.nl/nieuws+wspd/bijlagen+bij+nieuws/handlerdownloadfiles.ashx?idnv=2550796 missen hier echter een titel. Deze moet dus nog worden toegevoegd. De documenttitel moet verder een goede beschrijving zijn van het onderwerp of doel van het document.

Uitkomst: Onvoldoende

Bevindingen: Als de gebruiker is ingelogd, staat op pagina
https://www.wspdrenthe.nl/default.aspx en andere pagina's van dit domein bovenin een persoonlijk menu met de naam van de gebruiker. Als dit menu wordt geopend met het toetsenbord, verschijnt een submenu. Als dit submenu vervolgens wordt gesloten en de gebruiker met het toetsenbord terug navigeert, kan de focus terechtkomen op de onderdelen van het submenu (die nu verborgen zijn). Dat is niet de bedoeling, want de focus mag niet op onzichtbare onderdelen terechtkomen.

Op pagina https://www.wspdrenthe.nl/agenda/default.aspx staan onder de agenda-onderdelen de twee knoppen "Meer tonen" en "Alles tonen". Als deze knoppen geactiveerd worden, verschijnen meer agenda-onderdelen. De focus verplaatst echter naar het eerste agenda-onderdeel dat al zichtbaar was en dat is verwarrend. De focus moet verplaatst worden naar het begin van de nieuw verschenen inhoud.

Op pagina https://www.wspdrenthe.nl/intranet/telefoongids/default.aspx staat een knop "Meer tonen". Als deze knop wordt geactiveerd, blijft de focus op deze knop staan terwijl hierboven nieuwe inhoud is verschenen. De focus moet verplaatst worden naar het begin van de nieuw verschenen inhoud.

Op pagina's https://www.wspdrenthe.nl/shortcuts/Users_ShowProfile.aspx en https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staat een tablist met verschillende tabbladen. Als een tab geopend is of wordt, moet de toetsenbordfocus direct naar de inhoud van dit tabblad gaan en dat is nu niet het geval. Nu gaat de focus eerst langs alle tabbladen voordat het naar de inhoud van het huidige tabblad gaat. Zie ook 4.1.2.

Uitkomst: Onvoldoende

Bevindingen: Op alle onderzochte webpagina's, behalve het inlogscherm, staan twee iconen in de footer, onder "Volg ons op sociale media". Deze iconen zijn links en hebben geen tekstalternatief (zie ook 1.1.1) of andere manier waaruit het doel van de links duidelijk kan worden. Dit kan worden opgelost door de iconen een tekstalternatief te geven zoals "Volg ons op LinkedIn" of door de a-elementen (de links) een title-attribuut te geven met deze waarde. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.wspdrenthe.nl/default.aspx staan onder "Nieuws", "Verhalen" en "Projecten" afbeeldingen als onderdeel van een link. Het doel van deze links kan nu niet bepaald worden. Bij de a-elementen is wel een alt-attribuut gevonden met een goede waarde, maar dit attribuut is niet toegestaan op een a-element. Dit kan op verschillende manieren opgelost worden. Bijvoorbeeld door deze link samen te voegen met de link in de kop of door de afbeelding klikbaar te maken en als decoratief te markeren. Als dit niet mogelijk is, kan het opgelost worden door het alt-attribuut te wijzigen in een title-attribuut of door het alt-attribuut te verplaatsen naar het img-element.
Dit probleem komt ook voor op pagina's https://www.wspdrenthe.nl/werkzoekenden/ervaringsverhalen/default.aspx en https://www.wspdrenthe.nl/intranet/default.aspx. Let erop dat een tekstalternatief voor een afbeelding bij een link moet aangeven waar de link naartoe gaat.

Op pagina https://www.wspdrenthe.nl/over+ons/dienstverlening+wspd/default.aspx staan drie links met de linktekst "Bekijk meer informatie", die allemaal naar andere pagina's gaan. Deze links staan los van de inhoud erboven en kunnen daar dus geen context uit halen. Dit betekent dat het linkdoel van deze links niet duidelijk is. Dit kan worden opgelost door de linktekst aan te passen. Eventueel kan ook extra informatie worden gegeven via het title-attribuut, maar dat wordt niet door alle hulpsoftware goed ondersteund.

Advies: Op pagina https://www.wspdrenthe.nl/default.aspx staat een achtergrondafbeelding achter de tekst "Werkzoekenden en organisaties bij elkaar brengen.". Deze afbeelding is een link naar een niet-bestaande pagina. Daardoor is nu niet duidelijk waar deze afbeelding naartoe hoort te linken. De afbeelding heeft de naam "foto Fenny Bakker van Tandartspraktijk Stationsstraat" (vanwege de alternatieve tekst) en dit wordt ook gebruikt om het linkdoel te bepalen. Dit is mogelijk niet duidelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/intranet/telefoongids/default.aspx staat na "Sorteren" een knop om de weergave te wijzigen. Deze knop heeft het label (of de naam) "Geef de bestanden weer in een compacte lijst". Dit geeft niet duidelijk genoeg aan wat deze knop doet, want er staan geen bestanden op deze pagina. Als deze knop is geactiveerd, verandert het label naar "Geef de gebruikers weer in een uitgebreide lijst". Op dat moment is het label wel duidelijk.

Op pagina https://www.wspdrenthe.nl/shortcuts/Users_ShowProfile.aspx staat boven de gebruikersnaam een knop met het label (of de naam) "Privacy-instellingen wijzigen". Deze knop gaat echter naar de pagina met het onderdeel waar niet alleen de privacy-instellingen kunnen worden gewijzigd, maar alle instellingen. Dit is verwarrend.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.wspdrenthe.nl/shortcuts/sendcontactmessage.aspx is de toetsenbordfocus één keer niet zichtbaar op een interactief element tussen "Gebruik de toegankelijke versie van hCaptcha" en de checkbox naast "Ik ben een mens".

Op pagina https://www.wspdrenthe.nl/shortcuts/Users_ShowProfile.aspx in het tabblad "Mijn favorieten" staan knoppen waarmee de favorieten verplaatst kunnen worden. De focus op deze knoppen is niet overal duidelijk genoeg, omdat deze slechts aan één of beide zijkanten zichtbaar is. Dit is met name een probleem bij de knop die rechts staat.

Een vergelijkbaar probleem komt ook voor op pagina https://www.wspdrenthe.nl/over+ons/dienstverlening+wspd/default.aspx. Hier is de focusindicator op de links "Bekijk meer informatie" ook alleen aan de zijkanten zichtbaar. Dit komt ook voor op pagina https://www.wspdrenthe.nl/default.aspx bij diverse links.

Als de website wordt bekeken bij een schermbreedte van 320 pixels, zijn de menu-onderdelen verplaatst onder de knop "Menu". Wanneer deze wordt geopend en hier met het toetsenbord in wordt genavigeerd, is de toetsenbordfocus op links twee keer niet zichtbaar.

In de browser Edge zijn op pagina https://www.wspdrenthe.nl/over+ons/team/default.aspx de namen en afbeeldingen ook links. De toetsenbordfocus is niet zichtbaar als deze zich op een afbeelding bevindt. In de browser Firefox zijn dit geen links.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staan drie select-elementen onder "Geboortedatum". Deze drie elementen hebben zelf geen zichtbaar label, maar hierbij is wel de huidige waarde zichtbaar, zoals "Kies dag", "Kies maand" en "Kies jaar". Deze waarden kunnen dienen als zichtbaar label, maar het zou beter zijn als elk element een eigen zichtbaar label buiten het element krijgt. Zie ook 1.3.1.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van het domein wspdrenthe.nl staat in het hoofdmenu een icoon met drie liggende streepjes. Dit div-element heeft geen naam en geen rol die door software bepaald kan worden. Zie ook 2.1.1.

Op alle pagina's van het domein wspdrenthe.nl staan in de footer twee iconen met links naar LinkedIn en Facebook. Deze links hebben nu geen toegankelijke naam. Zie ook 2.4.4.

Op pagina https://www.wspdrenthe.nl/projecten/2568947.aspx staat een formulier in een iframe. Dit iframe heeft geen naam die door software bepaald kan worden.

Op pagina's https://www.wspdrenthe.nl/shortcuts/Users_ShowProfile.aspx en https://www.wspdrenthe.nl/Shortcuts/Users_EditProfile.aspx staat een tablist. Deze tablist voldoet niet aan alle eisen zoals omschreven op pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/. Zo heeft het element met role="tablist" geen naam. Ook missen de niet-actieve tabbladen het attribuut aria-selected met de waarde "false". Verder klopt de toetsenbordbediening ook niet, zie ook 2.4.3. Hier kunnen meer problemen mee zijn.

Als de website wordt bekeken bij een schermbreedte van 320 pixels, zijn de menu-onderdelen verplaatst onder de knop "Menu". Deze knop verandert niet van naam of status wanneer bezoekers erop klikken. Zorg ervoor dat de visuele verandering ook doorgegeven wordt aan screenreadergebruikers.

Uitkomst: Voldoende