Rapport:
Audit digitale toegankelijkheid website sbjh.nl

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, bijvoorbeeld https://sbjh.nl, ontbreekt alt-tekst bij het logo bovenaan de website. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Een lege alt-tekst betekent: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moeten informatieve afbeeldingen altijd een alt-tekst krijgen. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Op veel pagina’s, zoals bijvoorbeeld https://sbjh.nl/, staat een SVG met een enveloppictogram dat fungeert als link. Deze link heeft echter geen tekstalternatief, waardoor hij niet toegankelijk is voor gebruikers van schermlezers. Hetzelfde probleem doet zich voor bij de link met het omhoog wijzende pijltje. Ook daar ontbreekt een tekstalternatief, waardoor de functie van de link niet wordt overgebracht aan mensen die afhankelijk zijn van assistieve technologie. Om de links toegankelijk te maken, moeten de afbeeldingen alt-teksten krijgen die het linkdoel beschrijven. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.

Op pagina https://sbjh.nl/, onder de kop "Onze partners", staan logo's. Deze logo's zijn informatieve afbeeldingen die zijn geïmplementeerd als div-elementen met de rol van img en missen alternatieve tekst. Om dit probleem op te lossen, voeg betekenisvolle alternatieve tekst toe aan elk logo door het aria-label attribuut te gebruiken of door de div-elementen te vervangen door juiste <img>-elementen met beschrijvende alt-attributen. Dit zorgt ervoor dat de logo's toegankelijk zijn en hun doel duidelijk is voor alle bezoekers.

Op pagina https://sbjh.nl/nieuws/ onder de koppen "Een samenleving die gezonder, veiliger en kansrijker is om in op te groeien", “Pilot zij-instromers jeugdhulp start in 2024 in Haaglanden” en “Mbo als werkplaats voor jeugdhulp”, staan logo’s. Deze logo's zijn toegevoegd als achtergrondafbeeldingen en er is geen alternatieve tekst voorzien. 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.

Op pagina https://sbjh.nl/handboek/ staat onder de kop “Toegang Jeugdhulp” staat een schema met decoratieve afbeeldingen. De tekstalternatieven van de afbeeldingen dupliceren de kopteksten, bijvoorbeeld “Jeugdige en/of ouder zoekt hulp”. Deze afbeeldingen dragen geen andere informatie bij dan al in de kopteksten staat. Daarom kunnen ze als decoratief worden beschouwd. Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen. Dit probleem is ook gerelateerd aan succescriterium 1.3.2. Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/ vlakbij de kop “Vraag Verhelderen”.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/ staan onder de tekst “Lees meer:” secties met verborgen inhoud. In deze secties worden plus en miniconen gebruikt om aan te geven of de sectie geopend of gesloten is. Zorg ervoor dat schermlezers dit ook begrijpen. Voeg bijvoorbeeld een visueel verborgen tekst toe, of gebruik een aria-expanded-attribuut.

Op pagina https://sbjh.nl/jeugdhulpaanbieder/contractdocumenten-g-i-2020-e-v/, onder de kop “Raamovereenkomst”, staan links met PDF-iconen, bijvoorbeeld "Raamovereenkomst H1". Deze iconen hebben geen teksalternatieven. Hierdoor weet een blinde bezoeker niet dat dit een PDF-document is. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen. Voeg de informatie als verborgen tekst toe.

In het PDF-document op https://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf is op pagina 1 een logo opgenomen. Dit logo is toegevoegd via een figure-tag en bevat een automatisch gegenereerde beschrijving. De beschrijving luidt: “Afbeelding met tekst, Lettertype, wit, Graphics 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.

