Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Ieders Erf

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Ieders Erf
Datum 11 juli 2022
Scope van de website Alle pagina's op iederserf.nl
Alle pagina's op account.iederserf.nl
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 52

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: Het logo van Ieders Erf op elke pagina op iederserf.nl heeft geen goede alternatieve tekst. De alternatieve luidt nu "ieders-erf". De afbeelding bevat meer tekst. Een goede alternatieve tekst zou zijn: "Logo Ieders Erf, Wonen in Nijstad-Oost Hoogeveen".
De afbeelding dient ook als link. Zet er daarom ook een beschrijvend linkdoel bij: ", naar de homepagina". Laat het title-attribuut in de link dan weg.

Bevinding 2: Het logo op account.iederserf.nl heeft geen alternatieve tekst. Los dit op via een goede alternatieve tekst: "Ieders Erf". De afbeelding dient ook als link. Zet er daarom ook een beschrijvend linkdoel bij, de volledige alternatieve tekst wordt dan: "Logo Ieders Erf, naar de homepagina".

Bevinding 3: Op homepagina staat een klikbaar kaartje met de verschillende erven waar je op kunt klikken. Deze afbeelding heeft geen alternatieve tekst voor de afbeelding en de klikbare elementen. Maak bijvoorbeeld gebruik van het imagemap-element en zorg voor een goede alternatieve tekst. Zie ook 2.1.1, 2.4.4 en 1.4.3.

Bevinding 4: Op de homepagina staat onderin een afbeelding van een blauw logo. met een tekst ervoor. De alternatieve tekst is nu leeg. Zorg dat de tekst van deze afbeelding volledig in het alt-attribuut staat.

Bevinding 5: Op de pagina's op account.iederserf.nl staat onderin een afbeelding van een blauw logo. met een tekst ervoor. De alternatieve tekst luidt hier 'Gemeente Hoogeveen'. Zorg dat de tekst van deze afbeelding volledig in het alt-attribuut staat, dus ook 'Een initiatief van'.

Bevinding 6: Op pagina https://account.iederserf.nl/account/mijn-woonwensen/ zijn afbeeldingen waar bij de afbeelding een tekst staat waardoor de afbeeldingen als decoratief of alternatief voor de tekst beschouwd kunnen worden. Er ontbreekt echter een lege alt-attribuut zodat de afbeelding genegeerd wordt door hulpsoftware, Plaats een alt="" bij de betreffende afbeeldingen. Het gaat met name om de afbeeldingen bij vraag 4.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 7: Op de homepagina is er in de video op verschillende plaatsen tekst in beeld wat de voiceover benoemd. Op 3 plekken ontbreekt er iets:

Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 8: Op de homepagina is een video waarin teksten voorkomen maar die niet door de voiceover worden opgenoemd (zie SC 1.2.3). Laat alle tekst in beeld door de voiceover uitspreken.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 9: Advies: de homepage heeft 1 Kop1 met de naam "Maak jouw woondroom waar". Dit is niet helemaal de omschrijving van de pagina. Je verwacht hier eigenlijk zoiets als 'Ieders Erf'als de belangrijkste kop van deze pagina. Deze hoeft in dit geval visueel niet zichtbaar te zijn. En maak van de huidige Kop1 een Kop2 (<h2>).

Bevinding 10: Advies: de pagina https://account.iederserf.nl/account/?activatie=geslaagd heeft geen Kop1. De eerste kop is 'Welkom' en dit is een <h4>.

Bevinding 11: Op pagina https://account.iederserf.nl/account/mijn-chat/ is een invulvak. Dit vak heeft geen label zodat niet voor iedereen duidelijk is dat je hier iets in kunt vullen. Zorg dat het veld een label heeft die ook visueel zichtbaar is. Zie ook SC 2.4.6 en 4.1.2.

Bevinding 12: Wanneer bezoekers inloggen via de pagina https://account.iederserf.nl/inloggen/ en iets niet goed invullen, verschijnt er een foutmelding. Deze melding staat buiten het formulier (<form>) en kan daarom gemist worden door screenreadergebruikers. Zorg dat de meldingen die betrekking hebben op het formulier binnen het formulier staan.

