Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Zwolle Jaarverslag 2022

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Zwolle Jaarverslag 2022
Datum 19 januari 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op zwolle.jaarverslag-2022.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle pagina's achter een inlogbereik.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 29

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 link naar het Planning & Control portal van de Gemeente Zwolle rechtsboven iedere pagina bevat een icoontje dat visueel aangeeft dat dit een pagina op een andere website opent. Het icoon is echter in de CSS geplaatst, waardoor het niet zichtbaar is voor bezoekers die ten behoeve van de toegankelijkheid de CSS uitzetten of hun eigen stylesheet inladen. Plaats het icoontje direct in de HTML.

Bevinding 2: Op pagina https://zwolle.jaarverslag-2022.nl/p41047/doelenboom staan links naar andere delen van de website, met arceerde pijlen aangegeven. Deze pijlen zijn middels CSS op de pagina geplaatst, hetgeen betekent dat ze niet zichtbaar zijn indien een bezoeker de CSS uitzet. Personen die CSS uitzetten of hun eigen stylesheet laden ten behoeve van de leesbaarheid, kunnen hierdoor vitale informatie niet tot zich nemen. Los dit op door bijvoorbeeld de pijlen als afbeeldingen of iconen in de HTML te plaatsen.

Bevinding 3: Op pagina https://zwolle.jaarverslag-2022.nl/404 staat een afbeelding van de nummers 404 met een persoon erop. Mocht dit decoratief bedoeld zijn, hoeft het geen alternatieve tekst te bevatten. Het moet echter wel een leeg alt element hebben zodat schermleessoftware de afbeelding goed kan negeren.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: Op pagina https://zwolle.jaarverslag-2022.nl/p40996/algemene-beschouwing zijn er koppen, die middels het em-element gestyled worden. Een voorbeeld is de kop “Gevolgen toenemende inflatie en kostenstijgingen / oorlog in Oekraïne”. Het em-element wordt gebruikt om intonatie te geven aan individuele woorden en dient niet gebruikt te worden voor teksten, gebruik hiervoor mogelijkheden in CSS indien schuingedrukte tekst gewenst is. Gebruik ook een logische koppenstructuur voor gebruikers van schermleessoftware, die middels een koppenlijst door een pagina navigeren. Dit probleem doet zich meermalig voor op de website, bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p40998/beleidsparagraaf-investeringen

