Rapport:
Audit digitale toegankelijkheid website zwolle.nl

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina www.zwolle.nl/ staat de link 'Energietoeslag'. In deze link staat een icoon (svg-afbeelding) die via het title-element de alternatieve tekst 'energie-toeslag icon' heeft gekregen. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen twee keer dezelfde informatie voorgelezen. Omdat de link een toegankelijke tekst bevat die het linkdoel beschrijft en het icoon geen aanvullende informatie bevat, kan het icoon als decoratief worden beschouwd. Verberg deze voor hulpsoftware door het title-element te verwijderen en aan het svg-element het attribuut 'aria-hidden="true"' toe te voegen. Een soortgelijk probleem met dezelfde oplossing komt voor bij andere links die in deze lijst staan. Bijvoorbeeld 'Paspoort, rijbewijs en uittreksel' met als titel van de svg-afbeelding 'paspoort icon', en de link 'Maak een afspraak' met als titel van de svg-afbeelding 'kalender icon' (hierbij komt geen dubbele informatie voor maar geeft de alternatieve tekst geen informatie over het linkdoel die nog niet uit de linktekst naar voren is gekomen). Een soortgelijk probleem komt ook voor op pagina www.zwolle.nl/organisatie, bijvoorbeeld bij het icoon 'hamer icon' dat in de link 'Gemeenteraad' staat.

Op pagina www.zwolle.nl/contact staat in de h1-kop 'Contact' een svg-afbeelding die als titel 'praatwolk icon' heeft. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader horen daardoor 'praatwolk icon Contact' als zij bij deze kop aankomen. Deze informatie kan verwarrend werken. Omdat het icoon decoratief is, kan deze worden verborgen voor hulpsoftware door het title-element te verwijderen en aan het svg-element het attribuut 'aria-hidden="true"' toe te voegen. Hetzelfde komt voor bij de h2-koppen, bijvoorbeeld de kop 'Afspraak maken' die een svg-afbeelding met als titel 'kalender icon' heeft. Ook op andere pagina's komt dit voor, bijvoorbeeld op pagina www.zwolle.nl/welkom-in-zwolle bij de h1-kop 'Welkom in Zwolle' die een svg-afbeelding met de titel 'peperbus icon' , en op pagina www.zwolle.nl/en/visit-us bij de h1-kop 'Visit us' met daarin de svg-afbeelding met de titel 'locatie icon'. Op pagina www.zwolle.nl/vacatures komt dit ook bij de koppen op kopniveau h2 voor, bijvoorbeeld de kop 'Milieuplanoloog' met daarin een svg-afbeelding met de titel 'agenda-potlood icon'.

Onder het menu op pagina www.zwolle.nl/welkom-in-zwolle is een afbeelding te zien op de achtergrond van de zoekfunctie. Deze afbeelding heeft via het alt-attribuut de alternatieve tekst 'Wonen en leven' gekregen. Deze tekst omschrijft niet wat er op de afbeelding te zien is. Bij een decoratieve afbeelding is het niet nodig om de afbeelding een alternatieve tekst te geven, maar wanneer er een alternatieve tekst is moet deze wel de afbeelding omschrijven. Los dit probleem bijvoorbeeld op door de decoratieve afbeelding te verbergen voor hulpsoftware met een leeg alt-attribuut. Een soortgelijk probleem komt voor op pagina www.zwolle.nl/natuur-en-milieueducatie-nme, waar de afbeelding in de header de alternatieve tekst 'Natuureducatie, beeld van IVN' heeft. En op pagina www.zwolle.nl/organisatie met in de header de afbeelding 'Organisatie'.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staan onder de kop 'Natuur- en Milieueducatie (NME)' koppen met links waar afbeeldingen bij staan. Deze afbeeldingen hebben een alternatieve tekst die niet goed beschrijft wat op de afbeelding te zien is. Bijvoorbeeld de afbeelding met de alternatieve tekst 'ROVA groentour', de afbeelding 'Dieren' en de afbeelding 'Natuur en omgeving'. Vervang de tekst in het alt-attribuut door een tekst die beschrijft wat op de afbeelding te zien is, of (als de afbeelding als decoratief wordt gezien) verberg de afbeelding voor hulpsoftware met een leeg alt-attribuut.

Advies: Op onder andere de homepagina www.zwolle.nl/ staan bij de menu-items 'Mijn loket' en 'Archief' svg-iconen. Deze hebben op correcte wijze de alternatieve tekst 'externe-link-icoon' gekregen. In een alternatieve tekst van een icoon is het echter niet nodig om te vermelden dat het om een icoon gaat, een beschrijving van de informatie die het icoon overbrengt is voldoende.

