Rapportage van Stadspas Venlo

Rapport auteur Jules Ernst, 200 OK, 17 september 2019

Evaluatie opdrachtgever Simon Besters - De Staat van het Web

Samenvatting Evaluatieresultaten

Dit rapport beschrijft in welke mate de website StadspasVenlo van de gemeente Venlo voldoet aan Web Content Accessibility Guidelines (WCAG). Het onderzoek betreft een quickscan op 17 september 2019 uitgevoerd, waarmee toegankelijkheidsissues onderzocht en gevonden zijn. Omdat dit een quickscan is, is er bij een aantal succescriteria geen uitspraak gedaan over de uitkomst (Onbekend).

Uit het onderzoek is helaas gebleken dat niet wordt voldaan aan WCAG 2.0 niveau AA. Van de 38 succescriteria zijn er 20 waar we één of meerdere issues hebben gevonden. Daarnaast zijn er ook nog WCAG 2.1-issues gevonden. Deze zijn verzameld onderaan dit rapport. Er moet zowel in de techniek als in de inhoud verbeteringen aangebracht worden. De site bevat veel structurele issues. Houd er rekening mee dat met het doorvoeren van verbeteringen er nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Omdat dit onderzoek slechts een deel van alle pagina's betreft, een steekproef, kan het zijn dat er op pagina's buiten de steekproef nog problemen aanwezig zijn. Het onderzoek is een momentopname. Door voortschrijdend inzicht en technologische vooruitgang kunnen op detailniveau in de toekomst onderdelen anders worden beoordeeld.

Scope van de evaluatie

Website naam StadspasVenlo
Scope van de website Alle webcontent op http://venlopas.millerpreview.nl/
Conformiteitsdoel Niveau AA
Verdere evaluatievereisten Dit onderzoek betreft een quickscan. Dit is geen volledig onderzoek en op basis van dit rapport kan dan ook geen conformiteit
Basisniveau van toegankelijkheid ondersteund Alle gangbare browsers.

Uitgebreide toetsresultaten

Principe 1 Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Het alt-attribuut en alt-tekst ontbreekt op afbeeldingen zoals het logo van Venlo, logo Miller in de footer, en Powered by logo. Dit komt op alle pagina's voor.

De alt-tekst is leeg maar op de afbeelding staat informatie in de vorm van tekst. Zie bijvoorbeeld: http://venlopas.millerpreview.nl/stadspas/ en http://venlopas.millerpreview.nl/veel-gestelde-vragen/

De logo's in de content kunnen decoratief beschouwd worden omdat de naam van de organisatie eronder staat. Maar het alt-attribuut mag niet ontbreken. Dit komt op alle aanbieders-pagina's voor zoals: http://venlopas.millerpreview.nl/aanbieders/mantelzorgers/categorie/belevenissen-acties/

1.2 Op tijd gebaseerde media

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

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

1.2.2 Ondertiteling voor doven en slechthorenden (vooraf opgenomen) : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

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

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

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

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

1.2.5 Audiodescriptie (vooraf opgenomen) : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

1.3 Aanpasbaar

1.3.1 Info en relaties : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: De kop (H1) ontbreekt op alle pagina's. Voor WCAG is dit geen harde eis, maar voor toegankelijkheid en SEO is het gebruik van een H1 per pagina haast noodzakelijk.

In de content komen op veel pagina's lege koppen (o.a. H2-elementen) voor.

De koppenstructuur op de pagina's is chaotisch. Koppen worden overgeslagen of hebben geen relatie met onderliggende kop.

Op de pagina's van de aanbieders zijn de teksten in de klikbare blokken opgemaakt als koppen (H2-element). Deze elementen zijn bedoeld voor koppen. Deze items zijn geen koppen, omdat er geen content onder staat. Deze items moeten dus niet worden opgemaakt als koppen. Gebruik hier CSS voor de opmaak van deze teksten. Zie bijvoorbeeld:
http://venlopas.millerpreview.nl/aanbieders/participatie-minima/

Er zijn oppen die met het strong-element zijn opgemaakt. Zie bijvoorbeeld: http://venlopas.millerpreview.nl/privacybeleid/ en http://venlopas.millerpreview.nl/algemene-voorwaarden/

Er worden tekens (») gebruikt die de indruk wekken dat hier opsommingstekens mee worden bedoeld. Deze moeten dan ook als opsommingstekens (ul-element) gemarkeerd worden. Zie http://venlopas.millerpreview.nl/aanvragen-mantelzorgwaardering/

Opsomming worden doorgenummerd maar zijn nu losse lijsten van elk één item waardoor de realtie niet meer aanwezig is in de code. Het ol-element zou 1x gebruikt moeten worden. http://venlopas.millerpreview.nl/privacybeleid/

Op de volgende pagina staat voor het invoerveld een getal: 2197008. Deze is gemarkeerd met een H3 terwijl hier gewoon een wat groter lettertype wordt bedoeld. Zie: http://venlopas.millerpreview.nl/activeren/

