Over deze evaluatie

Rapport auteur: Tom Brinkman

Opdrachtgever voor evaluatie: OZJT

Evaluatiedatum: 19 april 2024

Managementsamenvatting

Vergeleken met de testversie van de website, zijn er grote stappen gezet. In de testversie zaten een aantal (grote) fouten, waardoor de website vooral niet geschikt was voor mensen die gebruik maken van het toetsenbord om te navigeren en voor mensen met een visuele handicap.

Er zijn nog wel verbeterpunten over in deze versie:

• Er dient nog gekeken te worden naar de afbeeldingen die worden gebruikt en de bijschriften/toegankelijke naam die deze afbeeldingen hebben.
• Verder zijn er verbeteringen te maken in de toegankelijkheid van mensen die afhankelijk zijn van het toetsenbord om op de site te navigeren. In sommige gevallen zijn er onzichtbare elementen die focus krijgen. In het geval van het cookiemenu is de volgorde waarin elementen focus ontvangen ook niet helemaal gelijk aan de visuele volgorde van de elementen.
• Als laatste moet er nog gekeken worden naar de tekst die in- en uit kan klappen. Deze wordt visueel wel verborgen, maar niet programmatisch. Hierdoor wordt op sommige plekken tekst voorgelezen door hulpsoftware die voor gebruikers visueel niet zichtbaar is.

Scope van de evaluatie

Websitenaam: Jeugdbeschermingstafel Twente

Scope van de website: Alle publiek toegankelijke pagina’s van de website https://www.jeugdbeschermingstafeltwente.nl/

WCAG versie: 2.1

Conformiteitsdoel: AA

Basisniveau van toegankelijkheid-ondersteuning:

• Chrome versie 123.0.6312.123 (Officiële build) (64-bits)
• Edge versie 125.0.2535.92 (Officiële build) (64-bits)
• NVDA versie 2024.1

Verdere onderzoeksvereisten: In eerste instantie is een testversie van de website geëvalueerd, om zo de meeste fouten eruit te halen voor de website online ging. Dit rapport gaat over de uiteindelijke versie van de website zoals deze online is gezet.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA succescriteria.

• 34 ✅ Voldoende
• 7 ❌ Onvoldoende
• 9 ➖ Niet van toepassing
• 0 Onbekend
• 0 Niet getoetst

Alle resultaten

1.    Waarneembaar

1.1.  Tekstalternatieven

1.1.1.                  Niet-tekstuele content

Uitkomst: ❌ Onvoldoende

Bevindingen: De omschrijving van de afbeeldingen in de beige blokken geven niet weer wat er in de afbeelding staat. Zo heeft het plaatje op de homepagina ‘Samen aan tafel voor de beste oplossing’ als omschrijving, terwijl dit een persoon is die in de regen op een kaart kijkt. Bij de pagina voor professionals heet de afbeelding ‘Voor professionals’, terwijl op de afbeelding iemand bij een waterautomaat die een datum op een kalender aankruist. Deze afbeeldingen moeten dus correct omschrijven worden óf als decoratief worden aangemerkt door de omschrijving leeg te laten. Dit geldt overigens voor bijna al dit soort afbeeldingen en iconen op de pagina’s binnen de steekproef.

1.2.  Op tijd gebaseerde media

1.2.1.                  Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.2.2.                  Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.2.3.                  Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.2.4.                  Ondertitels voor doven en slechthorenden (live)

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.2.5.                  Audiodescriptie (vooraf opgenomen)

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.3.  Aanpasbaar

1.3.1.                  Info en relaties

Uitkomst: ✅ Voldoende

Bevindingen: De info en relaties op de pagina’s binnen de steekproef is op orde.

1.3.2.                  Betekenisvolle volgorde

Uitkomst: ✅ Voldoende

Bevindingen: De correcte leesvolgorde kan bepaald worden op de pagina’s binnen de steekproef.

1.3.3.                  Zintuiglijke eigenschappen

Uitkomst: ✅ Voldoende

Bevindingen: Er worden geen eigenschappen gebruikt om naar andere elementen of gedeeltes van pagina’s te refereren.

1.3.4.                  Weergavestand

Uitkomst: ✅ Voldoende

Bevindingen: De pagina’s binnen de steekproef zijn beschikbaar in zowel portret- als landschapsstand.

1.3.5.                  Identificeer het doel van de input

Uitkomst: ✅ Voldoende

