Rapport:
Audit digitale toegankelijkheid website jeugdhulphaaglanden.nl

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website https://www.jeugdhulphaaglanden.nl/default.aspx geeft de volledige tekst "Jeugdhulp Haaglanden regionale samenwerking" weer, maar de alt-tekst is alleen "Jeugdhulp Haaglanden logo". 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. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Jeugdhulp Haaglanden regionale samenwerking”.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx werkwn onder "Aanbieders", "Gemeenten"en "Ouders/jongeren" de pijlpictogrammen als links, maar het tekstalternatief ontbreekt, waardoor de links niet toegankelijk zijn. Deze afbeeldingen zijn dus interactief. Er zijn geen tekstalternatieven. Daardoor hebben de links geen linktekst (zie ook succescriterium 2.4.4 en 4.1.2). Om de links toegankelijk te maken, moeten de afbeeldingen tekstalternatieven krijgen die het linkdoel beschrijven. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden. Hetzelfde probleem wordt waargenomen met links als pijlpictogrammen op pagina's https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx en https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx.

Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx bevat een carrousel onder de header afbeeldingen zonder tekstalternatieven. Bij afbeeldingen die met het img-element zijn geplaatst, wordt het tekstalternatief met het `alt`-attribuut toegevoegd. Hetzelfde probleem wordt waargenomen op pagina's https://www.jeugdhulphaaglanden.nl/shortcuts/search_search.aspx?search=jeu, https://www.jeugdhulphaaglanden.nl/Beheer/Toegankelijkheidsverklaring/default.aspx, https://www.jeugdhulphaaglanden.nl/404.aspx. Zie ook de carrousels op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2885783.aspx onder het kopje "Verbinding tussen mondige inwoners" en op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx onder het kopje "Afbeeldingen".

Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx wordt gebruikgemaakt van hCaptcha. Er is echter geen tekstalternatief beschikbaar voor de afbeeldingen in de CAPTCHA. Ook biedt de website momenteel geen toegankelijk alternatief voor de CAPTCHA als geheel. Daarom moet de CAPTCHA zelf volledig toegankelijk zijn — wat op dit moment niet het geval is. De instructie ‘klik op elke afbeelding met…’ maakt het doel van de afbeeldingen enigszins duidelijk, maar dit is niet voldoende. Ons advies is om helemaal geen CAPTCHA te gebruiken, omdat dit altijd een drempel opwerpt voor gebruikers. Zie de Engelstalige pagina https://www.w3.org/TR/turingtest/ voor meer informatie en mogelijke alternatieven. Hetzelfde probleem doet zich voor op de pagina https://www.jeugdhulphaaglanden.nl/Beheer/Registraties/1807910.aspx.

Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx onder het kopje "Handige documenten" staan links die decoratieve afbeeldingen bevatten, zie bijvoorbeeld de link "Regionaal afwegingskader schadelijk wachten op Jeugdhulp". Deze afbeeldingen zijn toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx, staan secties met verborgen inhoud onder "Handige documenten". In deze secties staan links die dialoogvensters openen. Bijvoorbeeld: de link "Werkagenda 2024-2025 gemeenten Oudersraad en Jong Doet Mee!.pdf" in de sectie "Werkagenda 2024-2025 gemeenten Oudersraad en Jong Doet Mee" opent een dialoogvenster waarin het PDF-bestand wordt weergegeven. De PDF is opgenomen in een object-element. Dit object-element bevat echter geen tekst. Hulpsoftware krijgt geen informatie over de inhoud van dit object. Dit kan worden opgelost door tekst aan dit element toe te voegen. Ook de attributen title, aria-label of aria-labelledby kunnen worden gebruikt om een tekstalternatief te bieden. Andere oplossingen zijn mogelijk.