Het label ontbreekt bij het invoerveld van http://venlopas.millerpreview.nl/saldo-checken/ (zie ook 3.3.2)

1.3.2 Betekenisvolle volgorde : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

1.3.3 Zintuiglijke eigenschappen : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Op de volgende pagina staat "Klik hier rechts voor de juiste aanbieders;". Iemand die blind is heeft geen idee wat er allemaal rechts op het scherm staat. Ook op mobiel zie je rechts waarschijnlijk de vloer. http://venlopas.millerpreview.nl/pas-besteden/

Foutmeldingen zijn alleen door kleur te onderscheiden. Zie http://venlopas.millerpreview.nl/inloggen/

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Maak links in lopende tekst niet alleen door kleur herkenbaar maar gebruik ook vorm, bijvoorbeeld onderstrepen. Zie bijvoorbeeld http://venlopas.millerpreview.nl/contact/ en http://venlopas.millerpreview.nl/stadspas/
Let ook op dat op sommige plekken tekst (niet-link) is onderstreept. Mensen zijn gewend om op onderstreepte tekst te klikken.

1.4.2 Geluidsbediening : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

1.4.3 Contrast (minimum) : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Links links hebben te weinig contrast in lopende tekst. Zie bijvoorbeeld: http://venlopas.millerpreview.nl/contact/

De links op de foto's op de aanbieders-pagina's hebben soms te weinig contrast en zijn voor sommige mensen in het algemeen slecht te lezen. Zie bijvoorbeeld: http://venlopas.millerpreview.nl/aanbieders/participatie-minima/

De kopjes in de grijze vlakken op de aanbieders-pagina's hebben een te laag contrat. Zie bijvoorbeeld:
http://venlopas.millerpreview.nl/aanbieders/mantelzorgers/categorie/belevenissen-acties/

De tekst in de afbeelding heeft een te laag contrast en is daardoor slecht leesbaar: http://venlopas.millerpreview.nl/meldt-uw-bedrijf-aan/

1.4.4 Herschalen van tekst : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

1.4.5 Afbeeldingen van tekst : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Op diverse plekken worden op foto's en afbeeldingen tekst in de foto gezet terwijl dit ook met HTML gedaan kan worden. Zie bijvoorbeeld: http://venlopas.millerpreview.nl/meldt-uw-bedrijf-aan/

Principe 2 Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: De uitklapmenu's in het hoofdmenu zijn niet bedienbaar en bereikbaar met het toetsenbord. Dit komt op alle pagina's voor.

2.1.2 Geen toetsenbordval : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

2.2.2 Pauzeren, stoppen, verbergen : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

2.3 Toevallen

2.3.1 Drie flitsen of beneden drempelwaarde : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

2.4 Navigeerbaar

2.4.1 Blokken omzeilen : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Skiplinks om terugkerende content zoals het menu te omzeilen ontbreekt. Dit geldt voor alle pagina's.

Het title-attribuut ontbreekt in het iframe-element. Geef het iframe een goede naam via het title-attribuut. Zie: http://venlopas.millerpreview.nl/inloggen/

2.4.2 Paginatitel : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er komen meerdere keren dubbele paginatitels voor. Bijvoorbeeld: http://venlopas.millerpreview.nl/aanbieders/participatie-minima/categorie/winkels/ en http://venlopas.millerpreview.nl/aanbieders/mantelzorgers/categorie/winkels/ hebbend dezelfde titel: "Winkels Archieven - Venlopas"

2.4.3 Focus volgorde : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: De focusvolgorde gaat soms vreemd: het hele aanmeldvlak krijgt in sommige browsers de focue op de pagina http://venlopas.millerpreview.nl/activeren/

2.4.4 Linkdoel (in context) : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Het linkdoel ontbreekt bij logo van Venlo, logo Miller in de footer, en Powered by logo. Zie ook SC 1.1.1; zorg voor een goede alt-tekst.

Op de volgende pagina's staan meerdere links "hier" in de tekst. Zie http://venlopas.millerpreview.nl/minima/
Op meer pagina's wordt "hier" als linkdoel gebruikt. Zie http://venlopas.millerpreview.nl/aanvragen-participatieminima/ en http://venlopas.millerpreview.nl/mijn-stadspas/

Op de aanbieders-pagina's komen meerdere keren links voor met dezelfde naam maar een ander doel, namelijk "Bekijk de website" op bijvoorbeeld http://venlopas.millerpreview.nl/aanbieders/mantelzorgers/categorie/belevenissen-acties/

2.4.5 Meerdere manieren : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er is slechts 1 manier om de pagina's te bereiken, namelijk via het menu. Zorg voor een zoekfucntie of sitemap.

2.4.6 Koppen en labels : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Boven een aantal pagina's ontbreekt de kop. Op sommige is gebruik gemaakt van een afbeelding met tekst daarin. Maar die zijn niet voor iedereen (goed) leesbaar.

