Onderzoek toegankelijkheid sportencultuur.almere.nl

Inhoud:

Inleiding
Managementsamenvatting
Scope van de evaluatie
Uitbreide toetsresultaten
Sample met getoetste webpagina's
Webtechnologie
Onderbouwing van de evaluatie
Screenshots

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, worden hiervan een of meer voorbeelden gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten 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: Gemeente Almere
Evaluatiedatum: 7 januari 2021

Managementsamenvatting

Uit dit onderzoek blijkt dat wordt voldaan aan 29 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

De website werkt goed op mobiele apparaten en wanneer je inzoomt op de desktop, schalen de teksten goed mee. Dankzij de skiplink is het voor toetsenbordgebruikers ook goed mogelijk om herhalende content bovenaan de pagina's over te slaan. Ook zijn er geen bewegende elementen die de gebruiker kunnen afleiden van de tekst, en blijven meldingen in beeld staan zodat de gebruiker tijd heeft om deze te lezen.

Wel ontbreken er goede alternatieve teksten bij enkele logo's en iconen, waardoor links en buttons geen duidelijk doel hebben. Ook zijn er veel invoervelden gevonden waar de labels niet correct zijn opgemaakt, waardoor het voor gebruikers van hulpsoftware niet duidelijk is wat er ingevuld moet worden. Hoewel de site in het algemeen goed te bedienen is met het toetsenbord, geeft dit nog wel problemen bij popups en bij het invullen van checkboxes in formulieren. Wat contrast betreft zijn er issues gevonden met groene en oranje teksten die door de gehele site worden toegepast.

Scope van de evaluatie

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

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

20 Voldoende
21 Onvoldoende
9 Niet van toepassing
0 Niet getoetst

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven

Success Criterium	Uitkomst	Bevindingen
1.1.1: Niet-tekstuele content	Hele sample Uitkomst: Onvoldoende Sport Uitkomst: Onvoldoende PDF Handleiding partners Uitkomst: Onvoldoende Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere Uitkomst: Onvoldoende	Hele sample Bevindingen: Het logo ‘Sport & Cultuur in Almere’ heeft een lege alt-tekst. Logo’s zijn informatief en moeten altijd een beschrijving hebben van de tekst op de afbeelding. Voeg een alt-tekst toe. Dit geldt ook voor het logo onderaan de pagina van ‘Almere Kenniscentrum Talent’. Wanneer het mobiele menu geopend is, staat er onder het menu een afbeelding van een kruis, welke als sluiten knop dient. Deze afbeelding heeft geen alternatieve tekst. Opmerking: Decoratieve afbeeldingen kunnen het best verborgen worden voor hulpsoftware, zoals ‘sport pictogram groen’. Dit soort beschrijvingen voegen namelijk niets toe aan de content. Dit kan door de alt-tekst leeg te laten. Sport Onderaan de pagina staan 2 logo’s zonder alt-tekst, van 'Jeugdfonds Sport en Cultuur' en van 'Uniek sporten'. Voeg hier een alt-ekst toe. Achter de namen van de filters staat een icoontje met een min-teken om aan te geven dat je het filter hiermee kunt wissen. Dit icoon heeft geen goede alternatieve tekst. Nu staat er bijvoorbeeld ‘balsporten indeterminate_check_box’. Opmerking: Boven het eerste logo staat de tekst ‘Klik op de knop…’, maar er is geen knop. PDF Handleiding partners De afbeeldingen in het document missen alternatieve teksten. Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere De foto heeft een lege alt-tekst waardoor deze verborgen wordt voor hulpsoftware. Er is echter wel een caption, wat tegenstrijdig is (en waardoor screenreaders de figuur wel voorlezen). Deze caption is ook geen beschrijving van de afbeelding. Captions zijn bedoeld voor aanvullende informatie over de afbeelding (die niet in de alt-tekst thuis hoort of past). Voeg een goed beschrijvende alt- tekst toe, eventueel met aanvullende caption. Zet de kosten buiten de caption, dit is ‘normale’ content. Dit komt bij meerdere activiteiten voor.

