Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Gemeente Beverwijk

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Gemeente Beverwijk
Datum 11 maart 2022
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op beverwijk.nl.
  • De pagina's op het subdomein afspraken.beverwijk.nl.
  • Alle PDF's op beverwijk.nl.
Buiten de scope van het onderzoek valt:
  • Alle pagina's achter een login, zoals edienstenburgerzaken.beverwijk.nl.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via beverwijk.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 43

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: Onderaan iedere pagina staat achter de link "Facebook" een icoon dat verwijst naar een externe pagina. Hier is een <span> met daarop het aria-label "Externe link" meegegeven. Het probleem is dat een aria-label op een element zonder semantische waarde (zoals een span) niet door alle hulpsoftware wordt herkend. Daardoor mist het icoon een tekstueel alternatief. Zie ook succescriterium 4.1.2.

Bevinding 2: In de toegankelijkheidsopties op iedere pagina staan iconen die informatie geven over de functie van de knop. Zonder die informatie zijn de visuele namen van de knoppen, zoals "Kleiner" en 'Laag' nietszeggend. Deze iconen hebben geen alternatieve tekst, al wordt bij sommige iconen wel een speciaal teken voorgelezen. Bij het vergroten van tekst is de toegankelijke naam bijvoorbeeld 'Groter AA'. Dit is onvoldoende beschrijvend. Geef de iconen een alternatieve tekst, bijvoorbeeld met screenreader-only tekst, om dit probleem op te lossen.

Bevinding 3: Het logo van de gemeente Beverwijk in de PDF https://www.beverwijk.nl/_flysystem/media/geldigheid-parkeervergunningen_5.pdf heeft geen beschrijving en is niet als artefact aangemerkt. Voor informatieve afbeeldingen geldt dat ze een beschrijving moeten hebben van de informatie die er in staat. De decoratieve afbeeldingen dienen als artefact te worden getagd.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 4: Op de pagina https://www.beverwijk.nl/lintjes wordt een video getoond. In de video komt gesproken woord voor, maar de ondertiteling ontbreekt. Voor alle gesproken tekst en andere belangrijke informatie in het geluid van een video of animatie (al dan niet interactief) moet ondertiteling geboden worden: een visuele versie van auditieve informatie. Op deze manier is de informatie ook beschikbaar voor bezoekers die doof of slechthorend zijn.

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

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://www.beverwijk.nl/lintjes is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 00:03. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er word getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://www.beverwijk.nl/lintjes is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 00:03. Er is geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er word getoond in de video. Maak voor deze en andere informatie gebruik van een extra audiospoor.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: De tabel op pagina https://www.beverwijk.nl/parkeervergunning onder "Wat kost een parkeervergunning?" bevat geen koppen. Tabellen met drie of meer kolommen moeten altijd tabelkoppen hebben die zijn opgemaakt met het th-element. Voeg tabelkoppen toe om dit probleem op te lossen.

Bevinding 8: De introductietekst op pagina https://www.beverwijk.nl/parkeervergunning is opgemaakt met het strong-element. Het strong-element geeft nadruk en belang aan aan één woord of een (korte) zin. Het mag daarom niet puur voor opmaak gebruikt worden. Gebruik CSS of een vergelijkbare techniek om een vergelijkbaar visueel effect te creëren.

Bevinding 9: Boven aan elke pagina staat de tekst "Belangrijk bericht voor bezoekers
Ook aanstaande maandag (7 maart) testen we om 12.00 uur de sirene". De tekst is opgemaakt als Kop 2 maar deze kop bevat geen content.

Bevinding 10: Op pagina https://www.beverwijk.nl/vacatures staan in de uitklapbare stukken content teksten opgemaakt met het em-element, zoals '~ Alex Kwakman, allround medewerker KCC'. Het em-element geeft gesproken nadruk aan een woord of een korte zin. Het mag daarom niet gebruikt worden voor puur opmaak. Gebruik CSS of een vergelijkbare techniek om een vergelijkbaar visueel effect te creëren.