Bevinding 5: [Op pagina https://zwolle.jaarverslag-2022.nl/p40996/algemene-beschouwing wordt data gepresenteerd middels een tabel. Visueel zijn er koppen, die middels het em-element gestyled worden. Een voorbeeld is de kop "Programma 1. Samenleving". In dit geval is het element gebruikt maar vervolgens vormt CSS styling het om het tot vette tekst. Het gebruik van het em-element is in deze context dus overbodig, gezien het bedoeld is voor cursieve tekst. Het em-element wordt gebruikt om intonatie te geven aan individuele woorden en dient niet gebruikt te worden voor teksten. Verwijder hier het em-element. Dit probleem doet zich meermalig voor op de website, bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p40997/kerngegevens.

Bevinding 6: Op pagina https://zwolle.jaarverslag-2022.nl/p40996/algemene-beschouwing wordt data gepresenteerd middels een tabel. Er zijn hier visueel kopcellen die als datacellen opgemaakt zijn. Een voorbeeld is de cel "voordelig". Dit is een kopcel daar er de data "812.000" naar correspondeert. Gebruik th-elementen om kopcellen mee op te maken.

Bevinding 7: Op pagina https://zwolle.jaarverslag-2022.nl/404 wordt zijn de teksten "Oeps! De door u gevraagde pagina bestaat niet" en "U heeft het adres verkeerd getypt of de pagina is mogelijk verplaatst" opgemaakt als kopteksten van niveau 2 en niveau 3 respectievelijk.De tekst ‘U heeft het adres verkeerd getyped of de pagina is mogelijk verplaatst.’ is echter geen kop. Gebruik styling in CSS gebruiken om hetzelfde resultaat te bereiken. Gebruikers van schermleessoftware vragen de koppenstructuur op om efficiënt door pagina’s te navigeren, overvloedig gebruik doet af aan dit doel.

Bevinding 8: Op pagina https://zwolle.jaarverslag-2022.nl/p41092/doel-4-3-2-schulddienstverlening staan tabellen bestaande uit een enkele cel, bijvoorbeeld "We lossen de problematische schulden op of maken de problematische schulden voor inwoners beheersbaar". Gebruik geen tabelstructuur indien dit slechts voor de opmaak is bedoeld, of maak gebruik van role="presentation" zodat er geen onnodige aankondigingen van schermleessoftware voorkomen.

Bevinding 9: Op onder andere pagina https://zwolle.jaarverslag-2022.nl/p40996/algemene-beschouwing komt een zij-menu voor. Het is voor ziende gebruikers duidelijk welk item actief is, omdat deze anders is gestyled. Zorg ervoor dat deze informatie ook duidelijk is voor bezoekers die het scherm niet kunnen zien, door bijvoorbeeld aria-current te gebruiken.

Bevinding 10: Advies: Op pagina https://zwolle.jaarverslag-2022.nl/p40996/algemene-beschouwing komen koppen voor, zoals de teksten 'Vluchtelingen' en 'Wonen'. Deze teksten dienen als kop voor de onderstaande tekst (ze staan boven de paragraaf en zeggen iets over de inhoud), maar zijn niet als echte koptekst (met een h-element) opgemaakt. Maak deze teksten op met een h-element, bijvoorbeeld met het h2-element, om deze pagina toegankelijker te maken.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://zwolle.jaarverslag-2022.nl/p41031/woonlasten staat een staafdiagram. De legenda en corresponderende niveaus worden slechts middels kleur aan de lezer overgedragen. Kleurenblinde bezoekers zullen de informatie over de lastendruk op deze pagina dus nauwelijks of niet meekrijgen.

Bevinding 12: De tweede en derde grafiek op pagina https://zwolle.jaarverslag-2022.nl/p41069/balansontwikkeling tonen informatie in taartdiagrammen. De taart, de legenda alsmede de percentages worden middels kleur getoond. Hierdoor is de getoonde informatie nauwelijks of niet voor kleurenblinden beschikbaar. Gebruik een andere styling om deze informatie weer te geven, een makkelijk alternatief zou zijn om bijvoorbeeld de percentages toe te voegen aan de legenda en ze tevens in het zwart bij de taartdiagrammen te plaatsen.

Bevinding 13: Advies: De eerste grafiek op pagina https://zwolle.jaarverslag-2022.nl/p41069/balansontwikkeling toont de balansontwikkeling uitsluitend middels een lichtblauwe kleur. Deze informatie wordt tevens in een tabel weergegeven. Strikt gezien wordt middels dit alternatief voldaan aan de eisen van 1.4.1. Advies zou zijn om af te zien van het kleurgebruik dan wel op een andere wijze de grafiek op te maken, waardoor het ook kleurenblinde bezoekers zou dienen.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende

Bevinding 14: Advies: Op pagina https://zwolle.jaarverslag-2022.nl/p41031/woonlasten komt een afbeelding voor van een grafiek. De informatie uit deze grafiek is alleen als tekst in de afbeelding beschikbaar, niet als platte tekst op de pagina. De afbeelding heeft een korte beschrijving, maar hierin wordt niet de informatie die de grafiek biedt beschreven. Overweeg deze informatie daarom ook op een andere manier te tonen, bijvoorbeeld in een tabel.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 15: Bij herschalen van de pagina tot de voor dit criterium gestelde waarden op 400% vergroting, staat na het uitklappen van het hoofdmenu de button “Portal” over het menu heen. Bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p41031/woonlasten. Hierdoor zijn de menuitems niet goed leesbaar. Pas de plaatsing van de button aan.

Bevinding 16: Bij herschalen van de pagina tot de voor dit criterium gestelde waarden op 400% vergroting de placeholdertekst van het zoekveld niet geheel leesbaar: men kan slechts “Vul hie” zien. Bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p41130/doel-8-1-2-college.Tekst hoeft maar tot 200% mee te schalen. Daarnaast kan het invoerveld zelf vergroot worden, en/of de tekst ingekort.

Bevinding 17: Bij herschalen van de pagina tot de voor dit criterium gestelde waarden, valt vanaf 170% vergroting de inlogbanner over de paginatitels onder "vorige" en "volgende" onderaan pagina's heen. Bijvoorbeeld de teksten "SISA-bijlage" en "Controleverklaring en accountantsverslag" op pagina https://zwolle.jaarverslag-2022.nl/p40992/raadvoorstel-en-raadsbesluit. Zorg dat de banner op een dusdanige manier meeschaalt, dat het de onderstaande informatie niet in de weg zit.

Bevinding 18: Wanneer een bezoeker inzoomt op de pagina, moet de bezoeker eerst de pagina refreshen voor interactieve elementen bedienbaar zijn met de muis en het toetsenbord. Zorg ervoor dat bezoekers zonder refreshen van 100% tot 400% kunnen zoomen bij schermweergave 1280 bij 1024. Daarnaast worden items, zoals het mobiele menu, op basis van zoom verborgen of getoond. Omdat wijzigingen alleen bij refresh worden gegaan, blijven sommige items beschikbaar of juist verborgen terwijl ze dat niet zouden moeten zijn.

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: Op pagina https://zwolle.jaarverslag-2022.nl/p41069/balansontwikkeling staan twee taartdiagrammen. Er worden diverse kleuren gebruikt om informatie aan de bezoeker te weerleggen. Meerdere kleuren voldoen niet aan de contrasteis van dit criterium. Zo is bijvoorbeeld de contrastratio voor de lichtblauwe kleur (HEX #B2DBE6) in de eerste diagram 1,5:1 en voor de groene kleur (HEX #6BB76D) in het tweede diagram 2,4:1. Hier moet een minimaal contrast van 3:1 gehanteerd worden. Kies voor een kleurenpalet dat aan de standaarden voldoet.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 20: De foutpagina https://zwolle.jaarverslag-2022.nl/404 heeft dezelfde titel als de hoofdpagina: Home | Jaarstukken 2022. Zorg voor een alternatief dat de pagina omschrijft.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 21: Op onder andere pagina https://zwolle.jaarverslag-2022.nl/ krijgt na het navigatiemenu, eerst de body van de pagina in zijn geheel toetsenbordfocus, voor de focus verder gaat naar individuele elementen. Verwijder deze stap uit de focus volgorde. Dit komt ook voor na de zij-menu's, bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p40995/beleidscyclus.

Bevinding 22: Advies: Bij mobiele weergave in landscapemodus, zijn uitklapmenu's in de algemene navigatiebalk tot een enkele samengevoegd. Indien met dit menu opent, staan de keuzes over de pagina heen. Indien toetsenbordgebruikers met de tabtoets door dit menu navigeren, gaat de focus erna door op de achterliggende pagina. Advies zou zijn om als laatst de focus te brengen op de sluitknop, om verwarring te voorkomen.

Bevinding 23: Advies: De focusvolgorde in het navigatiemenu volgt niet de visuele volgorde. Overweeg dit aan te passen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

Bevinding 24: Advies: Men kan op de website na de hoofdcontent naar de vorige en volgende pagina navigeren middels links, bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p40992/raadvoorstel-en-raadsbesluit. De naam van de betreffende pagina wordt hier tweemaal voorgelezen, bijvoorbeeld "Controleverklaring en accountantsverslag" gevolgd door "ga naar Controleverklaring en accountantsverslag", omdat hulpsoftware zowel het title-attribuut als de tekst die genest is binnen het element voorleest. Dit is overbodig voor personen die afhankelijk zijn van schermleessoftware. Een vergelijkbaar probleem doet zich meermaals voor op pagina https://zwolle.jaarverslag-2022.nl/p41047/doelenboom. Een oplossing zou zijn om in plaats van de laatstgenoemde tekst “volgende” en de naam van het artikel voor te lezen, wat ook visueel op de pagina staat is. Dat maakt de links ook beter bedienbaar voor bezoekers die gebruik maken van spraakgestuurde navigatie.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 25: De link naar de homepage linksboven iedere pagina heet visueel “thuis”. Voor gebruikers van spraakhulpsoftware die middels auditieve commando’s door de website navigeren, komt deze naam niet in de linklijst voor. De alternatieve tekst is “Logo van Gemeente Zwolle” en het title-element betreft “Ga naar de startpagina van het Jaarverslag 2022”. Zorg dat het woord thuis ook voorkomt in de toegankelijke naam, het liefst vooraan.

Bevinding 26: Onderaan iedere pagina staat visueel een link 'Inloggen'. De toegankelijke naam is 'Login notitieservice'. Zorg ervoor dat de visuele naam tenminste voorkomt in de toegankelijke naam, het liefst vooraan.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 27: In de algemene header kan met middels pijlknoppen naar eerdere of latere pagina's navigeren, bijvoorbeeld op pagina https://zwolle.jaarverslag-2022.nl/p40995/beleidscyclus. Tussen de knoppen staat een invoerveld met een paginanummer. Men kan hier een nummer invoeren en wordt zo naar de corresponderende pagina geleid. Dit veld heeft geen zichtbare instructie. Zorg voor duidelijke instructies in het label, bijvoorbeeld "voer een paginanummer in".

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 28: In de algemene header staat een invoerveld met een paginanummer. Met kan hier een nummer invoeren en wordt zo naar de corresponderende pagina geleid. Dit veld heeft een verkeerde aria-rol. Het betreft een invoerveld, maar het is role="navigation" gegeven. Gebruikers van schermleessoftware worden niet attent gemaakt dat hier een paginanummer ingevoerd kan worden.

Bevinding 29: Componenten in de algemene navigatiebalk zijn middels het <nav> element weergegeven. Dit zorgt ervoor dat schermleessoftware specifiek aan de bezoeker duidelijk maakt dat het een navigatieitem betreft. Wanneer de bezoeker inzoomt, krijgt het nav-element het attribuut aria-hidden, terwijl de elementen in het menu nog wel bereikbaar en bedienbaar zijn. Dit kan toegankelijkheidsproblemen veroorzaken voor bezoekers die gebruik maken van onder andere voorleessoftware. Verberg nooit het parent-element van interactieve items. Daarnaast is het voor bezoekers die gebruik maken van voorleessoftware ook prettig om te weten dat het om een navigatie menu gaat.

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-04-12 03:18:33 v2.4-011