Success Criterium

Uitkomst

Bevindingen

1.1.1: Niet-tekstuele content

Hele sample

Uitkomst: Onvoldoende

Sport

Uitkomst: Onvoldoende

PDF Handleiding partners

Uitkomst: Onvoldoende

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het logo ‘Sport & Cultuur in Almere’ heeft een lege alt-tekst. Logo’s zijn informatief en moeten altijd een beschrijving hebben van de tekst op de afbeelding. Voeg een alt-tekst toe. Dit geldt ook voor het logo onderaan de pagina van ‘Almere Kenniscentrum Talent’.

Wanneer het mobiele menu geopend is, staat er onder het menu een afbeelding van een kruis, welke als sluiten knop dient. Deze afbeelding heeft geen alternatieve tekst.

Opmerking: Decoratieve afbeeldingen kunnen het best verborgen worden voor hulpsoftware, zoals ‘sport pictogram groen’. Dit soort beschrijvingen voegen namelijk niets toe aan de content. Dit kan door de alt-tekst leeg te laten.

Sport

Onderaan de pagina staan 2 logo’s zonder alt-tekst, van 'Jeugdfonds Sport en Cultuur' en van 'Uniek sporten'. Voeg hier een alt-ekst toe.

Achter de namen van de filters staat een icoontje met een min-teken om aan te geven dat je het filter hiermee kunt wissen. Dit icoon heeft geen goede alternatieve tekst. Nu staat er bijvoorbeeld ‘balsporten indeterminate_check_box’.

Opmerking: Boven het eerste logo staat de tekst ‘Klik op de knop…’, maar er is geen knop.

PDF Handleiding partners

De afbeeldingen in het document missen alternatieve teksten.

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

De foto heeft een lege alt-tekst waardoor deze verborgen wordt voor hulpsoftware. Er is echter wel een caption, wat tegenstrijdig is (en waardoor screenreaders de figuur wel voorlezen). Deze caption is ook geen beschrijving van de afbeelding. Captions zijn bedoeld voor aanvullende informatie over de afbeelding (die niet in de alt-tekst thuis hoort of past). Voeg een goed beschrijvende alt- tekst toe, eventueel met aanvullende caption. Zet de kosten buiten de caption, dit is ‘normale’ content. Dit komt bij meerdere activiteiten voor.

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: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende Akt Uitkomst: Onvoldoende	Akt Er komt informatie in beeld die niet wordt uitgesproken, zoals groepen en leeftijden. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie (onder dit niveau A criterium) ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
1.2.4: Ondertitels voor doven en slechthorenden (live)	Hele sample Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende Akt Uitkomst: Niet getoetst	Akt Er komt informatie in beeld die niet wordt uitgesproken, zoals groepen en leeftijden. Onder dit niveau AA kan niet worden volstaan met een alternatief, maar is audiodescriptie vereist.

1.3 Aanpasbaar