Bevinding 11: De PDF "https://www.beverwijk.nl/_flysystem/media/proces-verbaal-i-4-over-geldigheid-en-nummering-kandidatenlijsten-4-februari-2022.pdf" is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat 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.

Bevinding 12: De code in de PDF https://www.beverwijk.nl/_flysystem/media/geldigheid-parkeervergunningen_5.pdf heeft niet de juiste structuur. Bijvoorbeeld: De afbeelding bovenaan is gecodeerd als kop, visuele koppen zijn niet gecodeerd als koppen en in de tabel "Algemene parkeervergunning geldig in:" zijn de header cellen als data cellen gecodeerd. Het document bevat daarnaast een visuele inhoudsopgave, maar die is niet als zodanig gecodeerd.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://afspraken.beverwijk.nl/internetappointments/product=3 komt bij de koppen van de stappen de status (bijvoorbeeld 'is volledig ingevuld' vóór de naam van de stap (bijv. 'Activiteit(en') wordt 'Activiteitselectiestap is volledig ingevuld Activiteit(en)'). Het is beter om deze achter de stap te plaatsen, omdat het anders voor verwarring kan zorgen.

Bevinding 14: In de de PDF https://www.beverwijk.nl/_flysystem/media/geldigheid-parkeervergunningen_5.pdf wordt niet eerst de titel van het document getoond maar een streepjescode en een andere code. Mensen die afhankelijk zijn van hulpsoftware weten zo niet wat het onderwerp van dit document is.

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 15: Op pagina https://www.beverwijk.nl/form/contactformulier/uw-vraag-of-opmerking-0 is een formulier waar de bezoeker onder andere het eigen e-mailadres en naam 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".

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 16: In het hoofdmenu op bijvoorbeeld pagina https://www.beverwijk.nl/contact-en-openingstijden wordt onder "Actueel" een lijst met links getoond waarvan de link "Contact en openingstijden" rood gekleurd is. Bezoekers kunnen alleen aan het verschil in kleur zien dat dit de huidige pagina is. Zorg ervoor dat informatie niet van kleur afhankelijk is om dit probleem op te lossen.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://www.beverwijk.nl/vacatures staat een afbeelding met tekst over het stadhuis. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 18: Wanneer bij een schermgrootte 1280x1024px ingezoomd wordt tot 400% verdwijnt een gedeelte van de datumkiezer in de 2e stap in het formulier op pagina https://afspraken.beverwijk.nl/internetappointments/product=3 buiten beeld. Het is met de muis niet mogelijk een volgende maand te kiezen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 19: Als de knoppen "Ja" en "Nee" focus krijgen onder "Heeft deze informatie u geholpen?" op pagina https://www.beverwijk.nl/contact-en-openingstijden is dat te zien aan een rand rond de knoppen. Bij de hoog-contrast optie voor toegankelijkheid is de contrastratio van de rand te laag. De binnenkant van de rand is zwart op een zwarte knop en de buitenrand is wit op een witte achtergrond. De contrastratio is 1:1 waar dat dit minimaal 3:1 moet zijn.

Bevinding 20: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% Is op elke pagina bij de hoog-contrast optie voor toegankelijkheid het contrast tussen de zwarte skiplink knoppen tegen de zwarte achtergrond van de waarschuwingsbanner "Ook aanstaande maandag (7 maart) testen we om 12.00 uur de sirene" te laag. De contrastratio is 1:1 waar dat dit minimaal 3:1 moet zijn.

