Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Jeugdombudsman Den Haag

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Jeugdombudsman Den Haag
Datum 27 februari 2024
Scope van de website Binnen de scope van het onderzoek valt:
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: 33

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: Op pagina https://jeugdombudsman.denhaag.nl/ staat het logo van Jeugdombudsman Den Haag met een leeg alt-attribuut. Deze afbeelding is niet puur decoratief en heeft daarom een alternatieve tekst nodig.
De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. Voeg een alternatieve tekst toe, bijvoorbeeld "Logo Jeugdombudsman" om dit probleem op te lossen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 2: Op pagina https://jeugdombudsman.denhaag.nl/nieuws/discriminatie-melden-kan-direct-bij-discriminatie-nl/ staat een stuk intro tekst vetgedrukt. Hier is het bold-element gebruikt, dat is niet de bedoeling. Het element is bedoeld voor het benadrukken van een woord of delen van een zin. Zorg dat de alinea via de stylesheet opgemaakt wordt.

Bevinding 3: Op pagina https://jeugdombudsman.denhaag.nl/nieuws/discriminatie-melden-kan-direct-bij-discriminatie-nl/ zijn de kopteksten in het bericht alleen met het <b> element opgemaakt dus alleen vetgedrukt. Visueel zijn dat koppen maar semantisch niet. Gebruik hier bijvoorbeeld een h3 koptekst voor. Dit geldt ook voor "Contactgegevens" wat nu met 'strong' gestyled is.