Success Criterium	Uitkomst	Bevindingen
1.3.1: Info en relaties	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende Sport Uitkomst: Onvoldoende Akt Uitkomst: Niet getoetst PDF Handleiding partners Uitkomst: Onvoldoende Activiteit aanmaken (ingelogd) Uitkomst: Onvoldoende	Homepage De kophiërarchie klopt niet. Zo is er een h2-kop ‘Populair’, maar de items die hieronder vallen hebben ook een h2-kop. Dit moeten h3-koppen zijn. Zie screenshot 2. Sport De kophiërarchie klopt niet. Alle activiteiten hebben nu een kop op h2-niveau, maar dit zou h3 moeten zijn, onder de grotere h2-kop ‘Sport’. Nog beter zou zijn om van ‘Sport’ een h1 te maken (de pagina heeft nu namelijk geen h1), dan een h2 met ‘Activiteiten’ en daaronder alle activiteiten met een h3-kop. De filters (h3) kunnen dan een h2-kopje krijgen met ‘Filters’. Deze structuur komt op meerdere pagina’s voor. Het invoerveld om te zoeken mist een label. Een placeholder is niet voldoende, omdat die niet overal wordt ondersteund. Dit komt op meerdere pagina’s voor. Akt Opmerking: er staat een zin geheel in hoofdletters. Voor sommige bezoekers kan dit lastig te lezen zijn, zoals voor mensen met dyslexie en voor gebruikers van screenreaders die deze tekst op een aparte manier voorlezen. Vermijd daarom het gebruik van hoofdletters voor langere teksten. PDF Handleiding partners De kopjes in het document missen kopopmaak, ze zijn nu gecodeerd als paragrafen. Hierdoor is het niet mogelijk voor gebruikers van hulpsoftware om een overzicht te krijgen van de indeling van het document. Voeg kopelementen toe. Hiermee is het ook mogelijk om bookmarks te genereren, waarmee blokken content overgeslagen kunnen worden. Activiteit aanmaken (ingelogd) Er zijn meerdere invoervelden zonder daaraan gekoppeld label. Er staan label elementen in de code, maar de id’s waar ze naar verwijzen komen niet terug in de betreffende invoervelden. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk wat er bij deze invoervelden ingevuld moet worden. Bij gegroepeerde invoervelden, zoals bij leeftijden, moeten deze ook in de code worden gegroepeerd. Dit kan d.m.v een fieldset om alle velden en een legend element om de groep te benoemen (geen label, een label is per veld).
1.3.2: Betekenisvolle volgorde	Hele sample Uitkomst: Voldoende	Hele sample Bevindingen: De popup met de tekst over coronamaatregelen is het eerste wat een visuele gebruiker ziet, maar voor een screenreader gebruiker komt deze informatie pas helemaal onderaan de pagina. Het is dus goed mogelijk dat deze informatie niet gelezen wordt. Zie ook 2.4.3.
1.3.3: Zintuiglijke eigenschappen	Hele sample Uitkomst: Voldoende
1.3.4: Weergavestand	Hele sample Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input	Hele sample Uitkomst: Onvoldoende Aanmelden Partners Uitkomst: Onvoldoende	Aanmelden Partners De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, met name voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.

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 van toepassing
1.4.3: Contrast (minimum)	Hele sample Uitkomst: Onvoldoende PDF Handleiding partners Uitkomst: Onvoldoende	Hele sample Bevindingen: Het contrast van de kop ‘Coronamaatregelen’ in de popup is niet voldoende (2.55:1). Het contrast van deze kop (grote tekst) moet minimaal 3:1 zijn. Voor normale tekst geldt een minimum van 4.5:1. De groene en oranje teksten (op Home: Ga naar sport, Ga naar cultuur) hebben een te laag contrast (2.3:1 en 2.6:1). Hetzelfde geldt voor witte tekst op groene en oranje achtergrond (zoals ‘Sport uitgelicht’). Tekst met te laag contrast is moeilijk te lezen voor slechtziende en kleurenblinde bezoekers. De combinatie oranje/wit en groen/wit komt op veel plekken op de site voor. Voorbeelden: Popup activiteiten: de groene en oranje links Zoeken in de buurt: de actieve link in de footer Contact: de ‘Subscribe’ button Aanmelden partners: de ‘registreren’ knop Activiteit aanmaken: de datumprikker Formulieren, zoals bij Activiteit aanmaken: de foutmeldingen hebben te weinig contrast (rood op blauw, 2:1). Zie screenshot 1. PDF Handleiding partners Op pagina 2 staat oranje tekst met te weinig contrast (2.7:1).
1.4.4: Herschalen van tekst	Hele sample Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst	Hele sample Uitkomst: Voldoende
1.4.10: Reflow	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende	Homepage Wanneer je een activiteit selecteert op mobiel, heeft de popup geen knop om het weer te sluiten. Er buiten klikken werkt ook niet, wat betekent dat je vastloopt. Zie screenshot 4. Op desktop gaat het ook niet helemaal goed aan de bovenkant van een activiteit in de popup. De ‘golf’ bedekt een deel van de tekst (en de sluit-knop) bij 250%. Zie screenshot 7. Wanneer je inzoomt op meer dan 250% (bij 1280px breed en 1024px hoog), zijn niet alle items in het hoofdmenu zichtbaar. Het is ook niet mogelijk hier naartoe te scrollen (verticaal). Wanneer je inzoomt op 400% (bij 1280px breed), moet je horizontaal scrollen om de activiteiten te kunnen lezen. Zorg ervoor dat alle ‘normale content’ tot aan 400% in een kolom gelezen kan worden zonder in 2 richtingen te scrollen. Zie screenshot 5.
1.4.11: Contrast van niet-tekstuele content	Hele sample Uitkomst: Onvoldoende Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere Uitkomst: Onvoldoende	Hele sample Bevindingen: In de ‘cononapopup’ op mobiel is de sluitknop blauw op een blauwgroene achtergrond. Dit heeft te weinig contrast. Zie screenshot 3. Wanneer het mobiele menu geopend is, staat er onder het menu een sluit-knop in de vorm van een kruis. Deze heeft te weinig contrast (1.4:1). Zie screenshot 8. Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere In de popup van de activiteit heeft de button met het whatsapp icoon te weinig contrast. Interactieve elementen moeten minimaal een contrast van 3:1 hebben.
1.4.12: Tekstafstand	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende	Homepage Wanneer text spacing instellingen worden aangepast (zoals line-height, letter of word spacing) is niet alle tekst meer goed leesbaar. Een deel van de teksten van de activiteiten verdwijnt buiten beeld, zie screenshot 6. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Bezoekers die hun eigen styles gebruiken om de tekst leesbaar te maken missen nu mogelijk een deel van de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: http://www.html5accessibility.com/tests/tsbookmarklet.html
1.4.13: Content bij hover of focus	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Wanneer je met de muis over de afbeelding met de vingerafdruk gaat (of er met toetsenbordfocus op komt), verschijnt het woord ‘Cookieverklaring’. Het is niet mogelijk deze weer weg te halen zonder de muis of focus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om andere delen van de website te bekijken. Wanneer zulke extra content over tekst heen valt, moet er een andere mogelijkheid zijn om deze ‘tooltip’ te sluiten, bijvoorbeeld de escape-toets.

