Toegankelijkheidsonderzoek

Issues:
Systeemaudit digitale toegankelijkheid OpenStad

(Alleen de bevindingen)

Scope van de evaluatie

Naam website OpenStad
Datum 19 juli 2024
Scope van de website Binnen de scope van onderzoek valt:
Buiten de scope van het onderzoek valt:
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 38

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 https://plannen.headless.draad.dev/ heeft de illustratie van de open envelop bij de info over inschrijven op de nieuwsbrief een leeg alt-attribuut, maar wel een ingevuld title-attribuut. Mogelijk interpreteren sommige screenreaders dit toch als alt-tekst, wat bezoekers kan verwarren. Verwijder het title-attribuut om er zeker van te zijn dat het als een decoratieve afbeelding wordt beschouwd.

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 2: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 3: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

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

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

Uitkomst: Niet aanwezig

Bevinding 4: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig

Bevinding 5: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 6: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Voor de cards op https://plannen.headless.draad.dev/plannen/overzicht worden knoppen gebruikt. Dit is verwarrend voor bezoekers die spraakbesturing gebruiken of een screenreader. Semantisch is het gebruik ook niet correct: knoppen gebruik je om een actie te ondernemen (bestelling bevestigen, inschrijving nieuwsbrief submitten) en links gebruik je om naar een andere locatie te gaan. Sinds het gaat om pagina's op een andere locatie dienen de cards links te worden. Maak enkel de titel van de card een link en maak de gehele card klikbaar met JavaScript. Dit komt ook voor op https://plannen.headless.draad.dev/kaart, https://plannen.headless.draad.dev/stemmen. Bij deze bevinding speelt ook mee dat het gebruik van elementen zoals figure en h4 niet is toegestaan binnen een button-element. Hulpsoftware zal als gevolg hiervan niet alle informatie in de semantische HTML presenteren aan gebruikers van die software.

Bevinding 8: Op https://plannen.headless.draad.dev/stemmen heeft de middelste keuzelijst van de filters een leeg label. Een label-element is aanwezig, maar niet geassocieerd met het select-element. Een label is belangrijk voor bezoekers met een screenreader, omdat ze anders niet weten wat het doel of de context is van dit element. Het is nodig dit label te vullen met tekst en te koppelen aan dit invoerveld (met for en id).

Bevinding 9: Op https://plannen.headless.draad.dev/enquete is de tekst boven de input type=range niet gekoppeld aan de onderstaande invoer van 1 tot 5. De tekst “Welke functies passen volgens u wel of niet in het park?” is nu een legend zonder fieldset. Voeg een label in plaats van een legend toe om de relatie tussen vraag en beschikbare opties/antwoorden duidelijker en compleet te maken voor bezoekers met hulpsoftware.

Bevinding 10: Advies: Op https://plannen.headless.draad.dev/kaart ontbreekt de eerste kop (H1). Het is gebruikelijk om de content van een pagina te laten beginnen met een H1. De afwezigheid van een H1 is geen reden om een website af te keuren. Dit komt ook voor op andere pagina's zoals https://plannen.headless.draad.dev/stemmen, https://plannen.headless.draad.dev/enquete, https://plannen.headless.draad.dev/plan-indienen, en dergelijke.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Niet aanwezig

Bevinding 11: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

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 12: Op https://plannen.headless.draad.dev/login heeft het invoerveld voor het e-mail geen autocomplete attribuut. Het doel van dit veld moet programmatisch kunnen worden bepaald, zodat het automatisch kan 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.Dit komt ook voor op https://plannen.headless.draad.dev/plan-indienen als je de flow start.

Bevinding 13: In de flow van https://plannen.headless.draad.dev/plan-indienen wordt er bij de eerste keer inloggen om je naam gevraagd. Het doel van dit veld moet programmatisch kunnen worden bepaald, zodat het automatisch kan 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.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 14: Op https://plannen.headless.draad.dev/plan-indienen heeft de knop "inloggen" onvoldoende contrast. De witte tekst met de groene achtergrond (HEX #12b886). biedt een contrastverhouding van 2,55:1 waar het 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Niet aanwezig

Bevinding 15: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 16: Hoewel de site responsive design heeft, valt er op https://plannen.headless.draad.dev/veelgestelde-vragen in enkele van de vragen tekst over elkaar heen wat het onleesbaar maakt als men de tekst 400% vergroot en de viewport instelt op 1280x1024px. Zorg dat de tekst zich correct aanpast aan de viewport en vergrootte tekst.

Bevinding 17: Op alle pagina's in de sample past de hoofdnavigatie zich niet aan de viewport en de vergrootte tekst aan, wat een horizontale scrollbar veroorzaakt. Zorg ervoor dat het menu zich aan de viewport en tekstgrootte aanpast. Het is mogelijk om deze navigatie over meerdere regels te verdelen zonder verlies van informatie of functionaliteit.

2. Bedienbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Voldoende

