Audit web - WCAG 2.1 Level AA - hoornpas.nu

Afbeelding zonder tekstueel alternatief

Beschrijving: Er is een informatieve afbeelding zonder tekstueel alternatief gevonden. Zet de informatie in de alt-tekst, of in een beschrijving in de buurt van de afbeelding.

Locatie: Er mist een hint dat er een barcode aanwezig is. Dat kan op twee manieren opgelost worden. De eerste manier is om in de alternatieve tekst van de afbeelding toe te voegen dat er een barcode is. De tweede manier is om het woord ''barcode'' toe te voegen aan het tekstje vóór de afbeelding ''Scan mijn pas''. Verander het bijvoorbeeld in ''Scan de barcode van mijn pas''. Opmerking: het is niet nodig om in de alternatieve tekst een omschrijving te geven van wat een barcode is. Het is voldoende om op te schrijven dát er een barcode is.

Gekoppelde pagina's: Account - Mijn stadspassen

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Plattegrond of kaart zonder titel of beschrijving

Beschrijving: Er is een kaart of plattegrond op de pagina, maar deze heeft geen toegankelijke naam en/of beschrijving. Het is belangrijk wel een duidelijke toegankelijke naam en beschrijving mee te geven.

Locatie: De interactieve plattegrond heeft geen titel waaruit het doel van de plattegrond beschreven is. Zowel in de naam van het tabblad als in de code heet het alleen ''kaart''.

Gekoppelde pagina's: Aanbod

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Icoon zonder alternatieve tekst

Beschrijving: Er is een informatiedragende icoon gevonden zonder alternatieve tekst.

Locatie: Het uitroeptekenicoon is opgemaakt als decoratief, terwijl dat de enige indicatie is dat een bezoeker op moet letten. Webbezoekers die niet kijken missen deze indicatie. Deze bevinding kan ook opgelost worden door aan de tekst ''Let op:'' toe te voegen.

Gekoppelde pagina's: Account - Tegoeden

Prioriteit: Laag

Uitkomst: Gefaald

Kopniveaus niet logisch genest

Beschrijving: De niveaus en volgorde van de koppen (h-elementen) gebruikt op de pagina zijn niet logisch en kunnen verwarrend werken voor de gebruiker. Het is belangrijk om erop te letten dat de verschillende kopniveau’s goed genest zijn; het gebruik van de verschillende niveaus dient te gebeuren op basis van de functie en niet de styling. Ook is het aan te raden geen kopniveau’s over te slaan.

Locatie: De eerste vier koppen hebben geen ouder-kind-relatie: ze zijn allemaal opgemaakt met een kop 1.

Gekoppelde pagina's: Contact

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: De subkoppen onder de kop 'Veelgestelde vragen' zijn niet opgemaakt als een kop.

Gekoppelde pagina's: Hoe werkt de HoornPas?

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: De zoek- en filterfunctie heeft geen kopstructuur.

Gekoppelde pagina's: Aanbod

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: In de footer is de kop 'Volg ons' niet in de code opgemaakt als een kop.

Gekoppelde pagina's: Alle onderzochte webpagina's

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kopniveaus niet logisch genest

Beschrijving: De niveaus en volgorde van de koppen (h-elementen) gebruikt op de pagina zijn niet logisch en kunnen verwarrend werken voor de gebruiker. Het is belangrijk om erop te letten dat de verschillende kopniveau’s goed genest zijn; het gebruik van de verschillende niveaus dient te gebeuren op basis van de functie en niet de styling. Ook is het aan te raden geen kopniveau’s over te slaan.

Locatie: De koppen 3 in de footer en op de startpagina de kop 'Vraag je pas aan' zijn onterecht genest onder kop 2 'Wat is het meedoenbudget?'.

Gekoppelde pagina's: Alle onderzochte webpagina's, Startpagina

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: De kop 'Voor iemand anders een Stadspas aanvragen?' is niet in de code opgemaakt als een kop.