2 Bedienbaar

2.1 Toetsenbordtoegankelijk

Success Criterium	Uitkomst	Bevindingen
2.1.1: Toetsenbord	Hele sample Uitkomst: Onvoldoende Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere Uitkomst: Onvoldoende Activiteit aanmaken (ingelogd) Uitkomst: Onvoldoende	Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere De button om de popup te sluiten (het min-teken) is niet te bedienen met het toetsenbord. Activiteit aanmaken (ingelogd) De checkboxes kunnen niet met het toetsenbord worden ingevuld. Aangezien deze verplicht zijn, kan er geen activiteit worden aangemaakt. Dit probleem doet zich ook voor bij het aanmelden van de nieuwsbrief op de Contactpagina. Bij het invoeren van een datum komt met het toetsenbord ook de datumprikker in beeld, maar je kunt er vervolgens niet heen (met pijltjes of de tab-toets). Zorg dat deze ook werkt met het toetsenbord, of verberg de datumprikker met het toetsenbord en geef duidelijk aan hoe de datum handmatig ingevuld kan worden. (Dit werkt al wel, maar er is geen duidelijke instructie.)
2.1.2: Geen toetsenbordval	Hele sample Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen	Hele sample Uitkomst: Voldoende

Success Criterium

Uitkomst

Bevindingen

2.1.1: Toetsenbord

Hele sample

Uitkomst: Onvoldoende

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Uitkomst: Onvoldoende

Activiteit aanmaken (ingelogd)

Uitkomst: Onvoldoende

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

