Rapport in PDF

Deelonderzoek content zwembaddekloet.nl

Inleiding

Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?

Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.

Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.

De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).

Over deze evaluatie

Rapport auteur
Janita Top
Evaluatie opdrachtgever
SED
Evaluatiedatum
20 mei 2025

Managementsamenvatting

Dit rapport bevat het deelonderzoek content. In combinatie met het technische onderzoek vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 19 van de 22 content-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positief is bijvoorbeeld dat er geen afbeeldingen van tekst worden gebruikt, dat er geen bewegende onderdelen worden gebruikt die niet gepauzeerd kunnen worden en dat de pagina's goede titels hebben.

Verbeteringen zijn echter nog mogelijk op enkele punten, zoals:

  • Onjuist opgemaakte koppen
  • Onjuist opgemaakte tabellen
  • Invoervelden zonder label

Scope van de evaluatie

Website naam
zwembaddekloet.nl
Scope van de website
Alle pagina's op https://www.zwembaddekloet.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 22 van 50 WCAG 2.1 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Voldoende

Homepage

Uitkomst: Voldoende
Homepage

Opmerking: voor het klok-icoontje staat een tekst voor screenreaders ‘hoorn van een telefoon’. Dit is onjuist en is overbodige informatie. Het is beter om dit weg te laten.
1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Zoekresultaten

Uitkomst: Onvoldoende

Informatie overzicht

Uitkomst: Onvoldoende

Zwemlessen

Uitkomst: Onvoldoende
Homepage

De koppenstructuur is niet logisch opgebouwd. Zo is er een h2-kop ‘Uitgelicht’ met daaronder een kop van een uitgelicht item, dat ook op h2-niveau staat. Deze moet op h3-niveau staan. In de footer staan h3-kopjes die nu qua volgorde onder de h2-kop ‘Actueel’ vallen. Dit is echter een zelfstandig onderdeel. Zet de kopjes in de footer op h2-niveau of voeg een verborgen h2-kop toe aan de footer voor screenreadergebruikers. Zie screenshot 1. Dit issue met de kopjes in de footer komt op meerdere pagina’s voor.

Zoekresultaten

De koppenstructuur is niet logisch opgemaakt. De resultaten hebben h3-koppen, welke nu alle vallen onder de h2-kop ‘Type’. Deze resultaten behoren geen kopopmaak te hebben, omdat er geen content achter volgt. Een link is hier voldoende. Zie screenshot 2.

