Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid van website Richting Zuid

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Richting Zuid
Datum 17 februari 2025
Scope van de website Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 78

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de cookiemelding die verschijnt als de bezoeker voor het eerst op de website komt, is het logo te vinden. Dit is een afbeelding die via het alt-attribuut de alternatieve tekst 'logo' heeft gekregen. Dit beschrijft onvoldoende om welk logo het gaat. Pas deze tekst aan, zodat zowel het woord 'logo' als alle tekst die op het logo te zien is hierin terugkomen.

Bevinding 2: In de header van de website staat een logo, toegevoegd als een svg-element. Het title-element ontbreekt. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Er is geprobeerd om het logo een tekstalternatief te geven met het alt="RichtingZuid" attribuut, maar het alt attribuut wordt gebruikt bij img-elementen, in het geval van svg-elementen wordt het tekstalternatief gegeven met het title-element. Zie https://www.richtingzuid.nl/.

Bevinding 3: In de footer van de website https://www.richtingzuid.nl/ staan pictogrammen voor sociale media. Deze iconen zijn informatieve afbeeldingen die als achtergrondafbeeldingen zijn toegevoegd, zonder een tekstalternatief. Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element plaatsen en de informatie in de alt-tekst zetten. Dit probleem is te zien op de pagina https://www.richtingzuid.nl/over-ons/ onder de kop "Dit zijn onze trainees" in een carrousel met meerdere LinkedIn-pictogrammen.

Bevinding 4: Op de homepage https://www.richtingzuid.nl/ staat naast de kop "Thema's waar je aan werkt" een slider. De afbeeldingen in deze slider hebben hetzelfde tekstalternatief "Thema's waar je aan werkt". Afbeeldingen die informatie overbrengen, moeten een beschrijvend tekstalternatief hebben. De alt-tekst van elke afbeelding moet dus uniek en betekenisvol zijn. Zo kan een schermlezer de gelijkwaardige informatie van de afbeelding overbrengen aan een blinde bezoeker.

Bevinding 5: Op de hele website, bijvoorbeeld op de pagina https://www.richtingzuid.nl/over-ons/ in de carrousel onder "Een kijkje achter de schermen bij RichtingZuid" staan afbeeldingen met tekstalternatieven die de tekst van de nabijgelegen koptekst herhalen. Deze afbeeldingen dragen geen andere informatie over dan al in de kopteksten staat. Daarom kunnen ze als decoratief worden beschouwd. Laat het alt-attribuut leeg om herhaling te voorkomen. Het probleem is te vinden op pagina's https://www.richtingzuid.nl/traineeship/ in afbeeldingen onder de kop “Selectieprocedure lichting 2025-2027”,
https://www.richtingzuid.nl/waar-werk-je-aan/ in afbeeldingen van carrousels onder de kopjes “Waar werken trainees aan?” en “Waar werken onze oud-trainees?”,
https://www.richtingzuid.nl/opdrachten/inclusie-van-mensen-met-een-beperking-in-de-gemeente-valkenburg-aan-de-geul/ in afbeeldingen onder de kop “Andere opdrachten” en anderen.

Bevinding 6: Op pagina https://www.richtingzuid.nl/over-ons/ staat onder de kop ‘Waar kom jij als trainee te werken? Dit zijn onze partnerorganisaties!’ een carrousel. Hierin heeft het logo met de zichtbare tekst ‘Beek uw gemeente’ het tekstalternatief ‘Gemeente Beek - RichtingZuid’. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Het probleem doet zich voor op pagina https://www.richtingzuid.nl/organisaties/6020/ in hetzelfde logo in de carrousel onder de kop “Organisaties”.

Bevinding 7: Op pagina https://www.richtingzuid.nl/over-ons/ staan onder de kopjes “Waar kom jij als trainee te werken? Dit zijn onze partnerorganisaties!”, “Dit zijn onze trainees” en “Een kijkje achter de schermen bij RichtingZuid” carrousels met afbeeldingen. In deze carrousels hebben de pictogrammen met de pijl naar rechts geen tekstalternatieven. Als een knop alleen uit een afbeelding bestaat, moet de alt-tekst van die afbeelding op een andere manier dan normaal worden ingevuld. Bij gewone informatieve afbeeldingen komt hier een beschrijving van wat op de afbeelding te zien is. Bij een afbeelding die dienst doet als knop, moet juist beschreven worden wat de bezoeker met de knop kan doen. Als dit niet zo is, kan de schermlezer niet doorgeven wat de functie is van de knop. Dit kan op meerdere manieren worden gedaan: via de alt-tekst van het img-element, een aria-label of een visueel verborgen tekst. Het probleem doet zich voor op pagina https://www.richtingzuid.nl/traineeship/ onder de kop "Deze trainees vertellen je graag meer!" in de linker- en rechterpijlpictogrammen en op pagina https://www.richtingzuid.nl/waar-werk-je-aan/ in dezelfde pictogrammen in carrousels en een dialogvenster met een video.