De button om de popup te sluiten (het min-teken) is niet te bedienen met het toetsenbord.

Activiteit aanmaken (ingelogd)

De checkboxes kunnen niet met het toetsenbord worden ingevuld. Aangezien deze verplicht zijn, kan er geen activiteit worden aangemaakt. Dit probleem doet zich ook voor bij het aanmelden van de nieuwsbrief op de Contactpagina.

Bij het invoeren van een datum komt met het toetsenbord ook de datumprikker in beeld, maar je kunt er vervolgens niet heen (met pijltjes of de tab-toets). Zorg dat deze ook werkt met het toetsenbord, of verberg de datumprikker met het toetsenbord en geef duidelijk aan hoe de datum handmatig ingevuld kan worden. (Dit werkt al wel, maar er is geen duidelijke instructie.)

2.1.2: Geen toetsenbordval

Hele sample

Uitkomst: Voldoende

2.1.4: Enkel teken sneltoetsen

Hele sample

Uitkomst: Voldoende

2.2 Genoeg tijd

Success Criterium	Uitkomst	Bevindingen
2.2.1: Timing aanpasbaar	Hele sample Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

2.2.1: Timing aanpasbaar

Hele sample

Uitkomst: Niet van toepassing

2.2.2: Pauzeren, stoppen, verbergen

Hele sample

Uitkomst: Niet van toepassing

2.3 Toevallen en fysieke reacties

Success Criterium	Uitkomst	Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde	Hele sample Uitkomst: Voldoende

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: Voldoende
2.4.2: Paginatitel	Hele sample Uitkomst: Onvoldoende PDF Handleiding partners Uitkomst: Onvoldoende	Hele sample Bevindingen: Opmerking: De paginatitels bevatten geen afzender, maar enkel bijvoorbeeld ‘Contact’. Voor een bezoeker die meerdere tabs open heeft staan is het handig als de titel bijvoorbeeld is ‘Contact - Sport en Cultuur Almere’ om onderscheid te maken met andere websites. PDF Handleiding partners Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde	Hele sample Uitkomst: Onvoldoende Activiteit aanmaken (ingelogd) Uitkomst: Onvoldoende	Hele sample Bevindingen: De popup met Coronamaatregelen valt over alle content heen, maar de toetsenbordfocus blijft op de pagina eronder staan. Dit zelfde probleem doet zich voor wanneer je een activiteit selecteert en deze in een popup opent. Zorg dat wanneer een popup geopend is, de focus alleen in deze popup kan komen totdat deze weer gesloten wordt. Activiteit aanmaken (ingelogd) Als de activiteit wordt opgeslagen en er zijn nog fouten gevonden, scroll je visueel naar het eerste veld toe dat gecorrigeerd moet worden. De toetsenbordfocus blijft echter bij de opslaan-knop staan en gaat verder in de footer. Zorg dat de focus ook naar de eerste foutmelding gaat. Behalve voor toetsenbordgebruikers (in het algemeen) is dit ook belangrijk voor screenreadergebruikers, omdat zij geen melding krijgen van de foutmeldingen die in beeld komen. (Dit kan wel worden toegevoegd via live-regions, wat een vereiste is wanneer de focus niet wordt aangepast.)
2.4.4: Linkdoel (in context)	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende Activiteiten Uitkomst: Onvoldoende	Hele sample Bevindingen: De link naar de homepage heeft geen tekst. De alt tekst van het logo is leeg. Dit kan worden opgelost door het logo een goede beschrijving te geven. Wanneer het mobiele menu geopend is, staat er onder het menu een link met een afbeelding van een kruis, welke als sluiten-knop dient. Deze link heeft geen tekst. Voor gebruikers van hulpsoftware is het nu niet duidelijk waar deze link voor dient. (Wanneer de menu-knop goed wordt opgemaakt met juiste naam en status, kan deze knop eventueel ook weggelaten worden. Zie ook 2.5.3 en 4.1.2) Homepage Onder ‘Populair’ staan 2 lege links, die bedoeld lijken voor een slider. Deze slider is niet in gebruik, maar deze links verschijnen wel in linkoverzichten van screenreaders en ontvangen wel totesenbordfocus. Het is beter deze links te verwijderen wanneer ze geen functie hebben. Activiteiten Er staat een lege link voor de eerste activiteit (deze gaat naar een preview in een nieuwe tab).
2.4.5: Meerdere manieren	Hele sample Uitkomst: Voldoende
2.4.6: Koppen en labels	Hele sample Uitkomst: Voldoende
2.4.7: Focus zichtbaar	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende	Homepage De focus op het zoekveld is slecht zichtbaar. Geef dit invoerveld een focusstijl, zoals een extra rand om het veld wanneer je er in staat. (De outline staat nu op ‘none’).