2.4.7 Focus zichtbaar : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: De focus is niet zichtbaar in Firefox bij "Activeren". Zie bijvoorbeeld: http://venlopas.millerpreview.nl/mantelzorg/

De focus is niet zichtbaar op de 2 knoppen op de pagina http://venlopas.millerpreview.nl/inloggen/

De focus is heel slecht zichtbaar in Chrome (blauw op blauw).

Principe 3 Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Bij "Mijn stadspas" en "Saldo checken" ontbreken in de pagina's in de iframes het lang-attribuut. Bijvoorbeeld hier: https://stadspasvenlo-service.datamatch.nl/account/validate

3.1.2 Taal van onderdelen : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

3.2 Voorspelbaar

3.2.1 Bij focus : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

3.2.2 Bij input : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

3.2.3 Consistente navigatie : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onbekend

Bevindingen:

3.2.4 Consistente identificatie : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er wordt geen consequent schrijfwijze gehanteerd voor e-mailadres. Er staat "e-mail adres" en "e-mailadres" door elkaar op één pagina. Zie http://venlopas.millerpreview.nl/inloggen/

Als je op een link klikt op de pagina http://venlopas.millerpreview.nl/pas-besteden/
, bijvoorbeeld "Aanbieders Participatie minima" verwacht je op een gelijknamige pagina terecht te komen. Je komt op een pagina dat begint met de tekst "Besteed de pas bij winkels in de gemeente".

3.3 Assistentie bij invoer

3.3.1 Fout identificatie : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: HTML5-foutmeldingen in browsers worden niet goed ondersteund. De melding is soms kort, onvolledig en blijft in sommige browser kort in beeld. Als mensen de invoer willen verbeteren is de melding al verdwenen. Zorg zelf voor duidelijke foutmeldingen.

3.3.2 Labels of instructies : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er staat nergens een mededeling dat velden met een ster verplicht zijn. Zie: http://venlopas.millerpreview.nl/activeren/

Het label ontbreekt bij het invoerveld van http://venlopas.millerpreview.nl/saldo-checken/

3.3.3 Foutsuggestie : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er wordt geen suggestie gegeven (bijvoorbeeld controleer je wachtwoord nog eens goed). http://venlopas.millerpreview.nl/inloggen/

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) : (Niveau AA)

Resultaat van de hele sample:

Uitkomst : Niet van toepassing

Bevindingen:

Principe 4 Robuust

4.1 Compatibel

4.1.1 Parsen : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er komen validatiefouten voor in de HTML.

4.1.2 Naam, rol, waarde : (Niveau A)

Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen: Er zijn links met onduidleijke namen (zie ook SC linkdoel).

Het submenu is niet met toetsenbord te bedienen, maar ook daar moet de status (uitgeklapt of ingeklapt) doorgegeven worden aan hulpsoftware.

De knoppen E-mail adres of Kaartnummer hebben geen duidelijk relatie en het is niet duidelijk wat de bedoeling is van de knop. Feitelijk zouden de 2 knoppen een schakelaar moeten zijn. Bijvoorbeeld 2 radio buttons. Knoppen mag ook, maar dan moet er voldoende informatie aan de knoppen gehangen worden om te weten wat het doet. Zie: https://stadspasvenlo-service.datamatch.nl/account/login

Overige issues
Resultaat van de hele sample:

Uitkomst : Onvoldoende

Bevindingen:

PDF

De PDF voldoet niet aan vereisten, bijvoorbeeld: de taal van het document is niet ingesteld, voor gemeenten geldt dat dit pas 23 september 2020 verplicht is. http://venlopas.millerpreview.nl/meldt-uw-bedrijf-aan/

WCAG 2.1: scrollbars

Er zijn meerdere scrollbars te zien in bepaalde schermgroottes. Zie: http://venlopas.millerpreview.nl/activeren/ en http://venlopas.millerpreview.nl/saldo-checken/


Aanvullende bevindingen (25 september 2019)

Herschalen en "Reflow"

Bij herschalen wordt het menu vervangen door een menu-knop met 3 strepen. Deze knop is niet bereikbaar voor toetsenbord of spraaksoftware. De knop bevat namelijk geen code voor een knop (button-element) maar code om iets in schuine letters te zetten (i-element voor italic).

Bij herschalen komen enkele vlakken over elkaar heen te staan. De knop "Saldo tekst" komt op de homepage achter het schuine vlak met de roterende tekst "MINIMA" te staan. De link is daardoor vrijwel onbereikbaar. Dit geldt soms ook voor andere elementen in de kop van de site.

Bij herschalen komt het soms voor dat de link Activeren geen focus toont. Het gebeurt met enige regelmaat maar ik kan niet de juiste acties achterhalen om dit te reproduceren. Ik heb het met name in FireFox gezien, maar volgens mij komt het ook in Google voor.

In Firefox is de focus niet zichtbaar op de knop Saldo opvragen.

Sample met getoetste webpagina's

Informatie over WCAG 2.0

Deze rapportage is grotendeels gemaakt met de online W3C evaluatietool.