Bevinding 13: Op pagina https://account.iederserf.nl/privacy/ worden koppen gebruikt die niet als koppen zijn opgemaakt, bijvoorbeeld onder het kopje 'Cookies' de koppen 'Permanente cookies', 'Google services', 'Pixel tags', etc. Nu is daar het strong-element voor gebruikt. Het strong-element is er om tekst te benadrukken. Zorg ervoor dat de juiste code in de HTML wordt gebruikt om deze koppen op te maken. Zorg ook voor een logische koppenstructuur waar geen koppen worden overgeslagen. Dus maak van alle h3's een h2, met uitzondering van de eerste; dat zou een h1 moeten zijn. Maak van de kopjes die nu met strong zijn opgemaakt een h3.
Dit komt op meer plaatsen in de website voor.

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 14: Op de homepagina https://iederserf.nl/ is een registratieformulier waar de bezoeker onder andere het eigen e-mailadres en voornaam 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: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 15: Op homepagina staat een klikbaar kaartje met uitleg van verschillende aspecten in de kaart zoals het collectieve veld. Zorg dat elementen niet alleen herkenbaar zijn door de kleur maar maak bijvoorbeeld gebruik van patronen.

Bevinding 16: Op homepagina https://iederserf.nl/ is een registratieformulier. Als een bezoeker de privacyverklaring niet invult, is dat alleen zichtbaar doordat de checkbox en tekst van kleur verandert. Zorg ervoor dat informatie niet van kleur afhankelijk is. Geef bij elk veld waar iets mis mee is in tekst aan wat er mis is, een goede instructie en eventueel suggesties hoe de fout hersteld kan worden.

Bevinding 17: De links in de lopende tekst op pagina https://account.iederserf.nl/account/mijn-inschrijving/, bijvoorbeeld linktekst 'deze link', zijn alleen herkenbaar doordat ze een andere kleur hebben. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat om links gaat. Zorg ervoor dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 18: Op pagina https://iederserf.nl/ is onderaan een formulier waar een goudkleurige tekst op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn. Dit geldt ook voor de knop, waarvan de tekst wit is op een goudkleurige achtergrond.

Bevinding 19: Op elke pagina is een navigatieknop waarmee je de navigatie kan openen. Dat heeft een zeer donkergroene tekst op donkergroene achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 1,9:1 waar dit 4,5:1 moet zijn.

Bevinding 20: Op elke pagina is in de footer een goudkleurige tekst op donkergroene achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,0:1 waar dit 4,5:1 moet zijn.

Bevinding 21: Op homepagina staat een klikbaar kaartje met uitleg van verschillende aspecten in de kaart zoals de oprijlaan en erfgrenzen. Op sommige plekken is het contrast te laag zoals de stippellijn in 6. Peters Erf. Zorg dat de beschreven elementen in de kaart voldoende onderscheidend zijn in contrast.

Bevinding 22: Op de homepagina in het registratieformulier wordt bij invullen gebruikgemaakt van rode tekst op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,0:1 waar dit 4,5:1 moet zijn.

Bevinding 23: Op pagina https://account.iederserf.nl/ wordt in het menu gebruikgemaakt van goudkleurige tekst op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn. Dit geldt ook voor de link in de footer.

Bevinding 24: Op pagina https://account.iederserf.nl/account/mijn-inschrijving/ zijn 2 knoppen; de groene knop met witte tekst heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn.

Bevinding 25: Op pagina https://iederserf.nl/cookie-policy/ wordt gebruikgemaakt van grijze tekst (bijvoorbeeld bij 'Alle cookies toestaan') op een bijna zwarte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,4:1 waar dit 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 26: Op pagina https://iederserf.nl/cookie-policy/ staan afbeeldingen met tekst onder 'Cookie keuze aanpassen'; het gaat om de afbeeldingen die eruitzien als tabellen. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. Blinden weten niet wat de tekst is op deze afbeelding, want een alternatief ontbreekt. Plaats deze tekst als HTML-tekst op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 27: Advies: Op pagina https://account.iederserf.nl/privacy/ worden tabellen gebruikt om de omschrijving en de bijbehorende teksten bij elkaar te houden. Bij een lagere resolutie verdwijnt een deel van de tabel buiten het scherm en is er ergens in de pagina een scrollbalk te vinden waarmee je de content buiten beeld tevoorschijn kan halen. Dat werkt niet handig. Het is beter geen tabel te gebruiken, maar om deze content als tekst met tussenkopjes op de pagina te zetten.