Advies: Op de homepagina www.zwolle.nl/ staat bij de kop 'Laat je mening horen' een afbeelding die een alternatieve tekst heeft die begint met 'Afbeelding van een grote markeerstift op de Melkmarkt..'. Omdat hulpsoftware dit al als afbeelding herkent (en het als als zodanig voorleest) is het dubbele informatie als de alternatieve tekst 'Afbeelding van' bevat. Het is niet noodzakelijk om dit te benoemen en het maakt de alternatieve tekst onnodig lang. Een soortgelijk probleem komt voor bij de achtergrondafbeelding in de header van pagina www.zwolle.nl/meedenken-en-meedoen, waarbij de alternatieve tekst begint met 'Foto van'.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/welkom-in-zwolle staat de video 'Gemeente Zwolle - Boodschap aan nieuwe inwoners'. Hierin is in de eerste seconden de naam en functie van de spreker in beeld te zien, 'Peter Snijders Burgemeester Zwolle'. De spreker stelt zichzelf niet voor in de video, dus deze tekst wordt niet uitgesproken en ondertiteld. Audiodescriptie of een media-alternatief waarin deze informatie beschreven wordt, ontbreekt bij de video. Daardoor is de informatie niet beschikbaar voor bezoekers die niet kunnen zien. De naam en functie van de spreker staan wel in de tekst die boven de video staat, maar dit is niet voldoende, deze tekst wordt niet voorgelezen als bezoekers via de tabtoets direct naar de video navigeren. Zet de informatie in een transcript om te voldoen aan dit succescriterium. Of maak gebruik van een extra audiospoor om ook te voldoen aan succescriterium 1.2.5.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/welkom-in-zwolle staat de video 'Gemeente Zwolle - Boodschap aan nieuwe inwoners'. Bij deze video ontbreekt audiodescriptie, waardoor de naam en functie van de spreker (die in de eerste seconden van de video in beeld zijn), niet beschikbaar is voor bezoekers die niet kunnen zien. Audiodescriptie is een (extra) audiospoor waarin verteld wordt wat er in beeld te zien is. Voeg een extra audiospoor toe waarin audiodescriptie te horen is.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina www.zwolle.nl/ staan links waarin een kop op kopniveau h2 staat, bijvoorbeeld 'Energietoeslag'. Deze kop bevat geen content omdat de tekst in het p-element (dat onder de kop staat in de link) zowel visueel als voor hulpsoftware is verborgen. Hierdoor wordt de h2-kop direct opgevolgd wordt door een link met daarin een kop op hetzelfde kopniveau. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het mogelijk om te navigeren via de koppenstructuur, daarom is het belangrijk dat koppen content bevatten die door deze koppen beschreven wordt. Omdat dat hier niet het geval is en de linktekst niet de functie van een kop heeft, is het beter om de tekst in de link ('Energietoeslag') niet op te maken als kop, maar als gewone linktekst. Dit geldt voor alle links in de lijst waarvan het eerste item 'Energietoeslag' is, en alle links in de lijst waarvan het eerste item 'Gladheidsbestrijding' is. Een soortgelijk probleem komt voor op pagina www.zwolle.nl/organisatie, bijvoorbeeld bij de koptekst in de link 'Gemeenteraad' en onder 'Organisatie' bij bijvoorbeeld 'Gemeentelijke organisatie'.

Op pagina www.zwolle.nl/energietoeslag staan onder de kop 'Bewijsstukken toevoegen' verschillende subkoppen, bijvoorbeeld 'Identiteitsbewijs'. Deze kop is visueel herkenbaar gemaakt als kop doormiddel van de styling. De gewone tekst (<p>) is dikgedrukt gemaakt (<strong>). Dit maakt de tekst echter niet herkenbaar als kop voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. Los dit op door bijvoorbeeld gebruik te maken van het h4-element, en voor de styling gebruik te maken van de eigenschappen van CSS. Een soortgelijk probleem komt voor op pagina www.zwolle.nl/omgevingsvergunning-voor-monumenten bij de visuele kop 'Overige regelgeving:', maak deze bijvoorbeeld op met het h3-element.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart waarin een lijst van verschillende onderwerpen te zien is. Deze bevatten een koptekst, afbeelding en gewone tekst die linkt naar het onderwerp. Meerdere koppen hebben dezelfde tekst, bijvoorbeeld 'Afval en kringloop' of 'Dieren'. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het mogelijk om de koppenstructuur op te vragen en op die manier te navigeren. Omdat al deze koppen in de koppenstructuur staan is de structuur van de pagina hierdoor mogelijk onduidelijk. De koppen hebben niet de functie van een kop, maar vertellen de bezoeker bij welke NME-activiteit het onderwerp hoort. Een mogelijke oplossing zou zijn dat de teksten niet als kop opgemaakt worden maar als gewone tekst, en dat voor de styling gebruik gemaakt wordt van de eigenschappen van CSS. Zie succescriterium 2.4.6.

Op pagina www.zwolle.nl/zoekresultaten staat onder 'Filter' een lijst met één item, dit lijst-item bevat het label 'Bron' en drie keuzerondjes. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader kan het verwarrend werken dat hier wordt voorgelezen dat hier een lijst met één item staat, omdat het hier niet om een opsomming gaat. Zorg ervoor dat het label en de keuzerondjes niet binnen een lijst zijn opgemaakt, maar plaats deze zonder ul- en li-element.

De PDF krekenbuurt.nl/wp-content/uploads/2017/12/Handreiking-krekenbuurt-20171211.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen door hulpsoftware. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, wat de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Advies: Op pagina www.zwolle.nl/en/visit-us staan meerdere tabellen waarin de laatste rij lege datacellen bevat. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader kan het onduidelijk zijn dat de cel wel wordt voorgelezen, maar dat zich hier geen data in bevindt. Voeg een label aan de lege datacellen toe waaruit af te leiden is dat er geen data in de cel staat, of verwijder de rij met lege datacellen uit de tabellen.