Bevindingen: De inputvelden ‘naam’ en ‘e-mail’ van formulieren zijn allemaal voorzien van de juiste autocomplete attributen. Er is ook een keer autocomplete=off gebruikt voor het veld ‘bericht’. Dit is vanuit de techniek niet fout, maar in plaats van off had er ook voor gekozen kunnen worden om het attribuut hier weg te laten.

1.4.  Onderscheidbaar

1.4.1.                  Gebruik van kleur

Uitkomst: ✅ Voldoende

Bevindingen: Nergens binnen de steekproef wordt alleen kleur gebruikt om betekenis over te brengen.

1.4.2.                  Geluidsbediening

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

1.4.3.                  Contrast (minimum)

Uitkomst: ✅ Voldoende

Bevindingen: Contrast van de tekst op de website voldoet aan het succescriterium, ook bij foutmeldingen die bij de formulieren verschijnen.

1.4.4.                  Herschalen van tekst

Uitkomst: ✅ Voldoende

Bevindingen: Er gaat geen functionaliteit verloren wanneer er bij een vensterbreedte van 1280 pixels geschaald wordt naar 200%.

1.4.5.                  Afbeeldingen van tekst

Uitkomst: ❌ Onvoldoende

Bevindingen: Op de homepagina staat onder de kop ‘Hoe werkt de jeugd beschermingstafel?’ een afbeelding van het proces, deze is hoofdzakelijk tekst. Deze lijkt niet essentieel, want de afbeelding wordt niet getoond in de mobiele weergave.

1.4.10.              Reflow

Uitkomst: ❌ Onvoldoende

Bevindingen: Bij een breedte van 320 CSS-pixels (schermbreedte van 1280 pixels en 400% zoom) verschijnt op de pagina ‘Hoe werkt de tafel?’ een horizontale scrollbalk.

1.4.11.              Contrast van niet-tekstuele content

Uitkomst: ✅ Voldoende

Bevindingen: Op de pagina’s binnen de steekproef is het contrast net niet-tekstuele elementen in orde.

1.4.12.              Tekstafstand

Uitkomst: ✅ Voldoende

Bevindingen: Er gaat geen content of functionaliteit verloren wanneer de stijleigenschappen zoals beschreven in dit succescriterium worden toegepast.

1.4.13.              Content bij hover of focus

Uitkomst: ✅ Voldoende

Bevindingen: Gedrag van elementen bij hover of focus binnen de pagina’s is in orde.

2.            Bedienbaar

2.1.  Toetsenbordtoegankelijk

2.1.1.                  Toetsenbord

Uitkomst: ✅ Voldoende

Bevindingen: Het is mogelijk om alle bedieningselementen op de pagina te bereiken door middel van het toetsenbord. Alleen de verzendknoppen van de formulieren kunnen geen focus ontvangen zolang het formulier een fout bevat, maar dat is alleen maar gunstig om verdere foutmeldingen te voorkomen.

2.1.2.                  Geen toetsenbordval

Uitkomst: ✅ Voldoende

Bevindingen: Er is geen toetsenbordval aanwezig op de pagina’s binnen de steekproef.

2.1.4.                  Enkel teken sneltoetsen

Uitkomst: ✅ Voldoende

Bevindingen: Er zijn geen sneltoetsen die uit een enkele toets bestaan binnen de steekproef.

2.2.  Genoeg tijd

2.2.1.                  Timing aanpasbaar

Uitkomst: ➖ Niet van toepassing

Bevindingen: Niet aanwezig binnen de steekproef.

2.2.2.                  Pauzeren, stoppen, verbergen

Uitkomst: ✅ Voldoende

Bevindingen: De carrousels op de homepagina kan gepauzeerd worden door hier met de muisaanwijzer op te gaan staan. Wanneer de muisaanwijzer verwijderd wordt, gaat de carrousel verder met scrollen.

2.3.  Toevallen en fysieke reacties

2.3.1.                  Drie flitsen of beneden drempelwaarde

Uitkomst: ✅ Voldoende

Bevindingen: De carrousel ‘flitst’ wel, maar dit ligt onder de drempelwaarde.

2.4.  Navigeerbaar

2.4.1.                  Blokken omzeilen

Uitkomst: ✅ Voldoende

Bevindingen: Er is een skiplink beschikbaar die als eerste element op de pagina focus krijgt via toetsenbordbediening. Deze link skipt het logo en het menu, zodat je direct op de hoofdinformatie.