Gekoppelde pagina's: Account - Mijn stadspassen

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: De subkoppen onder artikel 7 van de privacyverklaring zijn niet opgemaakt als een kop.

Gekoppelde pagina's: Privacyverklaring

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Kop niet programmatisch opgemaakt

Beschrijving: Er is een kop gevonden die niet goed is opgemaakt als kop in de code.

Locatie: De kop 'Klacht' is niet opgemaakt als een kop.

Gekoppelde pagina's: Contactformulier

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Tabelkoppen programmatisch niet goed opgemaakt

Beschrijving: Er is een tabel gevonden waarvan de rij- en kolomkoppen programmatisch niet goed zijn opgemaakt.

Locatie: In het tegoedenoverzicht in het account zijn zijn de tabelkoppen niet als kop opgemaakt in de code. Robots, zoals schermlezers, kunnen hierdoor de tabel niet goed inlezen en de informatie correct doorgeven aan de schermlezers.

Gekoppelde pagina's: Account - Tegoeden

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Zintuiglijke aanwijzing gebruikt - visueel

Beschrijving: Er zijn instructies gegeven met een verwijzing naar visuele aanwijzingen, zoals 'rechts', 'links' of 'hiernaast’.

Locatie: Herschrijf de tekst op deze screenshop op zo'n manier dat het niet impliceert dat het alleen toegankelijk is voor kijkende gebruikers.

Gekoppelde pagina's: Hoe werkt de HoornPas?

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Invoerveld zonder (correct) autocomplete-attribuut

Beschrijving: Er is een invoerveld zonder het juiste autocomplete-attribuut. Bij invoervelden waarbij persoonlijke gegevens ingevuld moeten worden, is een autocomplete-attribuut nodig. Dat zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Bijvoorbeeld door de invoervelden al automatisch in te vullen.

Locatie: De invoervelden ''Naam'', ''E-mailadres'' en ''Telefoonnummer'' hebben geen autocomplete-attribuut.

Gekoppelde pagina's: Contactformulier

Prioriteit: Laag

Uitkomst: Gefaald

Invoerveld zonder (correct) autocomplete-attribuut

Beschrijving: Er is een invoerveld zonder het juiste autocomplete-attribuut. Bij invoervelden waarbij persoonlijke gegevens ingevuld moeten worden, is een autocomplete-attribuut nodig. Dat zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Bijvoorbeeld door de invoervelden al automatisch in te vullen.

Locatie: Het invoerveld ''Herhaal e-mailadres'' heeft geen autocomplete-attriubuut.

Gekoppelde pagina's: Account aanmaken (hele flow)

Prioriteit: Laag

Uitkomst: Gefaald

Verschil status enkel met kleur

Beschrijving: Er is een verandering van status bij focus, in een component binnen een set van componenten, die alleen met een kleurwijziging is aangegeven.

Locatie: De indicatie van de actieve tab.

Gekoppelde pagina's: Account - Tegoeden

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Verschil status enkel met kleur

Beschrijving: Er is een verandering van status bij focus, in een component binnen een set van componenten, die alleen met een kleurwijziging is aangegeven.

Locatie: Op pagina's in het account heeft de rode focus in de verticale menubalk een te lage contrastratio ten opzichte van de blauwe balk, namelijk 1,9:1. Aanvullend adviseren om de huidige pagina dik te drukken, zodat gebruikers niet afhankelijk zijn van kleur om te weten waar ze zijn.

Gekoppelde pagina's: Account - Mijn stadspassen, Account - Tegoeden, Account - Kortingacties

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Tekst met onvoldoende contrast

Beschrijving: Er is een tekst gevonden met een kleur die een te lage contrastverhouding (4,5:1 of lager) heeft ten opzichte van de achtergrondkleur.

Locatie: De grijs-op-blauwe tekst onder de kop 'Voor iemand anders een Stadspas aanvragen?'. Huidig ratio: 4,4:1.

Gekoppelde pagina's: Account - Mijn stadspassen

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Tekst met onvoldoende contrast