Bevinding 28: Wanneer bij een schermgrootte van (1280px breed) ingezoomd wordt tot 400%] dan komen op pagina https://iederserf.nl/ delen van de content over elkaar heen staan, bijvoorbeeld het logo over de tekst 'Een eigen erf delen'. Een deel van de tekst wordt daardoor slecht of niet leesbaar.

Bevinding 29: Wanneer bij een schermgrootte van (1280px breed) ingezoomd wordt tot 400%] dan verdwijnt op pagina https://iederserf.nl/ een deel van het kaartje. Met de horizontale scrollbalk kan je ook niet de rest van het kaartje bereiken.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 30: Het contrast van de lichtgrijze lijnen op de witte achtergrond van de invoervelden op pagina https://iederserf.nl/ is te laag. De contrastverhouding is hier 1,5:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik bijvoorbeeld donkerder kleur grijs.
Dit komt ook voor op: https://account.iederserf.nl/account/mijn-chat/

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 31: Op homepagina staat een klikbaar kaartje met de verschillende erven waar je op kunt klikken. Bezoekers die met het toetsenbord navigeren, kunnen hier niet bijkomen en bedienen. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Maak bijvoorbeeld gebruik van het imagemap-element en zorg dat elke link een goede alternatieve tekst bevat. Zie ook 1.1.1 en 1.4.3.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 32: Op de homepagina wordt gebruikgemaakt van de videospeler van Vimeo. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de Vimeo video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'keyboard: false'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 33: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Voldoende

Bevinding 34: Advies: Er is een privacystatement en een privacyverklaring, respectievelijk https://iederserf.nl/privacystatement/ en https://account.iederserf.nl/privacy/. De titels verschillen enigszins en de content ook, maar deze 2 pagina's kunnen verwarrend zijn voor de bezoeker van de website.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 35: Op elke pagina is een knop waarmee je de navigatie kunt openen. Als de navigatie niet zichtbaar is kan hier toch met het toetsenbord doorheen navigeren. Bezoekers die het toetsenbord gebruiken en het sherm kunnen zien, zien niet meer waar ze zijn. Zorg ervoor dat die elementen die onzichtbaar zijn en blijven ook niet de focus krijgen. Dit kan bijvoorbeeld door als de navigatie niet zichtbaar is, 'display: none' te gebruiken.

Bevinding 36: Op elke pagina is een knop waarmee je de navigatie kunt openen. Als je door de opengevouwen navigatie navigeert met het toetsenbord verlaat je op een gegeven moment het uitgevouwen deel. Je komt vervolgens in de content terecht onder de uitgevouwen navigatie, waardoor je niet meer kunt zien waar je bent. Los dit op door het navigatiepaneel te sluiten zodat je weer kunt zien waar je bent, of houdt de toetsenbordnavigatie binnen het menu totdat de bezoeker het het navigatiepaneel weer heeft gesloten.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 37: De linknamen in het kaartje ontbreken op https://iederserf.nl/. Zorg dat de links een goede naam bevatten. Zie SC 1.3.1.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 38: Er is maar één manier om alle pagina's binnen deze website te vinden en dat is door middel van de navigatie. Zorg dat er nog een manier is om elke pagina te kunnen bereiken.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 39: Op pagina https://account.iederserf.nl/account/mijn-chat/ zie je wat lichtgrijze lijnen. Maak gebruik van een kop duidelijk wat de inhoud of het doel is van deze pagina.