Bevinding 21: Wanneer de knop 'Ga naar stap 2' op pagina https://afspraken.beverwijk.nl/internetappointments/product=3#panel1 focus heeft, is het contrast tussen de focusrand en de knop te laag. De contrastratio tussen de blauwe focusrand (HEX #2E79C6) en de grijze knop (HEX #4F4F4F) is 1,8:1, waar dat minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 22: Wanneer bezoekers op de homepage de tekst- en regelafstand wijzigen naar de waarden zoals omschreven in dit succescriterium, schuiven bij nieuwsartikelen onder 'Het laatste nieuws' de datums en de titels bij lange titels over elkaar heen, waardoor de teksten niet meer goed zichtbaar zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 23: Wanneer bezoekers inzoomen op de pagina (iedere pagina) is de zoekfunctie in de navigatie te openen door te focussen op het vergrootglas-icoon. Wanneer bezoekers met het toetsenbord vervolgens weer verder gaan met de tab-toets, verdwijnt het icoon en is de zoekfunctie niet meer zichtbaar. Dit gebeurt alleen met het toetsenbord.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 24: De video op pagina https://www.beverwijk.nl/lintjes bevat sneltoetsen die de werking van screenreaders kunnen verstoren. In Youtube kan je de sneltoetsen uitschakelen door in de URL van de ingebedde video de parameter 'disablekb=1' toe te voegen.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://www.beverwijk.nl/form/contactformulier/uw-vraag-of-opmerking-0 wordt met <meta http-equiv="refresh"> een refresh geforceerd na een bepaalde tijd, waarna bezoekers worden verwezen naar https://www.beverwijk.nl/form/simform/session-timeout/contactformulier. Wanneer er een tijdslimiet is om een bepaald proces te doorlopen, moeten bezoekers de tijdslimiet kunnen uitzetten, aanpassen (naar minstens 10 keer de tijdslimiet) of verlengen (minstens 10 keer).

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 26: De PDF https://www.beverwijk.nl/_flysystem/media/proces-verbaal-i-4-over-geldigheid-en-nummering-kandidatenlijsten-4-februari-2022.pdf heeft geen titel 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.

Bevinding 27: Er is een titel in de PDF "https://www.beverwijk.nl/_flysystem/media/geldigheid-parkeervergunningen_5.pdf" maar de titel "Memo" beschrijft de inhoud van de PDF "GELDIGHEID PARKEERVERGUNNINGEN 2020" onvoldoende en niet de titel maar de bestandsnaam wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 28: Als een bezoeker naar een nieuwe pagina gaat binnen de site, bijvoorbeeld door in het hoofdmenu naar Actueel/bekendmakingen te gaan, staat de focus niet aan het begin van de pagina. Blinden die met behulp van het toetsenbord navigeren kunnen niet zien waar in de pagina de focus zich bevindt. Zorg dat op een nieuwe pagina de focus altijd aan het begin staat.

Bevinding 29: De knop "Terug naar boven" rechts onderaan elke pagina zorgt er voor dat de pagina naar boven scrolt, maar de focus blijft onder aan de pagina. Zorg er voor dat de focus ook boven aan de pagina staat.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 30: Onder aan elke pagina staat het adres van het gemeentehuis van Beverwijk. Uit de tekst "Stationsplein 48
1948 LC Beverwijk" is niet duidelijk dat dit een link is naar een externe website: Google maps.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 31: De pagina's in de website zijn op meerdere manieren te vinden behalve de pagina www.beverwijk.nl/sitemap. Die kan niet gevonden worden via bijvoorbeeld de zoekfunctie, een navigatiemenu of een link in de footer. Zorg ervoor dat er meer dan één manier is om bij een pagina binnen een verzameling webpagina's te komen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 32: In het formulier op pagina https://www.beverwijk.nl/form/contactformulier/uw-vraag-of-opmerking-0 staat onderaan de 3e stap een knop "Bestand(en) toevoegen". De toegankelijke naam van knop "Bijlage" of "Bestanden kiezen" komt niet overeen met de zichtbare naam van de knop. Hierdoor is onder andere de knop niet of moeilijk te bedienen met spraaksoftware. Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is, liefst vooraan.

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 33: Op pagina https://www.beverwijk.nl/about-beverwijk-and-wijk-aan-zee/ is de taalaanduiding van de hele pagina Nederlands. De pagina is echter in het Engels. Zorg voor de juiste taalcodering in de HTML. Zorg er ook voor dat de navigatie Engelstalig is. Een andere optie is het aangeven van een taalwissel voor enkel de inhoud van de pagina.