Bevinding 18: Advies: Op https://plannen.headless.draad.dev/plannen/overzicht krijgen de locatiepins op de kaart toetsenbordfocus. Als er meer dan 10 of 20 plannen in de lijst (en dus op de kaart) staan, gaat dit de beeldvorming van de structuur en bedoeling van de pagina voor gebruikers met screenreaders wel veranderen. Voeg een skiplink toe vlak voor de kaart, zodat screenreaders de kaart kunnen overslaan en naar de inhoud onder de kaart kunnen gaan. Dit komt ook voor op https://plannen.headless.draad.dev/kaart.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Voldoende

Bevinding 19: Advies: Elke pagina heeft een unieke en beschrijvende titel, maar wel in het formaat "Websitenaam - Paginatitel". Best practice is om het formaat "Paginatitel - Websitenaam" te gebruiken, omdat dit gebruiksvriendelijker is voor bezoekers met een screenreader en mensen die heel veel tabs open hebben staan in hun browser.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 20: Op https://plannen.headless.draad.dev/plannen/overzicht krijgen de knoppen "Deel jouw plan" en "6 plannen" een aantal keer achter elkaar de focus, waardoor het lijkt alsof er een toetsenbordval is, maar dat is niet het geval. Het is wel verwarrend voor bezoekers met een screenreader. In de code is te zien dat deze knoppen een aantal keer gedupliceerd zijn. Verwijder de duplicaten.

Bevinding 21: Op https://plannen.headless.draad.dev/kaart krijgt een extra item focus, tussen het laatste item van de hoofdnavigatie en het zoekveld. Dit wordt veroorzaakt door het gebruik van tabindex="0" op de container die het zoekveld en lijst van locaties bevat en de container die de kaart bevat. Niet-interactieve elementen dienen niet in de tab- en leesvolgorde gezet te worden. Verwijder het tabindex attribuut. Dit speelt ook op https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=17, https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=15 en https://plannen.headless.draad.dev/plannen/overzicht bij de container voor de kaart. Het is de bedoeling dat alleen zichtbare interactieve elementen toetsenbordfocus krijgen, pas daarom op met het gebruik van tabindex="0".

Bevinding 22: Op pagina https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=15 zijn er links om te delen op social media aanwezig. De knop om de link te delen heeft tabindex=0". Interactieve elementen staan in de tab-en leesvolgorde, dus dit attribuut is niet nodig. Maar in dit geval werkt de link werkt niet zonder dit attribuut. omdat er er geen href-attribuut is gebruikt. Voeg een linkadres toe om dit probleem op te lossen en verwijder het tabindex-attribuut. Dit speelt ook op https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=17.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 23: Op https://plannen.headless.draad.dev/plannen/overzicht krijgen de locatiepins op de kaart toetsenbordfocus. De toegankelijke naam voor elke pin is gewoon "Locatiepin". Dit klopt niet met het eigenlijke visuele label voor de pin, wat de naam van de locatie is. Voor bezoekers met een screenreader is het verwarrend om een aantal keer achter elkaar "Locatiepin" te horen. Pas het label voor de locatiepins aan zodat elke pin een uniek label heeft, wat de naam van de locatie is. Dit komt ook voor op https://plannen.headless.draad.dev/kaart.

Bevinding 24: Op https://plannen.headless.draad.dev/enquete is de tekst boven de input type=range niet gekoppeld aan de onderstaande invoer van 1 tot 5. De tekst “Welke functies passen volgens u wel of niet in het park?” is hierdoor nu een legend zonder fieldset. Voeg een fieldset toe om de relatie tussen vraag en beschikbare opties/antwoorden duidelijker en compleet te maken voor bezoekers met hulpsoftware.

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 25: Op alle pagina's in de sample is de taalaanduiding van de hele pagina Engels. De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest. verander het lang-attribuut in het html-element van de waarde "en" naar "nl".

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 26: Op https://plannen.headless.draad.dev/ is de link "Translate this page with Google" niet aangeduid als Engelstalige tekst. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest.

Bevinding 27: Advies: Op https://plannen.headless.draad.dev/kaart staan meerdere lorem ipsum teksten. Er is nu aangenomen dat deze teksten placeholders zijn voor Nederlandse teksten. Indien het de bedoeling is dat hier ook teksten in een andere taal zoals latijn geplaatst kunnen worden moet er een taalwisseling op die tekst komen.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende

Bevinding 28: Advies: op https://plannen.headless.draad.dev/plannen/overzicht worden keuzelijsten gebruikt als filters voor thema's en gebieden. De filters veranderen op dit moment niets aan het aanbod, maar het lijkt erop dat de implementatie zo werkt dat bij het kiezen van een optie uit de lijst automatisch filtert. Dat zou kunnen betekenen dat dit ook gebeurt bij het bedienen met toetsenbord. Dat is verwarrend en mogelijk desoriënterend voor sommige bezoekers. Maak gebruik van een knop waarmee bezoekers zelf het filteren controleren of gebruik asynchrone JavaScript-functionaliteit die de selectie aanpast. Gebruik bij dit laatste ook een "live-region" waar je aan de bezoeker duidelijk maakt dat er iets is gewijzigd (via hulpsoftware).

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 29: Op https://plannen.headless.draad.dev/login verschijnt er bij het invoeren van een incorrect e-mailadres (gebruik van een komma in plaats van een punt, bijv.) wel een melding, maar die tekst geeft alleen door de rode kleur aan dat het een foutmelding is. De tekst "Vul hier een geldig e-mailadres in" had er ook van te voren kunnen staan om fouten te voorkomen. Een geldige foutmelding bevat eigenlijk altijd een ontkenning zoals "Fout: Vul hier een geldig e-mailadres in" of "Er is een ongeldig e-mailadres ingevuld".

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 30: Op https://plannen.headless.draad.dev/stemmen hebben de keuzelijsten geen zichtbaar label. Dat is wel nodig, het alleen weergeven van de geselecteerde optie is in deze twee gevallen niet voldoende.

