Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Zwembad & Sportcentrum wethouder Duran

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Zwembad & Sportcentrum wethouder Duran
Scope van de website Binnen de scope van het onderzoek valt: Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Externe websites waar door middel van links op www.zwembaddiemen.nl naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 36

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op de homepage staat rechts onderaan het logo "daarom Diemen". De alternatieve tekst van de afbeelding is nu alleen 'logo'. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie bevatten. Voeg een alternatieve tekst toe om dit probleem op te lossen.

Bevinding 2: Op de homepage staat rechts bovenaan het logo "Gemeente Diemen". Dit logo heeft wel de alternatieve tekst "Zwembad Diemen" maar dat beschrijft het logo niet.. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie (in dit geval Gemeente Diemen) bevatten.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: Op pagina www.zwembaddiemen.nl/openingstijden/ komen opsommingen voor onder de kop "Coronamaatregelen". Deze zijn nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven. Dit probleem komt op meerdere pagina's voor, waaronder op pagina www.zwembaddiemen.nl/home/zwemles/.

Bevinding 4: Op pagina www.zwembaddiemen.nl/home/zwemles/ is de zin "leren zwemmen...." direct onder de kop "Zwemles informatie" zowel met een kop-element als met het strong-element opgemaakt. Het strong-element geeft nadruk aan enkele woorden of korte zinnen en mag daarom niet voor puur opmaak gebruikt worden. Verwijder zowel het kop-element als het strong-element en gebruik CSS of een vergelijkbare techniek om dit probleem op te lossen.

Bevinding 5: De koppen op de homepage zijn zowel met het kop-element als met het strong-element opgemaakt. Het strong-element geeft nadruk aan enkele woorden of korte zinnen en mag daarom niet voor puur opmaak gebruikt worden. Verwijder het strong-element om dit probleem op te lossen.

Bevinding 6: Op de pagina www.zwembaddiemen.nl/tarieven/ is de tekst "Tarieven" als kop opgemaakt maar deze kop bevat geen content. Maak de tekst met een hoger kopniveau <H1> op zodat de onderliggende inhoud wel als content wordt gezien.

