Onderzoek toegankelijkheid maakoosterwold.nl - hertoetsing versie 1.2
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
- 15 februari 2022
Managementsamenvatting
Dit onderzoek is een tweede hertoetsing. Het eerste onderzoek vond plaats op 6 mei 2021, de eerste hertoetsing op 30 september 2021.
Uit dit onderzoek blijkt dat wordt voldaan aan 37 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
De website is in het algemeen goed te bedienen met het toetsenbord. Op de meeste pagina's zijn koppen goed aangegeven in de code. Ook de taal en de titel van de pagina's staan goed aangegeven. Herhaalde onderdelen kunnen worden overgeslagen met een skiplink.
Waar nog verbetering mogelijk is, is met name in de toegankelijkheid voor toetsenbord en hulpsoftware in de interactieve delen van het handboek en de burenvinder. Ook zijn hier nog een paar contrastissues gevonden. Op de 'hoofdsite' kunnen sommige links beter beschreven worden, zoals meerdere links met de tekst 'meer info' op een pagina.
Scope van de evaluatie
- Website naam
- maakoosterwold.nl
- Scope van de website
- Alle pagina's op https://maakoosterwold.nl inclusief de pagina's op handboek.maakoosterwold.nl en maakoosterwold.nl/burenvinder.
- WCAG Versie
- 2.1
- Conformiteitsdoel
- AA
- Basisniveau van toegankelijkheid-ondersteuning
- Gangbare webbrowsers en hulpapparatuur.
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.
- 31 Voldoende
- 13 Onvoldoende
- 6 Niet van toepassing
- 0 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.1.1: Niet-tekstuele content | Hele sampleUitkomst: Onvoldoende EvenementUitkomst: Voldoende Handboek hoofdstukUitkomst: Onvoldoende Blog met videoUitkomst: Onvoldoende | EvenementOpmerking: Het volgende is niet per se fout onder WCAG, maar het verbeteren daarvan kan de toegankelijkheid en gebruiksvriendelijkheid van de website vergroten. In de rechter kolom staan nieuwsberichten. Elk bericht bestaat uit twee links: de afbeelding met tekstalternatief (correct) en de kop die ook als link dient naar dezelfde bestemming, namelijk de inhoud van het bericht. Beide links hebben dezelfde tekst. Op de tweede link zit naast de linktekst ook een title-attribuut met weer dezelfde tekst. Voor een blinde gebruiker wordt nu dezelfde tekst twee of in geval van oudere hulpsoftware drie keer voorgelezen. Handboek hoofdstukOnderaan de pagina staan zogenaamde accordions. Naast de tekst (‘Het gebied’, ‘De filosofie’) staat een icoon dat aangeeft dat hier een verborgen sectie opengeklapt kan worden. Dit icoon heeft geen tekstalternatief. Zie screenshot 1. Onderaan de pagina staan bij de onderdelen vinkjes (groene iconen) die aangeven dat een onderdeel voltooid is. Hiervoor is geen tekstalternatief. Blog met videoBoven de video staat een link met een icoon dat aangeeft dat deze link in een nieuw venster opent. Deze afbeelding heeft geen tekstalternatief. Deze iconen komen ook in de rechter zijkolom en op andere pagina’s voor. |
1.2 Op tijd gebaseerde media
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen) | Hele sampleUitkomst: Niet van toepassing | |
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen) | Hele sampleUitkomst: Voldoende | |
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen) | Hele sampleUitkomst: Voldoende | |
1.2.4: Ondertitels voor doven en slechthorenden (live) | Hele sampleUitkomst: Niet van toepassing | |
1.2.5: Audiodescriptie (vooraf opgenomen) | Hele sampleUitkomst: Voldoende |
1.3 Aanpasbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.3.1: Info en relaties | Hele sampleUitkomst: Onvoldoende HomepageUitkomst: Onvoldoende Handboek hoofdstukUitkomst: Onvoldoende PDF IntentieovereenkomstUitkomst: Onvoldoende | HomepageDe kophiërarchie klopt niet. In de header staat een h1 (STADSLANDBOUW), waaronder de rest van de koppen valt. Stadslandbouw lijkt hier echter niet het hoofdthema van de pagina. Zie screenshot 4. Handboek hoofdstukDe kop hiërarchie klopt niet. De kopjes 'Over Oosterwold' en de kopjes daaronder vallen onder het laatste onderdeel in de accordeon, namelijk de h2 'Overheden'. Hierdoor missen screenreadergebruikers mogelijk deze content. PDF IntentieovereenkomstDe koppen in het document zijn in de code niet als kop aangegeven, maar als paragraaf. Ook zijn er veel lege paragrafen gebruikt om witregels te maken. |
1.3.2: Betekenisvolle volgorde | Hele sampleUitkomst: Voldoende | |
1.3.3: Zintuiglijke eigenschappen | Hele sampleUitkomst: Voldoende | |
1.3.4: Weergavestand | Hele sampleUitkomst: Voldoende | |
1.3.5: Identificeer het doel van de input | Hele sampleUitkomst: Onvoldoende Registreren/InloggenUitkomst: Onvoldoende Login burenvinderUitkomst: Onvoldoende | Registreren/InloggenInvoervelden die persoonlijke informatie van de gebruiker verzamelen hebben geen autocomplete-attribuut.Het attribuut autocomplete maakt het invullen van formulieren voor veel gebruikers gemakkelijker, zoals voor mensen voor wie het invoeren van tekst veel tijd kost, omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Op de volgende pagina is meer informatie te vinden over de toepassing van dit attribuut en welke waardes verplicht zijn om te gebruiken. Zie: https://www.w3.org/TR/WCAG21/#input-purposes. Login burenvinderInvoervelden die persoonlijke informatie van de gebruiker verzamelen hebben geen autocomplete-attribuut. |
1.4 Onderscheidbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.4.1: Gebruik van kleur | Hele sampleUitkomst: Onvoldoende Initiatieven kaartUitkomst: Onvoldoende | Initiatieven kaartOnder de kaart staan verwijzingen naar de kleur op de kaart: ‘De zwart/grijs gearceerde vlakken die tegen de snelweg aan liggen(..)’ en in de alinea daaronder staat ook een verwijzing naar de kleur in de kaart. |
1.4.2: Geluidsbediening | Hele sampleUitkomst: Niet van toepassing | |
1.4.3: Contrast (minimum) | Hele sampleUitkomst: Onvoldoende Handboek startpaginaUitkomst: Onvoldoende Burenvinder bericht sturenUitkomst: Onvoldoende | Handboek startpaginaDe menu-items van het mobiele menu hebben te weinig contrast (groen op groen, 2.68). Zie screenshot 3. Burenvinder bericht sturenDe foutmelding bij het inloggen heeft te weinig contrast (wit op rood, 3.99:1). Zie screenshot 2. |
1.4.4: Herschalen van tekst | Hele sampleUitkomst: Voldoende | |
1.4.5: Afbeeldingen van tekst | Hele sampleUitkomst: Voldoende | |
1.4.10: Reflow | Hele sampleUitkomst: Voldoende | |
1.4.11: Contrast van niet-tekstuele content | Hele sampleUitkomst: Onvoldoende Handboek hoofdstukUitkomst: Onvoldoende | Handboek hoofdstukDe iconen met vinkjes bij ‘1 van 2’ en ‘2 van 2’ dat het onderdeel is voltooid hebben een contrast van 1,9:1. |
1.4.12: Tekstafstand | Hele sampleUitkomst: Voldoende | |
1.4.13: Content bij hover of focus | Hele sampleUitkomst: Voldoende |
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.1.1: Toetsenbord | Hele sampleUitkomst: Onvoldoende HomepageUitkomst: Onvoldoende Burenvinder bericht sturenUitkomst: Onvoldoende | HomepageIn de header staat een wisselende foto met link erachter. Deze link is alleen met de muis te bedienen. Bijvoorbeeld naar de pagina over stadslandbouw. Burenvinder bericht sturenDe knoppen in de teksteditor en in het deel waar het gesprek wordt getoond zijn niet met toetsenbord te bedienen. Binnen het gesprek krijgen de knoppen wel zichtbare focus, maar activeren werkt niet. |
2.1.2: Geen toetsenbordval | Hele sampleUitkomst: Voldoende | |
2.1.4: Enkel teken sneltoetsen | Hele sampleUitkomst: Voldoende |
2.2 Genoeg tijd
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.2.1: Timing aanpasbaar | Hele sampleUitkomst: Voldoende | |
2.2.2: Pauzeren, stoppen, verbergen | Hele sampleUitkomst: Voldoende |
2.3 Toevallen en fysieke reacties
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.3.1: Drie flitsen of beneden drempelwaarde | Hele sampleUitkomst: Voldoende |
2.4 Navigeerbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.4.1: Blokken omzeilen | Hele sampleUitkomst: Voldoende | |
2.4.2: Paginatitel | Hele sampleUitkomst: Voldoende | |
2.4.3: Focus volgorde | Hele sampleUitkomst: Onvoldoende Burenvinder profiel gebruikerUitkomst: Onvoldoende | Burenvinder profiel gebruikerAls de gebruiker een nieuw bericht heeft ontvangen, verschijnt er in de boven rechterhoek van de pagina een bericht ‘Je hebt 1 nieuw bericht’. Met het toetsenbord krijg dit bericht pas focus aan het eind van de pagina, na de link naar de toegankelijkheidsverklaring. Het lijkt nu voor toetsenbordgebruikers of de link niet bereikbaar is. |
2.4.4: Linkdoel (in context) | Hele sampleUitkomst: Onvoldoende HomepageUitkomst: Onvoldoende ContactUitkomst: Onvoldoende | HomepageEr zijn meerdere links op de pagina met de tekst ‘meer info’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html. Dit probleem komt op meerdere pagina’s voor. ContactEr staat een link op de pagina zonder tekst. Zie screenshot 5. Deze lijkt bedoeld voor de eerste interne link (Contact met adviseur initiatieven ), maar deze werkt niet. |
2.4.5: Meerdere manieren | Hele sampleUitkomst: Voldoende | |
2.4.6: Koppen en labels | Hele sampleUitkomst: Voldoende | |
2.4.7: Focus zichtbaar | Hele sampleUitkomst: Voldoende |
2.5 Input Modaliteiten
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.5.1: Aanwijzergebaren | Hele sampleUitkomst: Niet van toepassing | |
2.5.2: Aanwijzerannulering | Hele sampleUitkomst: Voldoende | |
2.5.3: Label in naam | Hele sampleUitkomst: Voldoende | |
2.5.4: Bewegingsactivering | Hele sampleUitkomst: Niet van toepassing |
3 Begrijpelijk
3.1 Leesbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.1.1: Taal van de pagina | Hele sampleUitkomst: Voldoende | |
3.1.2: Taal van onderdelen | Hele sampleUitkomst: Voldoende |
3.2 Voorspelbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.2.1: Bij focus | Hele sampleUitkomst: Voldoende | |
3.2.2: Bij input | Hele sampleUitkomst: Voldoende | |
3.2.3: Consistente navigatie | Hele sampleUitkomst: Voldoende | |
3.2.4: Consistente identificatie | Hele sampleUitkomst: Voldoende |
3.3 Assistentie bij invoer
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.3.1: Foutidentificatie | Hele sampleUitkomst: Onvoldoende Registreren/InloggenUitkomst: Onvoldoende | Registreren/InloggenBij het foutief invullen van velden verschijnen na het verzenden foutmeldingen/suggesties, maar deze verdwijnen na een paar seconden. Deze teksten zijn daardoor niet voor iedereen te lezen. Zorg dat deze teksten bereikbaar blijven. |
3.3.2: Labels of instructies | Hele sampleUitkomst: Voldoende | |
3.3.3: Foutsuggestie | Hele sampleUitkomst: Voldoende | |
3.3.4: Foutpreventie (wettelijk, financieel, gegevens | Hele sampleUitkomst: Niet van toepassing |
4 Robuust
4.1 Compatibel
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
4.1.1: Parsen | Hele sampleUitkomst: Onvoldoende Random paginaUitkomst: Onvoldoende | Random paginaOp deze pagina worden meerdere elementen niet goed geopend/afgesloten. Dit kan voor interpretatieproblemen zorgen voor de voorleessoftware. |
4.1.2: Naam, rol, waarde | Hele sampleUitkomst: Onvoldoende Handboek hoofdstukUitkomst: Onvoldoende Burenvinder bericht sturenUitkomst: Onvoldoende | Handboek hoofdstukOnderaan de pagina staan zogenaamde accordions. Naast de tekst (‘Het gebied’, ‘De filosofie’) staat een icoon dat aangeeft dat hier een verborgen sectie opengeklapt kan worden. Dit interactief element heeft geen juiste rol. Zie screenshot 1. Er is een span aangemaakt met een role=”button” maar deze zit onder de h2. Wanneer je op het blok komt wordt geen ‘button’ voorgelezen maar ‘groep’. Zet de rol op de gehele balk zodat het meteen duidelijk is dat deze uitgeklapt kan worden. Geef daarbij ook de status aan, dit kan via het aria-expanded attribuut. Burenvinder bericht sturenDe knoppen in de teksteditor die onder ‘Kavel X 1256’ staan hebben geen toegankelijke naam. Deze knoppen bevatten iconen die verborgen zijn met aria-hidden=”true”. Ook in het blokje waar het gesprek wordt getoond staan knoppen zonder tekst (de eerste 2 knoppen). Deze knoppen hebben geen toegankelijke namen. Zie screenshots 6 en 7. In het gesprek staan boven de link naar het profiel lege links. (Deze gaan ook naar het profiel maar hebben geen tekst. Ze zijn dus dubbelop.) |
4.1.3: Statusberichten | Hele sampleUitkomst: Onvoldoende Registreren/InloggenUitkomst: Onvoldoende Login burenvinderUitkomst: Onvoldoende | Registreren/InloggenAls het wachtwoord wordt ingevuld, verschijnt er onder het invoerveld een melding ‘Zwak’. Dit is een statusbericht. Deze melding is een statusbericht omdat het voldoet aan twee hoofdcriteria van een statusbericht: de melding geeft informatie over de resultaten van een actie en deze melding ontvangt geen focus. Deze rol van een statusbericht moet programmatisch kunnen worden bepaald zodat een screenreader deze informatie (tussendoor) kan voorlezen. Dit is nu niet het geval. Er is bij het wachtwoord een aria-live attribuut toegevoegd, maar de rol is niet beschreven. Dit zou hier ‘alert’ moeten zijn. Login burenvinderDe statusberichten over het inloggen (wel of niet succesvol) geen rol en status. |
Sample met getoetste webpagina's
- Homepage - https://maakoosterwold.nl/
- Inspiratie - https://maakoosterwold.nl/inspiratie/
- Over Oosterwold - https://maakoosterwold.nl/over-oosterwold/
- Initiatieven kaart - https://maakoosterwold.nl/initiatieven-kaart/
- Nieuws - https://maakoosterwold.nl/nieuws/
- Werkzaamheden - https://maakoosterwold.nl/category/werkzaamheden/
- Nieuwsbrief - https://maakoosterwold.nl/nieuwsbrief/
- Nieuwsbrieven 2021 - https://maakoosterwold.nl/nieuwsbrief/nieuwsbrieven-2021/
- Contact - https://maakoosterwold.nl/contact/
- Evenement - https://maakoosterwold.nl/event/gecombineerde-online-sessies-over-uitkomsten-van-de-enquete/
- Zoekresultaten - https://maakoosterwold.nl/?s=document
- Blogpost - https://maakoosterwold.nl/20e-blog-mariken-de-vries/
- Agenda - https://maakoosterwold.nl/agenda/
- Handboek startpagina - https://handboek.maakoosterwold.nl/
- Handboek hoofdstuk - https://handboek.maakoosterwold.nl/cursus/over-oosterwold/
- Registreren/Inloggen - https://handboek.maakoosterwold.nl/dashboard/
- Random pagina - https://handboek.maakoosterwold.nl/cursus/het-geld/
- Random pagina - https://maakoosterwold.nl/burenvinder/burenvinder/members/
- Login burenvinder - https://maakoosterwold.nl/burenvinder/burenvinder/members/?wpforo=signin
- Blog met video - https://maakoosterwold.nl/14e-blog/
- Burenvinder bericht sturen - https://maakoosterwold.nl/burenvinder/messages/1989/455/
- Burenvinder profiel gebruiker - https://maakoosterwold.nl/burenvinder/profile/1989/
- PDF Intentieovereenkomst - https://handboek.maakoosterwold.nl/wp-content/uploads/2020/05/20200513-Concept-intentieovereenkomst.pdf
Webtechnologie
HTML,CSS,WAI-ARIA,JavaScript,PDF
Onderbouwing van de evaluatie
Gebruikte systemen tijdens het onderzoek:
- Chrome 89 en Safari 14.01.02 met VoiceOver op Mac 11.02.03
- Adobe Acrobat Pro DC 2020.012.20043 op Mac 11.02.02
- Chrome 89 op Android 9
- Edge 85 op Windows 10