Bevinding 34: In de eigenschappen van PDF "https://www.beverwijk.nl/_flysystem/media/proces-verbaal-i-4-over-geldigheid-en-nummering-kandidatenlijsten-4-februari-2022.pdf"is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 35: Op pagina https://www.beverwijk.nl/lintjes staat een iframe. De toegankelijke naam van het iframe is 'Embedded content from Youtube'. Geef hiervoor een taalwissel aan, of geef het iframe een beschrijvende Nederlandse naam.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 36: Op pagina https://afspraken.beverwijk.nl/internetappointments/product=3 kunnen bezoekers een datum kiezen met de kalender, of zelf een datum invullen. Wanneer een datum wordt ingevoerd die niet beschikbaar is, verschijnt de melding 'U heeft nog geen tijd geselecteerd'. Deze melding is niet duidelijk, want er kan geen tijd geselecteerd worden voor een niet-beschikbare dag. Zorg ervoor dat bezoekers weten welke fout zij hebben gemaakt (een niet-beschikbare datum geselecteerd) en hoe zij dit moeten oplossen (succescriterium 3.3.3).

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 37: Het veld E-mailadres op pagina https://www.beverwijk.nl/form/contactformulier/uw-vraag-of-opmerking-0 heeft twee labels. De placeholder is ook aangemerkt als label. Een invoerveld mag niet meerdere labels hebben. Daarnaast verdwijnt een placeholder wanneer bezoekers beginnen met typen. Plaats de instructie daarom boven of onder het veld om het permanent zichtbaar te maken.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 38: Op pagina komen li-elementen voor die niet in een ul- of ol-element staan. Hierdoor hebben de elementen geen semantische waarde.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 39: Onderaan elke pagina staat achter de link "Facebook" een icoon met het aria-label "Externe link" maar geen toegankelijke rol. Geeft de rol "img" om dit probleem op te lossen, of gebruik een andere manier om het tekstalternatief mee te geven. Zie ook succescriterium 1.1.1. Hetzelfde komt vaker voor in de website, bijvoorbeeld op de pagina https://www.beverwijk.nl/gemeenteraadsverkiezing-2022 onder "Handige links"

Bevinding 40: In het hoofdmenu op bijvoorbeeld pagina https://www.beverwijk.nl/contact-en-openingstijden staat onder het menu-item "Contact en openingstijden" een rode streep, om aan te geven bij welk deel van de website de pagina hoort. Deze informatie is niet beschikbaar voor hulpsoftware. Maak gebruik van aria-current of een vergelijkbare techniek om dit probleem op te lossen.

Bevinding 41: Op pagina https://afspraken.beverwijk.nl/internetappointments/product=3 kunnen bezoekers een datum selecteren met de kalender. De beschikbare datums worden echter niet voorgelezen ('leeg') omdat aria-hidden=true is gebruikt op de links in de tabelcellen. Hierdoor is er geen toegankelijke naam beschikbaar en weten bezoekers die gebruik maken van voorleessoftware niet wat zij selecteren en dat zij überhaupt iets kunnen selecteren, omdat zij denken dat de cellen leeg zijn.

Bevinding 42: Op onder andere pagina https://afspraken.beverwijk.nl/internetappointments/product=3 wordt het aria-expanded attribuut gebruikt op verkeerd niveau, namelijk op een child van het daadwerkelijke uitklapbare element (de div die fungeert als knop). Hierdoor wordt de staat niet of niet goed voorgelezen door hulpsoftware. Plaats het attribuut op het juiste niveau.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 43: Wanneer bezoekers bij de derde stap in het formulier op pagina https://afspraken.beverwijk.nl/internetappointments/product=3 een formulierveld niet goed invullen, verschijnt er zonder dat de pagina ververst een foutmelding. Bezoekers die gebruik maken voorleessoftware worden hiervan niet op de hoogte gesteld, bijvoorbeeld door de focus te verplaatsen naar de foutmelding of de foutmelding direct voor te laten lezen.

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-27 11:50:44 v2.4-011