Beschrijving: Er is een tekst gevonden met een kleur die een te lage contrastverhouding (4,5:1 of lager) heeft ten opzichte van de achtergrondkleur.

Locatie: De contrastratio van de labels ''Acties gedaan'' en ''Bespaard'' hebben een te lage contrastratio van 3,3:1. We willen jullie bovendien aanmoedigen om het contrast van alle tekst en de verticale streep in dit element iets te verhogen.

Gekoppelde pagina's: Account - Kortingacties

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Tekst met onvoldoende contrast

Beschrijving: Er is een tekst gevonden met een kleur die een te lage contrastverhouding (4,5:1 of lager) heeft ten opzichte van de achtergrondkleur.

Locatie: De opsommingstekens in de lopende tekst hebben een te laag contrastratio van 1,5:1.

Gekoppelde pagina's: Veelgestelde vragen, Contact

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Reflow tweedimensioneel scrollen

Beschrijving: De pagina of onderdeel op de pagina scrolt in twee dimensies, zonder dat dit noodzakelijk is voor het element, zoals bij een tabel of grafiek. Voor kleine schermen is het belangrijk dat content in één scrol (lees) richting geplaatst is.

Locatie: In een reflow op desktop scrollt de pagina een beetje in twee dimensies. Dit is getest op de webbrowsers Chrome, Firefox en Edge. Op een mobiele telefoon werkt het wel goed.

Gekoppelde pagina's: Toegankelijkheid

Prioriteit: Laag

Uitkomst: Gefaald

Icoon met onvoldoende contrast

Beschrijving: Er is een icoon gevonden met onvoldoende contrast met naastgelegen kleuren. De contrastverhouding moet minimaal 3:1 zijn voor iconen.

Locatie: De lichtblauwe iconen die aangeven dat het menu uitgevouwen kan worden heeft onvoldoende contrastratio van 2,6:1 ten opzichte van het blauwe vlak. Aanvullend adviseren we om de donkerblauwe strepen tussen iedere veelgestelde vraag een hogere contrastratio te geven. De huidige contrastratio is 1,2:1.

Gekoppelde pagina's: Hoe werkt de HoornPas?

Prioriteit: Laag

Uitkomst: Gefaald

Icoon met onvoldoende contrast

Beschrijving: Er is een icoon gevonden met onvoldoende contrast met naastgelegen kleuren. De contrastverhouding moet minimaal 3:1 zijn voor iconen.

Locatie: Het rode uitroepteken tegen de blauwe achtergrond. Huidig contrastratio: 1,9:1.

Gekoppelde pagina's: Account - Tegoeden

Prioriteit: Laag

Uitkomst: Gefaald

Niet bedienbaar met toetsenbord

Beschrijving: Niet alle websitefunctionaliteiten kunnen worden gebruikt met alleen een toetsenbord.

Locatie: Maak de knop 'Opties' bereikbaar via tab-navigatie.

Gekoppelde pagina's: Account - Mijn stadspassen

Prioriteit: Kritiek

Uitkomst: Gefaald

Niet bedienbaar met toetsenbord

Beschrijving: Niet alle websitefunctionaliteiten kunnen worden gebruikt met alleen een toetsenbord.

Locatie: Zorg dat in mobiele weergave het filtermenu geopend kan worden via de tab-navigatie. Maak de actieknop ''Laat acties zien (0)'' dat verschijnt in het filtermenu in zijn geheel werkbaar voor toetsenbordnavigatie.

Gekoppelde pagina's: Aanbod

Prioriteit: Hoog

Uitkomst: Gefaald

Knop niet (voldoende) toetsenbord bedienbaar

Beschrijving: Er is een knop gevonden, die niet of niet voldoende bedienbaar is met het toetsenbord.

Locatie: Het hamburgermenu is in mobiele weergave niet bereikbaar met een toetsenbord.

Gekoppelde pagina's: Alle onderzochte webpagina's