Het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 bevat een logo bovenaan als artefact. Zie pagina 1. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een `Figure`-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft. Hetzelfde probleem staat in het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2982166.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 staat een decoratieve afbeelding die is toegevoegd via een figuur-tag en een automatisch gegenereerde beschrijving heeft. Zie afbeelding op pagina 1 met beschrijving “Afbeelding met persoon, overdekt, kleding, tafel Automatisch gegenereerde beschrijving”.
Deze tekst geeft geen duidelijke informatie over wat op de afbeelding staat. Hierdoor weten bezoekers die het document laten voorlezen niet wat op de afbeelding te zien is. Zij missen zo dus informatie. Voeg beschrijvende alt-teksten toe aan deze informatieve afbeeldingen.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.jeugdhulphaaglanden.nl/default.aspx wordt in de footer de volgende tekst ten onrechte gemarkeerd met <strong> in plaats van met het juiste kop-element: "Contact". 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.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx staat onder de header een groep links die visueel als één groep worden weergegeven, maar deze groepering wordt niet weerspiegeld in de HTML-structuur. Zie de links: "Aanbieders", "Gemeenten" en "Ouders/jongeren". Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element. Hetzelfde probleem doet zich bijvoorbeeld ook voor op andere pagina's, https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx en https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx. Dit komt op meerdere pagina’s voor.

Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/default.aspx staat een kruimelpad. Dit is een groep links die visueel als een groep worden weergegeven, maar deze groepering wordt niet weerspiegeld in de HTML-structuur. Zie hetzelfde op pagina's met kruimelpad: https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx, https://www.jeugdhulphaaglanden.nl/404.aspx, https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx, en anderen. Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx zie de links “Ervaringskennis van ouders; het verhaal van Marleen” en “Op weg naar gelijkwaardigheid, het verhaal van Alexandra” onder “Afbeeldingen”.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx wordt het <strong> element verkeerd gebruikt voor stylingdoeleinden. Zie de linkteksten "mijn platform" en "Meld je nu aan." binnen de alinea die begint met "Werk je in onze jeugdhulpregio...." en de linkteksten onder het kopje "Gemeenten", bijvoorbeeld "Gemeente Wassenaar". 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. Hetzelfde probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/default.aspx in paginering voor de huidige pagina, op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx onder de kop “Regionale bibliotheek” met de tekst die begint met “In deze bibliotheek vind …”, op pagina https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx onder de kop “Ga naar” and “Netwerksamenwerking Huiselijk Geweld (0-100)”.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx, onder de kop "Gemeenten" is een lijst met 9 items aanwezig, maar de correcte markering ontbreekt. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Hetzelfde probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx#opvoeden_opgroeien onder de kop "Gemeenten".

Op pagina https://www.jeugdhulphaaglanden.nl/Beheer/Toegankelijkheidsverklaring/default.aspx staat een kop “Samenvatting”. Het heading-element en het strong-element worden gebruikt in deze kop. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag het element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS.

Op pagina https://www.jeugdhulphaaglanden.nl/Beheer/Toegankelijkheidsverklaring/default.aspx de volgende tekst is niet gemarkeerd als een kop: "Uitgebreide toegankelijkheidsverklaring". 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. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan 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.

Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx staan in de sectie met verborgen inhoud onder "Handige documenten" teksten die geen koppen zijn, maar ze zijn onjuist gemarkeerd met een <h3>. Bijvoorbeeld, wanneer de sectie onder "Kwartaalrapportage SbJH 2023" is geopend, zie de tekst "Kwartaalrapportage SbJH 2023.xlsx". Het kop-element (h3) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h3-element. Een soortgelijk probleem doet zich voor op de pagina https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx met de teksten “Routekaart naar Veiligheid” en “Intensief Case Management”.

Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2885783.aspx wordt onder de koppen "Verbinding tussen mondige inwoners", “Rol gemeenten naar samenleving”, “Blijvend actief als vrijwilliger en in het gezin” het <em>-element misbruikt voor stylingdoeleinden. Hele zinnen zijn opgenomen in het <em>-element. Het em-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 (cursieve tekst). Gebruik hiervoor CSS.