2.4.2.                  Paginatitel

Uitkomst: ✅ Voldoende

Bevindingen: De pagina’s zijn voorzien van duidelijke beschrijvende titels die het doel goed omschrijven.

Kleine kanttekening: je zou er nog voor kunnen kiezen om de homepagina ook de naam ‘Home’ mee te geven, voor een consistent naamgevingspatroon.

2.4.3.                  Focusvolgorde

Uitkomst: ❌ Onvoldoende

Bevindingen: Het gaat alleen mis onderaan de pagina. Als je met het toetsenbord het ‘Beheer toestemming’ opent wanneer het focus heeft, gaat de focus niet automatisch naar het menu wat dan opent. Je gaat dan eerst naar de adresbalk van de browser, daarna kom je in het menu wat je net hebt geopend. Je moet na het openen van het menu direct in het menu zelf komen, zoals nu ook gebeurt bij het hoofdmenu bovenaan de pagina. Verder is de eerste knop waar je op terecht komt het kruisje en niet ‘Accepteren’ wat je zou verwachten. Verder zit er tussen de knop ‘Bekijk voorkeuren’ en de link ‘privacy’ nog een link die je niet ziet, maar je wel terugbrengt naar de bovenkant van de pagina.

2.4.4.                  Linkdoel (in context)

Uitkomst: ✅ Voldoende

Bevindingen: Het doel van alle links op de pagina’s binnen de steekproef is duidelijk en de omschrijvingen zijn uniek genoeg op paginaniveau.

2.4.5.                  Meerdere manieren

Uitkomst: ❌ Onvoldoende

Bevindingen: De pagina’s zijn nu op één manier te bereiken, alleen doorklikken vanaf een andere pagina. Dit kun je oplossen door:

• Het aanbieden van een zoekfunctie
• Doorlinken naar de sitemap (in bijvoorbeeld de footer)
• Het toevoegen van een inhoudsopgave

2.4.6.                  Koppen en labels

Uitkomst: ✅ Voldoende

Bevindingen: De gebruikte koppen en labels horen bij de inhoud die eronder valt.

2.4.7.                  Focus zichtbaar

Uitkomst: ❌ Onvoldoende

Bevindingen: Zoals genoemd bij 2.4.3 zit er een onzichtbare link die wel focus krijgt tussen de knop ‘Bekijk voorkeuren’ en de link ‘privacy’ als je het blok ‘Beheer toestemming’ hebt geopend.

Als de verzendknoppen bij de formulieren tabfocus krijgen, verandert alleen de witte tekst naar tekst met een andere kleur. Dit is te weinig verschil om focus aan te geven. Als deze knoppen hetzelfde zouden doen als de andere knoppen op de pagina wanneer ze focus krijgen, groen met zwarte rand en witte outline, zou prima zijn.

De skiplink wordt als eerste op de pagina geselecteerd, maar is onzichtbaar. Dit komt door het attribuut ‘sr-only’, maar dat is hier niet goed toegepast. De skiplink moet in beeld verschijnen als deze focus krijgt voor mensen die wel met toetsenbord navigeren, maar geen visuele beperking hebben. Je zou ‘visibility:hidden’ kunnen gebruiken, die uitgeschakeld wordt op het moment dat het element tabfocus krijgt.