2.5 Input Modaliteiten

Success Criterium	Uitkomst	Bevindingen
2.5.1: Aanwijzergebaren	Hele sample Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering	Hele sample Uitkomst: Voldoende
2.5.3: Label in naam	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Wanneer je inzoomt, verschijnt er een knop met de zichtbare tekst ‘menu’. In de code heeft deze echter de naam ‘navigation’. De knop is hierdoor niet met stem te bedienen. Ook kan dit lastig zijn voor Nederlandse screenreader gebruikers omdat het Engelse tekst is.
2.5.4: Bewegingsactivering	Hele sample Uitkomst: Niet van toepassing

3 Begrijpelijk

3.1 Leesbaar

Success Criterium	Uitkomst	Bevindingen
3.1.1: Taal van de pagina	Hele sample Uitkomst: Voldoende
3.1.2: Taal van onderdelen	Hele sample Uitkomst: Onvoldoende Contact Uitkomst: Onvoldoende	Contact De knop om aan te melden voor de nieuwsbrief staat in het Engels zonder dat dit in de code is aangegeven. Hierdoor wordt het mogelijk niet goed voorgelezen door screenreaders. Zet hier een taalwissel in de code of maak de knop Nederlandstalig (dit laatste heeft de voorkeur).

Success Criterium

Uitkomst

Bevindingen

3.1.1: Taal van de pagina

Hele sample

Uitkomst: Voldoende

3.1.2: Taal van onderdelen

Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

De knop om aan te melden voor de nieuwsbrief staat in het Engels zonder dat dit in de code is aangegeven. Hierdoor wordt het mogelijk niet goed voorgelezen door screenreaders. Zet hier een taalwissel in de code of maak de knop Nederlandstalig (dit laatste heeft de voorkeur).

3.2 Voorspelbaar

Success Criterium	Uitkomst	Bevindingen
3.2.1: Bij focus	Hele sample Uitkomst: Onvoldoende
3.2.2: Bij input	Hele sample Uitkomst: Voldoende
3.2.3: Consistente navigatie	Hele sample Uitkomst: Voldoende
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: Onvoldoende Contact Uitkomst: Onvoldoende	Contact Wanneer de checkbox niet is aangevinkt en het formulier wordt verzonden, krijgt de gebruiker geen feedback over wat er mis is gegaan. Dit kan bijvoorbeeld zijn ‘Fout: de categorie is nog niet geselecteerd.’
3.3.2: Labels of instructies	Hele sample Uitkomst: Voldoende
3.3.3: Foutsuggestie	Hele sample Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens	Hele sample Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel

