Audit digitale toegankelijkheid van website forms.pzhacc.nl

#1 - Kop niet gemarkeerd als kop

Op deze pagina is de volgende tekst niet als kop gemarkeerd in de code: "Inleiding". Voor bezoekers die hulpsoftware gebruiken, is tekst die visueel als kop is vormgegeven maar niet als kop is gemarkeerd in de code niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te gaan. Dit is alleen mogelijk wanneer koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven, bijvoorbeeld door vetgedrukte tekst, wijkt de informatiestructuur in de code af van de visuele structuur van de pagina.

Oplossing:

Markeer koppen met het juiste HTML-element en gebruik daarbij het correcte kopniveau (h2 tot en met h6).

#2 - Huidige stap alleen aangegeven met kleur

Op deze pagina wordt de actieve stap uitsluitend aangegeven door een verschil in achtergrondkleur van de knop. Er wordt geen ander visueel kenmerk gebruikt, zoals een onderstreping, een ander letterformaat of een rand. Bezoekers die kleurverschillen niet kunnen waarnemen, kunnen daardoor niet bepalen welke stap op dit moment actief is.

Oplossing:

Voeg een extra visueel kenmerk toe aan de actieve stap naast het kleurverschil, zoals een onderstreping, rand of vetgedrukte tekst.

#3 - Validatiestatus alleen visueel aangegeven

Op deze pagina staat bij de stap "Je persoonlijke gegevens" een formulier met invoervelden. Wanneer een veld correct is ingevuld, wordt de geldige status alleen visueel aangegeven door een groene rand en een vinkjesicoon. Deze statuswijziging wordt niet programmatisch doorgegeven aan hulpsoftware. Hierdoor worden gebruikers van schermlezers niet geïnformeerd dat het invoerveld succesvol is gevalideerd. Hetzelfde geldt voor de stap "Je vraag". Hetzelfde probleem doet zich voor op de pagina https://forms.pzhacc.nl/digid_eform_schadeclaim-indienen bij de stap "Aanvrager".

Oplossing:

Zorg ervoor dat statuswijzigingen van de validatie programmatisch worden doorgegeven, zodat hulpsoftware ze kan detecteren en aankondigen. Mogelijke oplossingen:

• bied een programmatisch gekoppelde tekststatus voor het veld, bijvoorbeeld via aria-describedby
• kondig validatieresultaten dynamisch aan met een aria-live-regio
• toon zichtbare statustekst naast het veld, niet alleen een vinkje en kleur

#4 - Afbeelding heeft geen tekstalternatief (alt-attribuut ontbreekt)

Op deze pagina opent bij de stap "Je vraag" de knop met een i-icoon extra inhoud. Deze inhoud bevat een i-icoon dat als img-element is toegevoegd zonder alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe. Hetzelfde probleem doet zich voor op de pagina https://forms.pzhacc.nl/digid_eform_schadeclaim-indienen bij de stap "Aanvrager", met dezelfde iconen.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Omdat het hier waarschijnlijk om een decoratieve afbeelding gaat, laat het alt-attribuut leeg.

#5 - Opsomming onjuist gemarkeerd

Op deze pagina opent bij de stap "Je vraag" de knop met een i-icoon extra inhoud. Deze inhoud bevat een lijst met 2 items die niet correct is gemarkeerd in de code. Daardoor is de structuur van de informatie niet correct vastgelegd en kan hulpsoftware niet herkennen dat het om een opsomming gaat. Schermlezers kondigen in dat geval niet aan hoeveel items een lijst bevat. Dit maakt het voor gebruikers van een schermlezer lastiger om de hoeveelheid informatie in te schatten.

Oplossing:

Zorg ervoor dat alle opsommingen correct worden gemarkeerd in de HTML-structuur, bijvoorbeeld met een <ol>-element (genummerde lijst) of <ul>-element (opsomming met opsommingstekens). Meer informatie over het belang van correcte HTML-lijsten is te vinden op: https://www.properaccess.nl/blog/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

#6 - Icoon 'opent in nieuw browsertab' heeft geen tekstalternatief

Op deze pagina staat bij de stap "Gegevens controleren" een link naar "https://www.zuid-holland.nl/algemeen/privacyverklaring" met een icoon dat aangeeft dat de link in een nieuw browsertab wordt geopend. Dit icoon heeft geen alternatieve tekst, waardoor gebruikers van schermlezers niet weten dat de link in een nieuw venster opent. Een gebruiker van een schermlezer weet niet dat deze link een nieuwe browsertab zal openen. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen. Hetzelfde probleem doet zich voor met dezelfde link op de pagina https://forms.pzhacc.nl/digid_eform_schadeclaim-indienen bij de stap "Controleren en verzenden", onder de kop "Akkoord".

Oplossing:

Voeg de informatie dat de link een nieuwe browsertab opent toe als visueel verborgen tekst die wel toegankelijk is voor schermlezers.