In de paginatie is via een andere vormgeving te zien op welke pagina je je bevindt, en wat de links zijn naar de andere pagina’s. Dit is voor hulpapparatuur niet af te leiden uit de code. Dit is eenvoudig op te lossen door aria-current=“page” toe te voegen aan de link met class=“active”. (Zie bijvoorbeeld https://www.zwembaddekloet.nl/?s=baby&_search=les&_paged=2).

Het tekst-invoerveld om te zoeken heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.

Informatie overzicht

De links met onderwerpen staan in een h3-kop, maar er volgt achter deze koppen geen content (de afbeelding staat er in de code voor en heeft een lege alt-tekst). Dit kan verwarrend zijn voor screenreadergebruikers die navigeren via koppen. Hier kan beter enkel een link element worden gebruikt.

Zwemlessen

De koppenstructuur is niet logisch opgebouwd. Onder de h2-kop ‘Meer informatie’ staan koppen die ook op h2-niveau staan. Zorg dat kopjes binnen de uitgeklapte onderdelen op een lager niveau staan.

De tabel onder ‘Zwemlesrooster’ is niet correct opgemaakt. De kopjes van de dagen zijn opgemaakt met het strong-element, maar screenreaders herkennen dit niet als kop. Zet deze teksten in een table header (th) element met ‘scope=row’. Geef ook aan hoeveel rijen hieronder vallen (rowspan) zodat er geen teksten zijn zonder kop (en dus zonder dag). Dit issue komt op meerdere pagina’s voor.

Binnen de datacellen zijn lijsten aangeven met streepjes-tekens. Screenreaders herkennen dit niet als lijst. Gebruik voor lijsten de lijst-opmaak in het CMS zodat er ul- en li-elementen van gemaakt worden.
1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Niet getoetst
1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample

Uitkomst: Niet getoetst
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Niet getoetst
1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Voldoende
1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet getoetst
1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

Zoekresultaten

Uitkomst: Onvoldoende
Hele sample

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Zoekresultaten

De paginatielinks op hover (wit/lichtblauw, 1.4:1).
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Niet getoetst
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Voldoende
1.4.10: Reflow
Hele sample

Uitkomst: Niet getoetst
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Voldoende
1.4.12: Tekstafstand
Hele sample

Uitkomst: Niet getoetst
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Niet getoetst

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Niet getoetst

Zoekresultaten

Uitkomst: Niet getoetst
Hele sample

Opmerking: onderstaande is een technische bevinding, maar deze implementatie is afwijkend van de implementatie in het technische onderzoek.

Zoekresultaten

De paginatie werkt niet met het toetsenbord, doordat dit links zijn zonder href-attribuut. Zie screenshot 4.
2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Niet getoetst
2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Niet getoetst
2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar
Hele sample

Uitkomst: Niet getoetst
2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet getoetst
2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Niet getoetst
2.4.2: Paginatitel
Hele sample

Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample

Uitkomst: Niet getoetst
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

Openingstijden

Uitkomst: Onvoldoende
Openingstijden

In de tabel onder Reguliere openingstijden staat een link zonder tekst. Deze staat er waarschijnlijk onbedoeld en kan beter worden verwijderd. Zie screenshot 3.
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Niet getoetst
2.4.6: Koppen en labels
Hele sample

Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Niet getoetst
2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet getoetst
2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Niet getoetst
2.5.3: Label in naam
Hele sample

Uitkomst: Voldoende
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet getoetst

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Niet getoetst
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Niet getoetst
3.2.2: Bij input
Hele sample

Uitkomst: Niet getoetst
3.2.3: Consistente navigatie
Hele sample

Uitkomst: Niet getoetst
3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Niet van toepassing
3.3.2: Labels of instructies
Hele sample

Uitkomst: Niet van toepassing
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Niet van toepassing
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet getoetst

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Niet getoetst
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Niet getoetst

Zoekresultaten

Uitkomst: Niet getoetst

Agenda

Uitkomst: Niet getoetst
Hele sample

Opmerking: onderstaande zijn technische bevindingen, maar deze implementatie is afwijkend van de implementatie in het technische onderzoek.

Zoekresultaten

Bij de filters staan knoppen met ongeldige code. Het attribuut’ aria-controls’ verwijst naar een id "searchResults" dat niet bestaat. Dit kan problemen geven voor de interpretatie door hulpsoftware.

Agenda

Wanneer je een veld of velden bij de filters aanpast en wilt zoeken (submit), krijg je geen nieuwe resultaten. Soms krijg je een popup om in te loggen. De focus gaat vervolgens wel naar de resultaten, maar er blijft een overlay overheen staan.
4.1.3: Statusberichten
Hele sample

Uitkomst: Niet getoetst

Sample

  1. Homepage - https://www.zwembaddekloet.nl/
  2. Contact - https://www.zwembaddekloet.nl/contact/
  3. Zoekresultaten - https://www.zwembaddekloet.nl/?s=baby&_search=baby en https://www.zwembaddekloet.nl/?s=baby&_search=les
  4. Informatie overzicht - https://www.zwembaddekloet.nl/informatie-over-zwemmen/
  5. Zwemlessen - https://www.zwembaddekloet.nl/informatie-over-zwemmen/zwemlessen/
  6. Banenzwemmen - https://www.zwembaddekloet.nl/informatie-over-zwemmen/banenzwemmen/
  7. Openingstijden - https://www.zwembaddekloet.nl/openingstijden/
  8. Tarieven - https://www.zwembaddekloet.nl/informatie-over-zwemmen/tarieven/
  9. Agenda - https://www.zwembaddekloet.nl/activiteiten/
  10. Activiteit Kijkdagen - https://www.zwembaddekloet.nl/activiteit/kijkdagen/
  11. Nieuwsbericht douchen voor het zwemmen - https://www.zwembaddekloet.nl/nieuws/douchen-voor-het-zwemmen/
  12. Toegankelijkheid - https://www.zwembaddekloet.nl/toegankelijkheid/

Technologie

HTML,CSS,WAI-ARIA,JavaScript,SVG,DOM

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: Chrome 136 en Safari 18.5 met Voiceover op Mac 15.5

Screenshots

  1. koppenlijst homepage
    Figuur 1: de koppenstructuur is niet logisch opgebouwd
    ↩
  2. koppenlijst zoekresultaten
    Figuur 2: alle resultaatkoppen vallen onder de kop Type
    ↩
  3. chrome inspector link popup
    Figuur 3: er staat een link zonder tekst in de tabel
    ↩
  4. chrome inspector bij paginatielinks
    Figuur 4: de links hebben geen href attribuut
    ↩