Success Criterium	Uitkomst	Bevindingen
4.1.1: Parsen	Hele sample Uitkomst: Onvoldoende Homepage Uitkomst: Onvoldoende Activiteit aanmaken (ingelogd) Uitkomst: Onvoldoende Activiteiten Uitkomst: Onvoldoende	Homepage In het figure element in de popup van de activiteit staat een div die niet wordt afgesloten. Incorrecte markup kan resulteren in verkeerde interpretatie door hulpsoftware. Activiteit aanmaken (ingelogd) Er zijn meerdere span elementen gevonden die worden afgesloten maar niet zijn geopend. Activiteiten Het button element is niet toegestaan binnen het link element. Dit komt op deze pagina 2 keer voor. Zie ook 4.1.2.
4.1.2: Naam, rol, waarde	Hele sample Uitkomst: Onvoldoende Akt Uitkomst: Onvoldoende Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere Uitkomst: Onvoldoende Activiteiten Uitkomst: Onvoldoende	Hele sample Bevindingen: De button van de cookieverklaring heeft geen naam. Er staat een span element in met de tekst ‘cookieverklaring’, maar deze is via display:none verborgen voor hulpsoftware. Wanneer je inzoomt, verschijnt er een knop met de zichtbare tekst ‘menu’. De status van dit menu wordt niet aangeven. Dit kan worden opgelost via het aria-expanded attribuut. Akt Er mist een title in de iframe van de video. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg een beschrijvende title toe. Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere De knop om de activiteit te sluiten heeft geen correcte naam en rol. Het is een div-element en geen button, en de enige tekst is ‘indeterminate_check_box’. Maak hier een button element van met een goede naam. Activiteiten Er zijn 2 buttons die binnen een link element staan: ‘Nieuwe activiteit aanmaken’ en ‘Export aanmeldingen’. Hierdoor is de rol niet duidelijk. Maak hier een button of een link van. Opmerking: het is ook goed om bij de export button te vermelden dat hierbij een csv-bestand wordt gedownload.
4.1.3: Statusberichten	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

4.1.1: Parsen

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Activiteit aanmaken (ingelogd)

Uitkomst: Onvoldoende

Activiteiten

Uitkomst: Onvoldoende

Homepage

In het figure element in de popup van de activiteit staat een div die niet wordt afgesloten. Incorrecte markup kan resulteren in verkeerde interpretatie door hulpsoftware.

Activiteit aanmaken (ingelogd)

Er zijn meerdere span elementen gevonden die worden afgesloten maar niet zijn geopend.

Activiteiten

Het button element is niet toegestaan binnen het link element. Dit komt op deze pagina 2 keer voor. Zie ook 4.1.2.

4.1.2: Naam, rol, waarde

Hele sample

Uitkomst: Onvoldoende

Akt

Uitkomst: Onvoldoende

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Uitkomst: Onvoldoende

Activiteiten

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De button van de cookieverklaring heeft geen naam. Er staat een span element in met de tekst ‘cookieverklaring’, maar deze is via display:none verborgen voor hulpsoftware.

Wanneer je inzoomt, verschijnt er een knop met de zichtbare tekst ‘menu’. De status van dit menu wordt niet aangeven. Dit kan worden opgelost via het aria-expanded attribuut.

Akt

Er mist een title in de iframe van de video. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg een beschrijvende title toe.

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

De knop om de activiteit te sluiten heeft geen correcte naam en rol. Het is een div-element en geen button, en de enige tekst is ‘indeterminate_check_box’. Maak hier een button element van met een goede naam.

Activiteiten

Er zijn 2 buttons die binnen een link element staan: ‘Nieuwe activiteit aanmaken’ en ‘Export aanmeldingen’. Hierdoor is de rol niet duidelijk. Maak hier een button of een link van.

Opmerking: het is ook goed om bij de export button te vermelden dat hierbij een csv-bestand wordt gedownload.

4.1.3: Statusberichten

Hele sample

Uitkomst: Niet van toepassing

Sample met getoetste webpagina's