Bevinding 8: Op de pagina https://www.richtingzuid.nl/traineeship/ naast de kop “Vragen over het traineeship?” staat een video. De video wordt afgespeeld in een dialoogvenster. Wanneer in de rechterbovenhoek de knop "Thumbnails" wordt geactiveerd, verschijnen rechts in dit dialoogvenster de miniaturen. Deze miniaturen zijn toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Gaat het om een decoratieve afbeelding, die geen betekenis overdraagt? Laat dit attribuut dan leeg. Dan staat er alt="". Is het een informatieve afbeelding? Voeg dan een duidelijke beschrijving van de afbeelding toe. Dezelfde kwestie is te vinden op deze pagina onder het kopje “Deze trainees vertellen je graag meer!” en op pagina's https://www.richtingzuid.nl/waar-werk-je-aan/ naast de kop “Generalist of specialist?” in thumbnails in dialoogvenster om de video te bekijken, https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ onder de tekst “Maaike Putters, Karin Tang en Max Jacobs” in afbeeldingen wanneer ze worden geopend in de galerij en hun thumbnails.

Bevinding 9: Op pagina https://www.richtingzuid.nl/regina-koonen-trainee-2019-2021/ onder het kop “Meer blogs van” staat een carrousel. In deze carrousel hebben de afbeeldingen alt-teksten "7947Juridisch medewerker Toezicht en Handhaving - RichtingZuid", "7036Juridisch medewerker Toezicht en Handhaving - RichtingZuid", enzovoort. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt=""). Het probleem is te vinden op pagina's https://www.richtingzuid.nl/richtingzuid-on-tour/ en https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ in afbeeldingen van blogartikellinks onder “Meer blogs van”.

Bevinding 10: Op pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ onder de tekst “Maaike Putters, Karin Tang en Max Jacobs” staat een afbeelding met alt-tekst ">". Afbeeldingen die informatie overdragen moeten een betekenisvolle alt-tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 11: Op de homepage https://www.richtingzuid.nl/ staat naast het kopje "Het RichtingZuid traineeship" een video. De tekst "trainees die Limburg sterker maken" en het logo van "RichtingZuid" verschijnen aan het begin en aan het einde van de video. Ook verschijnen namen en functies van sprekers rond 0:10, 0:41, 1:10, en op anderen momenten. Ook teksten "Wil jij Limburg sterker maken?", "Interesse? Kijk op richtingzuid.nl" zijn te zien aan het einde van de video. Er is geen media-alternatief of audiobeschrijving. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen. Hetzelfde probleem doet zich voor op pagina's https://www.richtingzuid.nl/traineeship/ in video naast de kop “Vragen over het traineeship?”, https://www.richtingzuid.nl/waar-werk-je-aan/ in video naast de kop “Generalist of specialist?” en anderen.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 12: Bij succescriterium 1.2.3 zijn video’s beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie namelijk verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven. In deze video is voldoende ruimte hiervoor aanwezig, en dus moet de audiodescriptie toegevoegd worden. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien. Bekijk de video op de homepage https://www.richtingzuid.nl/ naast de kop “Het RichtingZuid traineeship”, op pagina's https://www.richtingzuid.nl/traineeship/ in video naast de kop “Vragen over het traineeship?”, https://www.richtingzuid.nl/waar-werk-je-aan/ in video naast de kop “Generalist of specialist?” en anderen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 13: In de footer van de website https://www.richtingzuid.nl/ staan pictogrammen voor sociale media. Deze pictogrammen zijn informatieve afbeeldingen. Het attribuut aria-hidden="true" wordt gebruikt voor deze inhoud. Dit attribuut zorgt ervoor dat de inhoud verborgen blijft voor schermlezers. Gebruik aria-hidden="true" daarom niet bij informatieve elementen.

Bevinding 14: Op de homepage https://www.richtingzuid.nl/ naast de kop “Thema's waar je aan werkt” staat een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. Deze knoppen zijn op de pagina geplaatst binnen een element met role="tablist". En dit element heeft kind-elementen die niet zijn toegestaan. Verwijder role=”tablist”.

Bevinding 15: Op de homepage https://www.richtingzuid.nl/ staat naast de kop ‘Thema's waar je aan werkt’ een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. De actieve knop ziet er anders uit dan de niet-actieve knoppen, maar deze informatie ontbreekt in de HTML. Een bezoeker die een schermlezer gebruikt, heeft hierdoor geen toegang tot deze visuele indicatie. Dit kan worden opgelost met ARIA-technieken of een verborgen tekst.

Bevinding 16: Op de pagina https://www.richtingzuid.nl/over-ons/, onder de kop “Waar kom jij als trainee te werken? Dit zijn onze partnerorganisaties!” staat een carrousel waarin de koppen niet zijn gemarkeerd als kopteksten: "Gemeente Maastricht", "Gemeente Sittard-Geleen", "Werken voor gemeente Venlo" enzovoort. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Het probleem is op deze pagina te vinden in de teksten "Bart Hebben", "Bo Lambrichts" enzovoort onder de kop "Dit zijn onze trainees" en op pagina's https://www.richtingzuid.nl/opdrachten/inclusie-van-mensen-met-een-beperking-in-de-gemeente-valkenburg-aan-de-geul/ in teksten “Trainee” and “Betekenis opdracht”,
https://www.richtingzuid.nl/organisaties/6020/ in de carrousel onder het kopje “Organisaties” in teksten “Gemeente Eijsden – Margraten”, “Gemeente Beek”, enzovoort.

