Toegankelijkheidsrapport
Onderzoeksresultaten
Niveau A
Fouten gevonden
1. Waarneembaar
Dev: Alle iconen in de website zijn nog niet voorzien van passende alternatieve tekst. In de meeste gevallen kan deze verborgen worden voor screenreaders met een aria-hidden of role="presentation" attribuut. In het geval dat het icoon niet begeleid wordt door tekst kan deze met een aria-label worden verduidelijkt.
- Dev: + Icoon in "+ Meer nieuws" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Printer icoon in "Print deze pagina" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Lijst icoon in "Lijst" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Kaart icoon in "Kaart" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Locatie pin icoon in type locatie filters hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Locatie pin icoon in locatie cards hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Locatie pin icoon in "Routebeschrijving" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Link icoon in "Routebeschrijving" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Info icoon in "Contact opnemen" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Tekstwolk icoon in "Feedback" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: ? Icoon bij type locatie filters tooltip heeft geen beschrijvende alternatieve tekst
- Dev: Lijst icoon in "Lijst" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Kaart icoon in "Kaart" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Locatie pin icoon in type locatie filters hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: * Teken boven formulier invoervelden wordt voorgelezen als "ster" dit is niet van toepassing voor mensen die de screenreader gebruiken omdat zij al horen dat het invoerveld vereist is
- Dev: + Icoon in "+ Meer laden" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: + Icoon in "+ Meer laden" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: + Icoon in "+ Meer nieuws" heeft geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Iconen in contact blokken hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Chevron up button wanneer een contact blok is uitgeklapt mist een beschrijvende tekst, momenteel wordt alleen "knop" voorgelezen
- Dev: * Teken boven formulier invoervelden wordt voorgelezen als "ster" dit is niet van toepassing voor mensen die de screenreader gebruiken omdat zij al horen dat het invoerveld vereist is
- Dev: Iconen achter "contact opnemen" hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Dev: Iconen onder "In het kort" missen beschrijvende tekst en worden niet voorgelezen door de screenreader. Voor gebruikers met de screenreader is het dus onduidelijk dat hier over het salaris, locatie en dienstverband gesproken wordt.
- Dev: Iconen onder "Wil je meer weten?" hebben geen juiste alternatieve tekst, in het geval dat deze decoratief is moet deze niet worden voorgelezen door de screenreader
- Content: De video op deze pagina bevat geen alternatief in de vorm van een audio-descriptie, een transcript, of iets vergelijkbaars.
- Content: De video op deze pagina bevat geen alternatief in de vorm van een audio-descriptie, een transcript, of iets vergelijkbaars.
Het zoekveld in navigatie mist een bijpassend label element. Zie hier een voorbeeld van een toegankelijke accordion (voor developers): https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ Het komt ook vaker voor dat headings niet in de juiste volgorde staan. Het is belangrijk dat deze elkaar goed opvolgend h1>h2>h3..etc en niet h1>h3
- Heading "Bekijk onze jaarverslagen en -rapporten over 2023" (H3) skipt heading level H2
- Heading "Ambulante begeleiding bij zelfstandig wonen" (H3) skipt heading level H2
- Heading "Voor wie zijn we er" (H3) skipt heading level H2
- Dev: Accordion item button mist aria-expanded attribuut
- Dev: Accordion item button mist aria-controls attribuut
- Dev: Accordion item content mist aria-labelledby attribuut
- Dev: Accordion item content mist role="region" attribuut
- Heading "Filters:" (H3) skipt heading level H2
- Dev: Label "Type locatie" is niet gekoppeld aan een invoerveld
- Dev: Locatietypes fieldset mist legend, wellicht <label> html tag bij "Type locatie" vervangen met <legend>
- Label "Type locatie" is niet gekoppeld aan een invoerveld
- Dev: Locatietypes fieldset mist legend, wellicht <label> html tag bij "Type locatie" vervangen met <legend>
- Dev: Accordion item button mist aria-expanded attribuut
- Dev: Accordion item button mist aria-controls attribuut
- Dev: Accordion item content mist role="region" attribuut
- Dev: Accordion item content mist aria-labelledby attribuut
- Heading "Een indicatie regelen" (H3) skipt heading level H2
- Heading "Wie wil je aanmelden?" (H3) skipt heading level H2
- Dev: Label "Wat is de zorgvraag" is niet gekoppeld aan een invoerveld
- Heading "Kies filter:" (H3) skipt heading level H2
- Dev: Filters fieldset mist legend
- Dev: Link cards onder "Nieuws / Blogs" bevatten meerdere <a> links naar dezelfde entry, beter om de gehele card te wrappen in een <a>
- Heading eerste card (H3) skipt heading level H2
- Dev: Filter dropdown buttons missen aria-expanded attribuut
- Dev: Filter dropdown buttons missen aria-controls attribuut
- Dev: Filter dropdown options missen role attributen
- Heading eerste contact card (H3) skipt heading level H2
- Dev: Contact blokken missen aria-controls attribuut
- Dev: Contact blokken content missen role attribuut
- Dev: Contact blokken content missen aria-labelledby attribuut
- Dev: Stel een vraag > Formulier > "Ik ben" is een label die niet gekoppeld is aan een invoerveld
- Heading "Een persoonlijk gesprek ..." (H3) skipt heading level H2
- Heading "Solliciteren" (H4) skipt heading level H3
- Dev: Fieldset om "Vul een postcode in ..." mist een legend
- Dev: Zichtbaar postcode label is niet gekoppeld aan het invoerveld
- Dev: Postcode invoerveld mist een zichtbaar label
- Dev: Dropdowns/select invoervelden missen een gekoppeld HTML label
- Content: Dropdowns/select invoervelden labels zijn niet beschrijvend genoeg
- Dev: Postcode kilometer dropdown/select mist een label
- Dev: Wachtwoord invoervelden hebben een onjuist aria-describedby attribuut
- Heading "Jouw recruiter" (H3) skipt heading level H2
- Dev: "Delen" button missen aria-controls attribuut
- Dev: "Delen" dropdown mist aria-labelledby attribuut
- Dev: "Delen" dropdown mist role="tooltip" attribuut
De footer bevat een lege link in de HTML naar /pers onder "Alle contactmogelijkheden". De navigatie op mobiel staat onderaan de pagina, hierdoor komt de html volgorde niet overeen met de visuele volgorde.
- Content: Lege heading (H2) onder "Ben je benieuwd naar werken en leren bij ’s Heeren Loo?"
De knop om naar hoog contrast te wisselen is alleen met een icoon aangeduid. Het is waarschijnlijk dat niet alle gebruikers het icoon zullen herkennen.
- Design: Foutmeldingen zijn alleen door de rode kleur te onderscheiden van andere tekst. We raden aan om de foutmeldingen te voorzien van een bijpassend icoon.
- Design: Foutmeldingen zijn alleen door de rode kleur te onderscheiden van andere tekst. We raden aan om de foutmeldingen te voorzien van een bijpassend icoon.
2. Bedienbaar
- Dev: De mobiele navigatie is niet bedienbaar met het toetsenbord. De navigatie sluit zichzelf wanneer je het probeert.
- Dev: Video is niet bedienbaar met het toetsenbord
- Dev: Video is niet bedienbaar met het toetsenbord
Op verschillende plekken komen links met labels zoals 'Lees meer' terug. Het is belangrijk om deze van meer context te voorzien zodat het doel makkelijk te begrijpen is.
- Content: Bij de jaarverslagen en rapporten staat een link met het label 'Lees meer'. Dit is niet beschrijvend genoeg. Een label zoals 'Bekijk jaarverslagen' zou een verbetering zijn.
- Content: In het blauwe blok staat een link met het label 'Lees het verhaal'. Dit label is niet voldoende beschrijvend.
- Content: "Verzend" kan eventueel meer beschrijvend geformuleerd, bijvoorbeeld: "Aanmelden"
- Op deze pagina staat op een aantal plekken 'Meer laden'. Het is niet duidelijk waar meer van wordt geladen. 'Meer locaties', 'Meer informatie' en 'Meer nieuws' zou een verbetering zijn.
- De zoekresultaten bevatten links met het label 'Lees meer' zonder context over het doel van de link. Dit kan worden opgelost door de titel van het resultaat mee te nemen in het label.
- In het geval van 'Nieuws/blogs' is ook de afbeelding bij het resultaat een link. Omdat de afbeelding geen alt-tekst bevat is deze link effectief leeg.
- "Meer laden" kan meer beschrijvend, bijvoorbeeld: "meer verhalen laden"
- Design: Onder de titel staat een label 'Landelijk'. Het is niet duidelijk dat dit een link is naar het nieuwsoverzicht voor nieuws in deze categorie.
- Content: Onderaan de pagina staat een link met het label 'Bezoek www.werkenbij.sheerenloo.nl/werkenenleren'. Dit kan beter 'Werken bij 's heerenloo' zijn.
- De link met het label 'Hoe kunnen we jou helpen' gaat naar de contactpagina. Een label zoals 'Neem contact op' zou beschrijvender zijn.
- De labels van de verschillende contactopties beschrijven niet altijd duidelijk het doel.
- Het label 'Aanmaken' is in orde voor het aanmaken van een account. In de beschrijving van het formulier lijkt het echter te gaan om het aanmelden voor een nieuwsbrief. Het zou goed zijn om deze gelijk te trekken zodat het duidelijk is wat het doel van het formulier is.
- Onder 'Delen' staat een knop met het label 'Tip'. Het is niet duidelijk wat het doel van deze link is.
- Dev: Bij zorgvraag checkboxes wordt er geen label voorgelezen door screenreaders. Dit kan het beste een <fieldset> met een <legend> zijn
- Dev: Het postcode label wordt niet voorgelezen door screenreaders
- Dev: Bij dropdowns/select invoervelden worden er geen labels voorgelezen door de screenreader
3. Begrijpelijk
Zie 1.3.1, 2.4.6 en 2.5.3
4. Robuust
- Dev: Accordion item content mist role="region" attribuut
- Dev: Accordion item content mist role="region" attribuut
- Dev: Filter dropdown options missen role attributen
- Dev: De verschillende contactopties openen een tooltip/dialog met verdere instructies. Dit nieuwe venster bevat geen passend 'role' attribuut. Het venster is ook niet relationeel gekoppeld aan de knop die het venster opent.
- Dev: Het menu dat verschijnt wanneer je op 'Delen' drukt mist een role="tooltip"
Geen fouten gevonden
1. Waarneembaar
2. Bedienbaar
Het is mogelijk om de navigatie te omzeilen, echter is het menu niet heel gebruiksvriendelijk met het toetsenbord omdat ieder item automatisch uitgeklapt wordt en helemaal doorgetabbed moet worden. Op deze manier duurt het met het toetsenbord erg lang om een menuitem te vinden.
3. Begrijpelijk
Niveau AA
Fouten gevonden
1. Waarneembaar
- Content: De video op deze pagina bevat geen audio-descriptie.
- Content: De video op deze pagina bevat geen audio-descriptie.
- Dev: Geboortedatum invoerveld heeft type="text" in plaats van type="date"
- Dev: Telefoonnummer invoerveld heeft type="text" in plaats van type="tel"
- Dev: Telefoonnummer invoerveld heeft type="text" in plaats van type="tel"
- Dev: E-mail invoerveld heeft type="text" in plaats van type="email"
- Design: Wanneer de hoog-contrast modus is ingeschakeld wordt de titel van de pagina donkergroen. Deze is niet leesbaar op de afbeelding.
- Design: Wanneer de hoog-contrast modus is ingeschakeld wordt de titel van de pagina donkergroen. Deze is niet leesbaar op de afbeelding.
- Design: "Velden gemarkeerd met een * zijn verplicht" ster teken heeft onvoldoende contrast (4.09:1)
Dev: De website luistert niet naar de tekstvergroting omdat de root font-size op een pixel waarde (16px) staat ingesteld. Door hier een em waarde van te maken (1em) is dit opgelost. Hetzelfde geldt voor media queries die worden gebruikt om de website responsive te maken. Die kunnen ook beter em-waardes zijn. De inzichten hieronder gaan ervan uit dat de root font-size naar een em waarde is omgezet.
- Dev: Bij een aangepaste tekstgrootte van 200% valt de tekst in de hero bovenaan de pagina buiten het blok.
- Dev: Bij een aangepaste tekstgrootte van 200% valt het 'adres en contact' blok buiten beeld.
- Dev: Bij een aangepaste tekstgrootte van 200% valt de breadcrumb buiten beeld
- Dev: Bij een aangepaste tekstgrootte van 200% valt de breadcrumb buiten beeld
- Dev: Bij een aangepaste tekstgrootte van 200% valt de breadcrumb buiten beeld
- Dev: Bij een aangepaste tekstgrootte van 200% valt de breadcrumb buiten beeld
- Dev: Bij een aangepaste tekstgrootte van 200% valt de tekst in de hero bovenaan de pagina buiten het blok.
- Dev: Bij een aangepaste tekstgrootte van 200% valt een deel van de titel buiten beeld
De mobiele weergave van de hoofdnavigatie schaalt niet helemaal goed mee. Hierdoor zie je op een kleine scherm van 320px bij 256px alleen de eerste 2 menu items.
De witte knop om naar hoog contrast te wisselen heeft niet genoeg contrast ten opzichten van de blauwe achtergrond. De website bevat een functie om het kleurcontrast te vergroten. Onderstaande inzichten gaan ervan uit dat deze functie is ingeschakeld.
- Design: De knoppen om te wisselen van lijst naar kaart bevatten een te laag kleurcontrast.
- Design: De knoppen om te wisselen van lijst naar kaart bevatten een te laag kleurcontrast.
- Design: De invoervelden op deze pagina hebben niet genoeg contrast. Ze lijken niet meer te veranderen wanneer hoog contrast wordt geselecteerd.
- Dev: Er wordt een tooltip zichtbaar wanneer je met je muis over het vraagteken bij de filters gaat. Deze verdwijnt zodra de muis het vraagteken verlaat. De tooltip moet zichtbaar blijven ook als de muis over de inhoud heen gaat.
2. Bedienbaar
- Content: "Postcode" is geen beschrijvend label in deze context. Het veld voor de afstand wordt er niet in meegenomen
- Content: "Frequentie" is geen beschrijvend label. Om welke frequentie gaat dit?
- Dev: In de accordion staan links die pas zichtbaar zijn wanneer de accordion is geopend. Als de accordion gesloten is kunnen deze links al wel focus krijgen. We raden aan om deze links niet alleen visueel te verbergen maar ook voor het toetsenbord, totdat de accordion is geopend.
- Dev: In de accordion staan links die pas zichtbaar zijn wanneer de accordion is geopend. Als de accordion gesloten is kunnen deze links al wel focus krijgen. We raden aan om deze links niet alleen visueel te verbergen maar ook voor het toetsenbord, totdat de accordion is geopend.
- Dev: "Delen" dropdown opties focusbaar zonder dat het element is uitgeklapt
3. Begrijpelijk
- Content: De titel van deze pagina is 'Job alert'. Deze tekst is niet als engels gemarkeerd. We raden aan om deze te vertalen naar het Nederlands.
- Dev: Foutmeldingen worden correct weergegeven, maar maken gebruik van een <label> element dat hier niet voor bestemd is. Dit kan opgelost worden door aria-describedby te gebruiken zoals ook op https://werkenbij.sheerenloo.nl/vacature-alert wordt gedaan.
- Dev: Foutmeldingen worden correct weergegeven, maar maken gebruik van een <label> element dat hier niet voor bestemd is. Dit kan opgelost worden door aria-describedby te gebruiken zoals ook op https://werkenbij.sheerenloo.nl/vacature-alert wordt gedaan.
- Dev: Er is een suggestie voor een wachtwoord, maar die is niet goed gekoppeld aan het invoerveld. Door het ID van de hulptekst aan te passen
4. Robuust
- Dev: De tekst "Aantal gevonden locaties: x" moet worden voorzien van een role="alert", zodat blinde gebruikers op de hoogte worden gebracht van veranderende inhoud.
- Dev: De tekst "Aantal gevonden poliklinieken: x" moet worden voorzien van een role="alert", zodat blinde gebruikers op de hoogte worden gebracht van veranderende inhoud.
- Dev: De tekst "x resultaten voor 'wonen'" moet worden voorzien van een role="alert", zodat blinde gebruikers op de hoogte worden gebracht van veranderende inhoud.
Geen fouten gevonden
1. Waarneembaar
2. Bedienbaar
De website maakt gebruik van browser-defaults voor het aangeven van focus. Dit is voldoende, maar het is daardoor van de gebruikte browser afhankelijk hoe duidelijk de indicator is. We raden aan om een nieuwe focus-stijl toe te voegen die in alle browsers consistent is.
3. Begrijpelijk
Over het onderzoek
- Opdrachtgever
- 's Heerenloo
- Onderzoeker
- Digital Natives
- Evaluatiedatum
- 20 juni 2024
- WCAG versie
- 2.2
- WCAG niveau
- AA
- Evaluatiemethode
- WCAG-EM
- Basisniveau van toegankelijkheidsondersteuning
- De website is geschikt voor alle gangbare browsers en hulpapparatuur
- Gebruikte browser
- Google Chrome 122
- Gebruikte screenreader
- MacOS VoiceOver 10
- Afhankelijke tehcnologieën
- HTML, CSS, Javascript, WAI-ARIA, JavaScript, SVG, PDF
- Samenvatting
- Steekproefsgewijs is de website van 's Heerenloo getest op toegankelijkheid. Dat houdt in dat niet alle pagina's zijn getest, maar een selectie van pagina's die representatief zijn voor de website. De website is getest op basis van de WCAG 2.2 richtlijnen volgens de WCAG-EM methode. Dit is een momentopname en huidige inhoud van de website kan afwijken van de inhoud die is getest.
Zijn er naar aanleiding van dit onderzoek vragen of opmerkingen? Neem dan contact op met toegankelijkheid@digitalnatives.nl. - Scope
- Alle pagina's op https://www.sheerenloo.nl/
- Steekproef
- De steekproef bestaat uit de volgende pagina's:
- https://www.sheerenloo.nl/
- https://www.sheerenloo.nl/hulp-thuis
- https://www.sheerenloo.nl/hoe-helpen-wij
- https://www.sheerenloo.nl/voor-wie-zijn-we-er/autisme
- https://www.sheerenloo.nl/in-de-buurt
- https://www.sheerenloo.nl/in-de-buurt/sand-ambachtstraat-27
- https://www.sheerenloo.nl/poliklinieken
- https://www.sheerenloo.nl/zorg-regelen
- https://www.sheerenloo.nl/zorg-regelen/client-aanmelden
- https://www.sheerenloo.nl/zoekresultaten?q=wonen
- https://www.sheerenloo.nl/nieuws
- https://www.sheerenloo.nl/nieuws/s-heeren-loo-beste-leerberdrijf-2024-sector-zorg-welzijn-en-sport
- https://www.sheerenloo.nl/over-ons
- https://www.sheerenloo.nl/contact
- https://werkenbij.sheerenloo.nl/
- https://werkenbij.sheerenloo.nl/vacature-alert
- https://werkenbij.sheerenloo.nl/vacatures/co%C3%B6rdinerend-verpleegkundige-1056606