Bevinding 31: Op https://plannen.headless.draad.dev/plannen/overzicht en https://plannen.headless.draad.dev/stemmen ontbreekt bij de keuzelijsten en het zoekveld een visueel label. Een visueel label, naast een programmatisch label, is verplicht om zo de context en het doel van de keuzelijsten duidelijk te maken voor bijvoorbeeld bezoekers met cognitieve problemen. Het moet mogelijk zijn om het doel van een invoerveld voor, tijdens en na het invullen van dat invoerveld te bepalen.

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 32: Op https://plannen.headless.draad.dev/veelgestelde-vragen zijn er uitklapbare blokjes aanwezig. Deze hebben allemaal een aria-controls attribuut. Bij elk blokje bevat dit attribuut echter een onbestaande verwijzing. Bijvoorbeeld, er is geen element met het id "utrecht-accordion:r1:-panel". Het gebruik van een juiste aria-controls is in dit geval niet verplicht, het advies is dan ook om deze onjuiste ARIA te wissen. Het aria-expanded="false" geeft aan dat het gaat om een ingeklapt uitklapbaar element en de waarde "true" staat daar als het object is uitgeklapt, dat deel werkt goed en moet blijven staan. Dit komt ook voor op https://plannen.headless.draad.dev/plan-indienen.

Bevinding 33: Op https://plannen.headless.draad.dev/enquete is er een blok aanwezig om een foto te uploaden. Visueel is er een instructie/label aanwezig, maar in de code is het label-element met aria-hidden verborgen voor hulpsoftware. Hierdoor gaan bezoeker met hulpsoftware geen idee hebben wat ze hier moeten doen. Zorg ervoor dat het label niet verborgen is.

Bevinding 34: Op https://plannen.headless.draad.dev/enquete is er een blok aanwezig om een foto te uploaden. In de instructie is de tekst "klik hier" aanwezig, wat visueel een link is. Maar in de code is het geen echt interactief element, dit onderdeel is nu een span die toetsenbordfocus kan ontvangen. Het advies is om hier een zichtbare input type file met label "upload hier uw afbeelding" te gebruiken. Er staat in de code ook ene link die verborgen is voor hulpsoftware door het gebruik van aria-hidden="true". Het probleem daar is dat deze link wel toetsenbordfocus kan ontvangen. Als de focus op deze link komt wordt er nu niets gepresenteerd. Voor hulpsoftware heeft deze link nu geen naam en geen rol.

Bevinding 35: Advies: Op https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=17 komen er links voor om op social media te delen die enkel een toegankelijke naam hebben via het title-attribuut. Het title-attribuut wordt niet door alle browsers en hulpsoftware helemaal goed ondersteund, terwijl dit volgens de specificatie wel zou moeten werken. Verzorg daarom bij voorkeur gewone linktekst in plaats van alleen een title. Doordat dit wel zou moeten werken wordt dit niet afgekeurd. Dit komt ook voor op https://plannen.headless.draad.dev/plannen/overzicht/plan?openstadResourceId=15.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 36: Op https://plannen.headless.draad.dev/plannen/overzicht worden na het zoeken resultaten getoond. Er is echter geen tekst die vermeldt hoeveel resultaten er zijn gevonden. Het wordt ook niet gecommuniceerd naar screenreaders, waardoor ze missen dat de zoekopdracht is uitgevoerd. Voeg een zin toe dat meldt hoeveel resultaten er zijn gevonden, en stop die zin in een live-region. Dit komt ook voor op https://plannen.headless.draad.dev/kaart.

Bevinding 37: Op https://plannen.headless.draad.dev/login wordt het bericht dat de e-mail verzonden is (na registratie), niet gecommuniceerd naar screenreaders omdat de inhoud dynamisch veranderd. Ze gaan deze informatie dus missen en zich afvragen of het verzenden van het e-mailadres wel is gelukt. Zet een live-region op de kop "E-mail verstuurd" om dit op te lossen.

Bevinding 38: Op pagina https://plannen.headless.draad.dev/kaart komt na het zoeken een tekst in beeld die duidelijk maakt dat het zoeken gelukt is. Het gaat om de tekst "Je ziet hier zoekresultaten voor X". Deze tekst is een statusbericht en moet daarom ook aan gebruikers van hulpsoftware gepresenteerd worden om te voldoen. Het gebruik van een live-region op die tekst is een mogelijke oplossing.

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: 2024-11-25 12:48:39 v2.4-011