Homepage - https://sportencultuur.almere.nl/
Sport - https://sportencultuur.almere.nl/sport
Cultuur - https://sportencultuur.almere.nl/cultuur
Akt - https://sportencultuur.almere.nl/akt
Zoeken in de buurt - https://sportencultuur.almere.nl/zoeken-in-de-buurt
Veelgestelde vragen - https://sportencultuur.almere.nl/veelgestelde-vragen
PDF Handleiding partners - https://sportencultuur.almere.nl/fileadmin/sites/sportencultuur/Handleiding_Partners-Sport_en_Cultuur_in_Almere_2021.pdf
Contact - https://sportencultuur.almere.nl/contact
Aanmelden Partners - https://sportencultuur.almere.nl/informatie-voor-partners/aanmelden-partners
Inloggen - https://sportencultuur.almere.nl/inloggen
Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere - https://sportencultuur.almere.nl/sport?tx_solr%5Bfilter%5D%5B0%5D=a_subsoort_sport%3AVechtsporten+%2F+zelfverdediging&tx_solr%5Bfilter%5D%5B1%5D=c_leeftijd%3A9&tx_solr%5Bq%5D=kung+fu
Activiteit aanmaken (ingelogd) - https://sportencultuur.almere.nl/informatie-voor-partners/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=new&tx_sfeventmgt_pievent%5Bcontroller%5D=Edit&cHash=c0b27026bf17dd592f4c3014a0021641
Activiteiten - https://sportencultuur.almere.nl/informatie-voor-partners/activiteiten
Zoekresultaten 'klimmen' - https://sportencultuur.almere.nl/activiteiten?tx_solr%5Bq%5D=klimmen
Informatie - https://sportencultuur.almere.nl/informatie/informatie-sport-en-cultuur-in-almere

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,PDF

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek:

Chrome 96 en Safari 15.1 met Voiceover op Mac 11.6.1
Adobe Acrobat Pro DC 2021.007.20099 op Mac 11.6.1
Chrome 96 op iOS 15.2
Edge 96 op Windows 10

Screenshots

foutmeldingen in formulier — Figuur 1: de teksten van de foutmeldingen hebben te weinig contrast

koppenlijst homepage — Figuur 2: de hierarchie van de koppen klopt niet: 'populair' heeft hetzelfde niveau als de items die hier onder vallen

sluiten knop op mobiel — Figuur 3: de knop om de melding te sluiten heeft op mobiel te weinig contrast

activiteiten met vallen deels buiten scherm — Figuur 5: wanneer je inzoomt vallen de teksten van de activiteiten deels buiten beeld, waardoor je naast verticaal ook horizontaal moet scrollen

activiteiten vallen deels buiten de container — Figuur 6: wanneer tekstinstellingen worden aangepast, valt een deel van de tekst buiten de container van de layout en wordt daardoor onleesbaar

Onderzoek toegankelijkheid sportencultuur.almere.nl

Inleiding

Over deze evaluatie

Managementsamenvatting

Scope van de evaluatie

Uitgebreide toetsresultaten

Samenvatting

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven

Hele sample

Sport

PDF Handleiding partners

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Hele sample

Sport

PDF Handleiding partners

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

1.2 Op tijd gebaseerde media

Hele sample

Hele sample

Hele sample

Akt

Akt

Hele sample

Hele sample

Akt

Akt

1.3 Aanpasbaar

Hele sample

Homepage

Sport

Akt

PDF Handleiding partners

Activiteit aanmaken (ingelogd)

Homepage

Sport

Akt

PDF Handleiding partners

Activiteit aanmaken (ingelogd)

Hele sample

Hele sample

Hele sample

Hele sample

Hele sample

Aanmelden Partners

Aanmelden Partners

1.4 Onderscheidbaar

Hele sample

Hele sample

Hele sample

PDF Handleiding partners

Hele sample

PDF Handleiding partners

Hele sample

Hele sample

Hele sample

Homepage

Homepage

Hele sample

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Hele sample

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Hele sample

Homepage

Homepage

Hele sample

Hele sample

2 Bedienbaar

2.1 Toetsenbordtoegankelijk

Hele sample

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Activiteit aanmaken (ingelogd)

Zoekresultaten (Vechtsport, volwassenen, kung fu) + popup activiteit Shaolin Kung Fu Almere

Activiteit aanmaken (ingelogd)

Hele sample

Hele sample

2.2 Genoeg tijd

Hele sample

Hele sample

Sample met getoetste webpagina's