Bevinding 7: Op pagina iedere pagina is een groot stuk tekst ('we mogen weer open'( geheel opgemaakt met het kop-element niveau 2. Een kop element mag alleen gebruikt worden voor koppen boven content, niet voor tekst-opmaak van een heel stuk tekst. Verwijder de kop-opmaak om dit probleem op te lossen.

Bevinding 8: Op pagina www.zwembaddiemen.nl/home/recreatief-zwemmen/ zijn de tussenkopjes opgemaakt met het strong-element. Het strong-element geeft nadruk aan enkele woorden of korte zinnen en mag daarom niet voor puur opmaak gebruikt worden. Gebruik kop-elementen om dit probleem op te lossen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 9: Op pagina www.zwembaddiemen.nl/home/zwemles/kinderen/inschrijven-bc-en-… is een formulier waar de bezoeker onder andere het eigen e-mailadres en achternaam kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: www.w3.org/tr/wcag21/.
Dit komt ook voor op www.zwembaddiemen.nl/home/zwemles/quickstart/inschrijven-….

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: Het contrast van de oranje tekst ("Realisatie: VCBO Raalte" onderaan de pagina) op de blauwe achtergrond op de homepage is te laag. De contrastverhouding is hier 1,8:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 11: Het contrast van de groene tekst ("Zwembad & Sportcentrum wethouder Duran" in de titel) op de lichtgroene achtergrond op de homepage is te laag. De contrastverhouding is hier 1,7:1, waar dit minimaal 3:1 moet zijn.

Bevinding 12: Het contrast van de witte tekst (bijvoorbeeld "Maatregelen" in het blok aan de rechterkant) op de blauwe achtergrond op de homepage is te laag. De contrastverhouding is hier 4,2:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 13: Het contrast van o.a. de witte tekst (bijvoorbeeld "Zwemles" aan de onderkant van de pagina) voor de afbeeldingen op o.a. de blauwe/witte achtergrond op de homepage is te laag. De contrastverhouding is hier soms zo laag als 1,5:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 14: Als je voldoende inzoomt op pagina's met een blok met url's aan de rechterkant, bijvoorbeeld op www.zwembaddiemen.nl/home/recreatief-zwemmen/banen-zwemmen/ verandert de kleur van deze links. Het contrast van de grijze tekst op de blauwe achtergrond is te laag. De contrastverhouding is hier 1,5:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 15: Het contrast van de lichtgrijze tekst ("TYPO3 CMS is...") op de donkergrijze achtergrond onderaan op pagina www.zwembaddiemen.nl/bestaatniet/ is te laag. De contrastverhouding is hier 2:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 16: Op iedere pagina maar o.a www.zwembaddiemen.nl/home/zwemles/ staan links in de tekst, bijvoorbeeld "www.allesoverzwemles.nl" boven de kop "Leren zwemmen in het Duranbad". Als deze focus krijgt is het contrast van de tekst op de witte achtergrond te laag. De contrastverhouding is hier 1,4:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 17: Het contrast van de groene tekst (bijv. "aqua activiteiten") op de blauwe achtergrond op pagina www.zwembaddiemen.nl/home/aqua-activiteiten/mbvo/sport-en-… in het blok met links aan de rechterkant is te laag. De contrastverhouding is hier 2,2:1, waar dit minimaal 4,5:1 moet zijn.
Dit komt op meerdere pagina's voor waaronder www.zwembaddiemen.nl/home/recreatief-zwemmen/.

Bevinding 18: Op de bevestigingspagina van pagina www.zwembaddiemen.nl/home/zwemles/kinderen/inschrijven-a/ staat de knop 'Bevestigen'. Wanneer deze knop toetsenbordfocus heeft, wordt achtergrond grijs en de tekst wit. De contrastratio is hier 1,2;1, waar dat minimaal 4,5:1 moet zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 19: Als er ingezoomd wordt tot 125% bij een schermbreedte van 1280px dan komt bovenin een menu tevoorschijn (bij verder inzoomen komt uiteindelijk een menuknop, een hamburgermenu). In dit menu zijn de items klikbaar, maar de items die daaronder openklappen zijn onzichtbaar. Zorg ervoor dat deze items zichtbaar zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina www.zwembaddiemen.nl/home/zwemles/kinderen/inschrijven-bc-en-… een deel van de tekst buiten beeld, bijvoorbeeld de teksten die horen bij de radiobuttons onder "Zwemles". Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

Bevinding 21: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verschijnt op pagina www.zwembaddiemen.nl/bestaatniet/ een scrollbalk in de leesrichting (horizontaal). Zorg ervoor dat bezoekers niet horizontaal hoeven te scrollen om alle content op de pagina te hoeven bekijken.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Voldoende

Bevinding 22: Advies: Wanneer bezoekers de tekstafstand wijzigen naar de eisen volgens dit succescriterium, verschijnen er blauwe balken tussen de paragrafen op iedere pagina, wat de pagina lastiger leesbaar maakt.

2. Bedienbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 23: Er is een skiplink maar de focusvolgorde gaat daarna wel op iedere pagina langs het logo.
Verder worden er op iedere pagina bij bepaalde schermgroottes als de lichtgroene balk met 'Zwembad & Sportcentrum Wethouder Duran' niet helemaal bovenaan staat, de menubalk en het hamburgermenu niet overgeslagen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 24: Bezoekers die met het toetsenbord navigeren, kunnen met de tab-toets focussen op het logo van de Gemeente Diemen (bovenaan iedere pagina), terwijl het logo alleen met de muis focus krijgt als bezoekers ingezoomd zijn. Dit lijkt een programmeerfout.

Bevinding 25: Wanneer bezoekers op volledig scherm onder andere de homepage bezoeken, doorlopen zij met het toetsenbord éérst de links in het hoofddeel van de pagina en daarna de links in het navigatiemenu aan de rechterkant van de pagina. Wanneer bezoekers inzoomen op de pagina verschuift het navigatiemenu naar boven. Wanneer bezoekers vervolgens weer met het toetsenbord over de pagina navigeren, gaan zij éérst door het navigatiemenu en daarna naar het hoofddeel van de pagina. Bezoekers verwachten in alle gevallen éérst een navigatiemenu tegen te komen. Zorg er dan ook voor dat bezoekers ook als er niet ingezoomd is, eerst het navigatiemenu doorlopen.

Bevinding 26: Wanneer bezoekers inzoomen verandert het navigatiemenu in een hamburgermenu. Wanneer bezoekers met het toetsenbord navigeren en het menu doorlopen hebben, gaat de focus verder op de achterliggende pagina in plaats van terug naar de sluit-knop. Zorg ervoor dat bezoekers zelf het menu moeten sluiten door de focus binnen het menu te laten, of dat het menu vanzelf sluit wanneer bezoekers er doorheen zijn.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 27: Wanneer bezoekers inzoomen op de pagina, wordt het logo van de gemeente Diemen bovenaan de pagina (iedere pagina) klikbaar. De afbeelding bevat wel een alternatieve tekst, namelijk 'Zwembad Diemen', maar deze tekst komt niet overeen met de tekst in het logo. Hierdoor kunnen bezoekers die gebruik maken van spraakgestuurde navigatie de link niet bedienen. Pas het linkdoel aan naar bijvoorbeeld 'Logo Gemeente Diemen, ga naar de homepage van Zwembad Diemen' om dit probleem op te lossen.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 28: Er is maar één manier om alle pagina's binnen deze website te vinden en dat is via de links op de pagina's. Zorg dat er nog een manier is om elke pagina te kunnen bereiken, bijvoorbeeld door een sitemap of een volledig navigatiemenu toe te voegen.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 29: Op iedere pagina (behalve de homepage) staat nu een groot stuk tekst over de aangepaste coronaregels. Deze tekst is geheel opgemaakt met het kop-element. Deze tekst hoort geen kop te zijn en beschrijft dan ook niet de onderliggende content. Geef de tekst één kop en verwijder het kop-element uit de tekst zelf om dit probleem op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 30: Als er ingezoomd wordt tot 125% bij een schermbreedte van 1280px dan komt bovenin een menu tevoorschijn (bij verder inzoomen komt uiteindelijk een menuknop, een hamburgermenu). Afhankelijk van de pagina, krijgen sommige items geen zichtbare focus in dit menu. Op bijvoorbeeld www.zwembaddiemen.nl/home/recreatief-zwemmen/banen-zwemmen/ is bij "Recreatief zwemmen" bijvoorbeeld geen focus zichtbaar.
Hetzelfde geldt voor het hamburgermenu dat tevoorschijn komt als er verder wordt ingezoomd.
De knop van het hamburgermenu zelf krijgt ook geen zichtbare focus.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 31: Op pagina www.zwembaddiemen.nl/bestaatniet/ ontbreekt een taalaanduiding van de inhoud van de pagina. Deze moet in de HTML-code worden opgegeven door middel van een lang-attribuut bij het HTML-element. Dit attribuut moet dan de landcode van de taal bevatten.
Beter is het om hier een goede Nederlandstalige pagina te maken met een duidelijke boodschap

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 32: Wanneer bezoekers inzoomen op de pagina, verandert het navigatiemenu in een hamburgermenu. De naam van de knop om het menu te openen en te sluiten is 'toggle navigation'. Zorg ervoor dat bedienbare elementen een toegankelijke naam hebben in de hoofdtaal van de pagina.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 33: Op pagina www.zwembaddiemen.nl/home/zwemles/kinderen/inschrijven-a/ staat de verzondknop onderaan de pagina binnen een li-element, maar dat li-element valt niet binnen een ul- of ol- element.

Bevinding 34: Op pagina www.zwembaddiemen.nl/home/zwemles/kinderen/inschrijven-a/ staat er een b-element in het ol-element. Binnen het ol-element mogen alleen li-, script- en template-elementen voorkomen.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 35: Op iedere pagina maar o.a. www.zwembaddiemen.nl/home/ wordt gebruik gemaakt van uitvouwbare blokken (zoals het hamburgermenu dat rechtsboven tevoorschijn komt bij voldoende zoom). Voor ziende gebruikers is het duidelijk dat deze in- of uitgevouwen is. Voor screenreadergebruikers is dat niet zo. Geef in de code bij het juiste element de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen. Nu staat er in de code wel een aria-expanded op het nav-element, maar omdat deze niet op de juiste plek staat (button-element) wordt dit niet doorgegeven aan screenreaders.

Bevinding 36: Wanneer bezoekers inzoomen op de pagina, verandert het navigatiemenu in een hamburgermenu. Wanneer bezoekers het menu openen met de knop, verandert de knop in een sluiten-knop. De naam van deze knop verandert echter niet, deze blijft 'toggle navigation' (zie succescriterium 3.1.2). Hierdoor is het voor bezoekers die voorleessoftware gebruiken niet duidelijk wat deze knoppen doen.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2022-09-26 14:51:56 v2.3-011