Prioriteit: Hoog

Uitkomst: Gefaald

Skiplink werkt niet

Beschrijving: Er is een skiplink, maar deze werkt niet of werkt niet naar verwachting.

Locatie: Op twee pagina's slaat de skiplink in de hoofdnavigatie een inhoudelijke deel van de pagina over.

Gekoppelde pagina's: Veelgestelde vragen, Meezingen Om te Hoorn

Prioriteit: Hoog

Uitkomst: Gefaald

Verborgen element in tab volgorde

Beschrijving: Er is een visueel en/of aria-hidden element dat nog wel focus krijgt.

Locatie: Onder de alinea van kop 1 'Aanbod' is een verborgen werkende link.

Gekoppelde pagina's: Aanbod

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Geen foutidentificatie aanwezig

Beschrijving: Één of meerdere invoervelden bevatten geen enkele vorm van foutidentificatie.

Locatie: Het telefoonnummerveld. Tijdens de test konden we het invoerveld met letters invullen en opsturen.

Gekoppelde pagina's: Contactformulier

Prioriteit: Hoog

Uitkomst: Gefaald

Knop zonder rol, naam en/of waarde

Beschrijving: Er is een knop gevonden zonder juiste rol naam en/of waarde. Hierdoor weten gebruikers van hulpsoftware niet dat het een knop is of wat het doet.

Locatie: Het enkelkeuzemenu 'Ben je een pashouder?' heeft geen naam in de code. Het niet ook mogelijk om met een toetsenbord naar de zichtbare naam te navigeren. Een schermlezergebruiker heeft dus geen manier om erachter te komen wat de gestelde vraag is.

Gekoppelde pagina's: Contactformulier

Prioriteit: Hoog

Uitkomst: Gefaald

Interactief component zonder naam

Beschrijving: Er is een interactief component, zoals een button of een link, gevonden met inhoud, maar zonder naam.

Locatie: Het hamburgermenu in het hoofdnavigatiemenu.

Gekoppelde pagina's: Alle onderzochte webpagina's

Prioriteit: Hoog

Uitkomst: Gefaald

Knop zonder naam

Beschrijving: Er is een knop gevonden zonder toegankelijke naam.

Locatie: De 'X'-knop om de invoer ongedaan te maken heeft geen naam die schermlezergebruiker meekrijgen.

Gekoppelde pagina's: Veelgestelde vragen

Prioriteit: Gemiddeld

Uitkomst: Gefaald

Element heeft geen (correcte) uitgevouwen status

Beschrijving: Er is een element gevonden waarvan niet (goed) via een status wordt aangegeven of deze geopend of gesloten is. Hierdoor is deze informatie incorrect of afwezig voor een schermlezergebruiker.

Locatie: De knop 'Opties'.

Gekoppelde pagina's: Account - Mijn stadspassen

Prioriteit: Hoog

Uitkomst: Gefaald

Lijst niet (voldoende) programmatisch opgemaakt

Beschrijving: Er is een lijst gevonden die in de code niet of niet voldoende als een lijst is opgemaakt. Hierdoor kan deze niet goed gedetecteerd worden door hulpsoftware.

