Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website gemeente Apeldoorn

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Gemeente Apeldoorn
Datum 15 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op apeldoorn.nl
  • Alle PDF's op apeldoorn.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 de onderzochte website met een link naar wordt verwezen.
  • Het begrotingsonderdeel, Het raadsinformatiesysteem, Alle overige formulieren en Burgerzaken
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 23

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: Op pagina https://www.apeldoorn.nl/:
Er staat op deze pagina een grote achtergrondafbeelding onder een link zoals “Wat als de regen komt?”. Het tekstalternatief van deze afbeeldingen is niet juist. De witte linktekst moet om te voldoen aan andere succescriteria voldoende zijn om het doel van de link te begrijpen. Hierdoor is het op een volledig toegankelijke versie van deze pagina toegestaan om de afbeeldingen zo op te maken dat zij genegeerd worden door hulpsoftware. Het advies is om deze drie afbeeldingen allemaal een leeg tekstalternatief (alt=””) te geven.

Bevinding 2: Op pagina https://www.apeldoorn.nl/fl-transitievisie-warmte-2021:
De afbeeldingen, logo's, grafieken, kaarten, tabellen en infographics in dit document bevatten informatie, maar hebben geen alt-tekst. Dit komt doordat er geen codelaag (met tags) is.
Hulpsoftware geeft aan dat er een afbeelding is en toont daarbij de alt-tekst.
Afbeeldingen die belangrijke informatie verschaffen hebben altijd een alt-tekst nodig. Zorg daarom dat ze een passende alt-tekst krijgen of als artefact gemarkeerd worden afhankelijk van de vraag of ze informatie geven of niet. Wat het in dit geval doet.
Dit geldt bijvoorbeeld ook voor de afbeeldingen in de jpeg en pdf's op de pagina 'Ondertunneling laan van Osseveld'.

1.2 Op tijd gebaseerde media

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 3: Op pagina https://www.apeldoorn.nl/nieuwbouw-en-ontwikkeling/noordoost-apeldoorn/ondertunneling-laan-van-osseveld:
Er komen in de video logo's en een URL in beeld die niet worden uitgesproken. Dit is te zien aan het begin en einde van de video.
Voor gebruikers met een visuele beperking, zoals blindheid of slechtziendheid, is het van belang dat zij de informatie die in het beeld van een video verschijnt tot zich kunnen nemen.
Voor dit succescriterium op niveau A zijn er twee oplossingen mogelijk: een uitgeschreven tekst met de belangrijke informatie uit de video of audiodescriptie. Dit succescriterium is gerelateerd aan criterium 1.2.5. Het verschil met SC 1.2.5 is dat een uitgeschreven tekst voor SC 1.2.3 ook toegestaan is.
Het advies is om audiodescriptie toe te voegen zodat ook direct aan succescriterium 1.2.5 wordt voldaan.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 4: Op pagina https://www.apeldoorn.nl/nieuwbouw-en-ontwikkeling/noordoost-apeldoorn/ondertunneling-laan-van-osseveld:
Er komen in de video logo's en een URL in beeld die niet worden uitgesproken. Dit is te zien aan het begin en einde van de video.
Voor gebruikers met een visuele beperking, zoals blindheid of slechtziendheid, is het van belang dat zij de informatie die in het beeld van een video verschijnt tot zich kunnen nemen.
Zorg dat de informatie ook wordt uitgesproken, bijvoorbeeld via audiodescriptie.
Dit succescriterium is gerelateerd aan criterium 1.2.3. Het verschil met SC 1.2.3 is dat een uitgeschreven tekst voor SC 1.2.3 ook toegestaan is.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://www.apeldoorn.nl/ staan twee nav-elementen met het aria-label “Artikel slider paginatie”. De eerste is gevuld met de knoppen “Vorige slide” en “Volgende slide”. Het tweede nav-element is voor hulpsoftware helemaal leeg. Hiernaast zijn de links waarnaar de slider verwijst beschikbaar in de code, maar buiten beide nav-elementen. Een blinde gebruiker komt nu eerst de links “Activiteitenoverzicht Inclusie Inclusie | Beleid” tot en met “Zero-emissiezone binnenstad 2030 Binnenstad | Duurzaam” tegen gevolgd door de knop “Volgende slide” in een nav-element dat niet de links die binnen die navigatie horen te staan bevat. De huidige oplossing in de code is erg verwarrend en moet aangepast worden om te voldoen. De informatie en relaties tussen deze verschillende onderdelen is niet duidelijk. Het advies is om geen slides te gebruiken. Het advies is om de zes dingen die spelen in Apeldoorn als links te plaatsen in plaats van als slides. Het is mogelijk om een weergave als deze toegankelijk op te maken, maar daarvoor moet de hele code van deze interface opnieuw worden opgezet. De selectierondjes midden onderin de slider zijn interactief, niet met het toetsenbord te bedienen en bevatten niet de juiste eigenschappen om te voldoen aan de eisen van succescriterium 4.1.2. Een van die onderdelen is visueel anders vormgegeven om aan te geven welke van de zes slides actief is. Voor die visuele informatie is nu bijvoorbeeld ook geen alternatief.