Bevinding 40: Op pagina https://account.iederserf.nl/account/mijn-chat/ is een invulvak. Dit vak heeft geen label zodat niet voor iedereen duidelijk is dat je hier iets in kunt vullen. Zorg dat het veld een label heeft die ook visueel zichtbaar is. Zie ook SC 2.4.6 en 4.1.2.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 41: Op sommige plekken is de focus niet zichtbaar of is het contrast te laag (moet minimaal 3:1 zijn). Door het lage contrast is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik contrasterende kleuren op die plekken waar het contrast te laag is en zorg voor een goede omlijning op plekken waar de focus helemaal niet zichtbaar is. De eisen over focuszichtbaarheid worden strenger in de WCAG 2.2, lees er meer over op: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 42: Op de homepage is een registratieformulier. Als je een foutief e-mailadres intypt ontbreekt een goede foutmelding. Er volgt een melding onder het veld dat luidt 'Controleer het e-mailadres' maar dat is een instructie. Een goede foutmelding kan zijn: 'Het e-mailadres is ongeldig'.

Bevinding 43: Op de homepagina in het registratieformulier zijn een aantal velden verplicht. Er ontbreekt een foutmelding en instructie welke velden dit zijn. Zie ook 3.3.2.

Bevinding 44: Op de homepagina in het registratieformulier is ruimte om een achternaam in te typen. Ik heb hierbij mijn achternaam gebruikt aangevuld met tekst 'Ernst (onderzoeker digitale toegankelijkheid)'. Zodra ik op de registratieknop druk gaat de focus naar de achternaam. Het is niet duidelijk wat er mis is en hoe dit hersteld kan worden.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 45: Op de homepagina in het registratieformulier zijn een aantal velden verplicht. Er ontbreekt een foutmelding en instructie welke velden dit zijn. Zie ook 3.3.2.

Bevinding 46: Advies: Als je het registratieformulier hebt ingevuld dan staat er op het scherm "Je bent succesvol ingeschreven. Wij danken je voor jouw belangstelling.". Hier ontbreekt de melding dat je je aanmelding via de ontvangen e-mail moet activeren.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 47: Op de homepagina in het registratieformulier is een e-mailadres. Als hier een e-mailadres ingevuld wordt waarbij het @-teken ontbreekt dan kan je hier een verbetersuggestie doen. Geef waar nodig suggesties zodat mensen hun fouten gemakkelijk kunnen herstellen.

Bevinding 48: Op de homepagina in het registratieformulier is niet voor alle verplichte velden aangegeven dat het een verplicht veld is. Zorg ervoor dat duidelijk is welke velden verplicht ingevuld moeten worden.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 49: Op elke pagina is een menuknop (knop met 3 strepen). Deze knop heeft geen toegankelijke naam. Het is voor screenreadergebruikers nu niet duidelijk wat de knop doet. Zorg dat de knop een naam heeft die de functie van de knop beschrijft.

Bevinding 50: Op elke pagina is een menuknop. Met deze knop kan je de navigatie van de site openen. Zorg dat hulpsoftware in staat is de status van de navigatie te bepalen (uitgevouwen of ingevouwen). Dit kan bijvoorbeeld dooe aria-expanded te gebruiken op de knop.

Bevinding 51: Op de homepagina is een registratieformulier. De velden hebben een placeholder-tekst, maar dat is niet genoeg voor dit succescriterium. Een placeholder wordt namelijk niet door alle voorleessoftware voorgelezen en verdwijnt als de gebruiker begint te typen. Zorg dat de tekst zichtbaar blijft door een label te gebruiken zodat bezoekers op elk moment kunnen zien wat ze moeten invullen in het veld.

Bevinding 52: In het menu op de pagina's achter de inlog kan je zien welke keuze actief is. Dit gebeurt via een goudkleurig blok met witte tekst. ZOrg dat deze informatie ook beschikbaar is voor hulpsoftware zodat iemand die blind of slechtziend is deze informatie kan laten voorlezen door de screenreader. Gebruik bijvoorbeeld het aria-current-element op het menuitem dat afwijkt van de rest van de menuitems.

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: 2025-03-13 12:22:20 v2.4-011