Bevinding 17: Op pagina's https://www.richtingzuid.nl/over-ons/ wordt het <strong>-element gebruikt voor de opmaak van teksten. Zie de lijst onder het kopje "Vragen? Neem contact met ons op!”. Dit komt ook voor op pagina https://www.richtingzuid.nl/organisaties/6020/ in de tekst onder het kopje "Gemeente Beekdaelen" en op https://www.richtingzuid.nl/regina-koonen-trainee-2019-2021/ in de hele alinea onder het kopje “Juridisch medewerker Toezicht en Handhaving bij gemeente Sittard-Geleen”. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.

Bevinding 18: Op pagina https://www.richtingzuid.nl/over-ons/ staat een kop “Zo vind je ons!” en “Ons postadres”. Het heading-element en het strong-element worden gebruikt in deze koppen. Verwijder het strong-element en maak voor de opmaak gebruik van CSS.

Bevinding 19: Op pagina https://www.richtingzuid.nl/traineeship/ staat onder de kop “Meld je nu aan!” een formulier. In dit formulier zijn de label-elementen met de teksten "Voor- en achternaam" en "E-mailadres" niet expliciet gekoppeld aan de bijbehorende invoervelden. Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.

Bevinding 20: Op pagina https://www.richtingzuid.nl/organisaties/6020/ is de kop “Dit is Beekdaelen” gemarkeerd met een strong-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 21: Op pagina https://www.richtingzuid.nl/over-ons/ staan carrousels onder de kopjes “Waar kom jij als trainee te werken? Dit zijn onze partnerorganisaties!” en “Dit zijn onze trainees”. De leesvolgorde is niet zinvol. Informatieve afbeeldingen staan boven de kopjes op deze inhoud. Als deze inhoud achtereenvolgens van boven naar beneden wordt voorgelezen, wordt het onduidelijk bij welke inhoud de afbeeldingen horen. Dat komt doordat de koppen niet bovenaan staan in de HTML-code. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://www.richtingzuid.nl/traineeship/ onder de kop “Meld je nu aan!” staat een formulier met invoervelden "Voor- en achternaam" en "E-mailadres" waarmee persoonlijke gegevens worden verzameld. Het autocomplete attribuut ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt.
Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 23: Er staat een slider op de homepage https://www.richtingzuid.nl/ naast de kop "Thema's waar je aan werkt". De actieve knop om door de dia's te navigeren is alleen herkenbaar aan de kleur. Het kleurverschil geeft aan welke knop op dit moment actief is. Omdat het kleurverschil niet genoeg contrast heeft (minder dan 3,0:1), is dit niet voldoende. Dit kan opgelost worden door het contrast tussen de kleur van de knop en de achtergrond te vergroten tot minimaal 3,0:1, of door de vorm van de actieve knop te veranderen. De actieve knop kan bijvoorbeeld iets groter gemaakt worden dan de andere knoppen, of omlijnd in plaats van ingevuld. Dit probleem is te zien op de pagina https://www.richtingzuid.nl/traineeship/ in de knoppen van de slider onder de kop “Deze trainees vertellen je graag meer!”.

