Issues:
Audit digitale toegankelijkheid formulieren van Gemeente Den Haag
(Alleen de bevindingen)
Scope van de evaluatie
| Naam website | Formulier.denhaag.nl |
|---|---|
| Scope van de website |
Binnen de scope van dit onderzoek vallen:
|
| Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
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: De map bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… heeft geen tekstalternatief. Er is een (toegankelijk) alternatief om een locaties in te voeren, maar de map wordt ook voorgelezen aan screenreadergebruikers. Voeg daarom een tekstalternatief toe aan de map zodat screenreadergebruikers weten wat op de pagina wordt getoond.
Bevinding 2: Bij stap 1 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de link 'Inloggen' met daarin het logo van DigiD. Dit logo heeft geen tekstalternatief. Hierdoor missen screenreadergebruikers informatie die ziende bezoeker wel meekrijgen, namelijk dat de link doorverwijst naar een DigiD inlogpagina. Zorg ervoor dat dit logo een tekstalternatief krijgt of de linktekst wordt aangevuld zodat screenreadergebruikers dezelfde informatie krijgen. Dit probleem komt ook voor bij de andere stappen in dit formulier en in andere formulieren zoals bij stap 1 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/…. En het advies is ook om de title weg te laten op de link. De tooltip 'Inloggen' die verschijnt is echt nutteloos want Inloggen staat er al. Soms kan de tooltip hinderlijk over de tekst 'Inloggen' en 'DigiD' heen staan.
Bevinding 3: In het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staan invoervelden die verplicht zijn om in te vullen aangegeven met een sterretje (*). Niet alle screenreaders lezen dit sterretje of asterisk goed voor en daarom heeft het een tekstalternatief nodig. Plaats een tekstalternatief op het sterretje of geef op een andere manier aan dat het om een verplicht veld gaat, bijvoorbeeld door required-attribuut te gebruiken.
Bevinding 4: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. Deze afbeelding heeft geen goede naam ('...'). Zorg dat de afbeelding (en daarmee ook de knop) een duidelijke toegankelijke naam krijgt.
Bevinding 5: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. De bladerknoppen hebben geen alternatieve tekst, waardoor het doel niet duidelijk is voor blinde bezoekers die gebruik maken van hulpsoftware. Voeg een alternatieve tekst toe, bijvoorbeeld 'Vorige maand' en 'Volgende maand'. Dit komt ook in de andere formulieren voor met datumvelden.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 6: Het label van het invoerveld 'Beschrijft u zo duidelijk mogelijk de locatie en wat u wilt melden. In stap 2 kunt u een foto toevoegen aan uw melding.' bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… is niet geassocieerd met het bijbehorende invoerveld. Zorg ervoor dat het label en invoerveld aan elkaar zijn gekoppeld door bijvoorbeeld gebruik te maken van id- en for-attributen.
Dit probleem komt voor bij meerdere invoervelden binnen dit formulier en andere formulieren, bijvoorbeeld in het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… of de velden 'E-mailadres' en 'Telefoonnummer' in stap 4 van pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 7: Bij stap 2 in het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een groep keuzerondjes. Deze keuzerondjes zijn nu niet gegroepeerd. Gebruik een fieldset en legend combinatie of een andere vergelijkbare techniek om dit probleem op te lossen.
Dit probleem komt voor bij meerdere groepen keuzerondjes binnen dit formulier en bij andere formulieren, bijvoorbeeld het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 8: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een leeg h1-element. Een lege kop wordt geregistreerd door hulpsoftware. De lege kop staat bijvoorbeeld in linklijsten en wordt door screenreaders voorgelezen. Dit is verwarrend voor sommige bezoekers. Los dit probleem op door het lege h1-element te verwijderen.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… en op formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 9: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de kop 'Melding Openbare Ruimte'. Deze kop is niet opgemaakt in een kopelement. Hierdoor wordt de kop bijvoorbeeld niet als kop voorgelezen door screenreaders. Los dit probleem op door de kop op te maken in een kopelement (H1, H2, H3, etc.).
Op meerdere pagina's staan koppen die niet zijn opgemaakt in een kopelement, bijvoorbeeld op formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… en op formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 10: Op de pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… is het strong-element gebruikt om meerdere teksten dikgedrukt te maken, bijvoorbeeld de tekst 'U kunt op 2 manieren de locatie van uw melding doorgeven'. Het strong-element is niet bedoeld om teksten dikgedrukt mee te maken, omdat het element aan hulpsoftware aangeeft dat hier belangrijke content staat. Los dit probleem om door het strong-element van de teksten te verwijderen en gebruik CSS om teksten te stylen.
Op meerdere pagina's is het strong-element gebruikt om teksten mee op te maken waar dat niet nodig is, bijvoorbeeld bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 11: Bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… zijn de lijstitems onder de kop 'Formulierstappen' opgemaakt in een a-element maar heeft geen href-attribuut of hebben het attribuut 'role="link"'. Hierdoor wordt de tekst door hulpsoftware gezien als een link terwijl de teksten niet werken als links. Los dit probleem op door het a-element te verwijderen of plaats een ingevuld href-attribuut op het a-element. Bij de lijstitems met het role-attribuut moet dit worden verwijderd.
Dit probleem komt voor bij meerdere stappen binnen dit formulier en bij andere formulieren, bijvoorbeeld in het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… . Zie ook SC 4.1.2.
Bevinding 12: Bij stap 5 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… is de content op de pagina opgemaakt in een tabel, bijvoorbeeld de tekst 'Adres' en 'Contactgegevens'. Een tabel mag worden gebruikt voor de opmaak van content, maar zorg er dan voor dat 'role=presentation' op het table-element is geplaatst en geen th-elementen zijn gebruikt.
Dit probleem komt ook voor in andere formulieren, bijvoorbeeld bij stap 4 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 13: Bij stap 4 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… komen opsommingen voor. Deze zijn nu niet opgemaakt met de juiste code. Gebruik het ol- en li-element om opsommingen weer te geven.
Bevinding 14: Bij verschillende stappen van de formulieren zijn de vragen verdeeld onder onderwerpen. Bijvoorbeeld bij stap 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/…, waar invoervelden onder ander onder de kopjes 'Doet u een melding voor uw zelf', 'Gegevens hulpvrager' en 'Gegevens contactpersoon' staan. Wanneer formulieren zijn opgedeeld in verschillende onderdelen die gegroepeerd worden door een onderwerp, gebruik dan een fieldset en legend combinatie.
Dit geldt ook voor stap 3 van formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… waar een aantal radiobuttons gegroepeerd staan onder de tekst 'Komt uw melding overeen met 1 van de volgende onderwerpen?'.
Bevinding 15: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. Er verschijnt een tabel met cijfers waarbij, indien van toepassing, een aantal dagen van de vorige maand en de volgende maand zichtbaar zijn en te kiezen. De dagen zijn niet gekoppeld aan een maand, waardoor niet duidelijk is of je bijvoorbeeld dag 1 van de huidige maand of van de volgende maand kiest.
Bevinding 16: In stap 3 van pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… kan je onder 'Komt uw melding overeen met 1 van de volgende onderwerpen?' meerdere keuzes hebben gedaan, bijvoorbeeld 'Afval', 'Zwerfvuil' en 'Openbare weg'. Achter deze teksten staan 'Wijzig'-knoppen. Visueel is duidelijk welke knop waarbij hoort. Semantisch is niet duidelijk welke wijzigknop bij welk item hoort. Zorg voor unieke namen of koppel de knoppen aan de bijbehorende teksten.
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 17: Bij stap 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staan invoervelden waar de bezoeker onder andere het eigen postcode 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: www.w3.org/tr/wcag21/.
Dit attribuut ontbreekt ook op andere invoervelden in andere formulieren, bijvoorbeeld bij invoervelden in het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… en in stap 3 van formulier.denhaag.nl/Tripleforms/formulier/nl-NL/…
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 18: Bij stap 6 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staan twee links; 'Terug naar de startpagina' en 'Nog een melding maken'. Wanneer de focus op deze knoppen staat wordt dit aangegeven met een kleurverandering. Dit is niet zichtbaar voor bezoekers die kleuren niet (goed) kunnen zien. Zorg ervoor dat de focus ook wordt aangegeven op een kleuronafhankelijke manier, zoals met een focusrand.
Bevinding 19: Wanneer de focus wordt geplaatst op de link 'Vorige' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… wordt dit alleen aangegeven met een kleurverandering. Bezoekers die kleuren niet (goed) kunnen zien kunnen deze kleurverandering niet waarnemen. Zorg ervoor dat de focus ook wordt aangegeven op een kleuronafhankelijke manier, zoals met een focusrand.
Dit probleem komt ook voor bij andere stappen binnen dit formulier en bij andere formulieren, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 20: Wanneer een fout wordt gemaakt in het invoerveld 'Postcode' bij Stap 2 en 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… verschijnt een rode rand om het invoerveld als foutmelding. Bezoeker die het scherm niet zien of kleuren niet (goed) kunnen waarnemen zullen deze foutmelding missen. Zorg ervoor dat een fout niet alleen wordt aangegeven door kleur. Gebruik bijvoorbeeld ook een tekstuele foutmelding (zie ook SC 3.3.1).
Dit probleem komt ook voor in andere formulieren waar een 'Postcode' invoerveld in staat, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 21: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. Het contrast is op enkele plaatsen onvoldoende:
- de dagen die buiten de maand vallen zijn lichtgroen met witte letters met een contrastverhouding van 3,6:1, deze dagen zijn te selecteren en doen dus actief mee. Zorg daarom voor een contrastverhouding van minimaal 4,5:1
- de knoppen 'vandaag' en 'sluiten' zijn groen met een zwarte letter. De contrastverhouding is 4,0:1 waar dit 4,5:1 moet zijn.
Bevinding 22: Als je op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… op 'Inloggen DigiD' klikt ga je naar het inlogscherm van DigiD. ALs je terugkeert in dit scherm dan is de kleur van de link 'Inloggen' donker. Het contrast met de groene achtergrond is dan te laag. Zorg dat er voldoende contrast is voor bezochte links op een groene achtergrond. Correcte contrastverhouding moet hier 4,5:1 zijn.
1.4.4 Herschalen van tekst (Niveau AA)
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 23: Wanneer bij een schermgrootte van 1024px breed ingezoomd wordt dan verdwijnt op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… de tekst van de formulierstappen. Alleen de stapnummers zijn nog in beeld en er is geen manier om de namen van de stappen op te vragen. Zorg dat er geen content verdwijnt.
1.4.10 Reflow (Niveau AA)
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 24: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staan de links 'Start', 'Inloggen' en 'Mailen' deels over elkaar. Hierdoor is het DigiD logo in de link 'Inloggen' niet meer zichtbaar. Daarnaast is het lastig om te bepalen welke link bij welk bovenstaande tekst hoort. Los dit op door bijvoorbeeld de volgorde waarin de content wordt gepresenteerd aan te passen door de links en bijbehorende teksten onder elkaar te plaatsen bij een ingezoomde weergave.
Bevinding 25: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt in stap 2 op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… een deel van de tekst van het informatieknopje buiten beeld als je de informatie opvraagt.
Bevinding 26: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt het overzichtje met de stappen. Uiteindelijk zie je nog '< ... >'. Je raakt functionaliteit kwijt om eenvoudig van naar een bepqqlde stap terug te springen.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 27: De randen van de invoervelden (#d2d2d2) op de witte achtergrond op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… hebben een te laag contrast. De contrastverhouding is hier 1,5:1, waar dit minimaal 3:1 moet zijn.
Hetzelfde contrastprobleem komt voor bij andere invoervelden binnen dit formulier en andere formulieren, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 28: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. Het contrast van de grijze bladerknoppen met groene pijltjes is te laag. De contrastverhouding is 2,0:1 waar dit 3:1 moet zijn.
1.4.13 Content bij hover of focus (Niveau AA)
Informatie over succescriterium 1.4.13 Content bij hover of focus
Uitkomst: Onvoldoende
Bevinding 29: Wanneer een bezoeker bij stap 3 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… over het 'i' icoon hovert met de muis of de focus hierop plaatst, verschijnt er aanvullende content. Deze content kan niet door de bezoeker worden weggehaald zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen.
Dit probleem komt ook voor in andere formulieren, bijvoorbeeld bij stap 3 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
2. Bedienbaar
2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord (Niveau A)
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevinding 30: In het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de link 'Opslaan en later verder gaan' bij alle stappen. Wanneer deze link is geactiveerd verschijnt een pop-up die een deel van de pagina bedekt. Deze pop-up heeft geen sluitknop, de enige mogelijkheid om de pop-up te verwijderen zonder te verzenden is door naast de pop-up te klikken. Hierdoor kunnen toetsenbordgebruikers de pop-up niet afsluiten. Voeg daarom een sluitknop die toegankelijk is toe aan de pop-up.
Dezelfde link die een pop-up opent staat ook in andere formulieren, bijvoorbeeld in formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 31: Bij stap 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… moet je een keuze maken. Er is een knop 'Vorige'. Deze kan je met de muis bedienen. Als de focus op 'Vorige' staat en je drukt op Enter zou je ook terug moeten kunnen keren. Met toetsenbord is het niet mogelijk om terug te gaan voordat je een keuze hebt gemaakt. Dit gaat ook op andere plekken mis, zoals bij stap 4.
Bevinding 32: Bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de link 'Start'. Het is niet mogelijk om deze link te bedienen met alleen het toetsenbord. Hierdoor kunnen toetsenbordgebruikers dit formulier niet vullen zonder hun DigiD te moeten gebruiken. Los dit probleem op door het mogelijk te maken om de focus op deze link te plaatsen.
Dit probleem komt ook voor bij stap 1 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 33: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop dat een kalender opent waar bezoekers een datum kunnen selecteren. Deze kalender is via het toetsenbord te openen. De interactieve elementen in deze kalender zijn niet te bedienen met het toetsenbord. Zorg ervoor dat de focus in de kalender wordt geplaatst na openen en dat de elementen in deze kalender te bedienen zijn met het toetsenbord.
Dezelfde kalender staat ook in andere invoervelden in ander formulieren, bijvoorbeeld bij stap 5 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 34: De links 'Start' en 'Mailen' bij stap 1 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… zijn niet te bedienen met het toetsenbord. Zorg ervoor dat het mogelijk is om de focus op deze links te plaatsen en dat ze geactiveerd kunnen worden met het toetsenbord.
Bevinding 35: In stap 2 van het het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… kan je een bijlage meesturen door een bestand te uploaden. Als je een bestand hebt geüpload dan kan je deze niet meer verwijderen. De knop (link?) is er wel, maar je kunt deze niet met het toetsenbord (Enter of spatiebalk) activeren.
2.4 Navigeerbaar
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 36: De verschillende stappen van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… hebben elk een eigen URL maar de paginatitel van deze pagina's is bij elke stap hetzelfde. Bezoekers die gebruik maken van bijvoorbeeld een screenreaders kunnen pagina's met dezelfde titel moeilijker identificeren. Zorg er daarom voor dat elke pagina een unieke paginatitel heeft, bijvoorbeeld door de stap aan de titel toe te voegen.
Dit probleem komt ook voor bij de andere geteste formulieren, bijvoorbeeld formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
2.4.3 Focus volgorde (Niveau A)
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevinding 37: In het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de link 'Opslaan en later verder gaan'. Wanneer deze link is geactiveerd verschijnt een pop-up die een deel van de pagina bedekt. Na het openen van de pop-up is de focus hier niet in geplaatst . Ook gaat de focus na de knop 'verstuur' in de pop-up verder op de achterliggende pagina terwijl de pop-up op het scherm blijft. Zorg ervoor dat de focus gelijk na het openen in de pop-up staat en de focus hier in blijft totdat bezoekers de pop-up zelf afsluiten.
Bevinding 38: Wanneer bezoeker stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… voor het eerst laden staat de focus in het eerste invoerveld 'Straatnaam'. Doordat de focus in dit veld staat wordt de pagina voor screenreadergebruikers niet automatisch voorgelezen. Deze gebruikers kunnen hierdoor informatie missen, zoals de informatie boven het invoerveld en de paginatitel.
Dit gebeurt ook bij andere formulieren, bijvoorbeeld bij het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
2.4.6 Koppen en labels (Niveau AA)
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 39: De formuliervelden straatnaam en huisnummer op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… hebben geen zichtbaar label maar wel een placeholder-tekst. De placeholder-tekst is niet voldoende, want die verdwijnt zodra de bezoeker begint met typen. Voor sommige mensen kan het moeilijk zijn om te onhouden wat ze moeten invullen als dat er niet duidelijk bij staat. Voeg een label toe die altijd zichtbaar blijft om dit probleem op te lossen.
2.4.7 Focus zichtbaar (Niveau AA)
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 40: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… is in de kop een link opgenomen om terug te keren naar denhaag.nl. Bij focus verplaats het linkje een stukje naar rechts. De vorm van de link verandert echter niet. Zorg voor een duidelijke focus zoals een rand van minimaal 2 pixels. Later dit jaar (waarschijnnlijk juni 2022) zal WCAG 2.2 verschijnen met striktere regels voor de focus.
Bevinding 41: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… krijg je na stap 1 de link 'Vorige'. Bij focus verplaatst de link licht en krijgt de focus een iets andere kleur. Hiermee is de focus onvoldoende duidelijk. Zorg voor een duidelijke focus zoals een rand van minimaal 2 pixels.
Bevinding 42: Wanneer de invoervelden bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… zijn ingevuld verdwijnt het formulier en wordt de keuze getoond met een knop 'Wijzig'. Wanneer de focus op deze knop staat is dat niet zichtbaar. Zorg ervoor dat de focus wordt aangegeven met bijvoorbeeld een focusrand zodat ziende toetsenbordgebruikers weten op welk element de focus staat.
Dezelfde knop komt bij meerdere stappen binnen dit formulier en andere formulieren voor, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 43: Bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat de link 'Inloggen'. Wanneer de focus op deze link is geplaatst is dat niet zichtbaar. Zorg ervoor dat de focus wordt aangegeven voor toetsenbordgebruikers die het scherm kunnen zien. Zo weten zij op welk element de focus is geplaatst. Gebruikt hiervoor het liefst een focusrand met een hoog contrast.
3. Begrijpelijk
3.1 Leesbaar
3.1.2 Taal van onderdelen (Niveau AA)
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevinding 44: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een kaart met daarin twee knoppen waarmee bezoeker in de kaart kunnen in- en uitzoomen. De toegankelijke naam van deze knoppen zijn in het Engels, terwijl de hoofdtaal van de pagina Nederlands is. Zorg ervoor dat de toegankelijke naam van element in dezelfde taal is als de hoofdtaal van de pagina.
3.2 Voorspelbaar
3.2.1 Bij focus (Niveau A)
Informatie over succescriterium 3.2.1 Bij focus
Uitkomst: Onvoldoende
Bevinding 45: Wanneer op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… via de pijltjestoetsen wordt genavigeerd door de selectievakjes herlaadt de pagina zich en wordt het selectievakje waar de focus op stond automatisch geselecteerd. Hierdoor kunnen toetsenbordgebruikers niet een goede keuze maken bij de selectievakjes, omdat zij niet kunnen navigeren naar het vakje wat zij willen selecteren.
3.2.4 Consistente identificatie (Niveau AA)
Informatie over succescriterium 3.2.4 Consistente identificatie
Uitkomst: Onvoldoende
Bevinding 46: Op meerdere plaatsen wordt naar je 'Geslacht' gevraagd. Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… heb je de keuze uit 'Man' en 'Vrouw'. Op de pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… heb je een keuze extra 'Niet relevant'. De identificatie van beide velden is gelijk. De 2 velden hebben een identieke naam maar de functionaliteit wijkt deels af.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 47: Bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… verschijnt een foutmelding als er geen locatie is doorgegeven. De melding luidt 'U dient zowel de straat als het huisnummer te specificeren'. Dit is onvoldoende. Geef aan wat de fout is bijvoorbeeld: 'U heeft een van de velden straatnaam of Huisnummer niet ingevuld.'. En geef een goede foutsuggestie (SC 3.3.3) bijvoorbeeld 'Vul deze velden in of wijs de locatie aan via de volgende vraag.'
Bevinding 48: Bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… verschijnt een foutmelding wanneer het veld 'Beschrijft u zo duidelijk mogelijk de locatie en wat u wilt melden. In stap 2 kunt u een foto toevoegen aan uw melding. *' niet is ingevuld. De foutmelding die verschijnt vermeld niet welke fout is gemaakt. Zorg ervoor dat een foutmelding omschrijft welke fout is gemaakt en het naam van het invoerveld noemt.
Dit probleem komt voor bij alle foutmeldingen in dit en andere formulieren, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 49: Wanneer een fout wordt gemaakt bij het invoerveld 'Postcode' bij Stap 2 en 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… verschijnt hier geen foutmelding. Er wordt wel aangegeven dat er een fout is gemaakt door een rode rand die verschijnt om het invoerveld. Zorg ervoor dat de fout wordt aangegeven door een tekstuele foutmelding en niet door alleen kleur te gebruiken (zie ook SC 1.4.1).
3.3.2 Labels of instructies (Niveau A)
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevinding 50: De verplichte invoervelden in het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… worden aangegeven met een sterretje. Er wordt niet bij elke stap aangegeven dat een sterretje betekend dat het hier gaat om een verplicht veld. Zorg ervoor dat dit in ieder geval wordt aangegeven aan het begin van het formulier. In stap 3 ontbreekt het sterretje zelfs, terwijl daar een keuze gemaakt moet worden.
Bevinding 51: Op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staan invoervelden waarbij de placeholderteksten zijn gebruikt voor labels. De placeholder is hiervoor niet geschikt. Zodra er iets in het veld getypt wordt verdwijnt de placeholder en is niet meer zichtbaar wat er in het veld moet worden ingevuld. Gebruik labels bij velden die altijd zichtbaar blijven.
Bevinding 52: Een aantal groepen keuzerondje bij stap 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… hebben geen visueel label. Hierdoor is het voor sommigen bezoeker moeilijk te bepalen welke keuze zij hier moeten maken. Zorg ervoor dat een groep selectievakjes altijd een label met instructies heeft en dat het label gekoppeld is aan de groep selectievakjes (Bijvoorbeeld door gebruik te maken van het fieldset-element).
3.3.3 Foutsuggestie (Niveau AA)
Informatie over succescriterium 3.3.3 Foutsuggestie
Uitkomst: Onvoldoende
Bevinding 53: Bij stap 2 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… vraagt een invoerveld om een postcode, maar het is niet duidelijk in welk formaat de postcode ingevuld met worden. Zorg dat het voor bezoekers duidelijk is hoe zij dit formulierveld moeten invullen, in dit geval moet de postcode zonder spatie worden ingevuld (bijvoorbeeld 1234AB).
Bevinding 54: Bij stap 3 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… is het mogelijk om een telefoonnummer in te voeren, maar hier wordt niet aangegeven welk format bezoekers moeten gebruiken. Het is bijvoorbeeld mogelijk om het telefoonnummer met spaties in te voeren maar dan verschijnt een foutmelding. Zorg ervoor dat bij het invoerveld wordt aangegeven welk format bezoekers moeten gebruiken.
Dit probleem komt ook voor bij andere invoervelden waar bezoekers een telefoonnummer kunnen invoeren, bijvoorbeeld bij stap 3 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
4. Robuust
4.1 Compatibel
4.1.1 Parsen (Niveau A)
Informatie over succescriterium 4.1.1 Parsen
Uitkomst: Onvoldoende
Bevinding 55: In de code van de pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… komt een stukje JavaScript dubbel voor. Aan dit JavaScript om van taal te verwisselen is 2x het id="lang_switch" toegekend. Zorg voor unieke id's in de html-code.
4.1.2 Naam, rol, waarde (Niveau A)
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevinding 56: De lijstitems 2 tot en met 6 onder de kop 'Formulierstappen' op pagina formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… hebben het attribuut 'role="link"'. Hierdoor worden deze lijstitems meegenomen in linklijsten en voorgelezen als links door screenreaders. Dit is verwarrend voor bijvoorbeeld screenreadergebruikers, omdat de lijstitems niet werken als links. Los dit probleem op door het attribuut te verwijderen. Zie ook SC 1.3.1
Bevinding 57: Het invoerveld 'Beschrijft u zo duidelijk mogelijk de locatie en wat u wilt melden. In stap 2 kunt u een foto toevoegen aan uw melding. *' bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… heeft geen toegankelijke naam. Hierdoor weten mogelijk screenreadergebruikers niet wat zij hier moeten invoeren. Zorg ervoor dat dit invoerveld een toegankelijke naam krijgt die overeen komt met het visuele label.
Dit probleem komt voor bij meerdere invoervelden binnen dit formulier en andere formulieren, bijvoorbeeld bij stap 2 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 58: In het invoerveld 'Geboortedatum (dd-mm-jjjj)' bij stap 2 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… staat een knop zonder toegankelijke naam. Hierdoor weten screenreadergebruikers niet wat de knop doet. Zorg ervoor dat deze knop een goed beschrijvende toegankelijke naam krijgt door gebruik te maken van aria-label of een soortgelijke techniek.
Dezelfde knop staat ook in andere invoervelden in andere formulieren, bijvoorbeeld bij stap 5 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
4.1.3 Statusberichten (Niveau AA)
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevinding 59: Wanneer de invoervelden bij stap 1 van het formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… niet goed of niet worden ingevuld verschijnt een foutmelding dynamisch op de pagina. Blinden en slechtzienden die met een screenreader werken krijgen geen signaal dat er iets is gewijzigd en dat er foutmeldingen staan op het scherm.
Dit probleem komt ook voor bij andere invoervelden binnen dit formulier en bij andere formulieren, bijvoorbeeld bij formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 60: Bij stap 2 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… begint de pagina met laden bij invoer bij de selectievakjes, hierbij verschijnt geen nieuwe pagina. Screenreadergebruikers weten niet dat de pagina bezig is met laden omdat dit niet voor doorgegeven aan hun screenreader, in plaats daarvan blijft de screenreader stil. Zorg ervoor dat deze informatie ook wordt doorgegeven aan screenreaders.
Dit probleem komt ook voor bij de andere stappen in dit formulier en bij andere formulieren, bijvoorbeeld bij formulier.denhaag.nl/Tripleforms/formulier/nl-NL/….
Bevinding 61: Bij stap 2 van formulier formulier.denhaag.nl/Tripleforms/formulier/nl-NL/… (via keuze Mailen bij stap 1) is een invoerveld waar maximaal 1000 tekens ingevoerd mogen worden. Als je de 1000 tekens passeert dan worden er geen tekens meer ingevuld. Er verschijnt hier geen zichtbare melding van. Als je het scherm niet kunt zien en met voorleessoftware werkt dan krijg je ook geen terugkoppeling dat het maximum aantal tekens is overschreden. De indruk wordt gewekt dat je het veld nog steeds aanvut met tekst. Zorg zowel visueel als voor hulpsoftware voor een melding dat het maximum is bereikt.
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
- Melding openbare ruimte:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/scMeldingOpenbareRuimteResp.aspx - Afspraak maken grofvuil:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/bscAfspraakGrofvuil.aspx - Permanente registratie kiezer buiten Nederland:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/scRegistratieformulierPermanenteRegistratieKiezersBuitenland.aspx - WMO-melding:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/MeldingHulpvraagWMO.aspx - Klacht indienen over gemeente:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/scKlachtOverGemeente.aspx - Wijziging bijstand doorgeven:
https://formulier.denhaag.nl/Tripleforms/formulier/nl-NL/DefaultEnvironment/scWijzigingSZW.aspx
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.