In het PDF-document op https://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf,op pagina "2", is de decoratieve afbeelding verkeerd gemarkeerd als een figuur met automatisch gegenereerde beschrijvingen "Afbeelding met cirkel, Graphics, Amber\n\nAutomatisch gegenereerde beschrijving". Deze beschrijvingen voegen niets toe aan de pagina, want de afbeeldingen zijn decoratief. Daarom mag hier niet de `Figure`-tag voor worden gebruikt. Verander de afbeeldingen in een artefact.

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, in het hoofdmenu, hebben de links “Jeugdhulpaanbieder”, “Gemeente” en “Contact” het aria-current=“page” attribuut, hoewel deze menu-items geen huidige pagina aangeven. Dit kan verwarrend zijn voor gebruikers van schermlezers. Zorg ervoor dat alleen de huidige menu-links het aria-current attribuut hebben met de juiste waarde (voor subpagina's is het beter de waarde “true” te gebruiken).

Op bijna alle pagina's, bijvoorbeeld op https://sbjh.nl/, staat een kop "Servicebureau Jeugdhulp Haaglanden – Spui 70, 2511 BT Den Haag". Het kop-element en het strong-element worden in deze kop gebruikt. 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 bijna alle pagina's, bijvoorbeeld op https://sbjh.nl/, onder de kop "Onze partners", is de tekst “Servicebureau Jeugdhulp Haaglanden – Spui 70, 2511 BT Den Haag” geen kop, maar het is incorrect gemarkeerd met een <h3>-element om de lettergrootte te vergroten. Het kop-element (h3) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. 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. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.
Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.

Op pagina https://sbjh.nl/ouder-verzorger-jeugdige/, onder de kop "Ouder-Verzorger-Jeugdige", is de tekst “Wij vinden het …” verkeerd gemarkeerd met het <strong>-element voor opmaakdoeleinden. Hele zinnen zijn in het <strong>-element opgenomen om ze vetgedrukt te maken. 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.

Op pagina https://sbjh.nl/ is de volgende tekst niet gemarkeerd als een kop: "Direct naar:". 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.
Let op dat koppen niet in een lijst-element (li-element) geplaatst mogen worden, aangezien dit de logische structuur van de tekst verstoort. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Plaats de kop buiten de lijst.

Op pagina https://sbjh.nl/contact/contact-sbjh/ zijn de volgende teksten incorrect gemarkeerd met <strong> in plaats van de juiste koptekst-elementen: "Postadres" en "Bezoekadres". 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. Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/startpunt-sbjh/, onder de kop “Informatie voor verwijzers en jeugdhulpaanbieders”, met de teksten “Bent u op zoek naar passende hulp voor een jeugdige?”, “Wilt u weten hoe het Startpunt werkt voor u als verwijzer of jeugdhulpaanbieder?” en “Heeft u een andere vraag?”.

Op pagina https://sbjh.nl/startpunt-sbjh/ ontbreekt bij de kop “Informatie voor verwijzers en jeugdhulpaanbieders”, in de sectie met verborgen inhoud “Vaakgestelde vragen”, de rol van kop bij de elementen die de verborgen inhoud openen en sluiten. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/, onder de tekst “Lees meer:”.

Op de pagina https://sbjh.nl/startpunt-sbjh/, in de sectie met verborgen inhoud “Vaakgestelde vragen”, staat een geordende lijst met 14 items. Deze hoofdlijst is correct gemarkeerd. Echter, elk item in deze lijst bevat een geneste lijst, en deze geneste lijsten zijn niet correct gemarkeerd. 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.

Op pagina https://sbjh.nl/over-ons/privacystatement-servicebureau-jeugdhulp-haaglanden/ onder het kopje “Website” staat een opsomming die niet als een lijst is gemarkeerd. De structuur van informatie die op de pagina te zien is, ontbreekt in de HTML.

Op pagina https://sbjh.nl/?s=geme wordt een kop van niveau 2 direct gevolgd door een andere kop van hetzelfde niveau. Het gaat hierbij om de koppen “Gemeente” en “Bijeenkomst gemeenten en jeugdhulpaanbieders”, die allebei als een H2 zijn gemarkeerd. Als twee koppen van hetzelfde niveau (bijvoorbeeld h2) direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Onder het eerste h2-element mag een h3-element komen, of andere content, maar niet nog een keer een h2-element.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/, is de volgende tekst niet gemarkeerd als kop: “Lees meer:”.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/, boven de kop "links", wordt het <em>-element verkeerd gebruikt voor opmaakdoeleinden, bijvoorbeeld “Hoe de toegang of … de consulenten, etc”. 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.

In het PDF-document op https://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf, zijn alle koppen niet gemarkeerd als koppen. Zie bijvoorbeeld “Algemene voorwaarden Servicebureau Jeugdhulp Haaglanden”, “I Algemeen”, “Artikel 1 Definities” en anderen. 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://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf staan op pagina 13, onder de tekst “26.1 Ieder der Partijen ..” en “26.2 Het SbJH is ook ..:” 2 lijsten. In de tags zijn deze lijsten gemarkeerd als één lijst met 1 L-tag.
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://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf, op pagina 3 bestaat de tekst “4.3 Slechts met voorafgaande schriftelijke …” uit een alinea tekst. In de tags zijn deze alinea's gemarkeerd als twee p-tags. Zie ook de alinea's die beginnen met “6.3” en “7A.4”. De visuele structuur moet weerspiegeld worden in de tags. Als tekst visueel uit een aantal alinea's bestaat, moet hetzelfde aantal `P`-tags aanwezig zijn in de tags. Zorg dat elke alinea in een aparte `P`-tag staat.

Het PDF-document op https://sbjh.nl/wp-content/uploads/2023/12/ROK-B1c-Nota-van-Inlichtingen-JB-en-JR-V20190925.pdf mist codes, waardoor de inhoud niet toegankelijk is voor schermlezers.
Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Advies. Op bijna alle pagina's, bijvoorbeeld https://sbjh.nl/contact/contact-sbjh/, onder de kop "Direct naar:", staat een groep links die visueel gepresenteerd wordt als een groep, maar deze groepering is niet weerspiegeld in de HTML-structuur.
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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://sbjh.nl/handboek/ staat onder de kop “Toegang Jeugdhulp” een schema. De volgorde van HTML-elementen binnen het schema is incorrect, met afbeeldingen boven de koppen. De huidige volgorde is afbeelding, kop. Als deze artikelen van boven naar beneden worden voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen en datums bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.
Dit kan worden opgelost door alle inhoud (afbeeldingen en tekst) 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. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Laat hiervoor de alt-tekst leeg (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: kop - inhoud.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://sbjh.nl/contact/contact-sbjh/ ontbreekt bij een formulier met invoervelden voor persoonlijke informatie (zoals “Achternaam”, “E-mailadres”, “Telefoonnummer”) het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://sbjh.nl/handboek/ wordt alleen kleur gebruikt in het schema om informatie te verstrekken. Zie de blauwe, rode en groene stippen. Mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bij een aantal teksten is het contrast van de tekstkleur tegen de achtergrond te laag. Daardoor kan de tekst slecht leesbaar zijn voor bezoekers met een visuele beperking. Tekst die kleiner is dan 18pt moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 18pt (24px) of 14pt (18,66px) vetgedrukt is dit minimaal 3,0:1. Met een vetgedrukte tekst bedoelen we een tekst die de CSS-eigenschap font-weight:bold of font-weight:700 heeft gekregen.

Op alle pagina's, bijvoorbeeld https://sbjh.nl/, staat oranje tekst (HEX #F37D2A) op een witte achtergrond of witte tekst op een oranje achtergrond. De contrastratio is te laag: 2,7:1. Tekst die kleiner is dan 18pt moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 18pt (24px) of 14pt (18,66px) vetgedrukt is dit minimaal 3,0:1. Hetzelfde probleem doet zich voor met grijs (HEX #ECECEC) in combinatie met oranje. De contrastratio is te laag: 2,3:1.

Op alle pagina's met broodkruimelnavigatie, bijvoorbeeld https://sbjh.nl/contact/contact-sbjh/, hebben de navigatielinks ("Home" en "Contact") onvoldoende kleurcontrast. De grijze tekst (HEX #A7A9AC) tegen de witte achtergrond heeft een contrastratio van 2,4:1, wat onder de vereiste 4,5:1 ligt voor tekst van standaardgrootte. Het contrast moet hier minimaal 4,5:1 zijn, omdat de tekst kleiner is dan 24px en niet vetgedrukt. Dit probleem komt op alle pagina’s met een kruimelpad voor waar deze kleurencombinatie is gebruikt. Dit kan opgelost worden door andere kleuren te gebruiken, waardoor het contrast tussen voor- en achtergrondkleur groter wordt.

Op pagina https://sbjh.nl/ staat de witte tekst “Actueel” op een achtergrondafbeelding met een hoofdkleur van HEX#DFDFDF. Op sommige delen van de afbeelding is de contrastratio tussen de tekst en de achtergrond slechts 1,3:1. Omdat de tekst groter is dan 24px, moet het contrast volgens de WCAG-richtlijnen minimaal 3,0:1 zijn.

Op pagina https://sbjh.nl/handboek/ staan grijze cijfers (HEX #9D9D9C) naast de links onder de kop “Handboek” op een witte achtergrond. De contrastratio is te laag: 2,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://sbjh.nl/ouder-verzorger-jeugdige/ staat op een klein scherm de zwarte tekst (HEX#222222) “Soms heb je wat extra … professional, van het” op een groene achtergrond (HEX#006464). De contrastratio tussen de tekst en de achtergrond is slechts 2,3:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt is, moet het contrast minimaal 4,5:1 zijn.

Op pagina https://sbjh.nl/handboek/handboek/ heeft het zoekveld op een klein scherm een grijze placeholdertekst (HEX#757575) op een lichtgrijze achtergrond (HEX#F2F2F2). De contrastratio tussen de tekst en de achtergrond is 4,1:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Dit probleem is gerelateerd aan succescriterium 1.4.11.

In het PDF-document op https://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf staat oranje (HEX #ED7D31) tekst “Algemene voorwaarden Servicebureau Jeugdhulp Haaglanden” op een witte achtergrond. De contrastratio is te laag: 2,8:1. Zorg dat het contrast minimaal 4,5:1 is. Hetzelfde probleem doet zich voor op pagina 2, 3, 9 en andere pagina's.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://sbjh.nl/handboek/ wordt ingezoomd naar 200%, zijn de links onder de kop “Handboek” niet zichtbaar. Als een bezoeker inzoomt, moet alles nog werken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Er ontstaan problemen als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Bij succescriterium 1.4.4 is al beschreven dat er content en/of functionaliteit verloren gaat als tot 200% wordt ingezoomd. Dat gebeurt ook als tot 400% wordt ingezoomd. Deze problemen zijn hier daarom niet nog een keer benoemd. Zorg dat de problemen niet alleen opgelost worden voor als tot 200% is ingezoomd, maar ook voor 400%.

Wanneer de pagina https://sbjh.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, of met een schermresolutie van 320px, is het logo van de partner “Gemeente Delft” gedeeltelijk niet zichtbaar omdat de link met de omhoog-pijl het tekstgedeelte overlapt. Zorg dat alle tekst leesbaar is op kleine schermen. Hetzelfde probleem wordt waargenomen op de pagina https://sbjh.nl/jeugdhulpaanbieder/test, met de tekst “Het lijkt erop dat er niets is gevonden op deze locatie”; op de pagina https://sbjh.nl/toegankelijkheidsverklaring/, met de link “toegankelijkheidsprobleem” en de tekst “melden”.

Als de pagina https://sbjh.nl/?s=geme wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, of met een schermresolutie van 320px, zijn de woorden "jeugdhulpaanbieders" en "contractdocumenten" te breed en worden ze niet afgebroken, waardoor ze buiten het venster vallen. Hierdoor moeten gebruikers horizontaal scrollen om het hele woord te kunnen lezen. Als een lang woord niet binnen beeld past bij een scherm van 320 pixels, moet het worden afgebroken. Er mag geen horizontale scrollbar komen. Los dit bijvoorbeeld op met de CSS-eigenschap word-break. Hetzelfde probleem is op de pagina https://sbjh.nl/toegankelijkheidsverklaring/ voor “Toegankelijkheidsverklaring” en “https://www.sbjh.nl(externe link)”; op de pagina https://sbjh.nl/jeugdhulpaanbieder/contractdocumenten-g-i-2020-e-v/ voor “samenwerkingsprotocol” en “Jeugdbeschermingstafel”.

Wanneer de pagina https://sbjh.nl/nieuws/ wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, of een schermresolutie van 320px, overlappen de links “Lees meer ...” de witte achtergrond van de logo's en worden ze gedeeltelijk onzichtbaar en onleesbaar. Als een bezoeker inzoomt, moet alles nog leesbaar zijn.
Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/jeugdhulpaanbieder/contractdocumenten-g-i-2020-e-v/ met lange woorden, zoals “samenwerkingsprotocol”, “Uitvoering”, “Jeugdbeschermingstafel” en andere.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website heeft het zoekpictogram in de zoekbalk in de header onvoldoende kleurcontrast ten opzichte van de achtergrond. Het oranje pictogram (HEX#F37D2A) op een witte achtergrond heeft een contrastratio van slechts 2,7:1. Het contrast van iconen en andere betekenisvolle grafische elementen moet minimaal 3,0:1 zijn, zodat ze goed zichtbaar zijn voor alle bezoekers, ook bij een visuele beperking.

Op de pagina https://sbjh.nl/contact/contact-sbjh/ staat een formulier. De contrastratio tussen de oranje (HEX#F37A1A) rand van de invoervelden en de witte achtergrond is 2,8:1.
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Op pagina https://sbjh.nl/handboek/ staat een schema. Sommige kleurcombinaties hebben onvoldoende contrast. Bijvoorbeeld, op een witte achtergrond heeft grijs (HEX#E6E6E6) een contrastverhouding van 1,2:1; lichtblauw (HEX#00C8E1) heeft een contrastverhouding van 2:1; en groen (HEX#12B376) heeft een contrastverhouding van 2,7:1. Het contrast tussen informatieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben. Hetzelfde probleem doet zich voor op het kleine scherm, onder de kop “Betrokkenen”, op een grijze achtergrond.

Op pagina https://sbjh.nl/handboek/handboek/ is op een klein scherm een zoekveld aanwezig. De contrastratio tussen de lichtgrijze (HEX#F2F2F2) randen van het zoekveld en de witte achtergrond van de pagina is 1,1:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Placeholder-tekst zou een alternatief kunnen zijn voor onvoldoende contrasterende invoerveldranden, maar deze placeholder-tekst heeft onvoldoende contrast, zie 1.4.3.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de site heeft het hoofdmenu items met submenus. Wanneer een bezoeker de muis over deze items beweegt, verschijnt het submenu. Deze submenus overlappen de inhoud van de pagina. De bezoeker moet de extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

Op pagina https://sbjh.nl/handboek/ staat een schema met links. Wanneer een bezoeker de muis over deze links beweegt, verschijnt er extra inhoud die andere elementen op de pagina overlapt. Dit gebeurt bijvoorbeeld bij de link “3 Doelen stellen”. Bezoekers moeten deze extra inhoud gemakkelijk kunnen sluiten, ook zonder muis of zonder dat de toetsenbordfocus verplaatst wordt. Het is belangrijk dat dit bijvoorbeeld kan door op de Escape-toets te drukken. Op die manier kunnen gebruikers de extra informatie snel verbergen en soepel verder navigeren naar de belangrijkste onderdelen van de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document https://sbjh.nl/wp-content/uploads/2023/12/ROK-B1c-Nota-van-Inlichtingen-JB-en-JR-V20190925.pdf 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 doet zich voor bij https://sbjh.nl/wp-content/uploads/2024/04/Algemene-Voorwaarden-Servicebureau-Jeugdhulp-Haaglanden.pdf.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's in het hoofdmenu, landt de toetsenbordfocus na de link "Jeugdhulpaanbieder", "Gemeente" en anderen op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Op pagina https://sbjh.nl/handboek/ landt de toetsenbordfocus op een onzichtbaar interactief element vóór de link met het logo.

Op pagina https://sbjh.nl/handboek/ verschijnt een menuknop bovenaan de pagina wanneer deze op een klein scherm wordt bekeken. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers het mobiele menu verlaten met behulp van het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu open 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. Hetzelfde probleem doet zich voor op het kleine scherm met het zoekveld dat extra inhoud opent.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website ontbreekt bij het logo bovenaan de pagina, dat tevens als link fungeert, een beschrijvende tekst van de bestemming. Voor bezoekers die gebruikmaken van hulpsoftware, zoals schermlezers, is het daardoor niet duidelijk waar de link naartoe leidt.
Op bijna alle pagina’s, zoals bijvoorbeeld https://sbjh.nl/, staat een SVG-afbeelding van een enveloppictogram dat fungeert als link. Doordat er geen beschrijving is toegevoegd, is deze link niet toegankelijk voor schermlezers en dus onzichtbaar voor gebruikers die daarvan afhankelijk zijn. Hetzelfde probleem doet zich voor bij een SVG-afbeelding met een omhoog wijzend pijltje die ook als link dient. Zorg ervoor dat deze SVG-iconen een betekenisvolle tekstalternatief krijgen, bijvoorbeeld met behulp van een title-element binnen de SVG, een aria-label op de link, of door de SVG als decoratief te markeren als het geen functionele betekenis heeft. Zo wordt de functionaliteit van de links ook begrijpelijk voor mensen die gebruikmaken van assistieve technologie. Een soortgelijk probleem doet zich voor op de pagina https://sbjh.nl/ouder-verzorger-jeugdige/ voor een SVG onder de kop “Videohandleiding Startpunt Jeugdhulp Haaglanden”.
Op pagina https://sbjh.nl/startpunt-sbjh/ ontbreekt bij de link met een afbeelding naast "Welkom op het Startpunt Jeugdhulp Haaglanden" de inhoud, waardoor de link geen herkenbaar doel heeft. 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.

Op pagina https://sbjh.nl/handboek/ staat navigatie in de zijkolom. De cijfers geven volgorde van hoofdstukken aan. Deze informatie ontbreekt in de link naar een hoofdstuk.

Op pagina https://sbjh.nl/handboek/ staat naast de tekst "Jeugdige en/of ouder zoekt hulp" een link die geen inhoud heeft en daardoor geen duidelijk doel voor de link biedt. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/ staan in de sectie met verborgen inhoud “Advies en/of doorverwijzing lokale team gemeente” de links “1” en “2” die verwijzen naar voetnoten. De toegankelijke namen van deze links bestaan enkel uit de cijfers “1” en “2”, wat onvoldoende informatie geeft over het doel van de links. Voor gebruikers van schermlezers is het daardoor niet duidelijk waar deze links naartoe leiden of wat hun functie is. Dit probleem kan worden opgelost door visueel verborgen tekst aan de linkteksten toe te voegen, bijvoorbeeld via aria-label of met extra toegankelijke tekst in een span met class="visually-hidden". Op die manier blijven de links visueel eenvoudig, maar krijgen ze voor schermlezers een duidelijke, beschrijvende naam, zoals: “Voetnoot 1: uitleg over …” of “Zie toelichting bij punt 2”.

Uitkomst: Onvoldoende

Bevindingen: Er is geen tweede manier om de pagina https://sbjh.nl/handboek/ te vinden op deze website. Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, bijvoorbeeld https://sbjh.nl/, is de toetsenbordfocus niet zichtbaar op de knop met het vergrootglasicoon in het zoekveld. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen. Een vergelijkbaar probleem doet zich voor op https://sbjh.nl/handboek/, met filtercheckboxen die openen na het activeren van de zoekfunctie.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/, onder de tekst “Lees meer:”, staan secties met verborgen inhoud. De toetsenbordfocus is niet zichtbaar op deze secties.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, bijvoorbeeld https://sbjh.nl/, toont het logo de tekst: "servicebureau Jeugdhulp Haaglanden". De toegankelijke naam ontbreekt. 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.

Op pagina https://sbjh.nl/handboek/ ontbreekt de toegankelijke naam bij het invoerveld in de zoekbalk. De zichtbare tekst (placeholder-tekst) is "Zoeken in handboek en documenten". Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-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.

Op pagina https://sbjh.nl/handboek/ staan links met toegankelijke namen zoals "1", "2", "3" enz., die stapnummers vertegenwoordigen. Er is veel meer tekst te zien, maar de zichtbare tekst is niet opgenomen in deze links. Hetzelfde probleem doet zich voor bij de link met zichtbare tekst "Jeugdige en/of ouder zoekt hulp", waarbij de toegankelijke naam ontbreekt. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://sbjh.nl/handboek/ is de primaire taal van deze pagina Nederlands, maar het lang-attribuut is onjuist ingesteld op "en-US". Zorg dat de primaire taal van de pagina aangegeven is met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen. Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

In de metadata van de PDF op https://sbjh.nl/wp-content/uploads/2023/12/ROK-B1c-Nota-van-Inlichtingen-JB-en-JR-V20190925.pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://sbjh.nl/?s=geme is de taal van de pagina correct ingesteld op Nederlands (nl-NL), en de inhoud is ook in het Nederlands. Het <title>-element is echter gedeeltelijk in het Engels, namelijk “You searched for geme - Servicebureau Jeugdhulp Haaglanden”, wat een mismatch creëert tussen de taal van de pagina en de titel. Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/jeugdhulpaanbieder/test, met de titel “Page not found - Servicebureau Jeugdhulp Haaglanden”.

Op pagina https://sbjh.nl/contact/contact-sbjh/ verschijnt na het indienen van het formulier, een bericht “Thanks for contacting us! We will get in touch with you shortly” in het Engels, terwijl de rest van de pagina in het Nederlands is.Voeg een lokale taalswitch toe of vertaal dit bericht in het Nederlands.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://sbjh.nl/contact/contact-sbjh/ is de foutmelding in het formulier "Dit veld is vereist". Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op bijna alle pagina's, bijvoorbeeld https://sbjh.nl/, staat een SVG-afbeelding met een envelop-icoon dat fungeert als een link. Deze link mist een toegankelijke naam. Hetzelfde probleem doet zich voor bij de link met een pijltje omhoog. 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. Een soortgelijk probleem doet zich voor op de pagina https://sbjh.nl/ouder-verzorger-jeugdige/ voor een link onder de kop “Videohandleiding Startpunt Jeugdhulp Haaglanden”; op de pagina https://sbjh.nl/handboek/, met de link naast de tekst “Jeugdige en/of ouder zoekt hulp”.

Op pagina https://sbjh.nl/handboek/ heeft het zoekveld in het bovenste menu geen toegankelijke naam. Hierdoor weten bezoekers die een schermlezer gebruiken niet wat ze in dit veld moeten invullen. Geef een toegankelijke naam aan het invoerveld.

Op pagina https://sbjh.nl/handboek/, onder de kop “Betrokkenen”, staan knoppen zoals “Cliënt” die meerdere toestanden kunnen aannemen, bijvoorbeeld ingedrukt of niet ingedrukt. Deze toestanden worden echter niet programmatisch aangegeven in de code. Daardoor kunnen hulptechnologieën, zoals schermlezers, de huidige staat van de knop niet doorgeven aan de gebruiker. Voor blinde of slechtziende bezoekers is het daardoor niet duidelijk of een knop actief is of niet. Zorg ervoor dat de toestand van de knop ook in de code wordt weergegeven, bijvoorbeeld met behulp van het attribuut aria-pressed of andere passende ARIA-attributen. Zo wordt de informatie over de status van de knop toegankelijk voor iedereen.

Op pagina https://sbjh.nl/handboek/, op een klein scherm, verschijnt een menuknop met drie horizontale lijnen die het mobiele navigatiemenu opent. Deze knop heeft momenteel geen toegankelijke naam. Hetzelfde probleem geldt voor de “x”-knop in het geopende menu. Zorg dat deze knoppen een toegankelijke naam krijgen die de functie van de knop beschrijft. Zorg ook dat de naam mee verandert als de functie van de knop verandert (“menu openen” of “menu sluiten”). Hetzelfde probleem staat op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/.

Op pagina https://sbjh.nl/handboek/ verschijnt op een klein scherm een menuknop waarmee het mobiele navigatiemenu wordt geopend. Deze knop geeft echter geen informatie over de huidige toestand van het menu — of het geopend of gesloten is — aan bezoekers die het niet kunnen zien, zoals gebruikers van schermlezers. Daardoor is het voor deze gebruikers niet duidelijk of het menu zichtbaar is of niet, wat de navigatie bemoeilijkt. Zorg ervoor dat de toestand van het menu programmatisch wordt aangegeven, bijvoorbeeld met het attribuut aria-expanded. Dit attribuut moet dynamisch worden aangepast wanneer het menu wordt geopend of gesloten, zodat schermlezers de juiste informatie kunnen doorgeven. Hetzelfde probleem doet zich voor op de pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/.

Op pagina https://sbjh.nl/handboek/handboek/ik-zoek-hulp/vraag-verhelderen/ staan onder de tekst “Lees meer:” secties met verborgen inhoud. Hoewel de open of gesloten status visueel duidelijk is, wordt deze status niet programmatisch doorgegeven aan schermlezers.Dit kan worden opgelost door het attribuut aria-expanded te gebruiken om aan te geven of de sectie open of gesloten is. Op die manier kunnen schermlezers de juiste status aan gebruikers communiceren.

Uitkomst: Voldoende