Bevinding 24: Aangepaste toetsenbordfocus wordt toegepast op de link “Meld je nu aan!” onder de kop “Wil jij Limburg sterker maken?”. De toetsenbordfocus is te zien aan een verandering van de achtergrond van de link van (HEX#04343B) naar (HEX#002229). Dit gebruik van kleur als de enige manier om informatie over de locatie van de toetsenbordfocus te geven, faalt in dit succescriterium. Dit probleem doet zich ook voor op de homepage in de link "Kijk waar je aan kunt werken!" onder het kopje “Thema's waar je aan werkt”. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond. Zie ook deze uitgave op pagina's https://www.richtingzuid.nl/regina-koonen-trainee-2019-2021/, https://www.richtingzuid.nl/richtingzuid-on-tour/ en https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ in dezelfde link.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 25: In de footer van de website https://www.richtingzuid.nl/ staan gele (HEX#EBB237) links "Disclaimer", "Privacy- en Cookiebeleid" en "Toegankelijkheid" op een witte (HEX#FFFFFF) achtergrond hebben onvoldoende kleurcontrast. De kleurcontrastverhouding is te laag: 1,9:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Bevinding 26: Op alle pagina's van de website https://www.richtingzuid.nl/ staat onderaan een interactief element met een potloodpictogram. Door op dit element te klikken verschijnt de link "Aanmelden talentpool". De witte (HEX#FFFFFF) tekst van deze link heeft onvoldoende kleurcontrast op een gele (HEX #DFA21C) achtergrond van 2,3:1.

Bevinding 27: Op pagina https://www.richtingzuid.nl/over-ons/ staat onder de kop "Een kijkje achter de schermen bij RichtingZuid" een carrousel waarin de gele (HEX#DFA21C) tekst "Lees meer" onvoldoende kleurcontrast heeft op een lichte (HEX#EEEEEE) achtergrond (1,9:1). Het moet minimaal 4,5:1 zijn. Deze kwestie is te zien op de pagina's https://www.richtingzuid.nl/waar-werk-je-aan/ in teksten "Lees meer" onder de kop “Waar werken onze oud-trainees?”, https://www.richtingzuid.nl/opdrachten/inclusie-van-mensen-met-een-beperking-in-de-gemeente-valkenburg-aan-de-geul/ onder het kopje "Andere opdrachten" in de tekst "Meer informatie" door met de muisaanwijzer over.

Bevinding 28: Op de pagina https://www.richtingzuid.nl/traineeship/ onder de kop “Meld je nu aan!” staat een formulier. Als de bezoeker dit formulier verstuurt met lege velden of verkeerde invoer, verschijnen er foutmeldingen. De kleur van deze teksten is rood (HEX#DC3232). Deze teksten hebben te weinig contrast tegen de lichtroze (HEX#FDEEEC) achtergrond, namelijk 4,1:1. Het moet minimaal 4,5:1 zijn.

Bevinding 29: Op pagina https://www.richtingzuid.nl/traineeship/, wanneer bezoekers tekstafstand toepassen zoals beschreven in succescriterium 1.4.12, loopt de rode (HEX#DC3232) tekst van de foutmelding in het formulier onder het kopje "Meld je nu aan!" zijn container en krijgt op een gele (HEX#E7AC2E) achtergrond onvoldoende kleurcontrast van 2,3:1.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 30: Wanneer een bezoeker 400% inzoomt bij een schermresolutie van 1280px bij 1024px en het mobile menu is geopend, zijn alleen de eerste drie links zichtbaar in het mobile menu. Zorg ervoor dat alles zichtbaar blijft bij het inzoomen. Zie https://www.richtingzuid.nl/.

Bevinding 31: Op alle pagina's van de website https://www.richtingzuid.nl/ staat onderaan een interactief element met een potloodpictogram. Dit element opent een extra venster met inhoud. Een deel van dit venster komt onder de sticky header te staan. De inhoud is niet toegankelijk voor iemand die sterk inzoomt.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 32: In de footer van de website https://www.richtingzuid.nl/ staan social media-iconen die de huistijl van de website hebben gekregen. De iconen zijn wit (HEX#FFFFFF) en als je er met de muis overheen gaat, worden ze geel. De contrastverhouding wordt 1,9:1. De standaardkleur van deze socialmedia-logo’s hoeft niet aan de contrasteisen te voldoen, omdat ze worden gezien als ‘kunstobjecten’. Maar als de kleuren worden aangepast, dan moeten die wél voldoen aan de minimale contrasteisen van 3,0:1. Deze kwestie is te zien op de pagina https://www.richtingzuid.nl/over-ons/ onder de kop “Dit zijn onze trainees” in een carrousel in meerdere LinkedIn iconen en op de pagina https://www.richtingzuid.nl/traineeship/ onder de kopjes “Jouw profiel” en “Dit bieden wij” in vinkjespictogrammen van lijstitems.

Bevinding 33: Op de homepage naast de kop “Thema's waar je aan werkt” staat een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. De wit (HEX#FFFFFF) knop heeft onvoldoende contrastverhouding ten opzichte van de achtergrond die steeds verandert. Het contrast is minder dan 2,7:1. Dit moet minstens 3,0:1 zijn. Dit probleem is te zien op de pagina https://www.richtingzuid.nl/traineeship/ in de knoppen van de slider onder de kop “Deze trainees vertellen je graag meer!”.

Bevinding 34: Wanneer wordt ingezoomd tot 200%, veranderen knoppen van plek en staan nu op een beige achtergrond. Het contrast is 1,2:1. Dit moet minstens 3,0:1 zijn. Hetzelfde probleem doet zich voor op de pagina https://www.richtingzuid.nl/traineeship/ in de knoppen van de slider onder de kop “Deze trainees vertellen je graag meer!”.
Op pagina https://www.richtingzuid.nl/over-ons/ staan onder de kopjes ‘Dit zijn onze trainees’ en ‘Een kijkje achter de schermen bij RichtingZuid’ iconen met een pijl in carrousels. De pictogrammen zijn wit (HEX #FFFFFF), en wanneer je er met de muis overheen gaat, wordt de contrastverhouding met de gele achtergrond (HEX #DFA21C) 2,3:1. Dit moet minimaal 3,0:1 zijn om te voldoen aan de toegankelijkheidsrichtlijnen. Hetzelfde probleem komt voor op de pagina https://www.richtingzuid.nl/traineeship/ bij de pictogrammen met pijlen naar links en rechts in de eerste slider en in de slider onder de kop ‘Deze trainees vertellen je graag meer!’. Ook op de pagina’s https://www.richtingzuid.nl/organisaties/6020/ en https://www.richtingzuid.nl/richtingzuid-on-tour/ is dit probleem zichtbaar in de pictogrammen van de automatisch bewegende slider in de hoofdbanner.

Bevinding 35: Op pagina https://www.richtingzuid.nl/traineeship/ onder het kopje "Meld je nu aan!" staat een formulier. In dit formulier hebben de witte (HEX#FFFFFF) invoervelden en checkbox "Ik ga ermee akkoord ..." onvoldoende kleurcontrast tegen de gele (HEX#E7AC2E) achtergrond van 2,0:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 36: Op pagina https://www.richtingzuid.nl/traineeship/ ontstaat een probleem wanneer bezoekers tekstspatiëring toepassen zoals beschreven in dit succescriterium. De tekst van de foutmelding in het formulier onder het kopje "Meld je nu aan!" loopt dan buiten de container en/of overlapt de ingevoerde gegevens. Dit kan de leesbaarheid en bruikbaarheid van het formulier negatief beïnvloeden. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 37: Op alle pagina's van de website https://www.richtingzuid.nl/ staat onderaan een interactief element met een potloodpictogram. Dit interactieve element is niet toegankelijk via een toetsenbord.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 38: Op de homepage https://www.richtingzuid.nl/ staat naast het kopje "Het RichtingZuid traineeship" een video. Binnen deze videospeler is het mogelijk om sneltoetsen met één letter te gebruiken. De Youtube-video’s gebruiken sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels). Hetzelfde probleem staat op de pagina's https://www.richtingzuid.nl/traineeship/ in video naast de kop "Vragen over het traineeship?", https://www.richtingzuid.nl/waar-werk-je-aan/ in video naast de kop "Generalist of specialist?" en anderen.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 39: Op pagina https://www.richtingzuid.nl/traineeship/ staat een carrousel met content die na elke 6 seconden verandert. Deze carrousel kan niet worden gestopt, gepauzeerd of verborgen. Bewegende content kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen van het selecteren van het gewenste menu-item. Daarom moet er een manier zijn waarmee bezoekers beweging kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt. Hetzelfde probleem doet zich voor op de pagina's https://www.richtingzuid.nl/organisaties/6020/ en https://www.richtingzuid.nl/richtingzuid-on-tour/ bij het automatisch verplaatsen van de dia's van de hoofdbanner.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Voldoende

Bevinding 40: Advies. Het volgende wordt niet afgekeurd omdat alle pagina’s een goede koppenstructuur hebben. Toch wordt aangeraden om een skiplink toe te voegen. Er is geen skiplink aanwezig op de website https://www.richtingzuid.nl/. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 41: Als de website https://www.richtingzuid.nl/ op een klein scherm wordt bekeken, verschijnt op alle pagina's een hamburgerknop (een knop met drie horizontale lijnen). Deze knop opent een mobiel menu. Wanneer het mobiele menu is geopend, kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu geopend blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Bevinding 42: Wanneer de bezoeker door de pagina navigeert met behulp van het toetsenbord en wanneer dit menu is gesloten, komt de focus terecht op interactieve elementen binnen dit menu die op dat moment onzichtbaar zijn. De focusvolgorde van elementen moet logisch en intuïtief zijn. De focus mag niet terechtkomen op interactieve elementen (links, knoppen, formuliervelden) die niet zichtbaar zijn. Dit kan leiden tot onbedoelde activering van deze elementen. Alleen zichtbare elementen mogen focus krijgen. Zie https://www.richtingzuid.nl/.

Bevinding 43: Op alle pagina's verschijnt de link "Aanmelden talentpool" na het activeren van een interactief element met een potloodicoon. Na het doorlopen van de items in het hoofdmenu komt de toetsenbordfocus op deze link "Aanmelden talentpool" terecht terwijl deze link onzichtbaar is. Als bezoekers met het toetsenbord door de website navigeren, moeten de interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Als de volgorde niet logisch en voorspelbaar is, kunnen bezoekers die alleen een toetsenbord gebruiken minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Alleen elementen die zichtbaar zijn mogen dus toetsenbordfocus krijgen. Zie https://www.richtingzuid.nl/

Bevinding 44: Op pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ na de link onder de kop “Werkbezoek: Chemelot & Brightlands Chemelot Campus”, komt de toetsenbordfocus terecht op onzichtbare interactieve elementen. Als bezoekers met het toetsenbord door de website navigeren, moeten de interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Als de volgorde niet logisch en voorspelbaar is, kunnen bezoekers die alleen een toetsenbord gebruiken minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Alleen elementen die zichtbaar zijn mogen dus toetsenbordfocus krijgen.

Bevinding 45: Op pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ onder de tekst “Maaike Putters, Karin Tang en Max Jacobs” staan afbeeldingen die kunnen worden bekeken in een galerij. Terwijl deze galerij wordt geopend, komt de toetsenbordfocus buiten de galerij terecht en landt op links onder het kopje "Meer blogs van" op de hoofdpagina. Het dialoogvenster blijft echter open en bedekt de pagina. Dit kan opgelost worden door de toetsenbordfocus binnen het dialogvenster te houden totdat de bezoeker op de sluitknop heeft geklikt.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 46: In de header van de website staat een logo dat als link fungeert. Deze link heeft geen linkdoel. Hierdoor weten gebruikers van hulpsoftware niet naar welke pagina of inhoud de link leidt. Dit kan opgelost worden door een title-element aan de svg (het logo) toe te voegen of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label. Zie https://www.richtingzuid.nl/

Bevinding 47: Er staan links naar sociale media in de footer. Deze links hebben geen linkdoel. Dit kan opgelost worden door verborgen tekst toe te voegen aan deze links, bijvoorbeeld “Facebook-pagina van Richting Zuid”. Doe dit op dezelfde manier voor de andere socialmedia-links. Deze bevinding is ook te zien op de pagina https://www.richtingzuid.nl/over-ons/ onder de kop “Dit zijn onze trainees” in links met LinkedIn iconen.

Bevinding 48: Op pagina https://www.richtingzuid.nl/traineeship/ onder de kop “Deze trainees vertellen je graag meer!” staat een slider met afbeeldingen die werken als links om de afbeelding in een dialogvenster te openen. Alle links hebben dezelfde linktekst "Deze trainees vertellen je graag meer! - Video" aanwezig. Het doel van zo’n link is onduidelijk.

Bevinding 49: Op pagina https://www.richtingzuid.nl/regina-koonen-trainee-2019-2021/ onder de kop “Juridisch medewerker Toezicht en Handhaving” staat een link met een icoon van een geel rondje. De naam van deze link via aria-label is " - RichtingZuid". Deze tekst verklaart niet waar de link naartoe leidt. Linkteksten die nietszeggend zijn, helpen niet bij het begrijpen welke bestemming deze links hebben. Hetzelfde probleem is te zien op pagina's https://www.richtingzuid.nl/richtingzuid-on-tour/ en https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ in dezelfde link onder de eerste kop.

Bevinding 50: Op pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ onder de tekst “Maaike Putters, Karin Tang en Max Jacobs” staat een interactief element met afbeelidngen die als links werken. In deze links zijn sommige attributen niet correct afgesloten waardoor betekenisloze linkteksten zijn ontstaan: "data-lazy-src= "/>", "data-lazy-src= "/>" en ">". Corrigeer deze links.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 51: Er zijn minder dan twee manieren om andere pagina's op de site te vinden. Er moeten meerdere manieren beschikbaar zijn om andere schermen in de toepassing te vinden - ten minste twee van: een lijst met gerelateerde schermen, inhoudsopgave, sitemap, zoekfunctie of lijst met alle beschikbare schermen. staat maar één manier om de pagina's op deze website te vinden. Zie https://www.richtingzuid.nl/.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 52: Er staat een slider op de homepage naast het kopje "Thema's waar je aan werkt". De toegankelijke namen van de knoppen om tussen slides te wisselen zijn "1", "2" enzovoort. Deze toegankelijke namen geven niet genoeg informatie over de functie van de knoppen. Verander ze bijvoorbeeld in “bekijk 1 slide”, “bekijk 2 slide” enzovoort. Het probleem doet zich voor op de pagina's https://www.richtingzuid.nl/traineeship/ en https://www.richtingzuid.nl/waar-werk-je-aan/ in knoppen in sliders onder de kopjes “Deze trainees vertellen je graag meer!” en “Zien waar je aan kan werken als RichtingZuid trainee?”.

Bevinding 53: Er staat een carrousel op de pagina https://www.richtingzuid.nl/traineeship/ onder het hoofdmenu. Er zijn knoppen met pijlen beschikbaar om door de slides te navigeren. De toegankelijke namen van deze knoppen zijn "Vorige" en "Volgende". Deze toegankelijke namen geven niet genoeg informatie over de functie van de knoppen. Verander ze bijvoorbeeld in “vorige slide” en “volgende slide”. Hetzelfde probleem doet zich voor op de pagina's https://www.richtingzuid.nl/organisaties/6020/ en https://www.richtingzuid.nl/richtingzuid-on-tour/ in knoppen met pijlen waarmee automatisch bewegende dia's van de hoofdbanner kunnen worden bestuurd.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 54: Als de bezoeker de website voor het eerst bezoekt, is een cookiemelding te zien. Hierin staat de koptekst 'Deze website maakt gebruik van cookies'. Deze is focusbaar gemaakt door 'tabindex="0"'. Het is echter niet zichtbaar als de focus hierop valt. Bezoekers die navigeren via het toetsenbord maar wel kunnen zien, weten daardoor niet waar de focus zich op dat moment bevindt. Omdat het gaat om een koptekst, hoeft deze geen focus te krijgen. Verwijder het tabindex-attribuut om dit op te lossen. Deze kop komt ook voor op tabblad 'Toestemming' die te zien is nadat in de cookiemelding geklikt is op 'details' of 'Aanpassen'.

Bevinding 55: Op de homepage https://www.richtingzuid.nl/ staat naast de kop "Het RichtingZuid traineeship" een video die in een dialoogvenster wordt afgespeeld. In dit dialoogvenster bevinden zich de knoppen "Full screen" en "Close", maar de focus is hierop niet zichtbaar. De toetsenbordfocus moet altijd zichtbaar zijn, zodat gebruikers die met het toetsenbord navigeren kunnen zien waar de focus zich bevindt. Dit probleem treedt ook op bij dialoogvensters met video's op de pagina https://www.richtingzuid.nl/traineeship/ naast de kop "Vragen over het traineeship?" en op de pagina https://www.richtingzuid.nl/waar-werk-je-aan/ naast de kop "Generalist of specialist?". Daarnaast komt hetzelfde probleem voor op de pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ in het dialoogvenster dat verschijnt wanneer gebruikers een afbeelding in de galerij bekijken, onder de tekst "Maaike Putters, Karin Tang en Max Jacobs".

Bevinding 56: Op de homepage https://www.richtingzuid.nl/ staat naast het kopje "Thema's waar je aan werkt" een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. De focus is niet zichtbaar op deze knoppen. De toetsenbordfocus moet altijd zichtbaar zijn. Hetzelfde probleem is te zien op de pagina https://www.richtingzuid.nl/traineeship/ in knoppen van de slider onder de kop “Deze trainees vertellen je graag meer!”.

Bevinding 57: Op de pagina https://www.richtingzuid.nl/traineeship/ onder het kopje "Meld je nu aan!" staat een formulier. In dit formulier staan de checkbox “Ik ga ermee akkoord...” en “Inschrijven voor talentpool” verzendknop. De toetsenbordfocus is niet zichtbaar op deze formulierelementen. De toetsenbordfocus moet altijd zichtbaar zijn.

Bevinding 58: Op pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ er staat een link met foto onder de tekst "Maaike Putters, Karin Tang en Max Jacobs". De focus is niet zichtbaar op deze link. De toetsenbordfocus moet altijd zichtbaar zijn.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 59: In de header van de website staat een logo. Deze afbeelding werkt als een link. De zichtbare tekst is "RichtingZuid". De toegankelijke naam is leeg. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Zie https://www.richtingzuid.nl/

Bevinding 60: Op pagina https://www.richtingzuid.nl/traineeship/ onder het kopje "Meld je nu aan!" staat een formulier. In dit formulier hebben de invoervelden de zichtbare tekst "Voor- en achternaam" en "E-mailadres". De toegankelijke namen van de invoerelementen zijn leeg. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 61: In de cookiemelding die verschijnt als de bezoeker voor het eerst op de website komt, staat een link die via een aria-label de naam 'Cookiebot - opens in a new window' heeft gekregen. Deze Engelstalige tekst is mogelijk niet voor alle bezoekers van deze Nederlandstalige website te begrijpen. Ook kan de tekst niet met de juiste uitspraak worden voorgelezen door hulpsoftware, omdat de taal van de pagina is ingesteld op Nederlands. Vertaal de tekst van het aria-label naar het Nederlands om dit op te lossen.

3.3 Assistentie bij invoer

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 62: Op de pagina https://www.richtingzuid.nl/traineeship/ onder de kop “Meld je nu aan!” staat een formulier. De foutmeldingen geven geen suggesties aan de bezoeker over hoe de fout kan worden opgelost. De foutmelding bij het invoerveld “E-mailadres” is bijvoorbeeld “Het ingevoerde e-mailadres is onjuist”. Vertel de bezoeker wat ze moeten doen om de fout op te lossen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 63: In de header van de website staat een logo. Deze afbeelding werkt als een link. Deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft. Zie https://www.richtingzuid.nl/.

Bevinding 64: Het hoofdmenu bevat ARIA-rollen die deze navigatie niet toegankelijker maken. Aan het ul-element waarin het navigatiemenu is opgenomen is role="menubar" toegevoegd. Alleen deze rol toevoegen is niet voldoende. Er moeten meer attributen worden toegevoegd om het toegankelijk te krijgen, terwijl het ul-element zonder deze rol op zichzelf al toegankelijk is. Deze rol kan beter weggelaten worden. Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat wat er nodig is om een navigatie met role="menubar" te bouwen. Zie https://www.richtingzuid.nl/.

Bevinding 65: Als de website op een klein scherm wordt bekeken, verschijnt er een hamburgerknop (een knop met drie horizontale lijnen). Deze menuknop opent het mobiele menu. Deze knop mist de toegankelijke naam. Wanneer het menu wordt geopend, verandert de hamburgerknop in de "X"-knop. De naam van de knop moet de functie van de knop beschrijven en als die functie verandert, moet de naam mee veranderen ('menu openen' of ‘menu sluiten’). Zie https://www.richtingzuid.nl/

Bevinding 66: Als de website op een klein scherm wordt bekeken, verschijnt er een menuknop. Deze knop opent het mobiele menu. De knop geeft geen informatie over de status van het mobiele menu (open of gesloten) aan bezoekers die het mobiele menu niet kunnen zien. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de link van het hamburgermenu. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is. Zie https://www.richtingzuid.nl/

Bevinding 67: In de footer staan links naar sociale media. Deze links hebben geen toegankelijke namen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef elke link een toegankelijke naam die het doel van de link beschrijft. Zie https://www.richtingzuid.nl/. Deze kwestie is te zien op de pagina https://www.richtingzuid.nl/over-ons/ onder het kopje “Dit zijn onze trainees” in een carrousel in meerdere links met LinkedIn iconen

Bevinding 68: Op alle pagina's van de website https://www.richtingzuid.nl/ staat onderaan een knop met een potloodpictogram. Dit interactieve element heeft geen toegankelijke rol en daardoor ook geen toegankelijke naam. Er wordt ook niet aangegeven of de content die deze knop opent, open of dicht is. Elk HTML-element heeft een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de gebruiker te geven of om informatie van de gebruiker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de gebruiker uitleggen wat het element doet.

Bevinding 69: Op de website https://www.richtingzuid.nl/ wordt een element met de rol listbox gebruikt als container voor hoofdbanners, video's, carrousels en gewone afbeeldingen. Deze rol eist een toegankelijkheidsnaam. Deze rol is hier overbodig en moet verwijderd worden. Zie voorbeelden op homepage in hoofdbanner, in video naast het kopje "Het RichtingZuid traineeship", in slider naast "Thema's waar je aan werkt" en in afbeelding naast "Leren & ontwikkelen". Dit probleem wordt ook op andere pagina's waargenomen.

Bevinding 70: Op de homepage https://www.richtingzuid.nl/ wordt veel gebruik gemaakt van role=”option”. Elementen met deze rol moeten een toegankelijke naam hebben. Zie bijvoorbeeld een afbeelding van de hoofdbanner en de carrousels met afbeeldingen.

Bevinding 71: Op de homepage https://www.richtingzuid.nl/ naast de kop “Het RichtingZuid traineeship” staat een video. De video wordt in een dialoogvenster afgespeeld. Dit dialoogvenster heeft geen toegankelijke naam. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud. Het probleem doet zich voor in dialoogvensters met een video op pagina's https://www.richtingzuid.nl/traineeship/ naast de kop “Vragen over het traineeship?”, https://www.richtingzuid.nl/waar-werk-je-aan/ naast de kop “Generalist of specialist?”. Het probleem is ook te zien op de pagina https://www.richtingzuid.nl/eerste-werkbezoek-lichting-2021-2023-chemelot-brightlands-chemelot-campus/ onder de tekst "Maaike Putters, Karin Tang en Max Jacobs" in het dialoogvenster dat verschijnt om afbeeldingen in de galerie te bekijken.

Bevinding 72: Op de homepage https://www.richtingzuid.nl/ naast de kop “Het RichtingZuid traineeship” staat een video. De video opent in een dialoogvenster. In dit dialoogvenster staat een iframe. Het title-attribuut ontbreekt. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Het probleem doet zich voor in iframes met een video op pagina's https://www.richtingzuid.nl/traineeship/ naast de kop “Vragen over het traineeship?”, https://www.richtingzuid.nl/waar-werk-je-aan/ naast de kop “Generalist of specialist?”.

Bevinding 73: Op de homepage https://www.richtingzuid.nl/ staat naast de kop “Thema's waar je aan werkt” een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. Deze knoppen zijn op de pagina geplaatst binnen <li>-elementen met role="presentation". Binnen een van deze <li>-elementen is het attribuut aria-selected="true" toegevoegd, wat niet is toegestaan voor deze rol. Het attribuut aria-selected is bedoeld voor de rollen gridcell, option, row en tab, en is hier dus onjuist toegepast. Daarnaast bevinden de interactieve knoppen zich binnen <li>-elementen die het attribuut aria-hidden="true" en role="presentation" hebben. Dit betekent dat de elementen voor schermlezers verborgen zijn, terwijl ze nog steeds interactieve functionaliteit bieden. Zorg ervoor dat ARIA-verborgen elementen niet focusbaar zijn en geen focusbare elementen bevatten, zodat gebruikers die met een toetsenbord navigeren geen verwarrende of inconsistente interacties ervaren.

Bevinding 74: Op de homepage https://www.richtingzuid.nl/ naast de kop “Thema's waar je aan werkt” staat een slider met afbeeldingen en knoppen om tussen de afbeeldingen te wisselen. Rol tablist is aanwezig op deze elementen, terwijl de rol=tab ontbreekt. Dit is geen correcte toepassing van de ARIA-rollen. De li-elementen die knoppen bevatten om van slides te wisselen hebben aria-controls="navigation20" attributen gekregen. Zorg ervoor dat alle ARIA-attributen geldige waarden hebben.

Bevinding 75: Op pagina https://www.richtingzuid.nl/over-ons/ bevatten de carrousels onder de kopjes “Waar kom jij als trainee te werken? Dit zijn onze partnerorganisaties!”, “Dit zijn onze trainees” en “Een kijkje achter de schermen bij RichtingZuid” knoppen met pijl-rechts pictogrammen die geen toegankelijke naam hebben. De naam van een knop moet de functie ervan beschrijven, zodat schermlezers deze correct kunnen interpreteren. Hetzelfde probleem doet zich voor op de pagina's https://www.richtingzuid.nl/traineeship/ en https://www.richtingzuid.nl/waar-werk-je-aan/ bij knoppen met pijltjes naar links en rechts in videosliders en carrousels. Daarnaast is het probleem zichtbaar op de pagina https://www.richtingzuid.nl/organisaties/6020/ in dezelfde knoppen met pijltjes naar rechts binnen carrousels. Om de toegankelijkheid te verbeteren, moeten deze knoppen een duidelijke beschrijvende naam krijgen, bijvoorbeeld via het aria-label-attribuut.

Bevinding 76: Op pagina https://www.richtingzuid.nl/over-ons/ onder het kopje "Dit zijn onze trainees" staan links met LinkedIn iconen. Deze links hebben geen toegankelijke namen.

Bevinding 77: Op pagina https://www.richtingzuid.nl/traineeship/ onder het kopje "Meld je nu aan!" staat een formulier. In dit formulier hebben de invoervelden met de tekst "Voor- en achternaam" en "E-mailadres" geen toegankelijke namen. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door het label-element er correct aan te koppelen.

Bevinding 78: Advies. Op de website https://www.richtingzuid.nl/ worden in sliders, carrousels of gewone afbeeldingen op de webpagina de ARIA-attributen role="listbox" en role="option" gebruikt. Deze attributen geven aan dat het gaat om select-elementen, vergelijkbaar met een vervolgkeuzelijst. De manier waarop deze rollen nu worden toegepast past niet bij de sliders en afbeeldingen. De implementatie van deze rollen klopt is niet correct uitgevoerd. Deze elementen missen onder andere de toegankelijkheidsnamen. Verwijder deze rollen uit de sliders.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-03-09 23:01:59 v2.4-011