Op elke pagina zit tussen het menu en het eerste klikbare element van de pagina een onzichtbaar element wat focus krijgt (zie nummer 3 op onderstaande afbeelding. Dit lijkt op de homepagina <button aria-label=”close” class=”navBackgroundSpace” tabindex=”0″></button> te zijn. Er lijkt dus een onzichtbare knop in de code te staan die niks doet. Ook in mobiele versie komt deze niet naar voren.

2.5.  Inputmodaliteiten

2.5.1.                  Aanwijzergebaren

Uitkomst: ➖ Niet van toepassing

Bevindingen: Dit soort invoer is niet aanwezig binnen de steekproef.

2.5.2.                  Aanwijzerannulering

Uitkomst: ✅ Voldoende

Bevindingen: De pagina’s binnen de steekproef voldoen aan dit criterium.

2.5.3.                  Label in naam

Uitkomst: ✅ Voldoende

Bevindingen: De knoppen zijn allemaal voorzien van een toegankelijke naam, ook als ze geen tekst bevatten.

Zie ook SC 4.1.2.

2.5.4.                  Bewegingsactivering

Uitkomst: ➖ Niet van toepassing

Bevindingen: Dit soort functionaliteit zit niet in de pagina’s binnen de steekproef.

3.            Begrijpelijk

3.1.  Leesbaar

3.1.1.                  Taal van de pagina

Uitkomst: ✅ Voldoende

Bevindingen: De taal van de pagina is in de html correct aangegeven, met overal ‘lang=nl’.

3.1.2.                  Taal van onderdelen

Uitkomst: ✅ Voldoende

Bevindingen: Er staan geen pagina’s of zinsdelen op de site in andere tekst dan Nederlands.

3.2.  Voorspelbaar

3.2.1.                  Bij focus

Uitkomst: ✅ Voldoende

Bevindingen: Nergens ontstaat een contextwijziging omdat een component focus krijgt.

3.2.2.                  Bij input

Uitkomst: ✅ Voldoende

Bevindingen: Er zijn geen onverwachte contextwijzigingen binnen de steekproef.

3.2.3.                  Consistente navigatie

Uitkomst: ✅ Voldoende

Bevindingen: De volgorde van het hoofdmenu en de footer veranderen niet binnen de steekproef.

3.2.4.                  Consistente identificatie

Uitkomst: ✅ Voldoende

Bevindingen: Bedieningselementen die hetzelfde doen op (pagina’s binnen) de website, hebben consistente naamgeving.

3.3.  Assistentie bij invoer

3.3.1.                  Foutidentificatie

Uitkomst: ✅ Voldoende

Bevindingen: Bij de verschillende formulieren op de pagina is het duidelijk welke velden verkeerd zijn ingevuld.

3.3.2.                  Labels of instructies

Uitkomst: ✅ Voldoende

Bevindingen: De labels ‘Naam’, ‘E-mail’ en ‘Bericht’ beschrijven voldoende welke invoer er bij deze velden wordt gevraagd.

3.3.3.                  Foutsuggestie

Uitkomst: ✅ Voldoende

Bevindingen: Als een formulierveld is ingevuld, maar de inhoud komt niet overeen met wat verwacht wordt, is het duidelijk wat de vorm van de inhoud is die verwacht wordt.

3.3.4.                  Foutpreventie (wettelijk, financieel, gegevens)

Uitkomst: ✅ Voldoende

Bevindingen: De website bevat alleen maar een contactformulier, dat is niet het soort formulier waar dit criterium voor geldt.

4.            Robuust

4.1.  Compatibel

4.1.1.                  Parsen

Uitkomst: ✅ Voldoende

Bevindingen: De pagina’s binnen de steekproef voldoen aan dit succescriterium.

4.1.2.                  Naam, rol, waarde

Uitkomst: ❌ Onvoldoende

Bevindingen: De teksten onder de vragen bij bijvoorbeeld de FAQ zijn uit- en in te klappen door middel van klikken op de tekst of knop die erbij hoort. De bijbehorende tekst van het antwoord zijn aria-expanded=”false” moeten krijgen als de tekst niet zichtbaar is en aria-expanded=”true” wanneer deze wel zichtbaar is. Het is nu voor schermlezers en dergelijke niet duidelijk of tekst zichtbaar is of niet, waardoor deze altijd wordt voorgelezen.

4.1.3.                  Statusberichten

Uitkomst: ✅ Voldoende

Bevindingen: De foutmelding worden gezien als live-regions en worden als zodoende gepresenteerd aan hulpsoftware.

Alleen omdat ze allemaal de waarde “role=alert” hebben, onderbreekt de hulpsoftware zichzelf en wordt alleen de laatste foutmelding voorgelezen. “role=status” of “aria-live=polite” zou hier beter zijn.

Sample met getoetste webpagina’s

1. Home – https://www.jeugdbeschermingstafeltwente.nl/
2. Wat is de tafel – https://www.jeugdbeschermingstafeltwente.nl/wat-is-de-tafel/
3. Hoe werkt de tafel – https://www.jeugdbeschermingstafeltwente.nl/hoe-werkt-de-tafel/
4. Voor professionals – https://www.jeugdbeschermingstafeltwente.nl/voor-professionals/
5. FAQ – https://www.jeugdbeschermingstafeltwente.nl/faq/
6. Contact – https://www.jeugdbeschermingstafeltwente.nl/contact/

Webtechnologie

HTML, CSS, JavaScript