Locatie: Onder de kop "Ik heb hulp nodig bij de aanvraag, wie kan mij helpen?", achter het derde uitklapbare menu, is iedere losse zin binnen een alinea opgemaakt als een lijst, namelijk ''1. De Formulierenbrigade. Het inloopspreekuur is:'' en ''2. Wijkinfopunten van Stichting Netwerk. Kom langs of bel 0229 21 25 87. Zij hebben op verschillende locaties spreekuren:''. Vervang hier liever de lijstopmaak met een tekstuele structurering, zodat de lijsten die volgen na de organisaties er duidelijker uitspringen. Als volgt een schets van een oplossingssuggestie: Er zijn twee organisaties die je hier gratis bij kunnen helpen: Organisatie 1: De Formulierenbrigade. Het inloopspreekuur is: • iedere maandag van 14.00 tot 16.00 uur in de Centrale Bibliotheek Hoorn aan de Wisselstraat 8. • iedere donderdag van 14.00 tot 16.00 uur in het Biebpunt in Wijkcentrum de Grote Waal, Grote Beer 3A. Kijk voor meer informatie op de website van de Formulierenbrigade West-Friesland. Organisatie 2: Wijkinfopunten van Stichting Netwerk. Kom langs of bel 0229 21 25 87. Zij hebben op verschillende locaties spreekuren: • Wijkcentrum Kersenboogerd, Brederodegracht 1: maandag en donderdag van 13.00 tot 16.00 uur, dinsdag van 9.45 tot 12.00 uur, woensdag van 9.00 tot 12.00 uur. • Wijkcentrum Grote Waal, Grote Beer 3: maandag en woensdag van 10.00 tot 12.00 uur. Vrijdag op afspraak. • Wijkcentrum De Zaagtand, Sint Eloystraat 106: dinsdag van 10.00 tot 12.00 uur op afspraak • Wijkcentrum de Huesmolen, de Huesmolen 60: maandag van 10.00 tot 12.00 uur Kijk voor meer informatie op de website van Stichting Netwerk.

Gekoppelde pagina's: Contact, Veelgestelde vragen

Prioriteit: Gemiddeld

Uitkomst: Advies

Verplicht veld niet gemarkeerd in code of tekst

Beschrijving: De verplichte invoervelden zijn niet (voldoende) programmatisch als verplicht gemarkeerd. Dit moet in de tekst of code terug te vinden zijn.

Locatie: In 'Stap 2: Gegevens' voor het registreren van de HoornPas wordt niet aangegeven welke velden verplicht zijn om in te vullen.

Gekoppelde pagina's: Account aanmaken (hele flow)

Prioriteit: Gemiddeld

Uitkomst: Advies

Verplicht veld niet gemarkeerd in code of tekst

Beschrijving: De verplichte invoervelden zijn niet (voldoende) programmatisch als verplicht gemarkeerd. Dit moet in de tekst of code terug te vinden zijn.

Locatie: Maak het in het contactformulier mogelijk om te zien welke invoervelden verplicht zijn om in te vullen.

Gekoppelde pagina's: Contactformulier

Prioriteit: Gemiddeld

Uitkomst: Advies

Sla geen kopniveaus over

Beschrijving: Het overslaan van kopniveaus kan verwarrend zijn en moet waar mogelijk worden vermeden, omdat het voor schermlezergebruikers effect kan hebben op de betekenis van onderdelen. Zorg er bijvoorbeeld voor dan een h1 niet direct wordt opgevolgd door een h4.

Locatie: Na kop 1 volgen alleen koppen op niveau 2.

Gekoppelde pagina's: Aanbod

Prioriteit: Laag

Uitkomst: Advies

Page needs to start with an H1 heading

Beschrijving: The structure of headings should adhere to the structure of the page. Therefore, it is important to start with a level 1 heading (H1). This is not a requirement, but we do recommend always applying it, because it is important for the user experience.

Locatie: Alle pagina's in het account hebben geen kop 1.

Gekoppelde pagina's: Account - Mijn stadspassen, Account - Tegoeden, Account - Kortingacties

Prioriteit: Laag

Uitkomst: Advies

Gebruik gemaakt van witregel voor opmaak

Beschrijving: Er is gebruik gemaakt van een
element om witruimte te creëren, terwijl CSS meer geschikt is.

Locatie: Er is in de inhoud van de pagina 15 keer gebruik gemaakt van het br-element in plaats van een witregel. Op in een webbrowser de Inspectormodus om de het br-element op te sporen.

Gekoppelde pagina's: Privacyverklaring

Prioriteit: Laag

Uitkomst: Advies

Onterecht strong-element gebruikt

Beschrijving: Er is gebruik gemaakt van een element voor opmaakdoeleinden. In dit geval moet daar CSS voor gebruikt worden.