Bevinding 6: Op pagina https://www.apeldoorn.nl/contact:
Op de Contact pagina is de eerste zichtbare kop 'Contact met de gemeente' programmatisch niet opgebouwd als kop. Om te voldoen moet deze tekst een relatie met de onderstaande content krijgen. Het advies is om een koptekst te gebruiken.

Bevinding 7: Op pagina https://www.apeldoorn.nl/fl-transitievisie-warmte-2021:
Deze pdf heeft geen tags in de codelaag.
Hulpsoftware zoals een screenreader heeft een goede codelaag nodig om een gestructureerd document weer te kunnen geven.
Zorg ervoor dat alle onderdelen van het document passende tags krijgen die aansluiten bij de ‘rol’ die deze informatie heeft op de pagina. Bijvoorbeeld een kop op niveau1, een paragraaf, een blockquote, een lijst of een noot. Denk eraan dat de niet zichtbare of decoratieve onderdelen gemarkeerd moeten worden als artefact, zodat ze door de hulpsoftware genegeerd kunnen worden. Dus ook de randen van een tabel of een break-line.
Dit geldt bijvoorbeeld ook voor de jpeg en pdf's op de pagina 'Ondertunneling laan van Osseveld'.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://www.apeldoorn.nl/:
Onder de h2 kop Actueel, staat er een blauw kader met de kop ‘Meer nieuws’. De witte tekst kleur (#FFFFFF) in combinatie met de blauwe achtergrondkleur (#58B3D4) heeft niet genoeg contrast. De contrastverhouding is 2,4:1. De tekst ‘Beleef Apeldoorn’ heeft ook niet voldoende contrast (#82BB92 met #FFFFFF geeft een contrast van 2,2:1). De minimale contrastverhouding voor normale tekst is 4,5:1 en voor grote tekst 3:1. Advies is om het contrast van de tekst te verhogen in verhouding tot de achtergrondkleur. Het is toegestaan om linkteksten een andere kleur te geven als zij focus hebben, maar zorg er dan voor dat het contrast ook nog steeds 4,5:1 of meer is met de witte achtergrond, de links onder de koppen ‘Meer nieuws’ en ‘Beleef Apeldoorn’ voldoen nu niet.

Bevinding 9: Op pagina https://www.apeldoorn.nl/deze-pagina-bestaat-niet:
De knop 'Naar de homepage' heeft een te laag contrast. De oranje (#C95100) tekst tegenover de lichtgrijze (#EBECEC) achtergrond heeft een contrastverhouding van 3,8:1. De minimale contrastverhouding voor normale tekst is 4,5:1. Dit kan voor problemen zorgen bij mensen met een visuele beperking. Verhoog het contrast tussen de tekst en de achtergrond van de knop.
Dit geldt ook voor andere pagina's met deze kleurcombinatie.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://www.apeldoorn.nl/:
Bij het inzoomen naar 200% op de testresolutie van 1280x1024 vallen de witte link op de afbeelding en het blok met de tekst "Waarmee kunnen wij u helpen?" over elkaar heen. Hierdoor is het niet meer mogelijk om de hele linktekst te lezen. Dat is een probleem dat voorkomen moet worden. Let erop dat dit moet werken tot 400% zoom. Het gaat advies is om onderdelen onder elkaar te plaatsen indien er niet genoeg horizontale ruimte is.

Bevinding 11: Op pagina https://www.apeldoorn.nl/contact:
Bij het maximaal inzoomen naar een breedte van 320 CSS-pixels valt de tekst “Contact met de gemeente” achter de witte balk met het logo en het menu erop. Het visueel wegvallen van deze tekst geld als verlies van informatie. Het advies is om de opmaak zo aan te passen dat het blok met de tekst “Contact met de gemeente” ook bij een breedte van 320 CSS-pixels in beeld staat als de pagina geladen wordt. Er moet genoeg ruimte boven dit blok zijn om te voldoen.

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: Op pagina https://www.apeldoorn.nl/:
Hier staat onderin de achtergrondafbeelding een link met het aria-label “Naar inhoud”. Deze ronde link bevat een zwarte V. De indicator van de toetsenbordfocus heeft op deze link niet voldoende contrast. Doordat de grijze cirkel (#646464) op verschillende afbeeldingen staat is het contrast overal anders. Er zijn verschillende waarden gemeten van tussen de 3,0:1 en 1,1:1. Het is nodig dat deze focusindicator op alle afbeeldingen bij alle resoluties een contrast heeft van 3,0:1 of meer. Dit hoeft niet de hele omtrek te zijn, maar wel aan twee zijden aanwezig zijn om visueel duidelijk af te bakenen welk onderdeel op dat moment toetsenbordfocus heeft. Het advies is om deze link bij toetsenbordfocus ondoorzichtig te maken én deze tegelijk te omringen met een zwarte rand.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://www.apeldoorn.nl/wonen-en-leven/zorg-en-ondersteuning:
In vergrote/mobiele weergave verandert het linker submenu `class="split-view_side-inner"`, in een uitklapbaar element. Deze is niet met het toetsenbord te openen (enkel met de muis), de focus komt er niet op. Hiermee gaat het ook fout op 4.1.2 Naam, rol en waarde.
Toetsenbordgebruikers kunnen nu niet in het submenu om een onderwerp te kiezen en missen zo mogelijk informatie.
Advies is om ervoor te zorgen dat de (tab)focus ook naar het uit uitklapbare menu kan gaan. Eenmaal het menu uitgeklapt kun je er wel met het toetsenbord bij. Dit kan door er een `<button>` van te maken, die heeft standaard een toetsenbordfunctionaliteit.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 14: Op pagina https://www.apeldoorn.nl/mijn-apeldoorn:
Op de pagina 'Mijn Apeldoorn' staan er diverse linkknoppen met dezelfde naam "Inloggen", maar niet met hetzelfde linkdoel. Deze zijn niet beschrijvend genoeg, waardoor het onmogelijk is om het doel van deze links te bepalen.
Links waarvan het doel niet duidelijk is maken de webpagina voor veel verschillende mensen ontoegankelijk(er). Denk hierbij aan mensen die blind zijn, mensen met een visuele beperking, mensen die met stembediening moeten werken of mensen met een cognitieve beperking. Zij missen vaak de context waaruit duidelijker wordt waar de link naar toe gaat. Ook voor screenreadergebruikers kan dit verwarrend zijn, omdat zij vaak navigeren aan de hand van een linklijst.
Advies is om deze namen aan te vullen zodat ze beschrijvend zijn. Dit kan eventueel met een verborgen tekst of met een aria-label zoals is toegepast op pagina https://www.apeldoorn.nl/wonen-en-leven/zorg-en-ondersteuning.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 15: Op pagina https://www.apeldoorn.nl/:
In de footer staat de `<h4>` linkkop "Contactformulier", de content die eronder valt heeft niets met de kop te maken als formulier, het is namelijk een telefoonnummer-link.
Duidelijke koppen (en labels) zijn essentieel om de content (snel) te kunnen begrijpen. Blinde bezoekers kunnen bijvoorbeeld met hun voorleessoftware een overzicht opvragen van alle koppen op de pagina en op die manier snel een beeld krijgen van de pagina-inhoud.
Advies is om de link 'Contactformulier' geen kopniveau te geven en gewoon als lijstitem onder de kop 'Contact' te laten net als het telefoonnummer.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://www.apeldoorn.nl/:
In normale weergave sluit het hamburgermenu zichzelf als je doortabt, maar op vergrote weergave 400% niet, dan blijft hij openstaan en zie je niet goed meer waar je bent. De enige manier om het hamburgermenu te sluiten is om helemaal terug te tabben. Het menu neemt meer dan de helft van het scherm in beslag, samen met de survey widget. Hierdoor is het lastig om de focus te kunnen zien.
Dit is van belang voor mensen die het toetsenbord gebruiken om een webpagina te bedienen, bijvoorbeeld mensen met een motorische beperking. Zij moeten kunnen zien waar de focus op de pagina is, zonder een zichtbare focus is navigeren erg lastig.
Advies is om ervoor te zorgen dat de focus aan het einde van het menu terug gaat naar de sluitknop of de mogelijkheid om met de esc toets het hamburgermenu te kunnen sluiten.
In deze situatie komt de toetsenbordfocus ook eenmaal onzichtbaar op de link die verborgen zit achter het blok “Waarmee kunnen wij u helpen?”.

Bevinding 17: Op pagina https://www.apeldoorn.nl/ is de toetsenbordfocus in het opengeklapte hoofdmenu meerdere keren niet zichtbaar. De focus is niet zichtbaar op de links van het type “Wonen & leven”. Om het voor gebruikers met een motorische beperking mogelijk te maken om door deze website te navigeren moet de positie van de toetsenbordfocus altijd te bepalen zijn met visuele informatie.

Bevinding 18: Op pagina https://www.apeldoorn.nl/ is de toetsenbordfocus onder de kop “Ontdek Apeldoorn” meerdere keren niet zichtbaar.

Bevinding 19: Op pagina https://www.apeldoorn.nl/:
Wanneer je iets in het zoekveld intypt, verschijnt er een suggestielijst. Deze blijft uitgeklapt als je doortabt, vervolgens gaat de focus achter de lijst door naar de acht tags die onder het zoekveld staan. Dit kan erg storend zijn voor toetsenbordgebruikers. Als het zoekveld de juiste rol krijgt, in dit geval `role="combobox"` en de bijbehorende kenmerken worden geïmplementeerd, dan veranderd ook het toetsenbord gedrag en kun je de suggestielijst makkelijk sluiten met de escape-toets. Zo is er ook geen probleem meer met de focus zichtbaarheid.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Voldoende

Bevinding 20: Advies: Op pagina https://www.apeldoorn.nl/home/contact-stuur-een-bericht:
Wanneer je geen selectie maakt uit de keuzelijst onder de kop 'Ik wil contact over' en je klikt op 'verder', dan verspringt de focus helemaal terug naar de header.
Dit kan voor verwarring zorgen bij mensen met een visuele beperking en toetsenbordgebruikers.
Advies is om ervoor te zorgen dat de focus terug gaat naar de lijst en dat er een foutmelding/statusbericht bovenaan komt te staan zodat het voor gebruikers duidelijk is dat ze nog geen keuze hebben gemaakt en dat moeten doen om verder te kunnen gaan. Zorg er wel voor dat deze melding wordt opgepikt door screenreadergebruikers.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 21: Op pagina https://www.apeldoorn.nl/:
Wanneer je iets in het zoekveld typt, kan er informatie onderaan het veld uitklappen met suggesties. Deze suggestielijst is visueel zichtbaar, maar programmatisch wordt dit niet overgebracht.
Gebruikers van hulpsoftware, zoals een screenreader worden nu niet op de hoogte gesteld van het feit dat er een suggestielijst uitklapt.
Advies is om de combobox goed op te maken in de code. Het is de bedoeling dat het attribuut aria-expanded de waarde “false” heeft als er geen suggesties in beeld staan. Bij het gebruik van role=”combobox” moet de juiste code gebruikt worden. Op pagina https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role staat meer informatie over het gebruik van deze complexe ARIA oplossing. Het gebruik van aria-controls en aria-activedescendant is in deze vorm van een combobox vereist. Ook moet de bediening aangepast worden zodat het na het typen mogelijk is om een optie te selecteren met pijl omlaag en omhoog. Het feit dat hiervoor nu de tabtoets gebruikt moet worden is niet de bedoeling van een invoerveld met suggesties.

Bevinding 22: Op pagina https://www.apeldoorn.nl/wonen-en-leven/zorg-en-ondersteuning:
In vergrote/mobiele weergave verandert het linker submenu `class="split-view_side-inner"`, in een uitklapbaar `<nav>`element. Deze heeft niet de juiste naam en rol en geeft niet de juiste toestand (ingeklapt of uitgeklapt) aan. Er is met JavaScript wel interactief gemaakt, maar niet bedienbaar voor enkel het toetsenbord. Doordat de onderdelen in deze interactieve nav werken als links is het advies om een uitklapbare knop in plaats van een interactief nav-element te gebruiken.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 23: Op pagina https://www.apeldoorn.nl/home/zoekresultaten?q=formulier:
Bovenaan de zoekresultatenpagina staat een statusbericht "75 resultaten".
Dit statusbericht wordt nu niet opgepikt door hulpsoftware.
Voor screenreadergebruikers is het belangrijk dat ze deze statusberichten ook te horen krijgen.
Advies is in het geval van het statusbericht om een `role="status"` toe te voegen.

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: 2025-01-30 06:58:55 v2.4-011