Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Parkeren Meppel

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Parkeren Meppel
Datum 6 december 2022
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op de testomgeving van parkeren.meppel.nl
  • Alle PDF's op de testomgeving van parkeren.meppel.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via parkeren.meppel.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 26

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: Bij de verplichte velden in het formulier op pagina https://parkeren.meppel.nl/Account/Details (bijvoorbeeld als Postadres niet gelijk is aan vestigingsadres) staat een sterretje. Hulpsoftware leest dit niet altijd voor. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk welke velden verplicht zijn.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 2: Op pagina https://parkeren.meppel.nl/Permit/Details/11221 is een tablist met de toegankelijke naam "Entertainment". Deze naam komt niet terug in de pagina en beschrijft de elementen in de tablist niet. Dit zorgt voor verwarring. Zorg er voor dat de informatie voor hulpsoftware hetzelfde is als de visuele informatie. Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld op de loginpagina https://parkeren.meppel.nl/Account/LogOn bij de tablist "Particulieren" en "Bedrijven".

Bevinding 3: In het formulier op pagina https://parkeren.meppel.nl/ProcessFlow?id=328683 (Pagina voor het wijzigen van een product) wordt door middel van de witte tekst en oranje achtergrondkleur aangegeven bij welke stap in het proces de bezoeker is. Voor blinden en slechtzienden is deze informatie niet beschikbaar via hulpsoftware. Markeer de actieve naam zodat deze ook als zodanig wordt voorgelezen door een screenreader. Bijvoorbeeld via aria-current="true".

Bevinding 4: Op de startpagina https://parkeren.meppel.nl/Account/LogOn is strong gebruikt voor de links naar verschillende inlogmethoden. Dat is niet de bedoeling, het strong-element is bedoeld voor het benadrukken van enkele woorden of korte zinnen. Verwijder het strong-element van deze links en maak gebruik van de stylesheet om de teksten in een vet lettertype te tonen.

Bevinding 5: Op pagina https://parkeren.meppel.nl/Account/LogOn is de kop "Inloggen digitale Parkeerbalie" opgemaakt met het strong-element. Het strong-element is bedoeld om nadruk te geven aan één of enkele woorden, niet voor hele zinnen. Ook mag het strong-element niet worden gebruikt als visuele kop, omdat het niet dezelfde betekenis heeft als een kop (bijvoorbeeld h1 of h2). Verwijder het strong-element en maak de kop op met een kop-element.

Bevinding 6: Op de overzichtspagina https://parkeren.meppel.nl/ worden koppen gebruikt die niet als koppen zijn opgemaakt, bijvoorbeeld "Uw producten" en "Lopende aanvragen". Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Zorg ervoor dat de juiste code in de HTML wordt gebruikt om deze koppen op te maken. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://parkeren.meppel.nl/Permit/Details/12639 is alleen een H1 gebruikt voor de titel terwijl bijvoorbeeld "Kentekens" en "Media" ook als kop opgemaakt moeten worden.

Bevinding 7: De PDF "verlengen parkeerproduct" is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Er kan daardoor niet worden bepaald wat, bijvoorbeeld koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium met betrekking tot de PDF code laag zoals semantische koppen en alt teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 8: Op de accountinstellingen pagina https://parkeren.meppel.nl/Account/Details worden de foutmeldingen achter het invoerveld getoond. Mensen die het scherm niet kunnen zien of slechts deels kunnen zien missen mogelijk de melding daarom. Los dit op door de foutmelding aan het invoerveld te koppelen met aria-describedby op het invoerveld die via een id gekoppeld wordt aan de foutmelding.
Hetzelfde komt vaker voor in de website, bijvoorbeeld in het wijzigingsformulier op pagina https://parkeren.meppel.nl/ProcessFlow?id=328683

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 9: Op pagina https://parkeren.meppel.nl/Account/Login is een formulier waar de bezoeker onder andere het eigen gebruikersnaam en wachtwoord 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.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: Op de homepagina staat een oranje tekst (Hex: F29400) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,3:1 waar dit 4,5:1 moet zijn. Hetzelfde geldt voor de witte tekst op oranje achtergrond met de zelfde kleurwaarden.
Deze kleurencombinatie komt voor op alle pagina’s van de website.

Bevinding 11: Op de overzichtspagina https://parkeren.meppel.nl/ staat de link 'Overzicht'. Wanneer bezoekers hier met de muisaanwijzer overheen gaan (hover) verandert de tekstkleur van wit naar lichtoranje(Hex: ffb540). Op de oranje achtergrond (Hex: F29400) heeft deze tekst bij hover een te laag contrast. De contrastverhouding is hier 1,3:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt voor op meerdere pagina's, bijvoorbeeld op https://parkeren.meppel.nl/Account/Detailsen https://parkeren.meppel.nl/Permit/Details/12639.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 12: Als op pagina https://parkeren.meppel.nl/Permit/Details/12639 de link "Overzicht" focus heeft is dat te zien aan een lichtoranje rand (Hex: FFB540) op een oranje achtergrond (Hex: F29400). Het contrastverschil tussen rand en achtergrond is te laag, het is 2,3:1 waar het minimaal 3:1 moet zijn. Mensen met slecht zicht of kleurenblindheid kunnen hierdoor de focusrand niet of moeilijk waarnemen. Gebruik bijvoorbeeld een andere kleur op die plekken waar het contrast te laag is. Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld als op de overzichtspagina bij het aanvragen van een parkeerproduct de knop "Bewaar aanvraag" focus heeft wordt dat aangegeven door een licht oranje rand (Hex: FFB540) op een witte achtergrond. Hier is de contrastverhouding 1,8:1 waar het minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 13: Op de pagina https://parkeren.meppel.nl/ProcessFlow?id=328683 (pagina voor het aanvragen van een parkeerproduct) komen knoppen, gelabeld met een "i", voor waarmee extra informatie wordt getoond. Het is niet mogelijk om met het toetsenbord de focus op deze knoppen te plaatsen. Hierdoor is de aanvullende informatie verborgen achter de knoppen niet beschikbaar voor toetsenbordgebruikers. Zorg ervoor dat het mogelijk is om deze knoppen te bedienen met het toetsenbord.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 14: De pagina met het formulier voor het wijzigen van een product en de pagina met het formulier voor het verlengen van een product hebben de zelfde titel: "Aanvraag gemeente Meppel". Dit beschrijft de inhoud van de pagina niet. Zorg dat elke pagina uniek identificeerbaar is en dat de titel de inhoud van de pagina beschrijft.