Bevinding 4: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Inleiding staat een formulier met een groep keuzerondjes (radiobuttons). Boven deze groep staat de tekst 'Ik doe deze melding voor iemand anders'. Deze tekst is nu niet gekoppeld aan de groep keuzerondjes. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 5: De PDF "Jaarverslag-2022-Jeugdombudsman-Leidschendam-Voorburg" is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en ALT-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Hetzelfde geldt voor de PDF "DenHaag_ombudsman_IG_ExternKlachtrecht_RGB"

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 6: Op de pagina https://jeugdombudsman.denhaag.nl/contact/ worden de foutmeldingen achter het invoerveld getoond. Mensen die het scherm niet kunnen zien of slechts deels kunnen zien missen daarom mogelijk de melding. Los dit op door de foutmelding aan het invoerveld te koppelen met aria-describedby op het invoerveld die via een id gekoppeld wordt aan de foutmelding.

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 7: Op de pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens kan je onder andere het eigen e-mailadres en achternaam invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://jeugdombudsman.denhaag.nl/ staan in het footer menu 4 rijen van 3 links. Wanneer je met de muis over de links hovert, veranderd de kleur naar blauw (HEX #28A3DC). Op de beige achtergrond (HEX #FBF8E8) is de contrastratio (2.5:1) te laag, Hier wordt minimaal een contrastratio van 4,5:1 verwacht.
Een soortgelijk probleem zien we terug op dezelfde pagina in het witte blok met links (Ga snel naar:) onder de Koptekst "Loop je vast bij de gemeente, jeugdzorg of school?". Wanneer je met de muis over de links hovert, wordt de link blauw (HEX #28A3DC). Op de witte achtergrond is de contrastratio 2.8:1, hier wordt minimaal een contrastratio van 4,5:1 verwacht.

Bevinding 9: Op pagina https://jeugdombudsman.denhaag.nl/?s=toegankelijkheid staat onder de koptekst "1 resultaten gevonden" een zoekveld. Wanneer je hier iets intypt, zie je dit niet terug. Dat komt omdat zowel de achtergrond als de kleur van het tekst wit is. De contrastratio is hier 1.0:1 en dat is te laag (een contrast van 4,5:1 is vereist). Zorg dat de tekst kleur een andere kleur heeft dan de achtergrondkleur.

Bevinding 10: Op pagina https://jeugdombudsman.denhaag.nl/over/ staat een groen (HEX #4BB649) blok ("de organisatie") als achtergrondkleur van zwarte tekst, dit is contrast technisch goed. De hyperlink "hier" is blauw (HEX #2867B2) en daarvan is het contrast te laag, nl. 2.2:1 waar een contrast van 4,5:1 is vereist.

Bevinding 11: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Inleiding staat een koptekst "Over de Jeugdombudsman" met een witte tekst op een blauwe (HEX #26A2DC) achtergrond. Hier is de contrastratio 2.8:1, maar wordt minimaal een contrastratio van 4,5:1 verwacht.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 12: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt op pagina https://jeugdombudsman.denhaag.nl/inloopspreekuur/ een deel van de tekst van het overzicht met alle data en locaties van de spreekuren buiten beeld. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken.
Zie ook SC 1.4.10

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende

Bevinding 13: Advies: De tekst op de afbeelding is voor niemand goed te lezen, dit is dus geen toegankelijkheidsprobleem. Slechtziende bezoekers kunnen hierdoor wel het gevoel krijgen dat ze belangrijke informatie missen. Het zou mooier zijn om een ander illustratie bij dit artikel te plaatsen of aan te geven dat dit een afbeelding is van de infographic in de PDF waarnaar op deze pagina naar wordt gelinkt: https://jeugdombudsman.denhaag.nl/wp-content/uploads/2023/10/DenHaag_ombudsman_IG_ExternKlachtrecht_RGB.pdf. Overigens is deze PDF wel goed in te zoomen voor slechtzienden, maar voor blinde bezoekers is de PDF niet toegankelijk gemaakt.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 14: Bij een schermgrootte van 1280x1024px verdwijnt op pagina https://jeugdombudsman.denhaag.nl/inloopspreekuur/ een deel van de tekst van het overzicht met alle data en locaties van de spreekuren buiten beeld. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken.
Zie ook SC 1.4.4

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 15: Wanneer de Zoekknop op pagina https://jeugdombudsman.denhaag.nl/ toetsenbordfocus heeft, is dat zichtbaar door een zwarte focusrand. De contrastverhouding tussen de focusrand en de donkerblauwe (HEX #282E5E) knop is 1.2:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast. Zie ook SC 2.4.7.

Bevinding 16: Wanneer de formuliervelden op pagina https://jeugdombudsman.denhaag.nl/contact/ toetsenbordfocus hebben, is dat zichtbaar door een blauwe (HEX #28A3DC) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 2.8:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Een soortgelijk probleem zien we terug op pagina https://jeugdombudsman.denhaag.nl/klacht-over-de-jeugdombudsman/ bij de focusrand van de formuliervelden. Hier wordt dezelfde blauwe (HEX #28A3DC) kleur gebruikt.

Bevinding 17: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Inleiding staat een "Volgende knop" waarmee je naar Stap 2 kunt navigeren. Deze knop is groen (#4CB74A) met witte tekst. Hier is het contrastratio 2.5:1, maar wordt minimaal een contrastratio van 3:1 verwacht. Dezelfde kleurencombinatie wordt gebruikt bij de formulierstappen/de kleur waarmee de actieve pagina wordt aangegeven.
Op de volgende pagina (https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens) staat een vorige knop in dezelfde kleur groen.

Bevinding 18: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens staat een formulier. Het contrast van de grijze formulierranden (HEX #D2D2D2) op de witte achtergrond is te laag. De contrastverhouding is hier 1.5:1, waar dit minimaal 3:1 moet zijn.
Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Een soortgelijk probleem zien we terug op de pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Klacht waar de formuliervelden dezelfde grijze kleur hebben.

Bevinding 19: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Klacht kun je, wanneer je op de vorige pagina hebt gekozen om een bijlage mee te sturen een bestand kiezen om te uploaden. Deze lichtblauwe (#D3ECF9) knop heeft op de witte achtergrond te weinig contrast, nl. 1.2:1 waar dit minimaal 3:1 moet zijn.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 20: De PDF "Jaarverslag-2022-Jeugdombudsman-Leidschendam-Voorburg" heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Bevinding 21: De PDF "DenHaag_ombudsman_IG_ExternKlachtrecht_RGB" heeft een documenttitel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://jeugdombudsman.denhaag.nl/ kan je met de tabtoets door de pagina navigeren. Er wordt in de HTML gebruikgemaakt van het attribuut tabindex=0 op bijvoorbeeld de cookiemelding. Daardoor ontstaat er een onlogische focusvolgorde, een niet interactief element krijgt focus. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert. Plaats geen tabindex="0" op elementen die geen focus horen te krijgen.

Bevinding 23: Op pagina https://jeugdombudsman.denhaag.nl/over/ staan onder de koptekst "veelgestelde vragen" een aantal accordeons/openklap menu's. Deze hebben aria-hidden=true. Sommige ven deze elementen bevatten focusbare elementen, bijvoorbeeld "Welke rechten heeft een kind". Sommige browsers zetten alsnog de focus in dat gebied. Inhoud waarop focus kan komen, moet tabindex="-1" hebben of uit de DOM worden verwijderd. Dit komt voor op meerdere pagina's binnen de website (daar waar accordeon of openklap menu's worden gebruikt) zoals op https://jeugdombudsman.denhaag.nl/veelgestelde-vragen/ en https://jeugdombudsman.denhaag.nl/hoe-werkt-het/.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 24: Op pagina https://jeugdombudsman.denhaag.nl/ komt meerdere keren de knoptekst "Lees verder" voor. De links verwijzen naar verschillende pagina’s/nieuwsberichten.
Een soortgelijk probleem zien we terug op dezelfde pagina bij de slides "Dakloos zonder daklozenuitkering". Hier wordt meerdere keren de knopnaam "Lees het hele verhaal" gebruikt. De links verwijzen naar verschillende pagina’s/nieuwsberichten. Dit is verwarrend voor onder andere screenreadergebruikers, maar ook voor mensen die baat hebben bij een duidelijke navigatiestructuur. Zorg ervoor dat identieke linkteksten hetzelfde linkdoel hebben. Of geef knoppen verwijzend naar een verschillende linkdoelen een andere toegankelijke naam, bijvoorbeeld door de titel van het artikel toe te voegen.
Dit komt op meerdere pagina's binnen de websites voor.
Bijvoorbeeld op pagina https://jeugdombudsman.denhaag.nl/publicaties/ en https://jeugdombudsman.denhaag.nl/publicatie/jaarverslag-2022-leidschendam-voorburg/ hebben meerdere knoppen de naam "Lees verder".

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://jeugdombudsman.denhaag.nl/ staat het logo van de Jeugdombudsman Den Haag. De toegankelijke naam van dit logo is "Terug naar de startpagina". Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is, liefst vooraan.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 26: In de eigenschappen van PDF "Jaarverslag-2022-Jeugdombudsman-Leidschendam-Voorburg" is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

Bevinding 27: In de eigenschappen van PDF "DenHaag_ombudsman_IG_ExternKlachtrecht_RGB" is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 28: Wanneer bezoekers op pagina https://jeugdombudsman.denhaag.nl/contact/ geen of foutieve invoer invullen, verschijnen er foutmeldingen. Bijvoorbeeld 'Dit veld is vereist.' Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld Voornaam is niet ingevuld’. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

Bevinding 29: Wanneer bezoekers op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens geen of foutieve invoer invullen, verschijnen er foutmeldingen onder het veld. Bijvoorbeeld 'Vul in a.u.b.' Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld Achternaam is niet ingevuld’. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 30: Op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens is een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'.

Bevinding 31: Op pagina https://jeugdombudsman.denhaag.nl/nieuws/ staan 4 keuzemenu's om de nieuwsberichten te filteren. Drie ervan hebben de toegankelijke naam "Selecteren...". Dit zou kunnen worden aangevuld met het label, zodat duidelijk is waar de keuzes voor dienen: Onderwerp selecteren..., Soort Selecteren..., Gemeente Selecteren.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 32: Formulierveld "E-mailadres" in het formulier op pagina https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/jeugdombudsman/scOmbudsmanKlachtJeugd.aspx/Gegevens vraagt om "Maak a.u.b. een keuze", maar het betreft geen keuzemenu of selectievakjes.

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 33: Op pagina https://jeugdombudsman.denhaag.nl/publicaties/ staat een fieldset met als aria-attribuut "aria-descripedby". Hier zit een spelfout in en moet eigenlijk "aria-describedby" zijn.

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-04-20 07:18:27 v2.4-011