Op pagina https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx beschrijven sommige koppen de inhoud die erop volgt niet goed. Zie de kop "Ga naar". Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”. Hetzelfde staat op de pagina https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx.

Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx staan onder het kopje "Handige documenten" secties met verborgen inhoud. In de HTML-code zijn elke sectie en de bijbehorende verborgen inhoud gemarkeerd als afzonderlijke lijstitems (<li>-elementen) binnen één ongeordende lijst (<ul>). Deze structuur zorgt voor verwarring in de semantiek en hiërarchie, met name voor gebruikers van schermlezers. De uitklapbare onderdelen worden als losse lijstitems geïnterpreteerd, terwijl ze visueel duidelijk bij het bovenliggende item horen. Daardoor presenteren schermlezers de onderdelen als twee niet-verwante items, wat niet overeenkomt met de visuele groepering op de pagina. Dit belemmert de toegankelijkheid en kan het voor gebruikers lastig maken om de relatie tussen de elementen te begrijpen.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 staan verschillende koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld op pagina 1 "Regionaal afwegingskader schadelijk wachten op Jeugdhulp", op pagina 2 "Inleiding", op pagina 3 "Afwegingen in het gedwongen kader", op pagina 5 "Het afwegingskader", en andere. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2982166, staan koppen die niet als kop zijn gemarkeerd. Zie op pagina 1 "Werkagenda gemeenten, JONG doet mee! en de Oudersraad Haaglanden 2024-2025", "Inleiding", "Een notitie vooraf", en de koppen op andere pagina's. Daarnaast zijn de volgende teksten ten onrechte voorzien van `L`- en `Li`-tags in plaats van de juiste H-tags: "1. Liefdevolle jeugdhulp", "2. Aanpak wachttijden" en "3. Toekomstgericht werken/Niet stoppen voordat de Big 5 op orde is".

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 staat op pagina 5 - 6 een lijst met 3 items, maar elk item is onjuist getagd als een aparte lijst met behulp van de L-tag. Hierdoor ontstaan drie lijsten met één item in plaats van één enkele lijst. Als gevolg hiervan kondigen schermlezers elk item aan als een op zichzelf staande lijst, wat verwarrend kan zijn en niet de bedoelde structuur weergeeft. Om dit probleem op te lossen, moeten alle lijstitems in een enkele L-tag worden opgenomen, waarbij elk item in zijn eigen LI-tag wordt geplaatst om de juiste structuur weer te geven.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2982166 staat op pagina 1 - 2 een lijst van 4 items die is gemarkeerd als twee aparte lijsten met twee L-tags. Hetzelfde probleem wordt waargenomen bij de lijst met 2 items onder "Monitoring werkagenda" op pagina 3.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 staat op pagina "11" een lijst met "10" items. De juiste opmaak ontbreekt. Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen. Markeer de lijst met een `L`- en `Li`-tags.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 staat op pagina 7 - 8 een gegevenstabel. De juiste opmaak ontbreekt. De kolomkopcel met tekst "Toelichting" boven het tweede deel van de tabel is onjuist gemarkeerd met TD-tag. De cellen in de kolom onder "Afwegingen in het gedwongen kader" zijn onjuist gemarkeerd met TH-tag. Zie bijvoorbeeld de cel met tekst die begint met "1. Is er een veiligheidsrisico voor de jeugdige ...". Bij een datatabel moeten speciale tags toegevoegd worden voor de tabelkoppen. Dan begrijpen schermlezers de relatie tussen de kop en onderliggende datacellen. Markeer de cellen in de koprij van de tabel met `TH`-tags en de datacellen met `TD`-tags. Bovendien is deze tabel gemarkeerd als twee aparte tabellen met twee `Table`-tags. Een enkele `Table`-tag moet worden gebruikt voor deze tabel om de juiste structuur weer te geven.