Bevinding 15: De PDF "verlengen parkeerproduct" heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 16: Op elke pagina achter de login opent een venster als de sessie bijna verlopen is om de sessie te verlengen. Wanneer het venster openstaat, is de content op de achterliggende pagina nog steeds bereikbaar met het toetsenbord. Hierdoor kan je niet altijd meer zien waar je bent als je met het toetsenbord navigeert. Zorg dat de focus binnen het venster blijft totdat deze gesloten is en dat de achterliggende content "onzichtbaar" is voor hulpsoftware en niet bereikbaar is met het toetsenbord.

Bevinding 17: Op pagina https://parkeren.meppel.nl/Permit/Details/11221 in 'Documenten' kan je met de tabtoets door de pagina navigeren. Er wordt in de HTML gebruikgemaakt van het attribuut tabindex=0 op bijvoorbeeld op het div-element met de toegankelijke naam "documents-tab". Daardoor ontstaat er bij een onlogische focusvolgorde. Alleen actieve elementen moeten focus krijgen. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert. Plaats geen tabindex="0" op elementen die geen focus horen te krijgen. Hetzelfde komt vaker voor in de website, bijvoorbeeld op de zelfde pagina onder algemeen bij het element "general-tab".

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 18: Op de overzichtspagina https://parkeren.meppel.nl/ komen links voor met meerdere keren dezelfde linktekst 'Wijzigen' en 'Verlengen'. Zorg dat links naar verschillende doelen unieke linkteksten hebben, door bijvoorbeeld de tekst aan te vullen met het nummer van het parkeerproduct waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 19: Er is maar één manier om alle pagina's binnen deze website te vinden en dat is https://parkeren.meppel.nl/. Zorg dat er nog een manier is om elke pagina te kunnen bereiken, door bijvoorbeeld een zoekfunctie toe te voegen aan de overzichtspagina of vanaf deze pagina te linken naar alle andere pagina's op de website.

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 20: In de eigenschappen van De PDF "verlengen parkeerproduct" is de taal niet ingevuld. Zorg ervoor dat de taalinstelling is ingesteld en overeenkomt met de taal die gebruikt wordt in de PDF.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 21: Op https://parkeren.meppel.nl/ProcessFlow?id=328701 (pagina voor het aanvragen van een parkeerproduct) staat een formulier waar bij de verplichte velden een rode cirkel staat Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, zoals op pagina https://parkeren.meppel.nl/Account/Details is gedaan.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://parkeren.meppel.nl/Account/Details komen dubbele id's voor, namelijk id="flowinfo_Header". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 23: Op de pagina https://parkeren.meppel.nl/ProcessFlow?id=328683 komen knoppen met een "i" voor waarmee extra informatie wordt getoond en verborgen. Voor ziende gebruikers is het duidelijk dat de knop in- of uitgevouwen is. Voor screenreadergebruikers is dat niet zo. Geef in de code de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen.

Bevinding 24: In de pagina met accountinstellingen https://parkeren.meppel.nl/Account/Details wordt gebruikgemaakt van uitvouwbare blokken als het postadres of factuuradres niet het zelfde zijn als de adresgegevens van de account. Voor ziende gebruikers is het duidelijk dat een formulier blok in- of uitgevouwen is. Voor screenreadergebruikers is dat niet zo. Geef in de code de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen.

Bevinding 25: Op de overzichtspagina https://parkeren.meppel.nl/ staan in de tabel 'Uw producten' twee knoppen die zijn gelabeld met een i-icoon. Deze knoppen zijn opgemaakt met een img-element waarop tabindex="0" is geplaatst. Hierdoor hebben de knoppen de rol 'image' terwijl dit 'button' zou moeten zijn. Geef deze knoppen een goede toegankelijke rol, bijvoorbeeld door gebruik te maken van role="button".

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 26: Op de overzichtspagina https://parkeren.meppel.nl/ wordt de lijst met producten, het div-element met id="dvRequests", dynamisch geladen. Voorleessoftware leest de informatie nu niet voor. Zorg er voor dat de elementen waarin de dynamische informatie wordt geladen al aanwezig zijn voor de DOM tree aangemaakt wordt. Als er dan nieuwe informatie binnenkomt wordt de DOM tree op de juiste manier aangevuld.

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-24 19:48:29 v2.4-011