WCAG-EM rapport veiligthuiswb.nl (SMO Brabant) 2025-04-01
Over dit onderzoek
Dit onderzoek is uitgevoerd volgens de evaluatiemethode WCAG-EM
Opdrachtgever en systeem
veiligthuiswb.nl (SMO Brabant)
Steekproef
- Homepagina: https://veiligthuiswb.nl/
- Zoeken: Veilig thuis: https://veiligthuiswb.nl/?s=veilig+thuis
- Het gaat niet goed thuis: https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Er is een melding over mij gedaan: https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- Informatie voor professionals: https://veiligthuiswb.nl/professionals/
- Zorgmeldformulier professionals (Regas): https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
- Vacatures: https://veiligthuiswb.nl/vacatures2/
- Vacature Medewerker Frontoffice: https://veiligthuiswb.nl/vacature/vacature-medewerker-frontoffice/
- Werken bij ons: https://veiligthuiswb.nl/werken-bij/werken-bij-veilig-thuis/
- Nieuwsbericht: Geweld in huiselijke kring: https://veiligthuiswb.nl/nieuwsbericht/geweld-in-huiselijke-kring/
- Nieuws: https://veiligthuiswb.nl/over-veilig-thuis/actueel-nieuws/
- Nieuwsbericht: Week tegen kindermishandeling: https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
- Over Veilig Thuis: https://veiligthuiswb.nl/over-veilig-thuis/
- Onze kennis: https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Klacht indienen: https://veiligthuiswb.nl/jouw-rechten/klacht-indienen/
- Jouw rechten: https://veiligthuiswb.nl/jouw-rechten/rechten-als-client-klachten/
- Neem contact met ons op: https://veiligthuiswb.nl/over-veilig-thuis/contact/
- Colofon: https://veiligthuiswb.nl/1513-2/
- 404: https://veiligthuiswb.nl/404/
- Klachtenprocedure (pdf): https://veiligthuiswb.nl/wp-content/uploads/2024/08/Klachtenprocedure-Veilig-Thuis-West-Brabant-06082024.pdf
- Factsheet interventieteam (pdf): https://veiligthuiswb.nl/wp-content/uploads/2024/08/Factsheet-Interventieteam.pdf
- Jaarverslag 2023 Veilig Thuis (pdf): https://veiligthuiswb.nl/wp-content/uploads/2024/08/Veilig-Thuis-WB-jaarverslag-2023-definitief.pdf
Omvang van de analyse en beperkingen
Binnen Scope
- Alle pagina's onder https://veiligthuiswb.nl/
- Alle pagina's achter https://work.regas.nl/veiligthuiswb/ (Zorgmeldformulier)
Buiten Scope
- Alle pagina's achter https://chat-client-veiligthuis.serviant.nl (Chat)
- Het klachtenformulier in Word, achter https://veiligthuiswb.nl/wp-content/uploads/2024/08/Klachtenformulier-VTWB-05082024.docx
Type test
Volledig
Technologieën die in de website/ app worden gebruikt
HTML, CSS, JavaScript, WAI-ARIA, SVG, PDF
Opdrachtgever
SMO Brabant
Onderzoeker
Roel Antonisse - Deul,
Peter Teunis
Tweede lezer: Laure Tolsma
Gebruikte tools en browsers
- VoiceOver macOS 15.3
- Safari macOS 15.3
- Google Chrome Versie 134.0.6998.117 (Officiële build) (arm64),
- Stark Accessibility Checker
- Stylus
- Axe DevTools
Standaard, versie en conformiteitsdoel gebruikt
WCAG 2.1 AA
Managementsamenvatting
Jullie website heeft nu een score van 40%:
- We baseren deze score op 24 pagina’s. Deze pagina’s zijn zorgvuldig uitgekozen om een goed beeld te geven van de website.
- 20 van de 50 criteria voldoen. Van de 20 criteria die voldoen, zijn er 6 criteria niet van toepassing.
- Pdf-documenten tellen in dit onderzoek mee als pagina’s.
Jullie website is al toegankelijk voor sommige mensen, maar nog niet voor iedereen. Dit betekent dat een groot deel van de gebruikers de website nog niet goed kan gebruiken.
Wat kunnen jullie nu doen om de toegankelijkheid te verbeteren?
Hieronder vinden jullie een aantal verbeterpunten in aanvulling op de rest van het rapport. Per punt leggen we uit wat werkt en wat meer aandacht nodig heeft om volledig toegankelijk te zijn:
- Kleurgebruik en contrast. Dit is de meest voorkomende fout en is ook het snelst op te lossen door te kijken naar de huisstijlen. De meeste kleuren in combinatie met wit hebben een te laag contrast. Het gaat hierbij om felle kleuren zoals: blauw, oranje groen en rood. Wanneer je deze kleuren als achtergrond voor tekst gebruikt, pas deze dan aan zodat minimaal een contrast van 3:1 wordt behaald. Met deze kleuren kan je ook het beste met zwarte tekst combineren. Als deze kleuren als tekstkleur worden ingezet, pas deze dan aan zodat minimaal een contrast van 4.5:1 wordt gehaald. Hulpmiddelen zoals Stark of Colour Contrast Analyzer helpen met het bepalen van de contrastwaarde.
- Interactieve componenten (Toetsenbord en hulptechnologie zoals een schermlezer). Veel problemen komen door het gebruik van betekenisloze HTML elementen. Zorg dat de juiste HTML elementen worden toegepast, zoals een button-element voor knoppen en ook voor formuliervelden het juiste input-element. Deze bevatten de juiste informatie en gedrag. Dit lost dan een groot deel van de problemen op. Het kan ook zijn dat er bepaalde modules of extensies voor de website zijn gebruikt die geen toegankelijke HTML code gebruiken. Probeer hierbij op te letten bij het maken van een keuze, door bijvoorbeeld een demonstratie pagina zelf te testen op bijvoorbeeld toetsenbord gebruik en eventueel met een hulpmiddel als Wave van WebAIM.
- Formulieren makkelijker kunnen invullen. Dit probleem zorgt ervoor dat hulpmiddelen van Veilig Thuis, zoals de chat en het zorgmeldformulier, niet makkelijk gebruikt kunnen worden. Het gaat hierbij om het geven van duidelijke instructies en suggesties voor verbetering wanneer er restricties op de invoer aanwezig zijn. Denk hierbij aan een format voor een e-mail adres, datum of een postcode veld. Maar ook het duidelijk aangeven van een verplicht veld en in tekst kunnen blijven zien waar de fout zit en wat je moet invullen bij een invoerveld.
Maken jullie nieuwe pagina’s aan?
Neem deze en andere verbeterpunten uit het rapport dan vooral mee. Sommige verbeterpunten gelden voor verschillende pagina’s. Let er daarom goed op bij het aanmaken van nieuwe pagina’s dat deze fouten niet worden herhaald. Dat zorgt voor tevreden gebruikers.
Aanvullende adviezen voor een toegankelijke en gebruiksvriendelijke website
Als laatste willen wij nog een paar punten uitlichten. Dit zijn geen eisen vanuit de WCAG 2.1 niveau AA, maar belangrijke adviezen om mee te nemen om de website toegankelijker en gebruiksvriendelijker te maken:
- Er zijn formulieren in een Word of PDF document aanwezig. Zog dat ook deze in HTML vorm terugkomen op de website. Dit maakt het voor bezoekers makkelijker in te vullen.
Checklist
Voldoende | Onvoldoende | Niet van toepassing | Totaal | % |
---|---|---|---|---|
14 | 30 | 6 | 50 | 40 % |
Hebben betrekking op de standaarden, maar zijn geen onderdeel van specifieke richtlijn
U101: Toegankelijkheids-ondersteunende technologie wordt gebruikt zoals HTML5, WAI-ARIA, CSS3 of JavaScript Voldoende
Toelichting
Alle gebruikte technologieën moeten ondersteuning bieden voor toegankelijkheidsinformatie en moeten gebruikt kunnen worden met hulpsoftware
Dit criterium heeft geen betrekking op een specifiek WCAG-criterium, maar moet behaald worden om aan de richtlijnen te voldoen
Notitie bij het onderzoek
HTML, CSS, JavaScript, WAI-ARIA
U701: De website/ app is getest met screenreaders op zowel desktop als mobiel om te controleren of alle content toegankelijk is en correct werkt. Voldoende
Toelichting
Test in ieder geval met VoiceOver op iOS en NVDA op Firefox of Chrome op Windows.
U801: De website/ app heeft een goede toegankelijkheidspagina Onvoldoende
Toelichting
Dit is verplicht om te voldoen aan het Besluit Digitaal Toegankelijke Overheid, en de European Accessibility Act.
1.1.1 Niet-tekstuele inhoud
U201: Alle betekenisvolle afbeeldingen en visuele elementen hebben een tekstueel alternatief dat de betekenis goed kan overbrengen Onvoldoende
Toelichting
Voorbeelden van betekenisvolle grafische elementen zijn foto's, illustraties en pictogrammen die worden gebruikt om informatie te verstrekken of een soort visuele aanwijzing aan de gebruiker te geven. Voor gebruikers met een visuele beperking is het belangrijk dat zij op een andere manier dezelfde informatie krijgen.
De grens tussen betekenisvolle en decoratieve afbeeldingen is subjectief, maar als u afbeeldingen gebruikt om de boodschap die u aan uw gebruikers communiceert te versterken, moeten de afbeeldingen bijna altijd een tekstalternatief hebben.
Er zijn enkele uitzonderingen op dit criterium, zoals wanneer het tekstalternatief herhaling zou veroorzaken. Bijvoorbeeld, u zou een printerpictogram kunnen hebben met de zichtbare tekst "Afdrukken" in directe nabijheid. Als het pictogram zijn eigen tekstalternatief had, zou de informatie worden gedupliceerd.
Om een tekstalternatief te bieden voor een <img>, gebruik de alt-attribuut wanneer mogelijk. Als dit niet mogelijk is, kunt u het aria-label attribuut gebruiken (bijv. op <svg> afbeeldingen).
Het belangrijkste is dat alle informatie die met afbeeldingen wordt gegeven, ook beschikbaar is in tekst.
Bevindingen per richtlijn
Afbeelding zonder tekstueel alternatief
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een informatieve afbeelding zonder tekstueel alternatief gevonden. Zie bijvoorbeeld:
- Het meer informatie icoon bij een invoerveld
- De knop toevoegen bij “gegevens van de directbetrokkenen”
- Het logo van veilig thuis heeft geen alternatieve tekst
Dit probleem komt voor op onder andere de volgende pagina: Zorgmeldformulier professionals (Regas) https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
Icoon zonder alternatieve tekst
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een informatiedragende icoon gevonden zonder alternatieve tekst. Zie bijvoorbeeld:
- Header navigatie zoek icoon. De zoekknop heeft geen alternatieve tekst, bijvoorbeeld “zoek”. De knop heeft hierdoor ook geen toegankelijke naam.
Dit probleem komt voor in de Website header, op alle onderzochte webpagina's van veiligthuiswb.nl.
Afbeelding met verkeerd of ontoereikend tekstueel alternatief
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een afbeelding gevonden waarvan het tekstueel alternatief verkeerd of niet voldoende omschrijvend is. Zie bijvoorbeeld:
- Over Veilig Thuis: https://veiligthuiswb.nl/over-veilig-thuis/
- De profielfoto onder de tekst ‘’Mevrouw J.W.M. Kuypers, directeur-bestuurder’’. Het doel van de afbeelding is het visueel identificeren, een beschrijving van de uiterlijke kenmerken mist.
- De afbeelding waarin de drie logo’s staan van SMO Breda, Veilig Thuis West-Brabant en Safe Group.
- Nieuwsbericht: Week tegen kindermishandeling https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
- De alt-tekst van de poster “week tegen kindermishandeling” komt niet overeen met de tekst op de poster. Voeg een betere beschrijving toe, bijvoorbeeld: “affiche week tegen kindermishandeling 2024 met tekst: …”.
- Homepagina https://veiligthuiswb.nl/
- Afbeelding onder de kop “Geweld in huiselijke kring”. Tekst in afbeelding “Twijfel jij of iemand thuis wel veilig is?”, title “116-008-017-VWS-Geweld-Huiselijke-Kring-LinkAd-Kindergeweld-1x1_07-08-2024”. Dit lijkt een bestandsnaam.
Afbeelding zonder visueel tekstueel alternatief alt
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een afbeelding gevonden met een tekstueel alternatief anders dan via het alt-attribuut, waardoor er geen vervangende tekst zichtbaar is als de afbeelding mist. Zie bijvoorbeeld:
- Afbeelding onder de kop “Geweld in huiselijke kring”. Alternatief staat in title attribuut.
Dit probleem komt voor op onder andere de volgende pagina: Homepagina https://veiligthuiswb.nl/
U202: Afbeeldingen die decoratief zijn, of waar een tekstueel alternatief zou leiden tot herhaling voor de gebruiker, hebben geen tekstueel alternatief Onvoldoende
Toelichting
Als afbeeldingen gebruikt worden als een link, en er ook tekst in de link staat, moet er geen alt-tekst toegevoegd worden als deze dezelfde informatie zou geven.
Om decoratieve afbeeldingen goed te delen kan je CSS background images gebruiken, je kan het alt-attribuut leeg laten, of je kan role="presentation" op de afbeelding zetten.
Bevindingen per richtlijn
Afbeelding niet opgemaakt als decoratief
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een decoratieve afbeelding gevonden die niet te negeren is voor hulptechnologie. Zie bijvoorbeeld:
- Het logo in de footer van het pdf-document Klachtenprocedure. Dit probleem komt voor op onder andere de volgende pagina('s):
- Onder de koptekst “Nieuwsberichten”, de omslagafbeeldingen van links naar de nieuwsberichten. Dit probleem komt voor op onder andere de volgende pagina('s):
-
- Nieuwsbericht: Week tegen kindermishandeling https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
- Nieuws https://veiligthuiswb.nl/over-veilig-thuis/actueel-nieuws/
U203: Video's en animaties hebben een titel nodig die het onderwerp beschrijft Onvoldoende
Toelichting
Video's en animaties moeten een titel hebben die het onderwerp beschrijft. Hier wordt verwacht dat het element een titel heeft van wat de content van de video of animatie is.
Dit kan je doen door een kop boven de video of tekst te zetten. Als je bijvoorbeeld een video op de website zet waarin een introductie wordt gegeven over digitale toegankelijkheid, is het afdoende om een kop met de tekst "Introductie digitale toegankelijkheid" te plaatsen.
Bevindingen per richtlijn
Video zonder titel
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een video gevonden zonder titel. De titel informeert schermlezergebruikers over de inhoud van de video.
Zie bijvoorbeeld:
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- De video "Wat gebeurt er als je te maken krijgt met Veilig Thuis?".
- Werken bij ons; https://veiligthuiswb.nl/werken-bij/werken-bij-veilig-thuis/
- De (enige) promovideo.
U212: Een kaart heeft een titel en beschrijving die het doel van de kaart beschrijft Niet van toepassing
Toelichting
Als een plattegrond wordt toegevoegd aan de pagina, moet er een titel worden toegevoegd aan de plattegrond. Op deze manier is het duidelijk voor gebruikers wat de context en onderwerp is van de plattegrond.
1.2.1 Alleen audio en alleen video (vooraf gemaakt)
U204: Vooraf opgenomen audio fragmenten hebben een gelijk tekstueel alternatief Voldoende
Toelichting
Een link naar de text versie is voldoende, maar het moet duidelijke gelabeld zijn zodat de gebruiker het makkelijk kan vinden
1.2.2 Bijschriften (vooraf opgenomen)
U205: Alle vooraf opgenomen video content heeft ondertiteling Voldoende
Toelichting
Om te voldoen aan de EN 301 549 en WCAG richtlijnen moeten de ondertitelingen in dezelfde taal zijn als de video.
1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen)
U213: Er is audiobeschrijving of een media-alternatief voor video's Onvoldoende
Toelichting
Er wordt een alternatief geleverd voor video’s. Hier kan op twee manieren aan worden voldaan:
- Het aanbieden van audiobeschrijving: Een audiobeschrijving legt uit wat er visueel gebeurt in een video in de vorm van een audiotrack. Er wordt zo context toegevoegd aan visuele informatie. Dit is dus een extra toevoeging aan de normale bijschriften van een video, zoals ondertiteling. Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.
- Of het aanbieden van een media-alternatief: Hieronder valt bijvoorbeeld een volledig teksttranscriptie van de video.
Er zijn uitzonderingen:
- Wanneer de video zelf al een alternatief is en is duidelijk als zodanig gemarkeerd.
- Je hebt geen audiobeschrijving nodig als alle informatie in de video in de reguliere soundtrack wordt verstrekt.
Bevindingen per richtlijn
Vooraf opgenomen video zonder alternatief of audiobeschrijving
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is vooraf opgenomen video met audiotrack gevonden, zonder een tekstueel alternatief of audiobeschrijving die de belangrijke video-inhoud beschrijft.
- De video Wat gebeurt er als je te maken krijgt met Veilig Thuis?.
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- De (enige) promovideo.
- Werken bij ons; https://veiligthuiswb.nl/werken-bij/werken-bij-veilig-thuis/
Tip: Voeg audiodescriptie toe om te voldoen aan WCAG 2.1 AA, dit is verplicht bij video's voor 1.2.5 op niveau AA.
1.2.4 Bijschriften (live)
U206: Er worden ondertitels voor doven en slechthorende geleverd voor alle live audiocontent in gesynchroniseerde media Niet van toepassing
1.2.5 Audiobeschrijving (vooraf opgenomen)
U208: Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media Onvoldoende
Toelichting
Een audiobeschrijving legt uit wat er visueel gebeurt in de video aan gebruikers die niet kunnen zien. Dit wordt vaak gedaan als een aparte video met een audiodescriptie, maar kan ook worden gedaan als een extra audiotrack op de originele video dat de gebruiker kan aan- en uitzetten.
Voorbeelden van visuele informatie die moet worden opgenomen in de audiobeschrijving zijn tekstlabels en naamborden.
Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.
Hier is een voorbeeld van een audiobeschrijving: https://www.youtube.com/watch?v=O7j4_aP8dWA
Bevindingen per richtlijn
Vooraf opgenomen video zonder audiobeschrijving
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een vooraf opgenomen video met audio gevonden, zonder audiobeschrijving van de visueel gepresenteerde informatieve inhoud van de video. Zie bijvoorbeeld:
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- De video “Wat gebeurt er als je te maken krijgt met Veilig Thuis?” mist bij de aftiteling het benoemen van veilig thuis. Het logo is in beeld zonder audiodescriptie.
- Werken bij ons; https://veiligthuiswb.nl/werken-bij/werken-bij-veilig-thuis/
- De promovideo mist audiodescriptie voor alle zichtbare tekst.
1.3.1 Info en relaties
U302: Alle visuele koppen zijn in de code weergeven als semantische koppen met het bijbehorende kop-niveau Onvoldoende
Toelichting
Gebruik HTML elementen H1 tot H6. Als dat niet mogelijk is kunt u WAI-ARIA gebruiken.
Bevindingen per richtlijn
Kop niet programmatisch opgemaakt
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een kop gevonden die niet goed is opgemaakt als kop in de code.
- Koppen in de uitklapbare content zijn opgemaakt met strong. De uitvouwbare content op bijvoorbeeld pagina's:
- Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- Op Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
- De kop “Toelichting”
- De (sub)kop “Zorgen of vermoedens”
- De (sub)kop “Meldcode”
Kopniveaus niet logisch genest
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
De niveaus en volgorde van de koppen (h-elementen) gebruikt op de pagina zijn niet logisch en kunnen verwarrend werken voor de gebruiker. Het is belangrijk om erop te letten dat de verschillende kopniveau’s goed genest zijn; het gebruik van de verschillende niveaus dient te gebeuren op basis van de functie en niet de styling. Ook is het aan te raden geen kopniveau’s over te slaan.
- Koptekst “Werken bij ons” <h1>. De koptekst hoort qua structuur gelijk aan de kop “Geweld stopt niet vanzelf!” <h1> en “Nieuws” <h2>. Op de Homepagina; https://veiligthuiswb.nl/.
- De kop met niveau 2 "Bellen via Tolkcontact" valt boven niveau koppen zoals "Vacatures" waardoor deze met elkaar in hierarchie gegroepeerd zijn. Zorg dat alle gelijkwaardige onderwerpen op het zelfde kopniveau zijn geplaatst, bijvoorbeeld met een h2-element. Op "Neem contact met ons op"; https://veiligthuiswb.nl/over-veilig-thuis/contact/.
U303: Er worden geen kop-niveaus overgeslagen Voldoende met advies
Toelichting
H1 zou gevolgd moeten worden door een andere H1 of H2 kop. H2 zou gevolgd moeten worden door H1, H2 of H3 enz. Ga niet direct van H1 naar H4.
Notitie bij het onderzoek
Op elke webpagina wordt er wel een kopniveau overgeslagen.
Bevindingen per richtlijn
Sla geen kopniveaus over
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Het overslaan van kopniveaus kan verwarrend zijn en moet waar mogelijk worden vermeden, omdat het voor schermlezergebruikers effect kan hebben op de betekenis van onderdelen. Zorg er bijvoorbeeld voor dan een h1 niet direct wordt opgevolgd door een h4.
Dit komt voor op alle onderzochte webpagina’s.
U304: Er worden geen witregels of lege paragrafen gebruikt om ruimte te maken in de tekst Voldoende met advies
Toelichting
Typografie is belangrijk voor leesbaarheid. Onderdeel van typografie is de witruimte tussen tekstregels en rondom headings. Ruimte tussen tekst moet door formatting gemaakt worden, niet door witregels toe te voegen.
Witregels met meerdere line breaks of met lege paragrafen worden voorgelezen door hulpsoftware als "leeg" wat een vervelende UX tot gevolg heeft.
Bevindingen per richtlijn
Gebruik gemaakt van witregel voor opmaak
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is gebruik gemaakt van een <br> element om witruimte te creëren, terwijl CSS meer geschikt is. Gebruik <br>’s alleen om korte stukjes tekst van elkaar te scheiden, zoals contactgegevens, gedichten en songteksten.
Op de onderstaande pagina’s zijn veel <br>’s die alleen zijn gebruikt om witruimte te creëren. Localiseer de <br>’s met de zoekfunctie in de inspectortool op bijvoorbeeld:
- Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Colofon; https://veiligthuiswb.nl/1513-2/
- Jouw rechten; https://veiligthuiswb.nl/jouw-rechten/rechten-als-client-klachten/
U305: Lijsten hebben een juiste opmaak in de code Onvoldoende
Toelichting
In HTML zijn er drie verschillende soorten lijsten:
- Niet-gesorteerde lijsten, gemaakt met ul en li elementen
- Gesorteerde lijsten, gemaakt met ol en li elementen
- Omschrijvende lijsten, gemaakt met dl, dt en dd elementen
Bevindingen per richtlijn
Lijst niet (voldoende) programmatisch opgemaakt
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een lijst gevonden die in de code niet of niet voldoende als een lijst is opgemaakt. Hierdoor kan deze niet goed gedetecteerd worden door hulpsoftware.
- Op de tweede pagina van de Klachtenprocedure (pdf) staan twee lijsten die niet zijn opgemaakt als een lijst. Op pagina Klachtenprocedure (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Klachtenprocedure-Veilig-Thuis-West-Brabant-06082024.pdf
- De lijst, onder de koptekst ’’Tips als je huiselijk geweld vermoedt”, is met het br-element opgemaakt in plaats van ul-element. Op pagina Nieuwsbericht: Geweld in huiselijke kring; https://veiligthuiswb.nl/nieuwsbericht/geweld-in-huiselijke-kring/
U306: Het blockquote HTML-element wordt gebruikt voor langere citaten, en q voor kortere citaten Voldoende
Toelichting
Informatie over het blockquote element kan je vinden op:
https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote
Informatie over het q element kan je vinden op:
https://www.w3.org/TR/WCAG20-TECHS/H49
Denk er aan zelf geen aanhalingstekens te gebruiken bij q- en blockquote-elementen. Dit wordt door de browser of user agent gedaan.
U307: Er wordt correct gebruik gemaakt van WAI-ARIA Niet van toepassing
Toelichting
WAI-ARIA, oftewel ARIA, staat voor *Web Accessibility Initiative - Accessible Rich Internet Applications.* Dit zijn extra attributen die ontbrekende informatie kan melden aan hulptechnologieën.
Hiervoor is het belangrijk aria-attributen op correcte wijze te gebruiken. Als er gebruik gemaakt van onjuiste of overbodige aria-attributen, kan dit verwarring opleveren, vooral bij gebruik van een schermlezer.
U308: Regel- en kolomkoppen worden met th-elementen aangegeven en hebben het juiste scope- of header-attribuut Niet van toepassing
Toelichting
Het th-element wordt gebruikt om header-cellen van een tabel aan te geven. Dit kan een regel of kolom zijn, maar ook meerdere regels of kolommen. Zorg er voor dat cellen met data en cellen met headers goed aangegeven zijn. Dat kan bijvoorbeeld met het scope attribuut.
Het scope attribuut kan de volgende waardes hebben:
- row = een rij
- col = een kolom
- rowgroup = alle regels na deze cel binnen een tbody-element
- colgroup = alle volgende kolommen in een groep binnen een colgroup-element
In complexere tabellen kan je header-attributen gebruiken.
Bijvoorbeeld:
<th id=”aheading”>A heading</th>
<th id=”asecondheading”>A second heading</th>
<td headers=”aheading asecondheading”>Data cell with two headings</td>
Let op dat header cellen zelf kunnen linken aan andere header cellen.
U309: Alle tabellen zijn opgemaakt met de juiste HTML tabel Niet van toepassing
Toelichting
Gebruik native HTML elementen (table, thead, tbody, caption, tr, th, td) of respectievelijke WAI-ARIA rollen
U311: Tabel-onderschriften zijn gemaakt het caption-element Niet van toepassing
Toelichting
Gebruik het <caption> element om een tabel-onderschrift te maken. Als dit niet mogelijk is, kan je een normale heading gebruiken met het juiste h-niveau (H1-H6).
U316: Foutmeldingen die te maken hebben met specifieke formuliervelden zijn gekoppeld aan het bijbehorende element Voldoende
Toelichting
Dit kan je doen door de foutmelding in het label-element te zetten, of door aria-describedby attributen te gebruiken.
U317: Formuliervelden die bij elkaar horen, zijn gegroepeerd, zijn in dezelfde fieldset en hebben een omschrijvende legenda Voldoende
Toelichting
Gebruik het fieldset-element om gerelateerde functionaliteiten binnen formulieren te linken, zoals radio buttons. Gebruik het legend-element om een korte omschrijving aan de groep te geven. Let er op dat de legenda het eerste child-element van de fieldset moet zijn.
Je kan ook het respectievelijke WAI-ARIA attribuut role="group" gebruiken en aria-labelledby
U318: Alle omschrijvingen en labels zijn in de code gekoppeld aan het bijbehorende formulierveld Voldoende
Toelichting
Dit wordt meestal gedaan door het visuele label in het label-element te zetten, en deze te koppelen met form control. Als het nodig is, kan je aria-label gebruiken om instructies in de code toe te voegen aan form control zonder deze visueel te tonen.
U324: Waar mogelijk wordt gebruik gemaakt van semantische HTML Niet van toepassing
Toelichting
Het wordt aanbevolen dat HTML wordt gebruikt op een manier waarmee mensen bekend zijn. Dit betekent het gebruik van semantische HTML en de conventies volgt die we vaak op het internet zien. Deze consistentie zorgt ervoor dat mensen ermee kunnen communiceren zoals ze gewend zijn, wat de cognitieve belasting zal verminderen.
Bijvoorbeeld links in tekst die niet zijn opgemaakt zijn als link, hierdoor zijn ze niet aanklikbaar met de muis en ook niet bedienbaar via het toetsenbord. Dit is verwarrend voor gebruikers, met name gebruikers van schermlezers of mensen met een cognitieve beperking, omdat de verwachting is dat je een link direct kunt aanklikken en niet nog los hoeft te selecteren en kopiëren.
U325: Alle visuele relaties die zichtbaar zijn in de content, zijn ook zichtbaar in de code Onvoldoende
Toelichting
Denk bijvoorbeeld aan een chat widget. Je kan zien dat de linker berichten van de andere persoon zijn, en de rechter berichten van jou. Dit moet ook duidelijk zijn in de code.
Bevindingen per richtlijn
Pdf is niet getagd
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
De pdf is niet gecodeerd waardoor deze niet toegankelijk is voor ondersteunende technologieën, zoals een schermlezer. Daarnaast is het niet mogelijk om de pdf op koppen, lijsten, tabellen en ander gebruik van codestructuur te toetsen. Zie pagina Factsheet interventieteam (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Factsheet-Interventieteam.pdf.
Pdf met verkeerde tag opmaak
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
De pdf heeft wel een tag- of elementenstructuur, maar deze is niet goed opgebouwd, waardoor de tags niet voldoende overeenkomen met de semantische structuur. Het is belangrijk de tags altijd goed te controleren, met name als je software gebruikt om de tags automatisch toe te voegen, zodat hulpsoftware het document goed uit kan lezen.
- De eerste pagina van de Klachtenprocedure (pdf). De tagvolgorde komt niet overeen met de leesvolgorde. De tags beginnen goed, linksboven in het rode kader, maar vervolgt naar de rechterkant van de pagina en gaat daarna pas naar de linkerkant. Op pagina Klachtenprocedure (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Klachtenprocedure-Veilig-Thuis-West-Brabant-06082024.pdf.
- Meerdere vergelijkbare fouten zoals het vorige punt, verspreid over het hele document. Op pagina Jaarverslag 2023 Veilig Thuis (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Veilig-Thuis-WB-jaarverslag-2023-definitief.pdf.
Enkel de koptekst als linktekst gebruiken en de rest van de kaart klikbaar met CSS
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Zowel de kop als (een groot deel van) de overige content zijn programmatisch in de linktekst geplaatst. Hierdoor wordt de link te uitgebreid om te volgen in combinatie met het gebruik van hulpsoftware, zoals een schermlezer. Het zou beter zijn om enkel de kop als linktekst zelf te gebruiken en de rest van het kaartje met behulp van css klikbaar te maken.
De nieuwsbericht-elementen onderaan de pagina. Op pagina Nieuwsbericht: Week tegen kindermishandeling; https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
U326: Help-teksten en instructies voor een specifiek formulierveld zijn in de code aan dit formulierveld gekoppeld Onvoldoende
Toelichting
Dit betreft hulpteksten in instructieteksten, niet het label zelf.
Je kan de aria-labelledby of aria-describedby attributen gebruiken om te refereren aan een hulptekst.
Gebruik aria-labelledby als de instructie het formulier volledig omschrijft.
Gebruik het aria-describedby als de hulptekst een extra omschrijving geeft, of als er al een label is gelinked aan het formulier.
Bevindingen per richtlijn
Verplicht veld niet gemarkeerd in code of tekst
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
De verplichte invoervelden zijn niet (voldoende) programmatisch als verplicht gemarkeerd. Dit moet in de tekst of code terug te vinden zijn.
- Contactformulier velden. De velden “emailadres”, “telefoonnummer” en “bericht” zijn verplicht en is niet in tekst of techniek aangegeven. In het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
- Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184 is de "*" niet uitgelegd:
- “Ik heb bovenstaande gelezen en wil graag een melding doen ”
- “Bent u een medewerker van ambulancezorg? ”
- “Uw naam (melder) ”
Placeholder als enige label voor het invoerveld
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er wordt gebruik gemaakt van een placeholder als enige label voor het invoerveld, er is geen programmatisch gekoppeld label of aria-label aanwezig. Hierdoor is dit label niet continue beschikbaar, wat verwarrend kan zijn tijdens het invullen omdat je niet eenvoudig terug kan vinden wat er qua invoer verwacht wordt.
- Contactformulier velden. De velden “naam”, “emailadres”, “telefoonnummer” en “bericht”. Op het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
- Header zoeken invoer. Placeholder tekst “Zoek…”. In de website header op alle veiligthuiswb.nl pagina’s.
Kop of label voor content mist
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is content waarvan de functie en relatie tot de overige content op de pagina niet duidelijk is. Er mist hier een kop of label om deze relatie te verduidelijken, zodat dit ook programmatisch en niet enkel visueel opgemerkt kan worden.
- Programmeer het lichtgrijze woord ‘’gerelateerd’’ vast aan de kop ‘’Nieuwsberichten’’. Op pagina Nieuwsbericht: Week tegen kindermishandeling; https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
U631: Het menu staat binnen een nav-element Voldoende
Toelichting
Het nav-element wordt gebruikt om gebruikers met een visuele beperking te laten weten dat dit links zijn voor websitenavigatie.
1.3.2 Betekenisvolle volgorde
U319: Elementen zijn in een logische volgorde geplaatst in de broncode Onvoldoende
Toelichting
Dit is belangrijk voor gebruikers van schermlezers, omdat de volgorde in de broncode de leesvolgorde bepaalt. Als regel moet de volgorde van de paginainhoud zinvol zijn, zelfs wanneer CSS is uitgeschakeld.
Bevindingen per richtlijn
Geen betekenisvolle volgorde
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
De volgorde van de elementen verliest bij het voorlezen door een schermlezer betekenis of is verwarrend voor de gebruiker.
- De kop “Wanneer past Veilig Thuis bij jou?” na de bijhorende tekst. Op pagina Werken bij ons; https://veiligthuiswb.nl/werken-bij/werken-bij-veilig-thuis/
- Zoek item afbeelding boven kop. Afbeelding staat boven bijhorende kop. De afbeelding lijkt visueel en in code bij het vorige zoek item. Op pagina Zoeken Veilig thuis; https://veiligthuiswb.nl/?s=veilig+thuis.
- De tooltip staat onderaan het formulier in code waarbinnen de relevante tooltipcontent wordt geladen voor bijhorende formuliervelden. Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184.
U617: Componenten die bedoeld zijn als modal dialogs staan gebruikers niet toe om content op de achtergrond te selecteren Niet van toepassing
Toelichting
Modal dialogs zijn componenten die bovenop normale content op de pagina getoond worden. Er wordt van de gebruiker verwacht dat er iets gedaan wordt met deze content, voordat de gebruiker verder kan met de originele content. Modals moeten worden aangegeven in HTML met aria-modal="true".
Een belangrijk aspect hierbij is dat gebruikers die met het toetsenbord navigeren en gebruikers met schermlezers de focus in het modale dialoogvenster moeten behouden totdat ze hun mening over de inhoud hebben gevormd en het actief hebben gesloten. Daarom zou je niet per ongeluk de focus op de achtergrond moeten kunnen krijgen.
1.3.3 Zintuiglijke kenmerken
U402: Instructies zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten Onvoldoende
Toelichting
Vermijd "klik op de knop aan de rechterkant" en soortgelijke uitdrukkingen.
Je kunt richtingen, grootte, vormen en kleuren gebruiken in je instructies, maar er niet volledig op vertrouwen. Bijvoorbeeld "klik op de knop 'ja' aan de rechterkant" zou acceptabel zijn omdat het ook het zichtbare label bevat.
Bevindingen per richtlijn
Zintuiglijke aanwijzing gebruikt - visueel
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er zijn instructies gegeven met een verwijzing naar visuele aanwijzingen, zoals 'rechts', 'links' of 'hiernaast’.
- De zin “Deze vragen worden dan in het rood aangegeven.” Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184.
1.3.4 Weergavestand
U506: De website/ app kan worden gebruikt in alle schermoriëntaties Onvoldoende
Bevindingen per richtlijn
Horizontale weergavestand niet bedienbaar
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is content gevonden die niet te bedienen is in landschapsoriëntatie.
- Mobiele weergave, landschap, chat content. De chat heeft een vaste grootte in pixels waardoor chat content buiten beeld valt. Het Chat venster op alle veiligthuiswb.nl pagina’s.
1.3.5 Identificeer het doel van de input
U406: Het doel van elk invoerveld is gespecifieerd in de opmaak Onvoldoende
Toelichting
Wanneer mogelijk, moet je markup gebruiken om het doel van elk invoerveld aan te geven. Dit kan gedeeltelijk worden gedaan door het juiste element/type/markup te kiezen.
In HTML moet je het attribuut autocomplete gebruiken om te verklaren welk type gegevens de gebruiker moet invoeren in invoervelden die gegevens over de gebruiker verzamelen. Dit maakt het gemakkelijker voor browsers en ondersteunende technologie om eerder opgeslagen gegevens automatisch in te vullen. Lees meer over het attribuut en mogelijke waarden hier:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Bevindingen per richtlijn
Invoerveld zonder (correct) autocomplete-attribuut
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een invoerveld zonder het juiste autocomplete-attribuut, terwijl deze wel bestaat in de HTML 5.2, zoals gespecificeerd in sectie 7 van de WCAG.
- Contactformulier velden. De velden “naam”, “emailadres” en “telefoonnummer” missen een autocomplete attribuut. In het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
- Anders opgemaakt vergelijkbaar formulier op pagina Neem contact met ons op; https://veiligthuiswb.nl/over-veilig-thuis/contact/.
- Op alle onderzochte contactpagina’s ontbreekt een autocomplete-attribuut.
- Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184 de velden:
- “Uw naam (melder) *”
- “Telefoonnummer (direct) *”
- “E-mailadres *”
1.4.1 Gebruik van kleur
U403: Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden Onvoldoende
Toelichting
Voor gebruikers die moeite hebben met het onderscheiden van kleuren, of die cognitieve beperkingen hebben, is het belangrijk dat kleur niet de enige manier is om een status of informatie door te geven.
Kleur mag je niet als het enige visuele middel gebruiken om informatie over te brengen, om een actie aan te geven, tot een reactie op te roepen of om een visueel element te kunnen onderscheiden.
Kleuren en vormen worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat, naast kleur, ook over het gebruik van vormen of verwijzingen naar locaties op het scherm. Denk hierbij aan foutmeldingen, bevestigingen of aanduidingen van beschikbaarheid.
Bevindingen per richtlijn
Verschil status enkel met kleur
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een verandering van status bij focus, in een component binnen een set van componenten, die alleen met een kleurwijziging is aangegeven.
- De actieve navigatie item met rode tekst aangegeven. Dit probleem komt bijvoorbeeld voor op pagina Informatie voor professionals; https://veiligthuiswb.nl/professionals/, in de Website header op alle veiligthuiswb.nl pagina’s.
- Contactformulier velden. De velden “emailadres”, “telefoonnummer” en “bericht” zijn verplicht en alleen met een rode rand opgemaakt. Dit komt voor in het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
U404: Links zijn niet alleen herkenbaar door hun kleur Onvoldoende
Toelichting
Je kan onderstrepen of icoontjes, dikgedrukte tekst, of andere visuele indicatoren gebruiken,
Het is niet voldoende als deze indicatoren alleen zichtbaar zijn als je over het element hovered, omdat ze dan niet toegankelijk zijn voor hulpsoftware.
Het moet makkelijk te zien zijn welk element op een pagina interactief is, zonder op de elementen te hoeven focussen.
Bevindingen per richtlijn
Link binnen tekst enkel met kleur te onderscheiden
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een link gevonden binnen tekst, waarbij kleur het enige visuele middel is om het verschil tussen de link en tekst te zien.
- Link tekst kleur in vergelijking met de normale tekstkleur. De blauwe link tussen zwarte tekst. Link in content op alle onderzochte webpagina’s van veiligthuiswb.nl op bijvoorbeeld pagina's:
- Homepagina; https://veiligthuiswb.nl/
- Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
1.4.2 Audiobesturing
U429: Elk geluid dat automatisch start en meer dan 3 seconden speelt, kan worden gepauzeerd of uitgeschakeld Niet van toepassing
Toelichting
Dit criterium is van toepassing op geluiden die minstens 3 seconden duren.
1.4.3 Contrast (minimaal)
U409: Alle tekst heeft voldoende contrast ten opzichte van de achtergrond Onvoldoende
Toelichting
Kleine tekst (lager dan 14px bold of 18px regular) minimaal een contrastverhouding van 4.5:1
Grote tekst (14px bold of hoger en 18px regular of hoger) minimaal een contrastverhouding van 3.0:1.
Als de achtergrond varieert, meet dan waar de contrast het laagste is.
https://developer.paciellogroup.com/resources/contrastanalyser/
Bevindingen per richtlijn
Tekst met onvoldoende contrast
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Er zijn meerdere teksten gevonden met een kleur die een te lage contrastverhouding (4,5:1 of lager) heeft ten opzichte van de achtergrondkleur.
- Dit probleem komt vrijwel op alle onderzochte pagina's voor van veiligthuiswb.nl maar ook in het Zorgmeldformulier professionals (Regas). Enkele veelvoorkomende kleurcombinaties zijn:
- Blauwe tekst op witte achtergrond tekst en omgekeerd, met contrast 3.1:1.
- In afbeelding witte tekst op blauwfilter achtergrond afbeelding met een wisselend contrast van 2.6:1.
- Oranje tekst op witte achtergrond en omgekeerd met een contrast van 2.2:1.
- Witte tekst tegen rood-roze achtergrond en omgekeerd.
- Licht grijze tekst op witte achtergrond met een contrast van 1.6:1.
- Verder is er in de Website header op alle veiligthuiswb.nl pagina’s, een niet zichtbare email link. Er is een link aanwezig vlak boven het logo met email die emailen activeert, maar niet zichtbaar is door de witte tekst op witte achtergrond. Contrast 1:1. De link kan onbedoeld geactiveerd worden wat voor verwarrende situaties zorgt.
- Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184 het volgende:
- Grijze content tekst op witte achtergrond met een contrast van 2.9:1
- Rode benadrukte tekst op witte achtergrond met een contrast van 4.3:1
- Blauwe (kop)tekst op witte achtergrond met een contrast van 3:1
Tekst (groot) met onvoldoende contrast
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een tekst gevonden van 18pt of groter, die een kleur heeft met een contrastverhouding lager dan 3:1 ten opzichte van de achtergrondkleur.
- Koptekst “Nieuws”. Blauwe koptekst (42px) op licht grijze achtergrond met contrast 2.9:1. Op de Homepagina; https://veiligthuiswb.nl/
- De lichtgrijze koptekst ‘’gerelateerd’’ bij de kop ‘’Nieuwsberichten’’. Bijvoorbeeld op pagina's:
- Nieuwsbericht: Week tegen kindermishandeling; https://veiligthuiswb.nl/nieuwsbericht/week-tegen-kindermishandeling/
- Nieuwsbericht: Geweld in huiselijke kring; https://veiligthuiswb.nl/nieuwsbericht/geweld-in-huiselijke-kring/
1.4.4 Formaat wijzigen
U503: Gebruikers kunnen de tekstinhoud minstens 200 procent vergroten Onvoldoende
Toelichting
Voor veel gebruikers is het belangrijk om de tekstgrootte te kunnen vergroten. Dit is niet alleen belangrijk voor gebruikers met een visuele beperking, maar ook voor gebruikers die de website/ app op een klein apparaat zoals een smartphone gebruiken of in fel zonlicht.
Om aan de criteria in WCAG en EN 301 549 te voldoen, is het voldoende om een mechanisme in de website/ app aan te bieden waarmee gebruikers de tekst met 200% kunnen vergroten, maar voor veel gebruikers is het belangrijk om de website/ app op andere manieren te kunnen vergroten. Blokkeer de mogelijkheid van gebruikers niet om de website/ app in een webbrowser te vergroten. Probeer ervoor te zorgen dat de website/ app reageert op de instellingen van gebruikers binnen de webbrowser en het besturingssysteem. Om aan dit criterium in WCAG en EN 301 549 te voldoen, hoef je dit niet te doen, maar er is een ander criterium in EN 301 549 die vereist dat de website/ app luistert naar gebruikersinstellingen binnen het besturingssysteem. Lees hier meer over op U510/U511.
Let op dat je niet per se zo'n functie in je website/ app nodig hebt. Het is veel beter voor de gebruiker om gebruikersinstellingen binnen de browser en het besturingssysteem te respecteren. Dat zou de belangrijkste aanpak moeten zijn.
Bevindingen per richtlijn
Herschalen van tekst via gebruikersinstellingen onvoldoende
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is tekst gevonden die niet voldoende mee schaalt met de gebruikersinstellingen voor tekstgrootte.
- Mobiele weergave chat, content. Wanneer chat is uitgeklapt, valt er tekst half van het scherm. De chat heeft een vaste hoogte en geen schuifbalk om omlaag of omhoog te plaatsen. Het Chat venster op alle veiligthuiswb.nl pagina’s.
1.4.5 Afbeeldingen van tekst
U411: Gebruik tekst, geen afbeeldingen van tekst Onvoldoende
Toelichting
In complexe afbeeldingen zoals diagrammen is het acceptabel dat sommige tekst als onderdeel van de afbeelding wordt weergegeven.
Logotypen zijn ook een acceptabele uitzondering.
Bevindingen per richtlijn
Afbeelding bevat essentiële tekst
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een afbeelding waarin tekst is ingesloten in de afbeelding, waarvan de tekst essentieel is voor de context. Deze tekst is niet toegankelijk voor gebruikers van schermlezers of mensen die de opmaak van tekst wijzigen (zoals beschreven in 1.4.12). Je kunt de tekst beter met behulp van CSS op de afbeelding plaatsen.
- Pagina “titel” afbeelding met tekst “Problemen thuis” op pagina Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/.
- Pagina “titel” afbeelding. Witte tekst in de afbeelding “HOME”. Is te herkennen als titel van de pagina. Op de Homepagina; https://veiligthuiswb.nl/.
- De afbeelding onder de kop ‘’Onze kernwaarden’’. Op pagina Over Veilig Thuis; https://veiligthuiswb.nl/over-veilig-thuis/.
- De afbeelding “Gefaseerde ketensamenwerking” op pagina 18. In het Jaarverslag 2023 Veilig Thuis (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Veilig-Thuis-WB-jaarverslag-2023-definitief.pdf
1.4.10 Reflow
U501: De lay-out is responsive en past zich aan aan de grootte van het scherm Onvoldoende
Toelichting
Alle content moet responsief zijn, maar het wettelijke criterium staat enkele uitzonderingen toe. Situaties waarin het moeilijk of onmogelijk is om de functionaliteit te behouden wanneer de viewport- of schermgrootte te klein wordt, zijn acceptabele uitzonderingen. Uitzonderingen zijn onder meer complexe tabellen, kaarten, spelletjes en videospelers. Onze aanbeveling is om de inhoud indien mogelijk volledig responsief te maken.
Bevindingen per richtlijn
De webpagina past zich niet aan het viewport van een gebruiker aan.
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
De pagina past zich niet aan het scherm van de gebruiker aan, wat het moeilijk maakt om de pagina te bekijken voor mensen die sterk moeten inzoomen en mensen die de website bekijken op mobiele telefoons of tablets.
- “Welk cijfer geeft u voor…” heeft een schaal waarbij de letters van de labels onder elkaar vallen. Hierdoor worden deze onleesbaar. Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184.
Verlies van functionaliteit bij reflow
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een component gevonden met verlies van functionaliteit tijdens reflow.
- Op bijna alle onderzochte webpagina’s staat een thematische afbeelding rechtsboven. Deze verdwijnt na het schermbreekpunt.
- In mobiele weergave chat, content. Wanneer chat is uitgeklapt, valt er tekst half van het scherm. De chat heeft een vaste hoogte en geen schuifbalk om omlaag of omhoog te plaatsen. Het Chat venster op alle veiligthuiswb.nl pagina’s.
- Copyright melding (mobiele weergave). De melding verdwijnt achter de chat balk die over de pagina ligt. In de website Footer op alle veiligthuiswb.nl pagina’s.
1.4.11 Contrast van niet-tekstuele content
U408: Grafische inhoud die wordt gebruikt voor interactieve besturingselementen, het tonen van status of het verstrekken van informatie, heeft voldoende contrast ten opzichte van de achtergrond. Onvoldoende
Toelichting
Onderdelen van de interface en grafische objecten moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van de aangrenzende kleuren.
https://developer.paciellogroup.com/resources/contrastanalyser/
Bevindingen per richtlijn
Ontwerp een aangepaste focusindicator
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
De standaard focusindicator van de browser heeft niet genoeg contrast met de elementen op de webpagina, waardoor deze niet altijd goed zichtbaar is, met name voor mensen met een visuele beperking. Het advies is om een eigen focusindicator te maken en deze te testen met alle elementen op contrast, zodat deze beter waarneembaar is.
Maar wanneer je de standaard browser stijlen voor toetsenbord uitschakelt, is er helemaal geen zichtbare focus indicator beschikbaar. Dit probleem komt voor op alle onderzochte webpagina’s.
Grafisch object met onvoldoende contrast
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een afbeelding, diagram, kaart, functioneel element of ander grafisch object gevonden met een te laag contrast ten opzichte van naastgelegen kleuren.
- Op pagina Jaarverslag 2023 Veilig Thuis (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Veilig-Thuis-WB-jaarverslag-2023-definitief.pdf:
- In het bijzonder de rood-lichtblauw-groene afbeelding “Gefaseerde ketensamenwerking” op pagina 18. Naast dat het contrast te laag is, is het felgroene tegen de rode lastig te onderscheiden voor mensen met kleurenblindheid.
- Lichtblauwe kleur in grafieken.
- De rode kleuren die grenzen aan blauwe kleuren in de grafieken.
- Het blauwe LinkedIn-logo onderaan de pagina tegen de blauwe achtergrond. Op pagina Over Veilig Thuis; https://veiligthuiswb.nl/over-veilig-thuis/.
- Het LinkedIn-logo, net als bij het vorige punt. Deze staat onder het contactformulier en is lichtgrijs tegen een witte achtergrond. Op pagina Neem contact met ons op; https://veiligthuiswb.nl/over-veilig-thuis/contact/
Icoon met onvoldoende contrast
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een icoon gevonden met onvoldoende contrast met naastgelegen kleuren.
- Het klikbare “i” meer informatie icoon. In de chat header van het Chat venster op alle veiligthuiswb.nl pagina’s.
Invoerveld met onvoldoende contrast
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een invoerveld gevonden met een rand of achtergrondkleur, met een te laag contrast ten opzichte van naastgelegen kleuren.
- Contactformulier velden. De velden “naam”, “emailadres”, “telefoonnummer” en “bericht” hebben een lichte rand om aan te geven waarbinnen tekst kan ingevoerd met een contrast van 1.3:1 met het omliggende wit. De velden kunnen zonder rand niet gezien worden als invoerveld. Er zijn ook geen tekstuele hints dat dit een formulier is. In het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
- De rode correctiekleur is net te laag ten opzichte van de omliggende kleuren. Op pagina Neem contact met ons op; https://veiligthuiswb.nl/over-veilig-thuis/contact/
- Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184 zijn de volgende problemen gevonden:
- “Welk cijfer geeft u voor …”: Het geselecteerde antwoord heeft een te laag contrast met omliggende antwoorden. (1.5:1)
- Verplichte velden zoals “Uw naam (melder) *”, “Uw functie (melder)” en “Uw instantie *”
1.4.12 Tekstafstand
U502: Bij het wijzigen van de instellingen voor tekstafstand is er geen verlies van content of functionaliteit Voldoende
Toelichting
Tekst mag nooit afgesneden worden of overlappen als de tekstinstellingen worden aangepast. Om dit te testen moet een tool gebruikt worden zoals:
https://codepen.io/stevef/pen/YLMqbo/
Als een bezoeker van je website een of meerdere van onderstaande stijleigenschappen wijzigt — met behulp van de browserinstellingen of door een persoonlijke stylesheet aan te maken — moet alle inhoud leesbaar blijven en mag geen functionaliteit verloren gaan.
- De regelafstand moet minstens 1,5 keer groter gemaakt kunnen worden dan de lettergrootte.
- De afstand onder (of tussen) paragrafen moet minstens 2 keer groter gemaakt kunnen worden dan de lettergrootte.
- De letterafstand (tracking) moet minstens 0,12 keer groter gemaakt kunnen worden dan de lettergrootte.
- De woordafstand (spacing) moet minstens 0,16 keer groter gemaakt kunnen worden dan de lettergrootte.
1.4.13 Content bij hover of focus
U602: Aanvullende content die door hover met de aanwijzer zichtbaar wordt, kan door de gebruiker naar wens behouden of verborgen worden Onvoldoende
Toelichting
Het moet ook mogelijk zijn om hovercontent te verbergen zonder de focus te verplaatsen van het object dat de content activeert, bijvoorbeeld door op de ESC-toets te drukken.
Bevindingen per richtlijn
Hover content sluit automatisch
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is hover content gevonden die sluit zonder dat hier een handeling aan te pas komt.
- De tooltip content kan zelf geen focus of hover ontvangen. Deze verdwijnt dan. Deze bevatten belangrijke informatie. Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
2.1.1 Toetsenbord toegankelijk
U601: Elke gebruikersinteractie die mogelijk is met een muis of een touchscreen, kan ook worden uitgevoerd met een toetsenbord Onvoldoende
Toelichting
Een fundamenteel aspect van een website/ app die toegankelijk is, is dat deze volledig kan worden bediend met alleen een toetsenbord. Veel alternatieve bedieningsmethoden zijn gebaseerd op toetsenbordopdrachten. Spraakbesturing is bijvoorbeeld ook gedeeltelijk gebaseerd op toetsenbordopdrachten. Voor blinde gebruikers op pc's en Macs is er geen alternatief voor toetsenbordnavigatie.
Toetsenbordnavigatie is gebaseerd op het verplaatsen van de focus tussen interactieve objecten zoals links, knoppen en formuliervelden door op de TAB-toets te drukken. Door spaties, Enter of pijltoetsen te gebruiken, kunt u waarden wijzigen of links/knoppen activeren, afhankelijk van de situatie.
*U kunt knoppen activeren door op de spatiebalk te drukken.
*U kunt een link volgen door op Enter te drukken.
*Selecteer tabbladen en keuzerondjes met de pijltoetsen.
Toetsenbordnavigatie moet ook werken in mobiele websites en apps. Gebruikers met motorische beperkingen hebben met name moeite met touchscreens en gebruiken vaak toetsenborden die via Bluetooth zijn verbonden met de mobiele telefoon.
Bevindingen per richtlijn
Niet bedienbaar met toetsenbord
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Niet alle websitefunctionaliteiten kunnen worden gebruikt met alleen een toetsenbord.
- De knoppen om meer informatie uit te vouwen zijn niet bereikbaar met een toetsenbord. Hierdoor is een groot deel van de website, met zeer essentiële informatie, niet voor iedereen toegankelijk. De Uitvouwbare content op bijvoorbeeld pagina's:
- Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184:
- Formulier vraag “Bent u als professional in staat effectieve hulp te bieden of…” is niet te bedienen met het toetsenbord.
- “Welk cijfer geeft u voor…”: Een cijfer invullen is niet met het toetsenbord mogelijk.
U603: Modals kunnen gesloten worden door het toetsenbord te gebruiken Voldoende
Toelichting
Zorg voor een "Sluiten" knop in het modale venster. We raden ook aan dat de Esc-toets kan worden gebruikt om het modale venster te sluiten, maar het is niet voldoende om alleen het modale venster te kunnen sluiten met de Esc-toets, je hebt ook een link of knop nodig naast de Esc-toets. Houd er rekening mee dat we aanbevelen dat de Esc-toets wordt geïmplementeerd, maar dit is geen vereiste.
2.1.2 Geen toetsenbord moeilijkheden
U604: Gebruikers kunnen met het toetsenbord door de hele website navigeren zonder vast te komen zitten in een bepaald gebied van de website (bijvoorbeeld een videospeler). Voldoende
Toelichting
Om aan dit criterium te voldoen, moet het onmogelijk zijn om het onderdeel te verlaten met toetsenbordopdrachten. Als je bijvoorbeeld door alle dagen van een maand moet tabben om uit een datumkiezer te komen, is dat vanuit juridisch oogpunt acceptabel, zelfs als het niet erg gebruiksvriendelijk is.
2.1.4 Enkel-teken sneltoetsen
U618: Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken Niet van toepassing
Toelichting
Bij alle sneltoetsen moet de gebruiker ten minste een wijzigingstoets indrukken naast de sneltoets. Bijvoorbeeld, Alt+S is in orde, maar niet alleen S.
2.2.1 Instelbare timing
U614: Vermijd indien mogelijk het gebruik van time-outs of tijdsbeperkingen, of geef de gebruiker de optie om de tijdslimiet te verlengen of te vermijden Onvoldoende
Toelichting
Als er tijdslimieten of time-outs bestaan, moeten gebruikers indien mogelijk in staat zijn om ze uit te schakelen, de tijd te verlengen of de tijdslimieten aan te passen.
Bevindingen per richtlijn
Tijd niet aanpasbaar (sessie)
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er wordt uitgelogd of de inlog wordt ongeldig gemaakt zonder dat de sessietijd aanpasbaar is.
- Het zorgmeld formulier toont na verlopen van de sessie een nieuwe pagina. Je kunt hier “opnieuw inloggen”. Maar je bent niet ingelogd. Je moet het formulier opnieuw openen na deze melding.
In de content wordt ook niet aangegeven dat er beperkt de tijd is voor het invullen. Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
2.2.2 Pauzeren, stoppen, verbergen
U412: Vermijd bewegende, knipperende en scrollende content zoals carrousels en achtergrondvideo's die automatisch starten. Als dergelijke elementen aanwezig zijn, moet het mogelijk zijn om ze te pauzeren. Voldoende
Toelichting
Voor alle bewegende, knipperende of scrollende informatie die automatisch start, langer dan vijf seconden duurt, en parallel wordt gepresenteerd met andere inhoud, is er een mechanisme voor de gebruiker om het te pauzeren, stoppen of verbergen.
De gebruiker heeft de mogelijkheid om bewegende, knipperende of scrollende informatie te pauzeren, te stoppen of te verbergen, wanneer deze informatie:
1. automatisch start;
2. langer dan vijf seconden duurt, en;
3. parallel met andere content wordt getoond,
Tenzij deze bewegende, knipperende of scrollende informatie onderdeel is van een activiteit waar het essentieel voor is.
U431: Content die automatisch ververst, moet pauzeerbaar zijn Niet van toepassing
2.3.1 Minder dan drie flitsen
U413: Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde Voldoende
Toelichting
Je moet altijd vermijden om knipperende inhoud te gebruiken, ongeacht of het zich rechtstreeks op de pagina bevindt of in video's. Als je wel knipperende informatie/objecten hebt, zorg er dan voor dat ze niet met een hogere frequentie knipperen dan 3 keer per seconde. Dit is belangrijk om het risico op epileptische aanvallen bij gebruikers met epilepsie te minimaliseren.
2.4.1 Skip blokken
U608: Er is een snelkoppeling om delen van de pagina te omzeilen, zoals de navigatie en andere repetitieve inhoud Onvoldoende
Toelichting
Er moet een mogelijkheid zijn om delen van de pagina te omzeilen, zoals navigatie en andere repetitieve inhoud. De beste manier om dit te realiseren is door een skiplink aan te bieden. Met deze link kunnen gebruikers een deel van de website overslaan en direct door naar de unieke content van een website. Een skiplink moet verborgen zijn totdat de gebruiker erdoorheen tabt.
Dit criterium kan ook op andere manieren worden behaald, bijvoorbeeld door het gebruik van landmarks.
Bevindingen per richtlijn
Hoofdnavigatie niet te omzeilen
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is navigatie gevonden met 3 of meer links, die op meerdere pagina’s herhaald wordt. Deze kan niet overgeslagen worden om bij de content van de pagina te komen.
- Header navigatie (Desktop weergave). Er is geen manier om de navigatie over te slaan aanwezig. Voor mobiele weergave is het menu verborgen met een knop. Voor mobiele weergave is een "hamburger" menu beschikbaar om te openen en sluiten. In de Website header op alle veiligthuiswb.nl pagina’s.
Geen skiplink aanwezig
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Een skiplink stelt de gebruiker in staat snel naar de hoofdinhoud te navigeren en het is aan te raden deze als eerste element te plaatsen op de pagina. Dit is vooral handig voor toetsenbordgebruikers en gebruikers van schermlezers. In het volgende voorbeeld kan het ook helpen met het overslaan van een ingesloten video pagina.
- De video “Wat gebeurt er als je te maken krijgt met Veilig Thuis?”. In de YouTube-plugin staan veel tabstops. Verbeter de gebruikerservaring door voor de video een skiplink te plaatsen. Op pagina Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
U632: De content van de pagina staat binnen een main-element Voldoende met advies
Toelichting
Het main-element wordt gebruikt om de belangrijkste content van de pagina te weergeven. Dit maakt het makkelijker voor blinde gebruikers om de belangrijkste informatie te herkennen.
Bevindingen per richtlijn
Geen gebruik van main (geen alternatief)
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Op de pagina wordt geen gebruik gemaakt van een main element waar de hoofdcontent zich in bevind. Er wordt ook geen andere optie geboden om direct naar de hoofdinhoud te kunnen navigeren, zoals het gebruik van koppen of een skiplink. Hierdoor is het voor een gebruiker van hulpsoftware niet goed mogelijk er snel naartoe te navigeren.
Dit komt voor op alle veiligthuiswb.nl pagina’s.
2.4.2 Paginatitel
U418: Alle webpagina's hebben een beschrijvende titel Onvoldoende
Toelichting
De webpagina moet een titel hebben die het onderwerp of doel beschrijft. Dit is ook van toepassing wanneer het doel van de pagina wijzigt, deze wijziging moet dan ook zichtbaar zijn in de titel van de pagina.
Bevindingen per richtlijn
Geen paginatitel aanwezig
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is geen titel voor de pagina aanwezig.
- Document Factsheet interventieteam (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Factsheet-Interventieteam.pdf
Paginatitel onvoldoende beschrijvend
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
De pagina heeft een titel, maar deze beschrijft het doel van de pagina niet of niet duidelijk genoeg.
- Er wordt in de titel “VT” gemeld in plaats van voluit “Veilig Thuis West Brabant”. Pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
2.4.3 Volgorde
U609: De volgorde van de focus bij navigatie met een toetsenbord is betekenisvol en logisch Onvoldoende
Toelichting
Om te voldoen aan de criteria van EN 301 549 en WCAG, moet de tabvolgorde betekenis en werking behouden. Dit betekent bijvoorbeeld dat de tabvolgorde niet heen en weer springt tussen twee verschillende complexe onderdelen, of dat de volgorde ervoor zorgt dat een gebruiker het doel van links en knoppen verkeerd begrijpt.
We raden echter aan dat de tabvolgorde ook logisch en consistent is om het voor gebruikers gemakkelijker te maken.
Normaal gesproken betekent dit dat de focus op een voorspelbare manier beweegt van de linkerbovenhoek naar de rechterbenedenhoek. Maar er kunnen situaties zijn waarin uitzonderingen op deze regel zinvol zijn voor de gebruiker.
Dit criterium geldt niet alleen voor de tabvolgorde, maar ook voor andere toetsenbordnavigatie. Een voorbeeld hiervan is wanneer de pijltoetsen worden gebruikt om door een boomstructuur te navigeren. Zelfs dan is het belangrijk dat de volgorde van de onderdelen bruikbaar is. We raden ook aan dat het als logisch wordt ervaren.
Bevindingen per richtlijn
Focusvolgorde niet logisch
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Het verplaatsen van de toetsenbordfocus gebeurt niet logisch. De focus verdwijnt bijvoorbeeld buiten een dialoogvenster, of de focus gaat niet logisch door de volgorde van de content heen, of de focus verdwijnt na interactie met de gebruiker.
- Header cta rode knoppen, bijvoorbeeld “Sluit deze website”. De rode knoppen gedragen en voelen als onderdeel van de header. Ze komen over als belangrijk, ze staan aan het begin van de pagina. Wat betekent dat de focus volgorde voor de header navigatie wordt verwacht. Deze komen pas als laatst in de volgorde voor. Mede doordat dit belangrijke knoppen zijn voor de functie van de website een hogere prioriteit. Boven in de Website header op alle veiligthuiswb.nl pagina’s.
2.4.4 Doel van de link (in context)
U432: De linkteksten zijn beschrijvend en maken het mogelijk om het doel van de link te begrijpen binnen de context waarin deze zich bevindt Voldoende met advies
Toelichting
Linkteksten moeten zo beschrijvend mogelijk zijn om alle informatie te geven die de gebruiker nodig heeft om het doel van de link te begrijpen. In sommige situaties kan tekst in dezelfde alinea, lijst, tabelcel of een bijbehorende tabelkop ook worden gebruikt om het doel te beschrijven, maar voor zover mogelijk zou de linktekst alleen alle relevante informatie moeten geven.
Bevindingen per richtlijn
Beschrijf "klik hier", "lees hier" en "hier lees je"
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
De linktekst moet duidelijk maken waar de link naartoe leidt. Beschrijf altijd de bestemming voor de gebruiker.
Een voorbeeld: vervang "In ons beleidsplan staan onze jaardoelen. Lees hier verder" door "In ons beleidsplan staan onze jaardoelen. Lees verder in dit pdf-beleidsdocument".
- Informatie voor professionals; https://veiligthuiswb.nl/professionals/.
De link ‘’Meer informatie over de meldcode kun je hier vinden.’’. Deze staat in de tekst onder het uitvouwbare menu “Meldcode huiselijk geweld en kindermishandeling”. - Klacht indienen; https://veiligthuiswb.nl/jouw-rechten/klacht-indienen/.
Onder het uitvouwbare menu Gratis ondersteuning door een vertrouwenspersoon, de zin: ‘’Lees hier meer over de vertrouwenspersoon.’’. - Jouw rechten; https://veiligthuiswb.nl/jouw-rechten/rechten-als-client-klachten/
’’Voor meer informatie over de verwerking van jouw persoonsgegevens lees hier het Privacyreglement van Veilig Thuis. Dit reglement is leidend boven de andere informatie op de site.’’ - Op pagina Over Veilig Thuis; https://veiligthuiswb.nl/over-veilig-thuis/.
De onderstaande links hebben geen onderscheidende naam.
Onder de koptekst “Raad van Toezicht”. 2 keer de linktekst “hier”.
2.4.5 Meerdere manieren
U414: Er is meer dan één manier om content te vinden Onvoldoende
Toelichting
Een manier om aan dit criterium te voldoen, is om het menu aan te vullen met een zoekfunctie. Alle pagina's die geen onderdeel zijn van een proces (zoals een stap in een e-service) moeten op meer dan één manier te vinden zijn.
Bevindingen per richtlijn
Pdf heeft geen inhoudsopgave
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een pdf gevonden zonder bedienbare inhoudsopgave, terwijl deze wel aanwezig zou moeten zijn wegens de lengte van het document.
Dit probleem komt voor in het Jaarverslag 2023 Veilig Thuis (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Veilig-Thuis-WB-jaarverslag-2023-definitief.pdf.
2.4.6 Koppen en labels
U415: Koppen en labels beschrijven het onderwerp of doel Onvoldoende
Toelichting
Voor gebruikers om snel een gevoel te krijgen voor waar functies en informatie zich bevinden op een webpagina, is het belangrijk om beschrijvende koppen, labels en knopteksten te hebben.
Bevindingen per richtlijn
Incorrecte omschrijving in label interactief element
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Het label komt niet of niet voldoende overeen met het doel van het interactieve element.
Chat startformulier verplicht veld sterretje. Het sterretje geeft aan dat er extra informatie aanwezig is, maar deze is vooraf niet duidelijk. Zie bijvoorbeeld het veld “Naam”. In het Chat venster op alle veiligthuiswb.nl pagina’s.
2.4.7 Toetsenbord begeleiding
U605: Interactieve elementen worden gemarkeerd wanneer ze toetsenbordfocus ontvangen. Onvoldoende
Toelichting
Het is belangrijk voor gebruikers die zien en die navigeren met een toetsenbord om te kunnen zien welk object op elk moment de focus heeft. Dit kan worden gedaan door een omtrek van het object in focus, een onderstreping of omgekeerde kleuren te gebruiken.
Als je kleuren en randen gebruikt om het object met de focus te markeren, moet het contrast tussen de markering en de omgeving, en tussen de markering en objecten zonder focus, minstens 3.0:1 zijn. Om te voldoen aan de criteria van niet-tekstcontrast in WCAG 2.1, WCAG 2.2 en EN 301 549, zie U408. Formeel voldoe je aan dit criterium zolang de focus zichtbaar is, maar als de contrasten niet goed genoeg zijn, zul je niet voldoen aan de contrasteis.
In iOS heb je geen controle over de kleur van de visuele markering. In plaats daarvan kunnen gebruikers kiezen uit 5-6 verschillende kleuren in de instellingen. Je moet ervoor zorgen dat deze instellingen worden ondersteund in de app en kleuren gebruiken op een manier dat minstens een van de mogelijke kleuren een duidelijke visuele indicatie biedt van alle focusbare objecten in de app.
Op Android kun je de kleur van de visuele markering in Android controleren met deze code:
<item name="android:colorControlHighlight">@color/selected_item_focus</item>
Het resultaat moet worden getest, en je moet ervoor zorgen dat de gekozen kleur voldoende contrast heeft tegen de achtergrond in alle situaties.
Bevindingen per richtlijn
Focusindicator niet zichtbaar
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
De focusindicator is niet zichtbaar, dat hindert de mogelijkheid om de website te gebruiken omdat het daardoor onmogelijk wordt te navigeren met behulp van het toetsenbord. De focus indicator is waarschijnlijk uitgezet voor de hele website door middel van styling met css, dit zou echter aangezet moeten worden.
Focusindicator is niet zichtbaar op alle onderzochte webpagina’s, zie bijvoorbeeld de Header navigatielinks. Alle links missen een zichtbare toetsenbord focus. De browser standaard stijlen voor focus zijn uitgeschakeld met css. Duidelijk in de Website header op alle veiligthuiswb.nl pagina’s.
2.5.1 Aanwijzergebaren
U611: Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is Niet van toepassing
2.5.2 Aanwijzerannulering
U620: Functionaliteiten worden geactiveerd door mouse-up en niet mouse-down Voldoende
Toelichting
Gebeurtenissen worden geactiveerd bij mouse-up en niet bij mouse-down.
Dit geldt ook voor touch. Een gebeurtenis moet worden geactiveerd wanneer de gebruiker de vinger van het scherm haalt, niet wanneer de gebruiker op het scherm drukt.
2.5.3 Label in Naam
U320: Het label wat gepresenteerd wordt aan hulpsoftware voor interactieve bediening bevat de visuele tekst Voldoende
Toelichting
Als er zichtbare tekst is op een pagina die interactieve functionaliteit omschrijft, moet deze tekst in de omschrijving van deze functionaliteit staan. Zo kan een gebruiker met hulpsoftware de functionaliteit aansturen met spraak.
2.5.4 Bewegingsactivering
U613: Zorg voor een alternatief voor interacties gebaseerd op bewegingsbesturing Niet van toepassing
Toelichting
Als je een functie kunt activeren door te schudden met je smartphone (of een ander apparaat) of door een andere beweging te maken, dan moet het mogelijk zijn om dat gedrag uit te zetten en om de functie op een traditionele manier te activeren.
3.1.1 Taal van pagina
U416: De standaard taal van elke webpagina is gedefinieerd in de code Onvoldoende
Toelichting
Gebruik het lang attribuut van het HTML element.
Bevindingen per richtlijn
Pagina heeft geen taal ingesteld,Pdf heeft geen taal gedefineerd
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
De pagina is niet ingesteld met een ondersteunde taalcode.
- Document Factsheet interventieteam (pdf); https://veiligthuiswb.nl/wp-content/uploads/2024/08/Factsheet-Interventieteam.pdf
- Pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
3.1.2 Taal van onderdelen
U417: Content in een andere taal dan de standaard taal is geïdentificeerd in de code Niet van toepassing
Toelichting
Gebruik het lang-attribuut.
Dit kan worden gebruikt op elk HTML-element, zoals div, p, span, en andere elementen.
3.2.1 Focus
U615: Toetsenbordgebruikers kunnen door de pagina tabben zonder onverwachte wijzigingen of onderbrekingen en zonder dat de focus onverwacht wordt verplaatst Voldoende met advies
Bevindingen per richtlijn
Een nieuw tabblad opent zonder waarschuwing
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een link of ander mechanisme dat content opent in een nieuw venster of tabblad. Als een gebruiker hier niet voor gewaarschuwd wordt, kan dit erg verwarrend werken. Met name mensen met een visuele of cognitieve beperking kunnen daardoor het overzicht kwijtraken op welke webpagina, of set webpagina’s, ze zich bevinden. Het is aan te raden om een indicatie toe te voegen die zowel zichtbaar als programmatisch waarneembaar is, zoals een vermelding in de tekst, of een icoon met duidelijke alt-tekst.
- Informatie voor professionals; https://veiligthuiswb.nl/professionals/
De link ‘'zorgmeldformulier’’, onder de gelijknamige kop. - Colofon; https://veiligthuiswb.nl/1513-2/
De link-knop ‘’Privacy Statement’’. - Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
De link ‘’signalenkaart’’.
3.2.2 Invoer elementen
U616: Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging Voldoende met advies
Toelichting
Als een gebruiker de instelling van een onderdeel wijzigt — denk aan het aan- of uitvinken van een aankruisvakje — dan mag dat geen contextwijziging veroorzaken, tenzij je vooraf duidelijk meldt wat er zal gebeuren.
Voorbeelden van wat niet te doen is het laden van een nieuwe pagina, of onverwacht de content wijzigen. Als de gebruiker vooraf geinformeerd is over deze gebeurtenissen, is dit acceptabel.
Voorkom het aanpassen van content boven het punt waar de gebruiker op dit moment aan het navigeren is, tenzij het duidelijk is voor de gebruiker dat dit gaat gebeuren.
Bevindingen per richtlijn
Link navigeert naar pdf-document
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Er wordt er meerdere keren gelinkt naar pdf-documenten. Ons advies is om bij deze links duidelijk te maken dat er, na het klikken op de link, een pdf-document wordt geopend (of gedownload) en dat het niet linkt naar een (externe) webpagina.
- De links naar de jaarverslagen en jaarrekeningen. Ook de links onder de kop Raad van Toezicht. Op pagina Over Veilig Thuis; https://veiligthuiswb.nl/over-veilig-thuis/.
- ’’Voor meer informatie over de verwerking van jouw persoonsgegevens lees hier het Privacyreglement van Veilig Thuis. Dit reglement is leidend boven de andere informatie op de site.’’ Op pagina Jouw rechten; https://veiligthuiswb.nl/jouw-rechten/rechten-als-client-klachten/.
3.2.3 Logische navigatie
U419: Lijsten met links of functies die op meerdere webpagina's worden herhaald, komen voor in dezelfde relatieve volgorde Voldoende
Toelichting
Er kunnen situaties zijn waarin dit verwarrend is voor de gebruiker en waarin het vereiste genegeerd mag worden, maar in de meeste gevallen moet je consistent zijn met de relatieve volgorde van de links/knoppen/functies.
3.2.4 Consistente identificatie
U420: Dezelfde functionaliteit wordt consistent beschreven in de website/ app. Onvoldoende
Toelichting
Gebruik dezelfde terminilogie door de site heen. Gebruik bijvoorbeeld niet "service" op de ene plek, en "helpdesk" op een andere plek als er wordt gerefereerd aan dezelfde functionaliteit.
Dit geldt ook voor labels binnen formulieren.
Bevindingen per richtlijn
Inconsistentie in gedrag
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een element gevonden met afwijkend gedrag ten opzichte van andere elementen op de website die dezelfde opmaak hebben.
- Op pagina Informatie voor professionals; https://veiligthuiswb.nl/professionals/ blijkt de knop om de content ‘’Onze kennis’’ uit te vouwen een link te zijn naar een andere pagina, “onze kennis”. Deze knop is ook niet opgemaakt als knop of link.
3.3.1 Fout identificatie
U315: Alle fouten in formulieren worden beschreven in tekst, waarin wordt uitgelegd wat er mis is. Onvoldoende
Toelichting
De foutmelding moet aangeven waar de fout zit
Bevindingen per richtlijn
Geen foutidentificatie in tekst
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Één of meerdere invoervelden bevatten geen beschrijving van de fout in tekst.
- Chat startformulier invoervelden. Wanneer het formulier leeg wordt verstuurd, is er geen foutidentificatie in tekst aanwezig. Het Chat venster op alle veiligthuiswb.nl pagina’s.
- Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
- Bij leeg versturen van het formulier, is niet in tekst aangegeven dat er iets fout is.
- Er is wel een “statusbericht”, maar die verdwijnt na enkele seconden uit beeld.
3.3.2 Labels en instructies
U422: Alle website/ app elementen die gebruikersinput vereisen hebben een zichtbare beschrijving Voldoende met advies
Toelichting
In alle situaties waar gebruikers iets moeten selecteren (bijvoorbeeld door op een object op de pagina te klikken) of informatie moeten invoeren, is er een zichtbare tekst die het doel van dat onderdeel uitlegt, inclusief informatie over wat de gebruiker moet invoeren in een formulierenveld en in welk formaat als dat niet duidelijk is voor de gebruiker. Let op: het label moet altijd zichtbaar zijn, het is niet voldoende met een tijdelijke tekst.
Bevindingen per richtlijn
Vermijd persistente placeholders
Prioriteit:
Advies
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een persistent placeholder gevonden. De placeholder dient als een label voor het invoerveld. Dit label verdwijnt wanneer het veld invoer krijgt en wordt weer weergeven wanneer de invoer is verwijderd. Doordat er niet altijd een visueel label zichtbaar is bij het invoerveld, kan dit problemen opleveren voor bijvoorbeeld mensen met een cognitieve beperking.
- Chat startformulier invoerveld postcode placeholder. De voorbeeldtekst bij postcode “4 cijfers” verdwijnt bij invoer. In het Chat venster op alle veiligthuiswb.nl pagina’s.
U423: De instructies die worden verstrekt voor website/ app-elementen die gebruikersinvoer vereisen, bevatten informatie over wat er moet worden ingevoerd of geselecteerd, en welke formaten moeten worden gebruikt. Onvoldoende
Toelichting
Dit betreft ook informatie waar navigatie voor nodig is, of input die optioneel is.
Bevindingen per richtlijn
Onduidelijke invoer instructies
Prioriteit:
Laag
Status:
Open
Omschrijving en voorgestelde oplossing:
De gegeven instructies zijn onduidelijk en/of dubbelzinnig. Hierdoor kan het formulier onbedoeld verkeerd worden ingevuld.
- Er is in de voettekst van het formulier een algemene instructie geschreven maar die is te vaag.
“Klik op OPSLAAN om uw melding in te dienen bij Veilig Thuis West-Brabant. Als u nadat u op OPSLAAN geklikt hebt een waarschuwing krijgt, dan hebt u niet alle vragen met een * ingevuld. Deze vragen worden dan in het rood aangegeven.”
Er wordt gesproken van een waarschuwing, maar dat wordt niet in tekst of statusbericht gemeld.
Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
3.3.3 Fout suggestie
U424: Fouten worden beschreven in tekst met informatie over hoe de fout te corrigeren (indien mogelijk). Onvoldoende
Toelichting
Voor gebruikers is het niet alleen belangrijk om te begrijpen dat er iets mis is en waar de fout zich bevindt. Het is ook belangrijk om te begrijpen hoe de fout gecorrigeerd kan worden. In veel situaties is het mogelijk om een educated guess te maken over wat er mis is gegaan. Bijvoorbeeld, als een gebruiker een datum heeft ingevoerd in de verkeerde volgorde (jjjj-mm-dd in plaats van ddmmjj) en het nummer van de dag in de maand hoger is dan 12, zou je de datum kunnen voorstellen die je denkt dat de gebruiker heeft geprobeerd in te voeren.
Onthoud, je mag de door de gebruiker ingevoerde gegevens nooit wijzigen zonder de gebruiker op de hoogte te stellen van wat er is gedaan. Verander nooit automatisch een waarde om in een specifiek bereik te passen als je de gebruiker hier niet van op de hoogte stelt.
Bevindingen per richtlijn
Onvoldoende foutsuggestie
Prioriteit:
Gemiddeld
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een invoerveld gevonden waarbij de foutsuggestie ontbreekt of onduidelijk is.
- Er is wel een suggestie maar algemeen als instructie aanwezig in de voettekst dat verwijst naar een waarschuwing. Op pagina Zorgmeldformulier professionals (Regas); https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184
- Chat startformulier invoervelden foutbeschrijvingen. De foutsuggestie dat het een verplicht veld is ontbreekt. Dit komt mede door ontbreken van uitleg van het sterretje "*". In het Chat venster op alle veiligthuiswb.nl pagina’s.
- Contactformulier foutmelding email veld. Het veld e-mail krijgt de foutmelding: “Ongeldig e-mail” maar biedt geen suggestie ter verbetering. Bijvoorbeeld een voorbeeld e-mail adres. In het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
- Er worden geen beschrijvende foutsuggesties gegeven. De huidige melding omschrijft dát er iets moet gebeuren, maar niet wát. Bijvoorbeeld: ’’Gelieve de volgende fouten te verbeteren: Ongeldig e-mail’’. Op pagina Neem contact met ons op; https://veiligthuiswb.nl/over-veilig-thuis/contact/
3.3.4 Fout preventie (Juridisch, financieel, gegevens)
U425: Belangrijke formulieren laten de gebruiker gegevens bekijken, bewerken en bevestigen voordat ze worden verzonden. Voldoende
Toelichting
Dit geldt voor alle formulieren die juridische verbintenissen of financiële transacties verwerken.
4.1.1 Parsing
U102: Alle markup is volgens de specificatie Voldoende
Toelichting
Belangrijk: Deze vereiste moet als voldaan worden beschouwd voor alle webinterfaces die zijn gebouwd op HTML. De vereiste is ook verwijderd uit WCAG 2.2. We raden nog steeds aan dat de code zoveel mogelijk de standaard volgt, maar het is niet langer een vereiste om aan de wettelijke eisen in Nederland te voldoen.
4.1.2 Naam, rol, waarde
U210: Alle interactieve objecten zijn omschreven naar de gebruiker op een manier zodat het doel voor de gebruiker makkelijk te begrijpen is Onvoldoende
Toelichting
Dit gaat over formulierbesturingselementen, links, knoppen en andere interactieve objecten. Alle elementen waarmee de gebruiker kan communiceren, moeten begrijpelijk zijn voor alle gebruikers. Links moeten gelinkte teksten hebben die het doel van de links uitleggen, knoppen moeten knoppenaanduidingen hebben, formulierbesturingselementen moeten labels hebben, enzovoort. Als dat niet mogelijk is, kun je ook aria-label gebruiken om het object uit te leggen. De informatie moet alle relevante informatie bevatten, zoals naam, rol en waarde. Een voorbeeld is selectievakjes. Het moet mogelijk zijn om te begrijpen of het selectievakje is aangevinkt of niet. Een ander voorbeeld zijn knoppen die containers met informatie uitvouwen. De knop moet worden beschreven zodat gebruikers begrijpen of de container is uitgevouwen of niet. Er zijn verschillende criteria in de checklist die gerelateerd zijn aan dit criterium. Het doel van deze eis is om situaties te dekken die mogelijk niet worden gedekt door andere eisen. Verifieer of dit werkt door de oplossing te testen met schermlezers, zowel op desktop als op mobiel.
Bevindingen per richtlijn
Knop zonder rol, naam en/of waarde
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een knop gevonden zonder juiste rol naam en/of waarde. Hierdoor weten gebruikers van hulpsoftware niet dat het een knop is of wat het doet.
- Knoppen met koptekst. De koptekst staat in een knop maar deze mist een rol en status van uitvouwen. De knop is opgemaakt met een div (generiek) en heeft meerdere problemen. Uitvouwbare content op bijvoorbeeld pagina's:
- Het gaat niet goed thuis; https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Er is een melding over mij gedaan; https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- Website header op alle veiligthuiswb.nl pagina’s.
- Voor mobiele weergave de Header menu knop. De menu knop (hamburger) heeft geen rol, naam en mist een uitgevouwen status. Er is niet juiste code gebruikt wat leidt tot meerdere gerelateerde problemen.
- Header zoeken sluiten knop (Desktop). De zoeken sluit knop heeft geen rol, naam en mist een open / dicht status.
- Header navigatie zoek knop. De zoekknop heeft geen rol, naam en mist een open / dicht status.
Uitvouwbare content zonder rol, naam en/of waarde
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een knop gevonden zonder juiste rol naam en/of waarde. Hierdoor weten gebruikers van hulpsoftware niet dat het een knop is of wat het doet.
Zie de knoppen met koptekst. De koptekst staat in een knop maar deze mist een rol en status van uitvouwen. De knop is opgemaakt met een div (generiek) en heeft meerdere problemen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Het gaat niet goed thuis: https://veiligthuiswb.nl/het-gaat-niet-goed-thuis/
- Onze kennis: https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Er is een melding over mij gedaan: https://veiligthuiswb.nl/ik-heb-zorgen/er-is-een-melding-gedaan/
- Informatie voor professionals: https://veiligthuiswb.nl/professionals/
- Over Veilig Thuis: https://veiligthuiswb.nl/over-veilig-thuis/
- Klacht indienen: https://veiligthuiswb.nl/jouw-rechten/klacht-indienen/
- Jouw rechten: https://veiligthuiswb.nl/jouw-rechten/rechten-als-client-klachten/
Overbodig en verkeerd gebruik van WAI-ARIA
Prioriteit:
Kritisch
Status:
Open
Omschrijving en voorgestelde oplossing:
Er wordt aria gebruikt om een rol, naam of waarde aan te passen terwijl standaard semantische html beter zou passen en/of hetzelfde resultaat kan opleveren. Het gebruik van aria op deze wijze kan leiden tot problemen met het gebruik van hulpsoftware, waardoor het het averechtse effect heeft en het element minder toegankelijk maakt.
Dit komt voor op alle onderzochte webpagina's.
Knop zonder naam
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een knop gevonden zonder toegankelijke naam.
Zie bijvoorbeeld:
- “Toevoegen” knop
- "Direct betrokkenen" knoppen zoals: “bewerken”, “Verwijderen”
Dit probleem komt voor op pagina Zorgmeldformulier professionals (Regas) https://work.regas.nl/veiligthuiswb/External/Entity/CreateSubmission/Index/vt2_45184.
U211: Elk iframe element dat wordt gebruikt, heeft een title-attribuut dat de content goed omschrijft Voldoende
Toelichting
Iframes worden gebruikt om inhoud van een andere webpagina weer te geven. Dit wordt vaak gedaan om een videospeler of een andere vorm van applicatie binnen een webpagina te tonen.
Gebruikers die de interface niet kunnen zien, kunnen ervoor kiezen om de inhoud in het iframe weer te geven of te negeren. De titeltekst geeft deze gebruikers informatie om hen te helpen beslissen of ze de inhoud willen weergeven of niet.
U321: Knoppen en links die content in- en uitklappen, gebruiken aria-expanded Onvoldoende
Toelichting
Aria-expanded="true" wordt gebruikt als de content is uitgeklapt.
Aria-expanded="false" wordt gebruikt als de content is ingeklapt.
Bevindingen per richtlijn
Disclosure zonder uitgevouwen status
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een knop bij uitvouwbare content gevonden, ook wel een disclosure genoemd, zonder de juiste status om aan te geven of deze wel of niet open is. Dit betekent dat een schermlezer deze status niet bekend maakt aan de gebruiker.
- Op bijna alle pagina's staan uitvouwbare menu's met meer informatie. Deze menu's hebben geen status. Dit probleem komt voor op alle onderzochte webpagina’s.
- De chat knop met titel “Chat met veilig thuis”. Deze knop mist de status aria-expanded met true of false. In het Chat venster op alle veiligthuiswb.nl pagina’s.
4.1.3 Statusberichten
U323: Statusberichten en andere content die automatisch wordt bijgewerkt, worden toegankelijk gemaakt voor hulptechnologie Onvoldoende
Toelichting
Dit moet worden gedaan op een manier die geschikt is voor de situatie. Belangrijke updates moeten zo snel mogelijk worden aangekondigd, terwijl minder belangrijke informatie mogelijk helemaal niet wordt aangekondigd.
Een manier om dit te doen is met het aria-live attribuut.
Je kunt ook WAI-ARIA rollen status, alert en alertdialog gebruiken om statusberichten te markeren die de aandacht van de gebruikers vereisen.
Bevindingen per richtlijn
Statusbericht niet programmatisch detecteerbaar
Prioriteit:
Hoog
Status:
Open
Omschrijving en voorgestelde oplossing:
Er is een statusbericht gevonden dat programmatisch niet detecteerbaar is.
- Contactformulier foutmelding. De foutmelding komt in beeld na klikken op de knop “indienen”, maar er is geen update beschikbaar vanuit de techniek. De foutmelding kan gezien worden als een status update vanuit het verzenden van het formulier. In het Inline contact formulier op bijvoorbeeld pagina's:
- Onze kennis; https://veiligthuiswb.nl/over-veilig-thuis/onze-kennis/
- Homepagina; https://veiligthuiswb.nl/
-