Advies: Op alle pagina's zijn de koppen in de footer (met uitzondering van 'Wij zijn bereikbaar via') opgemaakt op kopniveau h3. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader en die de koppenstructuur opvragen om op die manier te navigeren, lijkt het daardoor alsof deze koppen onder de laatste h2-kop (die in de content van de pagina staat) vallen. Op de homepagina www.zwolle.nl/ is dat 'Agenda'. Dat klopt niet. Dit wordt niet afgekeurd op toegankelijkheid omdat de footer correct is opgemaakt en het voor de bezoeker daaruit duidelijk wordt dat de h3-koppen bij de footer horen. Toch is de structuur van de pagina duidelijker voor bezoekers die via de koppenstructuur navigeren, als deze correct is opgemaakt. Los dit bijvoorbeeld op door de koppen die in de footer staan allemaal op te maken op kopniveau h2.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin is onder 'NME-activiteit' een legenda te zien waarop bij alle activiteiten een kleur staat, de bezoeker kan door deze kleuren op de kaart op te zoeken zien welke activiteit zich op welke locatie bevindt. Voor bezoekers die een slechtziend of kleurenblind zijn, is deze informatie mogelijk niet af te leiden. Zorg ervoor dat informatie niet alleen doormiddel van kleurgebruik wordt overgebracht, maar dat de informatie ook op andere wijze af te leiden is (bijvoorbeeld door de vorm).

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina www.zwolle.nl/ staat onder 'Nieuws' een afbeelding waarop een datum en een link ('Wat de gemeenteraad besprak op 26 februari, 4 en 11 maart 2024') staat. Als bezoekers de pagina op een kleiner scherm bekijken of inzoomen, kan de witte tekst op een lichtgekleurd deel van de afbeelding vallen. Hierdoor ontstaat op verschillende punten een te laag contrast. Als de datum (klein lettertype) bijvoorbeeld op de lichtblauwe (HEX #E0EDEF) kleur valt is de contrastverhouding 1.2:1, waar deze minimaal 4.5:1 moet zijn. Als de linktekst (groot lettertype) bijvoorbeeld op de lichtgele (HEX #FEECD2) valt is de contrastverhouding 1.1:1 waar deze minimaal 3:1 moet zijn. Zorg dat de datum en linktekst altijd (ook bij inzoomen of op een kleiner scherm) op een achtergrondkleur valt waarmee voldoende kleurcontrast is.

Op pagina www.zwolle.nl/zoekresultaten staat onder 'Filter' een lijstje met keuzerondjes met filter-opties. Hierboven staat de tekst 'Bron' in een blauw (HEX #476DB7) lettertype op een lichtblauwe (HEX #D9E1EA) achtergrond. Het contrast is te laag, waardoor de tekst voor sommige bezoekers niet goed te zien is. De contrastverhouding is 3.8:1 waar deze minimaal 4.5:1 moet zijn.

In het PDF document krekenbuurt.nl/wp-content/uploads/2017/12/Handreiking-krekenbuurt-20171211.pdf is bijvoorbeeld op de voorpagina en het achter blad het contrast tussen de witte tekst op groene achtergrond (HEX #A6CE39) te laag. Voor titels moet de contrastverhouding minstens 3:1 zijn en voor gewone tekst minstens 4,5:1 terwijl hier de contradtverhouding 1,8:1 is. De zelfde kleur groene tekst op witte achtergrond onder andere op pagina 3 heeft de zelfde contrastverhouding, terwijl de groene tekst op licht groene achtergrond (HEX #F2F8E1) een contrastverhouding van 1,7:1 heeft.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/arbeidsvoorwaarden staat een afbeelding waarop tekst te lezen is. De alternatieve tekst van de afbeelding is 'Een greep uit de arbeidsvoorwaarden waarin Zwolle uitblinkt. Deze en de andere arbeidsvoorwaarden staan vermeld op deze pagina'. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader kunnen als zij deze tekst voorgelezen krijgen denken dat alle informatie die op de afbeelding te lezen is, ook elders op de pagina staat. Dit klopt niet. Hierdoor is voor hen bepaalde informatie niet beschikbaar (bijvoorbeeld de informatie over 'Zwolle Academie' en 'Blik' onder 'Groei & Ontwikkeling'). Ook voor bezoekers die slechtziend zijn is de tekst mogelijk niet beschikbaar, omdat deze niet goed in te zoomen of aan te passen is. Zorg ervoor dat de tekst op andere wijze beschikbaar is, bijvoorbeeld door deze in HTML als gewone tekst op de pagina te plaatsen.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina www.zwolle.nl/ staat onder 'Nieuws' een datum op de afbeelding ('05 februari 2024'). Als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt tot 300%, valt deze buiten de afbeelding. De datum staat dan op een lichtgrijze (HEX #EEEEEE) achtergrond die onvoldoende contrast met het witte lettertype heeft. Daardoor is de datum voor sommige bezoekers niet meer goed leesbaar. De contrastverhouding is 1.1:1 waar deze minimaal 4.5:1 moet zijn. Als de bezoeker verder inzoomt naar 400% valt de datum op een witte achtergrond en is hiermee helemaal onzichtbaar. Ook de linktekst ('Wat de gemeenteraad besprak op 26 februari, 4 en 11 maart 2024') die minimaal een contrastverhouding van 3:1 met de achtergrond moet hebben valt dan buiten de afbeelding en komt deels op de lichtgrijze achtergrond te staan en deels op een witte achtergrond te staan. Daarnaast bedekt de linktekst een deel van de kop 'Nieuws'. Zorg dat de datum en linktekst ook bij inzoomen op een achtergrond blijven staan waarmee voldoende kleurcontrast is, en dat deze geen andere content bedekt. Zie succescriterium 1.4.3.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/zoekresultaten staan onder 'Filter' drie keuzerondjes. Als de bezoeker via het toetsenbord de focus naar een niet-geselecteerd keuzerondje brengt, krijgt deze een grijze (HEX #B1B7BD) kleur. Deze kleur heeft een te laag contrast met de lichtblauwe (HEX #D9E1EA) achtergrondkleur, waardoor voor sommige mensen niet te zien is waar de focus zich bevindt. De contrastverhouding is 1.5:1 waar deze minimaal 3:1 moet zijn.

Als de bezoeker via het toetsenbord de focus naar het geselecteerde keuzerondje brengt onder 'Filter' op pagina www.zwolle.nl/zoekresultaten, krijgt deze een roze (HEX #CEB3CF) kleur. De contrastverhouding met de lichtblauwe (HEX #D9E1EA) achtergrond is 1.4:1. Dit contrast is te laag, zorg ervoor dat de contrastverhouding minimaal 3:1 is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin kan de bezoeker op verschillende manieren filteren wat op de kaart te zien is. De eerste filter-optie, 'Filter op locatie', is voor bezoekers die navigeren via het toetsenbord niet te bereiken. Het is niet mogelijk om de focus naar de uitvouwbare knop, het schuifknopje of het uitvouwbare menu te brengen. Zorg ervoor dat deze elementen te bereiken en te bedienen zijn via het toetsenbord.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. De sluitknoppen van de 'Zoeken', 'Lagen' en 'Basismap' vensters krijgen wel focus maar ze zijn niet met behulp van het toetsenbord te bedienen. Deze vensters kunnen alleen met behulp van de esc-knop gesloten worden. Zorg ervoor dat alle interactieve elementen te bedienen zijn via het toetsenbord.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het PDF document krekenbuurt.nl/wp-content/uploads/2017/12/Handreiking-krekenbuurt-20171211.pdf heeft geen documenttitel. Zorg voor een titel in de documenteigenschappen die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Uitkomst: Onvoldoende

Bevindingen: Als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 125%, is het menu samengevouwen onder een menuknop (hamburgermenu). Als het menu opengevouwen wordt, is een lijst van menu-items te zien. Als bezoekers die navigeren via het toetsenbord de focus naar het menu brengen, valt de focus niet op het eerste menu-item ('Home'). In plaats daarvan valt de focus eerst op het menu-item 'Contact met de gemeente'. Dit kan verwarrend werken voor bezoekers die wel kunnen zien en navigeren via het toetsenbord. Wijzig de focusvolgorde zodat de menu-items die visueel vooraan staan, als eerste focus krijgen, of wijzig de visuele volgorde zodat deze bij inzoomen ongewijzigd blijft ten opzichte van de niet-ingezoomde versie.

Als de bezoeker bij een schermgrootte van 1280 bij 1024 pixels inzoomt vanaf 125%, is het menu samengevouwen onder een menuknop (hamburgermenu). Als het menu opengevouwen wordt, is een lijst van menu-items te zien. Bezoekers die navigeren via het toetsenbord kunnen via de tab-toets alle menu-items bereiken, maar na de laatste tabstop ('Organisatie') springt de focus terug naar het menu-item 'Home'. Als de bezoeker voorwaarts blijft navigeren blijft de focus steeds tussen de menu-items 'Home' tot en met 'Organisatie' heen en weer springen. De enige manier waarop de bezoeker dan de overige menu-items kan bereiken of het menu kan afsluiten, is door achteruit te navigeren. Dit kan verwarrend werken. Pas de focusvolgorde aan zodat de bezoeker de items in een logische volgorde tegenkomt als voorwaarts genavigeerd wordt.

Op pagina www.zwolle.nl/omgevingsvergunning-voor-monumenten staan aan de rechterkant van de pagina de links 'Aanvraag', 'Kosten' en 'Regels'. Door deze links te volgen kan de bezoeker naar een ander gedeelte van de pagina springen. Bezoekers die kunnen zien, zien het betreffende deel van de pagina in beeld verschijnen. Voor bezoekers die navigeren via het toetsenbord is het lastig om de focus snel naar dit deel van de website te krijgen. Na het volgen van één van de links gaat de focus (als via de tab-toets voorwaarts wordt genavigeerd) verder naar de volgende items in de lijst en begint dan weer bovenaan de pagina. Los dit op door ervoor te zorgen dat als een toetsenbordgebruiker één van deze links volgt, de focus wordt verplaatst naar (de eerste knop of link in) het betreffende deel van de pagina. Een soortgelijk probleem komt voor op pagina www.zwolle.nl/energietoeslag.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin staat een lijst met links onder 'Activiteitenoverzicht'. Voor bezoekers die navigeren via het toetsenbord is het lastig om door deze lijst heen te komen, omdat er veel nieuwe lijst-items worden geladen. Los dit bijvoorbeeld op door een mechanisme toe te voegen waarmee de bezoeker de kaart waarin deze lijst staat (of alleen de lijst) kan overslaan, of zorg dat nieuwe items niet automatisch geladen worden en voeg een knop toe waar de bezoeker op kan klikken om nieuwe lijst-items te laden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staan meerdere links met de tekst 'Klik hier voor het aanbod', deze hebben elk een ander linkdoel. Voor bezoekers die kunnen zien is dit duidelijk doordat de links onder een kop staan waaruit het linkdoel duidelijk wordt. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader en die navigeren aan de hand van een lijst van links die op de pagina staan, valt deze context weg en is het niet duidelijk waar de link naartoe leidt. Dit kan bijvoorbeeld opgelost worden door de h2-kop binnen de link te plaatsen, waardoor de kop als linktekst wordt voorgelezen en hiermee het linkdoel duidelijk maakt.

Op pagina www.zwolle.nl/welkom-in-zwolle staan onder de video verschillende links, bijvoorbeeld onder de kop 'Zwolle: stad van jou, stad van mij'. De links hebben een erg lange toegankelijke linktekst waaruit het linkdoel pas op het einde duidelijk wordt, waardoor het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader lastig kan zijn om snel te achterhalen wat het doel van de link is. Dit komt doordat de hele tekst die onder de kop is te zien (bijvoorbeeld de tekst die begint met 'In Zwolle gaan kwaliteit van leven en gezelligheid hand in hand.') in het aria-label is geplaatst dat aan de link is toegevoegd. Een mogelijke oplossing is het op andere wijze opmaken van het div-element waarin de afbeelding, de kop en de link staan. Bijvoorbeeld door de h2-kop in de link te plaatsten zodat de koptekst wordt voorgelezen als toegankelijke linktekst, en daarnaast de tekst die nu in de link staat als gewone tekst (<p>) buiten de link te plaatsten. Het klikbare gebied van de link kan bijvoorbeeld via CSS of Javascript worden vergroot. Ditzelfde geldt voor alle links die op deze plek op de pagina staan, met uitzondering van de link onder de kop 'College en gemeenteraad' die op andere wijze is opgemaakt.

Op pagina www.zwolle.nl/omgevingsvergunning-voor-monumenten staan aan de rechterkant van de pagina de links 'Aanvraag', 'Kosten' en 'Regels'. Door deze links te volgen kan de bezoeker naar een ander gedeelte van de pagina springen. Voor bezoekers die kunnen zien is het doel van de links duidelijk, doordat zij na het volgen van de links het betreffende deel van de pagina in beeld zien verschijnen. Voor bezoekers die niet kunnen zien en gebruik maken van hulpsoftware zoals een screenreader, is het niet duidelijk wat er gebeurt na het volgen van de link. Voeg een toegankelijke linktekst toe (bijvoorbeeld via een aria-label) waaruit duidelijk wordt dat de bezoeker via de links naar een ander deel van de pagina kan springen. Een soortgelijk probleem komt voor op pagina www.zwolle.nl/energietoeslag.

Advies: Op pagina www.zwolle.nl/contact staan onder 'Contact' verschillende links, bijvoorbeeld 'Afspraak maken'. In de link (<a>) staat een koptekst, een afbeelding met alternatieve tekst en een p-element met tekst. Hulpsoftware zoals een screenreader leest de tekst van deze elementen allemaal voor als linktekst, waardoor deze tekst erg lang is en efficiënte navigatie in de weg kan staan. Het doel van de link wordt wel duidelijk uit de linktekst en deze wordt als eerste voorgelezen, daarom wordt dit niet afgekeurd op toegankelijkheid. Toch kan het een efficiënte navigatie in de weg staan als linkteksten langer zijn dan noodzakelijk. Alleen de koptekst volstaat ook als toegankelijke linktekst. Los dit bijvoorbeeld op door de gewone tekst (<p>) uit de link (<a>) te halen en deze in het betreffende lijst-item (<li>) te plaatsten. Het klikbare gebied van de link kan bijvoorbeeld via CSS of Javascript worden vergroot. Ditzelfde geldt voor de links naar de vacatures die onder video staan op pagina www.zwolle.nl/vacatures, bijvoorbeeld 'Strategische adviseur communicatie (voor het bestuur)'.

Advies: Op onder meer pagina www.zwolle.nl/ staan boven het menu de links 'English' en 'Nederlands'. Deze linkteksten kunnen suggereren dat de huidige pagina in het Engels of Nederlands te zien zal zijn na het volgen van de link, terwijl de links de bezoeker respectievelijk naar de homepagina van de Engelse website (www.zwolle.nl/en) of de homepagina van de Nederlandse website (www.zwolle.nl/) brengt. Dit geldt voor elke bezoeker dus dit wordt niet afgekeurd op toegankelijkheid. Toch zou het duidelijker zijn als de linkteksten aangepast worden (zowel visueel als voor hulpsoftware), zodat de bezoeker kan afleiden dat deze naar de homepagina's leiden in plaats van naar een vertaling van de huidige pagina.

Advies: Op pagina www.zwolle.nl/digitale-toegankelijkheid staat in de eerste rij van de tabel de link 'Zwolle.nl'. Deze tekst suggereert dat de link naar de pagina www.zwolle.nl/ leidt, maar dat is niet zo. Dat kan verwarrend werken. Omdat dit voor elke bezoeker geldt en niet alleen voor bezoekers met een functiebeperking, wordt dit niet afgekeurd op toegankelijkheid. Wel kan het voor alle bezoekers duidelijker zijn als de tekst van de link wordt aangepast.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart waarin een lijst van verschillende onderwerpen te zien is. Deze bevatten een koptekst, afbeelding en gewone tekst die linkt naar het onderwerp. Meerdere koppen hebben dezelfde tekst, bijvoorbeeld 'Afval en kringloop' of 'Dieren'. Hiermee beschrijven de koppen de unieke bijbehorende content onvoldoende. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het mogelijk om de koppenstructuur op te vragen en op die manier te navigeren. Daarom is het belangrijk dat koppen uniek zijn en de bijbehorende content goed beschrijven. Het doel van de teksten zoals 'Afval en kringloop' lijkt hier eerder het 'taggen' van de onderwerpen, om duidelijk te maken bij welke NME-activiteit deze horen. Een mogelijke oplossing zou zijn dat de teksten niet als kop opgemaakt worden maar als gewone tekst, en dat voor de styling gebruik gemaakt wordt van de eigenschappen van CSS. Zie succescriterium 1.3.1.

De video 'Gemeente Zwolle - Boodschap aan nieuwe inwoners' die op pagina www.zwolle.nl/welkom-in-zwolle staat, bevat een afspeelknop met het label 'Afspelen sneltoets k'. Omdat binnen de video geen sneltoetsen kunnen worden gebruikt (dit is uitgeschakeld), geeft dit label onjuiste informatie. Verwijder deze informatie uit het label. Ook bij de knop waarmee het geluidsvolume kan worden bepaald komt dit voor.

Advies: Op pagina www.zwolle.nl/zoekresultaten staan onder 'Filter' drie keuzerondjes waarmee de bezoeker de zoekresultaten kan filteren. De keuzerondjes zijn gegroepeerd onder het label 'Bron', de tekst van dit label krijgen bezoekers die gebruik maken van hulpsoftware zoals een screenreader voorgelezen. Omdat dit wel een aanwijzing geeft over het doel van de keuzerondjes wordt dit niet afgekeurd op toegankelijkheid. Toch zou het voor de bezoeker duidelijker zijn als de tekst 'Filter' als aanvulling op 'Bron' wordt voorgelezen bij de keuzerondjes, zodat bezoekers die dit krijgen voorgelezen weten dat zij hier op drie verschillende bronnen kunnen filteren. Voeg een label met de tekst 'Filter' toe (dit hoeft niet zichtbaar te zijn op de pagina) voor hulpsoftware.

Advies: Op pagina www.zwolle.nl/zoekresultaten kunnen bezoekers via knoppen onderaan de pagina navigeren door de pagina's met zoekresultaten. De knoppen hebben via een aria-label een toegankelijke naam gekregen. Bij de knoppen 'Eerste', 'Vorige', 'Volgende' en 'Laatste' komt de tekst in het aria-label overeen met de visueel zichtbare tekst. Doordat bezoekers die gebruik maken van hulpsoftware zoals een screenreader aan de context waarin de knoppen staan kunnen afleiden dat deze onderdeel van de paginering zijn, wordt dit niet afgekeurd op toegankelijkheid. Toch is het voor deze bezoekers duidelijker als de tekst van het aria-label wordt aangevuld met het woord 'pagina', bijvoorbeeld 'Eerste pagina'. Ditzelfde komt voor op pagina www.zwolle.nl/agenda.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin staan verschillende knoppen waarbij de focus niet zichtbaar is wanneer deze er via het toetsenbord naartoe wordt gebracht. Het gaat bijvoorbeeld om de knoppen waarmee de bezoeker kan in- en uitzoomen of de knop 'Mijn locatie vinden'. Hierdoor is het voor bezoekers die wel kunnen zien en navigeren via he toetsenbord soms niet duidelijk waar zij zich bevinden op de pagina. Zorg ervoor dat altijd duidelijk te zien is waar de focus zich bevindt, voeg bijvoorbeeld een focusrand toe.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina, bijvoorbeeld op de homepagina www.zwolle.nl/ staat een ReadSpeaker interface met een knop met het visuele label 'Lees voor'. De toegankelijke naam van de knop is echter 'ReadSpeaker webReader: Luister met webReader'. Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de documenteigenschappen van het PDF document krekenbuurt.nl/wp-content/uploads/2017/12/Handreiking-krekenbuurt-20171211.pdf is geen taal ingesteld. Hierdoor is het voor hulpsoftware zoals een screenreader lastig om de inhoud van het document in de juiste taal en met de juiste uitspraak voor te lezen. Zorg dat de taalinstelling op 'Nederlands' staat.

Uitkomst: Onvoldoende

Bevindingen: Omdat op pagina www.zwolle.nl/en/visit-us een Engelse taalcode staat (lang="en"), wordt de Nederlandstalige tekst die in de footer staat niet met de juiste uitspraak voorgelezen door hulpsoftware zoals een screenreader. Voeg een afwijkende taalcode (lang="nl") toe om dit op te lossen, of wijzig de tekst in de footer zodat deze Engelstalig is.

Op de Engelstalige pagina www.zwolle.nl/en/visit-us bevat de link naar de homepagina een afbeelding van het logo. Via het alt-attribuut van deze afbeelding wordt het linkdoel duidelijk gemaakt voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. Omdat deze tekst Nederlandstalig is ('Logo van Gemeente Zwolle dat doorverwijst naar de homepage') is deze mogelijk niet te begrijpen door Engelstalige bezoekers. Los dit op door de tekst van het alt-attribuut te vervangen door een Engelstalige tekst.

Op de Engelstalige pagina www.zwolle.nl/en/visit-us bevat de zoekfunctie verschillende Nederlandstalige onderdelen, namelijk het aria-label 'Zoekveld' en de placeholder 'Waar bent u naar op zoek?'. Voor Engelstalige bezoekers zijn deze teksten mogelijk niet goed te begrijpen. Vervang de teksten door Engelstalige teksten.

Pagina www.zwolle.nl/oekraine-informaciya heeft content waarin de taal grotendeels Oekraïens is. Omdat op de pagina een Nederlandse taalcode staat (lang="nl"), kan de Oekraïense tekst door hulpsoftware zoals een screenreader niet (goed) worden voorgelezen. Omdat het menu en de footer wel Nederlandstalig zijn, is het goed dat de Nederlandse taalcode op de hele pagina staat. Plaats een afwijkende taalcode (lang="uk") op alle content waarin de Oekraïense taal voorkomt.

Advies: Op de homepagina heeft het icoon dat in de link 'Energietoeslag' staat een alternatieve tekst gekregen waarin het Engelstalige woord 'icon' staat. Voor bezoekers die geen Engels spreken kan dit verwarring opleveren over de informatie die het icoon overbrengt. Omdat het verschil met het Nederlandse woord 'Icoon' klein is kan aangenomen worden dat dit in de praktijk geen problemen oplevert, om deze reden wordt dit niet afgekeurd op toegankelijkheid. Toch is het beter om een Nederlandse term te gebruiken op deze Nederlandstalige pagina. Als de alternatieve tekst verwijderd wordt en het icoon wordt verborgen voor hulpsoftware zoals geadviseerd bij succescriterium 1.1.1, hoeft de taal niet aangepast te worden. Ditzelfde komt voor bij meerdere iconen, bijvoorbeeld in de link 'Mijn loket' waar de alternatieve tekst 'external icon' is en het icoon in de link 'Contact' waar de alternatieve tekst ook het woord 'icon' bevat.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.zwolle.nl/nl/zoekresultaten kunnen bezoekers filteren op Bron. Zodra een selectievakje aangevinkt is, ververst de pagina direct en komt de focus bovenaan de pagina. Dit is verwarrend en mogelijk desoriënterend voor sommige bezoekers. Maak gebruik van een knop waarmee bezoekers zelf het filteren controleren of gebruik asynchrone JavaScript-functionaliteit die de selectie aanpast. Gebruik bij dit laatste ook een "live-region" waar je aan de bezoeker duidelijk maakt dat er iets is gewijzigd (via hulpsoftware).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op onder andere de homepagina staat onder het menu een zoekfunctie. Het zoekveld dat hierin staat is in HTML geplaatst in een div-element waaraan 'role="combobox"' en 'aria-expanded="false"' is toegevoegd. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen daardoor 'Keuzelijst' en 'samengevouwen' voorgelezen. Hierdoor ontstaat de indruk dat het element een andere functionaliteit heeft dan het daadwerkelijk heeft. Om deze reden is het belangrijk dat alleen de correcte rollen en aria-attributen worden toegevoegd aan een element, en dat deze niet worden toegevoegd als deze geen nut hebben. Doordat voor het invoerveld het input-element is gebruikt in HTML wordt dit door hulpsoftware al als invoerveld herkend en voorgelezen. Verwijder het role- en aria-expanded-attribuut. Dit probleem komt alleen voor op pagina's waar de zoekfunctie op een achtergrondafbeelding te zien is, bijvoorbeeld op pagina www.zwolle.nl/meedenken-en-meedoen en www.zwolle.nl/vacatures.

Op onder andere de homepagina www.zwolle.nl/ staan in de header drie navigatiesystemen die elk een lijst met menu-items bevatten. Elk van deze navigatiesystemen is opgemaakt in een nav-element welke via het aria-labelledby-attribuut een naam heeft gekregen die wordt voorgelezen door hulpsoftware zoals een screenreader. Het voorlezen van deze namen kan verwarrend werken voor bezoekers die van deze hulpsoftware gebruik maken, en efficiënte navigatie in de weg staan. Dat wordt veroorzaakt doordat de naam bestaat uit een opsomming van alle items die binnen het betreffende menu staan. De bezoeker hoort daardoor bijvoorbeeld bij het eerste nav-element de naam 'Contact met de gemeente mijn loket externe link icoon archief externe link icoon'. Hierna worden de menu-items nog eens afzonderlijk voorgelezen als de bezoeker de focus hier naartoe brengt. Het aria-labelledby-attribuut is via een id-attribuut gelinkt aan de lijst (<ul>) waarin de menu-items staan, waardoor alle lijst-items (<li>) die hierin staan worden voorgelezen. Los dit op door de nav-elementen op andere manier een toegankelijke naam te geven, maak bijvoorbeeld gebruik van het aria-label-attribuut.

Op de homepagina www.zwolle.nl/ staat onder de header een afbeelding (op de achtergrond van de zoekfunctie). Deze afbeelding is in een section-element geplaatst welke via een aria-label de tekst 'Header image' heeft gekregen maar arial-label is alleen bedoeld voor interactieve elementen. Daarnaast wordt door hulpsoftware zoals een screenreader de alternatieve tekst van de afbeelding 'Fietsers op brug Rodetorenplein' voorgelezen, en is soms te horen dat het element klikbaar is. Voor bezoekers die niet kunnen zien en gebruik maken van hulpsoftware zoals een screenreader, is het hierdoor lastig af te leiden wat de functie van het element is, en kan het verwarrend werken dat het element niet daadwerkelijk te activeren is als wordt voorgelezen dat deze klikbaar is. Los dit bijvoorbeeld op door het aria-label 'Header image' te verwijderen van het section-element, de afbeelding eventueel voor hulpsoftware te verbergen door het alt-attribuut leeg te laten, en daarnaast de zoekfunctie correct op te maken zodat het section-element niet als 'klikbaar' herkend wordt. Op soortgelijke pagina's (zoals bijvoorbeeld www.zwolle.nl/welkom-in-zwolle) komt hetzelfde probleem voor. Op pagina's waar geen afbeelding onder de header te zien is (zoals bijvoorbeeld www.zwolle.nl/contact) komt een deel van dit probleem voor, dit is op te lossen door het aria-label 'Header image' van het section-element te verwijderen.

Op pagina www.zwolle.nl/vacatures is een lijst met vacatures te zien. Deze lijst staat in HTML binnen een nav-element waaraan via een aria-label de naam 'Wat wilt u regelen?' is toegevoegd. Arial-label is alleen bedoeld voor interactieve elementen en de tekst van dit aria-label beschrijft de inhoud van het element niet. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader kan dit daardoor verwarrend werken. Verwijder het aria-label om dit op te lossen.

Op pagina www.zwolle.nl/zoekresultaten staan onder 'Filter' drie keuzerondjes waarmee de bezoeker de zoekresultaten kan filteren. De keuzerondjes zijn gegroepeerd in een div-element met als rol 'radiogroup', dit element heeft via een aria-label de tekst 'Resultaattype' gekregen. Deze tekst beschrijft de gegroepeerde keuzerondjes niet, waardoor het verwarrend kan zijn als deze voorgelezen wordt door hulpsoftware zoals een screenreader. Zorg ervoor dat het label waaronder de keuzerondjes gegroepeerd zijn deze voldoende beschrijft (hierbij is het goed om de tekst 'Filter' toe te voegen aan 'Bron'), en verwijder het aria-label.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin staat een div-element dat via het attribuut 'tabindex="0" focusbaar is gemaakt, als de focus hierop valt wordt door hulpsoftware zoals een screenreader 'Applicatie' voorgelezen. Dit komt doordat het attribuut 'role="application"' is toegevoegd aan dit div-element. Voor bezoekers die hulpsoftware gebruiken is het niet duidelijk wat de functie van dit element is en heeft het geen nut dat de focus hier naartoe gebracht kan worden. Los dit bijvoorbeeld op door 'role="application"' en 'tabindex="0"' te verwijderen.

Op pagina www.zwolle.nl/natuur-en-milieueducatie-nme staat onder 'Zoekkaart Natuur- en Milieueducatie (NME)' een kaart. Hierin staat een knop (<button>) die geen label heeft, waardoor het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet duidelijk is wat de functie van de knop is. De knop staat in binnen een calcite-button element waarop een aria-label is gezet met de tekst 'kaartoriëntatie resetten'. Dit element is niet focusbaar en wordt niet opgemerkt door hulpsoftware zoals een screenreader, waardoor dit aria-label niet wordt voorgelezen. Los dit bijvoorbeeld op door het aria-label te verplaatsten van het calcite-button element naar het button-element.

In de kaart onder 'Zoekkaart Natuur- en Milieueducatie (NME)' op pagina www.zwolle.nl/natuur-en-milieueducatie-nme kan de bezoeker verschillende filters toepassen. Bijvoorbeeld 'Filter op locatie' en 'Filter op thema'. De filter-opties kunnen via een knop waarop een naar rechts of naar beneden wijzend pijltje te zien is, open of dichtgevouwen worden. Deze knop heeft geen toegankelijke naam, en de staat (open- of dichtgevouwen) is niet af te leiden door hulpsoftware zoals een screenreader. Hierdoor is het voor bezoekers die deze hulpsoftware gebruiken wel duidelijk dat hier een knop staat, maar niet wat de functie en staat van de knop is. Los dit bijvoorbeeld op door de knop een toegankelijke naam te geven via een aria-label op het button-element, en voeg het aria-expanded attribuut toe om de staat van de knop duidelijk te maken.

Advies: Op pagina www.zwolle.nl/zoekresultaten kan de bezoeker via knoppen onderaan op de pagina navigeren door pagina's met zoekresultaten. Deze knoppen zijn in een nav-element geplaatst waaraan via een aria-label de toegankelijke naam 'pagination navigation' is toegevoegd. Hulpsoftware zoals een screenreader herkent door de semantische waarde van het nav-element al dat het hier om een navigatie-element gaat, dit wordt voorgelezen aan bezoekers die deze hulpsoftware gebruiken. Hierdoor is voor hen dubbele informatie te horen. Daarnaast is de tekst in het aria-label Engelstalig en daarmee mogelijk niet voor alle bezoekers te begrijpen. Omdat er wel correcte informatie wordt doorgegeven aan bezoekers die hulpsoftware zoals een screenreader gebruiken wordt dit niet afgekeurd op toegankelijkheid. Voor deze bezoekers kan navigatie efficiënter worden gemaakt door het aria-label te verwijderen of de tekst aan te passen zodat deze Nederlandstalige informatie bevat die van toegevoegde waarde is (en geen dubbele informatie geeft). Ditzelfde komt voor op pagina www.zwolle.nl/agenda.

Advies: Op onder meer pagina www.zwolle.nl/ staan boven het menu de links 'English' en 'Nederlands'. Eén van beide links is blauw gekleurd, waaraan de bezoeker kan afleiden of de huidige pagina Engels of Nederlands is. Deze (visuele) informatie wordt niet voorgelezen door hulpsoftware zoals een screenreader, waardoor deze niet beschikbaar is voor bezoekers die niet kunnen zien. Dit wordt niet afgekeurd omdat op meerdere manieren af te leiden is of de pagina Engels of Nederlands is (bijvoorbeeld aan de paginatitel en de content van de pagina). Toch is het beter als de visuele informatie ook wordt voorgelezen door hulpsoftware. Maak bijvoorbeeld gebruik van aria-current.

Uitkomst: Niet aanwezig