#7 - Tekst als afbeelding geplaatst met afwijkend tekstalternatief

Op deze pagina staat na het succesvol verzenden van het formulier, onderaan de pagina, een afbeelding met de ingesloten tekst "Elke dag beter. Zuid-Holland". Het tekstalternatief ("Provincie Zuid-Holland motto") komt niet overeen met de zichtbare tekst. Hierdoor wordt aan verschillende gebruikersgroepen verschillende informatie overgebracht. Dit voldoet niet aan succescriterium 1.1.1 (Niet-tekstuele inhoud). Daarnaast beperkt het insluiten van tekst in afbeeldingen de toegankelijkheid, omdat bezoekers de tekst niet kunnen vergroten, herstijlen of aanpassen aan hun behoeften. Dit voldoet niet aan succescriterium 1.4.5 (Afbeeldingen van tekst).

Oplossing:

Het is beter om deze tekst als gewone tekst op de pagina te plaatsen en te stylen met CSS. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding zit gebakken, kunnen ze dit niet doen.

#8 - Bij 400% [/320px breedte] zoom is een horizontale scrollbar aanwezig

Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400% [320px breedte], verschijnt er een horizontale scrollbar bij de stap "Je vraag". Horizontaal scrollen op de hele pagina is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, informatieve afbeeldingen, presentaties, video en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen. Hetzelfde probleem doet zich voor op de pagina https://forms.pzhacc.nl/digid_eform_schadeclaim-indienen bij de stappen "Bijlagen" en "Controleren en verzenden".

Oplossing:

Zorg ervoor dat de pagina-inhoud zich aanpast aan kleinere schermen. Verwijder de horizontale scrollbar op de hele pagina en behoud deze alleen binnen de tabel onder de tekst "Geüploade bestanden".

#9 - Betekenis van verplicht-symbool niet uitgelegd

Op deze pagina staat bij de stap "Aanvrager" een formulier met meerdere verplichte velden die met een asterisk zijn gemarkeerd. Wanneer een asterisk wordt gebruikt om verplichte velden aan te geven, moet er boven het formulier een instructie staan zoals "Velden gemarkeerd met * zijn verplicht".

Oplossing:

Voeg een instructie toe boven het formulier, zoals "Velden gemarkeerd met * zijn verplicht".

#10 - autocomplete-attribuut ontbreekt bij invoervelden voor persoonsgegevens

Op deze pagina staat bij de stap "Aanvrager" een formulier met invoervelden voor persoonsgegevens. De invoervelden voor telefoonnummers "Telefoonnummer 1" en "Telefoonnummer 2" bevatten geen passend autocomplete-attribuut om het doel van het veld programmatisch vast te leggen. Dit maakt het voor browsers en hulpsoftware lastiger om automatisch invullen te ondersteunen en gebruikersgegevens correct te interpreteren.

Oplossing:

Voeg passende autocomplete-attributen toe aan beide telefoonnummervelden. Mogelijke oplossingen:

• als het twee gelijkwaardige telefoonnummers zijn, gebruik dan autocomplete="tel" voor beide velden
• als het van toepassing is, maak onderscheid met specifiekere waarden zoals tel-mobile, tel-home of tel-work. Meer informatie over autocomplete en welke waarden je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

#11 - De kleur van de rand van invoervelden heeft niet genoeg contrast

Op deze pagina staan bij de stap "Schadeclaim" twee textarea-elementen met de labels "Hoe is de schade ontstaan?" en "Waarom bent u van mening dat de provincie aansprakelijk is?" De contrastverhouding tussen de grijze rand (#EBEBEB) en de witte achtergrond van de pagina is 1,2:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond. Hetzelfde probleem geldt voor "Beschrijf de schade aan uw voertuig" bij dezelfde stap, wanneer de optie "Voertuig" is geselecteerd bij "Waaraan heeft u schade?".

Oplossing:

Zorg ervoor dat de contrastverhouding tussen de randen van de invoervelden en de achtergrond hoger is dan 3,0:1. Pas de randkleur aan zodat deze beter zichtbaar is tegen de achtergrond.

#12 - Informatief icoon heeft geen tekstalternatief

Op deze pagina heeft de voltooide stap een vinkjesicoon naast de knop, bijvoorbeeld naast "Aanvrager". Dit is een informatief icoon dat betekenis overdraagt aan ziende bezoekers, maar geen tekstalternatief heeft dat toegankelijk is voor schermlezers. Gebruikers van schermlezers kunnen de betekenis van het icoon daardoor niet achterhalen. Voeg een alternatieve tekst toe via bijvoorbeeld een aria-label, aria-labelledby of visueel verborgen tekst. Vergelijk dit met de implementatie op de pagina https://forms.pzhacc.nl/contact, waar vergelijkbare iconen wel een tekstalternatief hebben.

Oplossing:

Voeg een tekstalternatief toe aan het icoon, bijvoorbeeld met een aria-label of een visueel verborgen <span> met beschrijvende tekst.