Het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 bevat tekst die is toegevoegd als artefact. Dit is de tekst met paginanummers, bijvoorbeeld "Pagina 2 van 11". Hierdoor wordt deze informatie verborgen voor gebruikers van schermlezers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/search_search.aspx?search=jeu onder de carrousel in de tekst die begint met "Wil je specifiek zoeken op ... " staat een link: "tag-lijst". Deze link is alleen in kleur anders dan omringende gewone tekst, en het kleurcontrast tussen deze kleuren is onvoldoende. Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. U kunt dit probleem oplossen door het contrast te verhogen tot ten minste 3,0:1 en een andere visuele aanwijzing toe te voegen bij hoveren, zoals onderstrepen. Hetzelfde probleem doet zich voor op pagina https://www.jeugdhulphaaglanden.nl/Beheer/Registraties/1807910.aspx met de link "Gebruikersvoorwaarden" onder het kopje "Gebruikersvoorwaarden".

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.jeugdhulphaaglanden.nl/default.aspx heeft de de placeholder-tekst in de zoekbalk in het bovenste menu onvoldoende kleurcontrast. De grijze (HEX #858C97) placeholder-tekst tegen de witte achtergrond heeft een contrastratio van 3,4:1, wat lager is dan de vereiste 4,5:1 voor standaardtekst.

Op alle pagina's van de website https://www.jeugdhulphaaglanden.nl/default.aspx heeft de tekst op de knop "Mijn platform" onvoldoende kleurcontrast. De donkerpaarse (HEX #3F316D) tekst tegen de groene (HEX #329678) achtergrond heeft een contrastratio van 3,1:1, wat onder het vereiste minimum van 4,5:1 voor standaardtekst ligt. Deze knop heeft ook onvoldoende contrast wanneer deze toetsenbordfocus krijgt. De huidige contrastratio is 3,6:1 tussen witte tekst en de groene (HEX #329678) achtergrond.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx staan meerdere links met een onvoldoende kleurcontrast van groen (HEX #329678) wanneer de muisaanwijzer over de witte achtergrond wordt bewogen. De contrastratio is 3,6:1, wat lager is dan het vereiste minimum van 4,5:1 voor normale tekst. Zie bijvoorbeeld de links "mijn platform" en "Meld je nu aan." binnen de tekst "Werk je in onze jeugdhulpregio...", de link "Bekijk alle verhalen" onder het kopje "Actueel", de links onder het kopje "Agenda", en andere. Interactieve elementen moeten in alle toestanden voldoende contrast hebben, dus ook als de muis erover beweegt (hover). Hetzelfde probleem wordt waargenomen in de cookiemelding bij de knop "Anuuleren" en selectievakjes, op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx bij de linktekst "Gebruik de toegankelijke versie van hCaptcha" en de knop "Versturen", op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/search_search.aspx?search=jeu bij links in de zoekresultaten. Zie ook andere pagina's. Deze teksten zijn kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/Users_ShowProfile.aspx#tab=updatesTab staat, als de bezoeker is ingelogd, lichtgrijze (HEX #79828F) tekst onder de naam van de bezoeker op een witte achtergrond. De kleurcontrastratio is te laag: 3,9:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem doet zich voor op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/updates/default.aspx#tab=updatesTab op het tabblad "Updates" wanneer het selectievakje "Alleen updates tonen van items die je volgt" niet is ingeschakeld met bijvoorbeeld de tekst "2 dagen geleden - Ontwikkeltafel op thema".

Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx staat een zoekveld onder "Handige documenten". Als het zoekveld toetsenbordfocus krijgt, wordt de tekst "Zoeken in pagina" grijs (HEX #888888). Het contrastratio met de witte achtergrond is 3,5:1. Dit moet minstens 4,5:1 zijn.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 wordt de combinatie van oranje en witte kleuren gebruikt. Het kleurcontrast is te laag. Bijvoorbeeld, op pagina 1 staat аn oranje (HEX #ED7D32) tekst "Regionaal afwegingskader schadelijk wachten op jeugdhulp" op een witte achtergrond. De kleurcontrastratio is 2,8:1. Zorg dat het contrast minimaal 3,0:1 is. Op pagina 1 heeft de tekst "05-12-2023" een oranje kleur (HEX #C45911) tekst op een witte achtergrond. Het contrast is 4,4:1. Dit moet minstens 4,5:1 zijn. Op pagina 2 heeft de oranje (HEX #ED7D32) linktekst "https://www.nji.nl/publicaties/afwegingen-bij-de-inzet-van-schaarse-jeugdhulp" op een witte achtergrond een contrast van 2,8:1. Zorg dat het contrast minimaal 4,5:1 is. Op pagina 7 - 8 staat een tabel met а witte tekst op oranje (HEX #DD752E) achtergrond. De kleurcontrastratio is te laag: 3,2:1. Zorg dat het contrast minimaal 4,5:1 is.

In het PDF-document op https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 op pagina 5 en 7 heeft het woord "rode" een rode kleur (HEX #FF0000) op de witte achtergrond. Het kleurcontrast is te laag: 4,0:1. Dit moet minstens 4,5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://www.jeugdhulphaaglanden.nl/default.aspx wordt ingezoomd op 200%, is de link met de tekst "Aanbieders" onder het hoofdmenu niet zichtbaar.Als een bezoeker inzoomt, moet alles nog werken. Hetzelfde probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx met de link "Ik wil meepraten".

Wanneer de pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd tot 200%, overlapt het vergrootglaspictogram de placeholdertekst "Zoeken in pagina". Als een bezoeker inzoomt, moet alles nog leesbaar zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx wordt een carrousel weergegeven met afbeeldingen en knoppen om tussen de slides te navigeren. Deze knoppen zijn transparante witte stippen die over de afbeeldingen zijn geplaatst. De contrastratio tussen de kleur van de inactieve knop en de (dynamisch veranderende) achtergrond van de carrousel is op sommige punten minder dan 3,0:1.Zorg dat het contrast tussen de knoppen en de achtergrondkleur(en) minimaal 3,0:1 is. Hetzelfde probleem wordt bijvoorbeeld waargenomen op pagina's met een carrousel, https://www.jeugdhulphaaglanden.nl/shortcuts/search_search.aspx?search=jeu, https://www.jeugdhulphaaglanden.nl/Beheer/Toegankelijkheidsverklaring/default.aspx, https://www.jeugdhulphaaglanden.nl/404.aspx , en anderen.

Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx staat onder de header een carrousel met afbeeldingen en knoppen om tussen de dia's te schakelen. De actieve knop wordt aangegeven door de blauwe (HEX #00AFEA) rand op de witte achtergrond. Het kleurcontrast is 2,5:1. Dit moet minstens 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx staat een formulier met een hCaptcha. Daarbij verschijnt een extra venster met de instructie: "Klik, houd vast en sleep het element aan de rechterkant naar de vorm die er het meest op lijkt." Het is echter niet mogelijk om dit object met het toetsenbord te selecteren, waardoor de captcha niet toegankelijk is voor mensen die geen muis kunnen gebruiken. Zorg ervoor dat alle interactieve elementen volledig met het toetsenbord te bedienen zijn. Hetzelfde probleem doet zich ook voor op de pagina https://www.jeugdhulphaaglanden.nl/Beheer/Registraties/1807910.aspx.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx onder de header staat een carrousel die na elke paar seconden een nieuwe afbeelding weergeeft. 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. 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx verwijst de link "Direct naar pagina inhoud" naar de sectie onder "Delen" en slaat unieke inhoud boven dit doel over. De skiplink moet verwijzen naar de unieke inhoud op de pagina. Zorg dat de skiplink naar de juiste plek verwijst. Een soortgelijk probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx. De link "Direct naar pagina inhoud" verwijst naar de sectie onder "Ga naar", maar er is meer unieke inhoud boven dit doel en dit zijn de links: "Routekaart naar Veiligheid", "Intensief Casemanagement" en "Bibliotheek". Een soortgelijk probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/Users_ShowProfile.aspx#tab=updatesTab. De link "Direct naar pagina inhoud" slaat twee knoppen over: met een potloodpictogram en een slotpictogram.

De pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx is een skiplink aanwezig maar deze is niet functioneel. Er moet een manier zijn om herhalende content die op elke pagina staat 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 toetsenbordfocus krijgt. Zorg dat de skiplink werkt zoals hierboven is beschreven. Hetzelfde probleem doet zich voor op de pagina's https://www.jeugdhulphaaglanden.nl/404.aspx en https://www.jeugdhulphaaglanden.nl/shortcuts/cookiestatement.aspx.

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2905536 heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-instellingen een documenttitel ingesteld worden. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de PDF-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document. Hetzelfde probleem wordt waargenomen met de PDF https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/HandlerDownloadFiles.ashx?idnv=2982166.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website https://www.jeugdhulphaaglanden.nl/default.aspx werkt als een link naar de homepage. Deze bestemming is niet duidelijk omdat de toegankelijke naam van de link gewoon "Jeugdhulp Haaglanden logo" is. Geef deze link meer inhoud om duidelijk te maken dat deze link naar de homepagina verwijst.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx staan onder "Aanbieders", "Gemeenten" en "Ouders/jongeren" pijlpictogrammen die werken als links, maar hun alt-attributen zijn leeg (alt=""), waardoor ze verborgen zijn voor schermlezers. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk.
Hetzelfde probleem wordt waargenomen met links als pijlpictogrammen op pagina's https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx en https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx staan onder het kopje "Gemeenten" links met afbeeldingen van getallen. Zie bijvoorbeeld de link met de afbeelding van "2" voor de link "Gemeente Den Haag". De toegankelijke namen van de links maken de bestemming van deze links onduidelijk, waardoor onduidelijkheid ontstaat, vooral voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers. Bijvoorbeeld "opsommingscijfer 2 Gemeente Den Haag". De kaart waar deze nummers naar verwijzen is verborgen voor hulpsoftware. De cijfers voegen geen extra informatie en dienen te worden verborgen voor het alt-attribuut leeg te laten.
Hetzelfde geldt voor pagina https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx.

Advies. Sommige links op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx hebben een title-attribuut dat de linktekst dupliceert. Zie de links “Ervaringskennis van ouders; het verhaal van Marleen” en “Op weg naar gelijkwaardigheid, het verhaal van Alexandra” te vinden onder de kop “Afbeeldingen”. Deze herhaling zorgt ervoor dat gebruikers van schermlezers dezelfde tekst twee keer achter elkaar te horen krijgen. Voegt een title-attribuut geen nieuwe informatie toe aan de linktekst? Dan kan dit beter achterwege worden gelaten. Hierdoor vermindert het aantal herhalingen voor bezoekers met een schermlezer.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx staan secties met verborgen inhoud onder "Handige documenten". In deze secties staan links die dialoogvensters openen, bijvoorbeeld de link "Werkagenda 2024-2025 gemeenten oudersraad en Jong Doet Mee!.pdf" in de gelijknamige sectie. Alle dialoogvensters hebben de toegankelijke naam: "Download link", die de inhoud van het dialoogvenster niet voldoende beschrijft. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/2906036.aspx staat onder het kopje "Afbeeldingen" een carrousel met afbeeldingen. In de rechterbovenhoek bevindt zich een knop waarmee afbeeldingen op volledig scherm kunnen worden weergegeven. De toegankelijke naam van deze knop is "Afbeelding fullscreen tonen", afkomstig van het aria-label-attribuut. Wanneer op deze knop wordt geklikt en de afbeelding in volledig scherm wordt geopend, verandert het pictogram op de knop en wijzigt de functie: de knop sluit dan de volledig scherm-modus af. Ondanks deze functiewijziging blijft de toegankelijke naam ongewijzigd: "Afbeelding fullscreen tonen". Dit is niet correct. De toegankelijke naam van de knop moet overeenkomen met de actuele functie ervan. Zodra de functie verandert, moet ook de toegankelijke naam worden aangepast, zodat schermlezers en andere assistieve technologieën de juiste informatie overbrengen. Zorg ervoor dat de toegankelijke naam van de knop dynamisch mee verandert met de functie.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/default.aspx staat een artikel met de tekst in een andere taal zonder taalcode. Zie het artikel met de kop "Orange the World" en de tekst onder deze kop "Orange the World”. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst in het Engels is, voeg je lang="en" toe aan het element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/sendcontactmessage.aspx wordt in het formulier bij de "Anti spam controle" de volgende foutmelding weergegeven: "Om spam tegen te gaan vragen we je om voor het versturen de optie 'Ik ben een mens' aan te vinken." Dit is eigenlijk geen foutmelding, maar een instructie. Een goede foutmelding maakt duidelijk dat er iets mis is gegaan en waar het probleem zich bevindt. Vaak bevat een foutmelding een ontkenning, zoals: "Het veld is niet (goed) ingevuld." De huidige melding geeft niet aan dat er een fout is opgetreden en kan daardoor verwarrend zijn voor bezoekers. Dit is vooral lastig voor mensen die gebruikmaken van schermlezers of andere ondersteunende technologie. De melding moet dus worden aangepast zodat deze duidelijk aangeeft dat er een fout is en wat de gebruiker kan doen om deze te herstellen. Hetzelfde probleem komt ook voor op de pagina https://www.jeugdhulphaaglanden.nl/Beheer/Registraties/1807910.aspx.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.jeugdhulphaaglanden.nl/default.aspx onderaan, opent de knop "Cookie-instellingen" een dialoogvenster, maar deze functionaliteit wordt niet aangegeven in de code. Om dit op te lossen, kan het attribuut aria-haspopup="dialog" worden toegevoegd aan de knop. Dit attribuut geeft aan dat het klikken op de knop een dialoogvenster opent. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het aria-expanded-attribuut, dat de waarde true of false moet krijgen. Een soortgelijk probleem wordt waargenomen op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx. Er zijn secties met verborgen inhoud onder "Handige documenten". In deze secties staan links die dialoogvensters openen, bijvoorbeeld de link "Werkagenda 2024-2025 gemeenten oudersraad en Jong Doet Mee!.pdf" in de sectie met dezelfde naam.

Op alle pagina’s van de website https://www.jeugdhulphaaglanden.nl/default.aspx geeft de zoekbalk in het bovenste menu tijdens het typen suggesties weer in een vervolgkeuzelijst. Deze functie werkt feitelijk als een combobox. De bijbehorende ARIA-rol ontbreekt echter, waardoor hulpsoftware deze functionaliteit mogelijk niet correct kan interpreteren. Om deze zoekbalk toegankelijk te maken als combobox, voeg je de role="combobox" toe aan het invoerveld om aan te geven dat het een combobox is. Het element dat de suggestielijst bevat moet een role="listbox" hebben. Het aria-expanded attribuut moet worden toegevoegd aan het invoerveld om de status van de suggestielijst aan te geven. Stel aria-expanded="true" in als de lijst zichtbaar is en aria-expanded="false" als hij verborgen is. Voor het combobox-element moet aria-controls worden ingesteld op een waarde die verwijst naar het element dat dienst doet als keuzelijst. Deze attributen helpen hulptechnologieën om de zoekbalk correct te herkennen en te gebruiken als combobox. Raadpleeg voor meer informatie de pagina https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Op pagina https://www.jeugdhulphaaglanden.nl/default.aspx staat onder het kopje "Aanbieders" een link met een pijlpictogram. De toegankelijke naam van deze link ontbreekt, waardoor de link niet wordt herkend door schermlezers. Hetzelfde probleem doet zich voor onder de kopjes "Gemeenten" en "Ouders/jongeren" op dezelfde pagina. Geef deze link een toegankelijke naam die het doel van de link beschrijft.
Hetzelfde probleem wordt waargenomen op pagina's https://www.jeugdhulphaaglanden.nl/ouders-jongeren/default.aspx, https://www.jeugdhulphaaglanden.nl/netwerksamenwerking/default.aspx.

Op pagina https://www.jeugdhulphaaglanden.nl/Beheer/Registraties/1807910.aspx wordt hCaptcha gebruikt. Binnen de CAPTCHA staat een menu met drie punten. Als bezoekers "Toegankelijkheid" kiezen, verschijnt er een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam, waardoor screenreaders de inhoud niet aan gebruikers kunnen overbrengen. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Op pagina https://www.jeugdhulphaaglanden.nl/shortcuts/Users_ShowProfile.aspx#tab=updatesTab staat, als de bezoeker is ingelogd, een knop om een foto toe te voegen. Deze knop heeft geen toegankelijke naam. Knoppen moeten altijd een toegankelijke naam hebben die hun functie beschrijft. Toegankelijke namen mogen nooit leeg zijn, want zonder deze naam weet een blinde bezoeker niet wat de knop doet. Zorg dus dat deze knop een toegankelijke naam krijgt die beschrijft wat de functie is.

Op pagina https://www.jeugdhulphaaglanden.nl/uit+de+regio/default.aspx staan in de artikelen links met een hartpictogram. Deze links hebben meerdere toestanden (bijvoorbeeld ingedrukt, niet ingedrukt), maar er ontbreekt een programmatische aanduiding van hun huidige toestand. Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop. Zorg dat de toestand van de link ook in de code wordt weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.jeugdhulphaaglanden.nl/regionale+bibliotheek/default.aspx staat een zoekveld onder "Handige documenten". Wanneer de bezoeker een zoekopdracht uitvoert, wordt er een wachtanimatie weergegeven in het zoekveld. Deze animatie, die dient als statusbericht, is niet toegankelijk voor blinde bezoekers. Hoewel de role="status" wordt gebruikt, werkt deze niet. Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.
Een soortgelijk probleem wordt waargenomen bij berichten als "23 resultaten voor "werk"", "Geen resultaten gevonden" die verschijnen zonder dat de pagina opnieuw wordt geladen. Dit bericht, dat een statusbericht is, wordt echter niet aangekondigd door schermlezers.