Bevindingen voor je spreadsheet: Audit digitale toegankelijkheid website Stadshagen Zwolle

Naam website	Stadshagen Zwolle
Scope	Alle pagina's op stadshagen.nl Niet de pagina op zwolle.nl/stadshagen (onderdeel van een ander onderzoek) Niet de pagina op timelapseview.nl/wijk-de-tippe-stadshagen (onderdeel van een ander onderzoek) Niet de nieuwsbrieven op mail.chi (onderdeel van een ander onderzoek)

`nr`	`Bevinding`	`WCAG SC`	`Mogelijk verantwoordelijk`	`Status`
`1`	`Op pagina https://stadshagen.nl/ staat boven aan de pagina een kaart met daar op een logo met de tekst "Breezicht - rijk van groen en water". Deze afbeelding heeft een leeg tekstalternatief, dat is hier niet correct. Zorg voor een tekstalternatief met daarin de leesbare tekst uit de afbeelding. Dezelfde afbeelding staat ook op pagina https://stadshagen.nl/buurtschap/duinzicht/ .`	`1.1.1`	`techniek, content, visuele vormgeving`
`2`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat bovenaan een afbeelding met de tekst "De Tippe - buurschap voor de toekomst". Deze afbeelding heet een leeg tekstalternatief, dt is niet correct. Zorg voor een tekstalternatief met daarin de leesbare tekst uit de afbeelding.`	`1.1.1`	`techniek, content, visuele vormgeving`
`3`	`Op pagina https://stadshagen.nl/ staat links onder in de pagina het logo van Stadshagen. Deze is nu opgemaakt als een achtergrondafbeelding en mist daardoor een tekstalternatief. Dit is niet correct, maak deze afbeelding op als een echte afbeelding (img element) en voorzie deze van een tekstalternatief die alle tekst van de afbeelding omvat.`	`1.1.1`	`techniek, content, visuele vormgeving`
`4`	`Op pagina https://stadshagen.nl/ staat onderaan de pagina een afbeelding waarmee het cookie-venster kan worden geopend. Deze afbeelding heeft als tekstalternatief “Cookiebot session tracker icon loaded”. Dat is geen duidelijk tekstalternatief, wijzig dit naar bijvoorbeeld “cookievenster”. Dit probleem herhaalt zich op iedere pagina.`	`1.1.1`	`techniek, content, visuele vormgeving`
`5`	Op pagina https://stadshagen.nl/ staat een video met visuele content die niet beschikbaar is voor mensen met een visuele beperking: - Na 0:02 : “25 jaar Stadshagen – jouw thuis in Zwolle”. Hier is wel plaats voor in het audiospoor. - Na 3:37 : “25 jaar Stadshagen – jouw thuis in Zwolle”, hier wordt “25 jaar” en “In Zwolle” niet voorgelezen. Hier is wel plaats voor in het audiospoor. Los dit op door de visuele informatie op te nemen in het audiospoor. Wat voor dit succescriterium ook voldoende is om deze informatie toe te voegen aan de al bestaande transcriptie. Dit is voor succescriterium 1.2.5 echter niet meer voldoende omdat er genoeg ruimte is in het audiospoor. Dezelfde video staat op pagina https://stadshagen.nl/stadshagen/ .	`1.2.3`	`visuele vormgeving`
`6`	Op pagina https://stadshagen.nl/ staat een video met visuele content die niet beschikbaar is voor mensen met een visuele beperking: - Na 0:02 : “25 jaar Stadshagen – jouw thuis in Zwolle”. Hier is wel plaats voor in het audiospoor. - Na 3:37 : “25 jaar Stadshagen – jouw thuis in Zwolle”, hier wordt “25 jaar” en “In Zwolle” niet voorgelezen. Hier is wel plaats voor in het audiospoor. Los dit op door de visuele informatie op te nemen in het audiospoor. Dezelfde video staat op pagina https://stadshagen.nl/stadshagen/ .	`1.2.5`	`visuele vormgeving`
`7`	Op pagina https://stadshagen.nl/buurt/de-tippe/ staan twee video’s. In de eerste video is de volgende visuele informatie niet beschikbaar voor mensen met een visuele beperking: - Na 0:03 : “De Tippe – buurschap voor de toekomst”. Hier is wel plaats voor in het audiospoor. Dit staat wel in de transcriptie, en is daarmee voldoende voor 1.2.3. Maar dit wordt afgekeurd onder 1.2.5 - Vanaf 3:19 komt visuele informatie in beeld die slechts deels wordt voorgelezen en in de transcriptie voorkomt. Hier is wel plaats voor in het audiospoor.	`1.2.5`	`visuele vormgeving`
`8`	Op pagina https://stadshagen.nl/raad-van-state-stelt-gemeente-in-gelijk-over-bestemmingsplan-uitbreiding-winkelcentrum-stadshagen/ zijn zinnen en koppen opgemaakt met het strong-element, bijvoorbeeld de alinea "De Raad van State heeft op woensdag ... van de realisatie". Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Haal het strong-element hier daarom weg en maak de alinea eventueel op met behulp van CSS. Ook zijn de koppen, bijvoorbeeld "Belangrijke ontwikkeling voor Stadshagen" en "Verwachte planning" opgemaakt met het strong-element. Het strong-element mag niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3). Haal het strong element bij de visuele koppen weg en maak ze in de code op als kop (h1 t/m h6 element). Soortgelijke problemen doen zich voor op pagina https://stadshagen.nl/tweede-knarrenhof-van-zwolle-komt-in-de-tippe/ .	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`9`	Op pagina https://stadshagen.nl/ staat de visuele kop “Ja, ik wil wonen in Stadshagen”. Deze kop is in de code opgesplitst in drie delen om een bepaalde opmaak te realiseren. Dat is niet correct. Bovendien heeft de h3 kop nu geen content, ook dit is niet correct. Maak de visuele kop daarom op als één kop met het juiste element (h1 – h6). Gebruik voor het realiseren van een bepaalde opmaak bij voorkeur CSS. Vergelijkbare situaties doen zich op meerdere plaatsen voor, onder andere op pagina https://stadshagen.nl/ bij de visuele koppen “Waar voel jij je thuis” en “Ik wil me graag Aanmelden”, op pagina https://stadshagen.nl/contact/ bij de visuele kop “Kom in contact met ons” en op pagina https://stadshagen.nl/buurt/de-tippe/ bij de visuele koppen “Een buurt, drie buurschappen”, “Het knusse gevoel van een dorp” en “centrale ontmoetingsplek Weidepark”. Controleer de hele website.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`10`	`Advies: Op https://stadshagen.nl/ staat ongeveer halverwege de pagina boven de video de kop “Video 25-jarig jubileum Stadshagen Zwolle”, deze is opgemaakt als een h1-kop. Gebruikelijk is om op ieder pagina één h1 kop te gebruiken en wel bovenaan de pagina. Deze kop beschrijft dan de inhoud van de gehele pagina.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`11`	`Advies: Op pagina https://stadshagen.nl/contact/ staan vier koppen die zijn opgemaakt als een h1 kop. Zorg voor een logische koppenstructuur. Een soortgelijke situatie doen zich ook voor op onder andere https://stadshagen.nl/buurt/de-tippe/ en op https://stadshagen.nl/stadshagen/ . Controleer de hele site.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`12`	Op pagina https://stadshagen.nl/buurt/de-tippe/ bevinden zich een aantal uitvouwbare accordeons, waaronder de accordeon “Waar je nooit meer weg wilt”. Deze accordeons zijn opgemaakt als definitie-lijsten (dl-element). De koppen zijn opgemaakt met een dt-element en de eronder staande inhoud met een dd-element. Dat is hier niet correct. Een definitielijst dient met name ingezet te worden voor begrippenlijsten of voor een lijst met veelgestelde vragen en dat is hier niet het geval. Omdat dit uitklapbare kopjes zijn zouden ze opgemaakt kunnen worden met het summary-element en de eronder staande inhoud met het details-element. Andere opties zijn ook mogelijk. Zie daarvoor ook succescriterium 4.1.2.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`13`	`Advies: Het volgende wordt niet fout gerekend maar kan wel beter. Op pagina https://stadshagen.nl/buurt/de-tippe/ bevinden zich een aantal uitvouwbare accordeons, waaronder de accordeon “Transcriptie video De Tippe”. Visueel is het niet duidelijk dat deze uitvouwbaar zijn en wat de status ervan is. Het advies is om bijvoorbeeld een icoontje te gebruiken van een pijltje omlaag als de accordeon samengevouwen is en een pijltje omhoog als deze uitgevouwen is.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`14`	Op pagina https://stadshagen.nl/buurt/de-tippe/ is er een filter-mogelijkheid. Bij deze velden zijn de labels niet goed expliciet geassocieerd met de invoervelden. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen. Gebruik geen h3 voor de veldnamen, maar gebruik het label-element, met uitzondering van 'Prijsrange'. Dit beschrijft meerdere velden en plaats je binnen een legend als fieldset, waarbij alleen het veld 'Prijs vanaf' correct is geassocieerd. Hetzelfde probleem doet zich voor op: - https://stadshagen.nl/buurtschap/duinzicht/ en - https://stadshagen.nl/aanbod/	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`15`	`Op de pagina https://stadshagen.nl/category/nieuws/ staan blokken met een datum, een kop, een afbeelding en tekst. Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de datum hoort. Zet de koppen vooraan in de HTML-code en zet hierachter de datum van plaatsing. Visueel mag deze indeling wel aangehouden worden.`	`1.3.2`	`content, visuele vormgeving`
`16`	`Op pagina https://stadshagen.nl/cookie-policy/ staan drie tabellen. Bij 200% zoom valt in iedere tabel de vierde kolomkop deels buiten beeld. Zorg er voor dat ook bij 200% zoom alle content beschikbaar is. Zie ook de bevinding onder succes criterium 1.4.12.`	`1.4.4`	`interactieontwerp, content`
`17`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat de visuele kop “Eén buurt, drie buurtschappen”. Deze is slechts deels zichtbaar. Ook de tekst onder deze kop valt deels buiten beeld. Een vergelijkbaar probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ met de visuele kop “Speels duinlandschap” en de bijbehorende content.`	`1.4.10`	`interactieontwerp, content`
`18`	Onderaan pagina https://stadshagen.nl/buurt/de-tippe/ staat een overzicht van het woningaanbod. De tekst die hoort bij een project valt deels buiten beeld. Bij Groengaarde staat bijvoorbeeld de regel “Groengaarde is het nieuwste deelplan in”. Bij 400% zoom is allen de tekst “Groengaarde is het nieuwste deelpl” zichtbaar. Ook bij het overige aanbod valt het laatste deel van de regel buiten beeld. Een vergelijkbaar probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ en op pagina https://stadshagen.nl/aanbod/ .	`1.4.10`	`interactieontwerp, content`
`19`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onderaan de pagina het invoerveld “Ben je geïnteresseerd in koop of huur?”. In het bijbehorende dropdownmenu wordt de optie “Nee, ik wilde alleen mijn idee(en) voor co-creatie in De Tippe doorgeven ” slechts deels getoond.`	`1.4.10`	`interactieontwerp, content`
`20`	Op pagina https://stadshagen.nl/cookie-policy/ staan drie tabellen. Bij 400% zoom worden de gegevens niet meer horizontaal, maar verticaal gepresenteerd. En worden de kolomkoppen niet meer getoond, waardoor niet duidelijk is om wat voor gegevens het gaat. De laatste kolom “Type” en de bijbehorende gegevens worden in het geheel niet getoond. Op onder andere pagina https://stadshagen.nl/ staat bovenaan een kaart met de verschillende projecten. Ieder project is aanklikbaar waarna een pop-up opent. Niet alle koppen zijn volledig leesbaar. Een voorbeeld is “Nieuwbouwwoningen Reede”, hier valt een deel van het eerste woord buiten beeld. Ook “Groeneburenhof” valt deels buiten beeld.	`1.4.10`	`interactieontwerp, content`
`21`	`Als bij 400% zoom met het toetsenbord wordt genavigeerd, verschijnt op enig moment de optie "Naar hoofdcontent" in beeld. Dit valt echter over het mobiele menu heen en is daardoor onleesbaar. Zorg er voor dat functionaliteit ook bij 400% zoom zichtbaar blijft.`	`1.4.10`	`interactieontwerp, content`
`22`	`Op https://stadshagen.nl/ staat bovenaan de pagina een kaart met daarop icoontjes waar de projecten zich bevinden. De paarse icoontjes op de rode achtergrond hebben een contrast van 2,3:1 en dat is te weinig. Zorg ervoor dat dit minimaal 3,0:1 is. Het zelfde probleem doet zich voor op pagina https://stadshagen.nl/aanbod/ .`	`1.4.11`	`interactieontwerp`
`23`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onder de kop "Klik op een buurschap voor meer info" een afbeelding met voor ieder buurschap een oranje klikbaar vlak. Het contrast van deze oranje vlakken met de rest van de afbeelding varieert tussen de 1,1:1 en de 2,0:1. Dit is te laag, zorg voor een minimaal contrast van 3,0:1.`	`1.4.11`	`interactieontwerp`
`24`	`Op pagina https://stadshagen.nl/cookie-policy/ staan drie tabellen. Bij een aangepaste tekstafstand valt in iedere tabel de vierde kolomkop deels buiten beeld: in plaats van “Maximale bewaartermijn” is alleen “Maximale bewaartermi” leesbaar. Zie ook 1.4.4`	`1.4.12`	`interactieontwerp`
`25`	Op pagina https://stadshagen.nl/buurtschap/duinzicht/ staan boven het woningaanbod een aantal filteropties. Als bij een aangepaste tekstafstand een “Prijs vanaf” en een “Prijs tot” wordt geselecteerd, dan is deze na selectie slecht deels zichtbaar in het invoerveld. Van bijvoorbeeld het geselecteerde bedrag “€ 750.000” wordt alleen “€ 750.” getoond. Ook geselecteerde opties in “Aanbod”, “Buurt” en “Buurschap” worden soms niet helemaal getoond. Dit komt ook voor bij een normale weergave, zij het in mindere mate. Dezelfde problemen doen zich voor op pagina https://stadshagen.nl/buurt/de-tippe/ en op pagina https://stadshagen.nl/aanbod/ .	`1.4.12`	`interactieontwerp`
`26`	`In het hoofdmenu zijn menu-items waar meerdere sub-menu items onder vallen. een voorbeeld is "De Tippe". Als over het menu item "De Tippe" wordt gehoverd verschijnen deze sub menu items. De gebruiker kan dit sub menu alleen sluiten door de muis te bewegen of met de tabtoets verder te navigeren. Dit is niet voldoende, zorg er voor dat de gebruiker het sub menu kan sluiten met de escape-toets. Het zelfde probleem doet zich voor bij het menu-item "Breezicht".`	`1.4.13`	`techniek, interactieontwerp, content`
`27`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ bevinden zich een aantal uitvouwbare accordeons, onder andere de transcriptie onder de video. Deze accordeons zijn alleen te bedienen met de muis. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze accordeon niet bedienen. Zorg ervoor dat dit met javascript interactief gemaakte element ook bereikbaar en bedienbaar is met het toetsenbord. Zie voor een oplossing daarvan succescriterium 4.1.2.`	`2.1.1`	`techniek, content`
`28`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onder de kop “Klik op een buurschap voor meer info” een afbeelding met daarop de drie buurschappen. Door op een van de buurschappen te klikken verschijnt een pop-up met extra informatie. Het is echter niet mogelijk dit met het toetsenbord te doen. Zorg er voor dat alle content ook voor toetsenbordgebruikers toegankelijk is.`	`2.1.1`	`techniek, content`
`29`	Op pagina https://stadshagen.nl/ staat boven aan de pagina een kaart met daar op knoppen die worden weergegeven met locatie-icoontjes. Slechts één van deze knoppen is te bereiken met het toetsenbord, omdat deze voorzien is van het attribuut tabindex=”0”. De overige locatie-knoppen zijn niet focusbaar. Zorg ervoor dat alle knoppen focusbaar en bedienbaar zijn. Het is niet voldoende om een element te voorzien van role=”button”, daarmee is het nog geen functionele knop. Maak daarom gebruik van het button-element zonder tabindex. dat geeft direct het gewenste resultaat. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.	`2.1.1`	`techniek, content`
`30`	Op de pagina https://stadshagen.nl/buurt/de-tippe/ staat onder de kop "Update bouw De Tippe" een YouTube video. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld de f voor fullscreen en de m voor mute. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.	`2.1.4`	`techniek, content, visuele vormgeving`
`31`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ zijn video's via iframes geplaatst. Deze iframes hebben een title-attribuut, echter slechts met de omschrijving "YouTube video player". Geef de iframes een goede unieke omschrijving van de inhoud, bijvoorbeeld "Video sfeerimpressie van De Tippe".`	`2.4.1`	`techniek, content`
`32`	Advies: De titels van de afzonderlijke pagina's dienen beschrijvend en uniek te zijn. Wat daar bij helpt is een consistente vorm van de paginatitel en dat ontbreekt nu. Hier volgen enkele voorbeelden van paginatitels zoals ze nu zijn: - Contact \| Stadshagen Zwolle - Nieuws \| Stadshagen \| Jouw thuis in Zwolle - Cookiepolicy - Stadshagen - Woningaanbod in Stadshagen Zwolle Consistent en beter is bijvoorbeeld: - Contact \| Stadshagen - Nieuws \| Stadshagen - Cookiepolicy \| Stadshagen - Woningaanbod \| Stadshagen	`2.4.2`	`content, visuele vormgeving`
`33`	Bovenin pagina https://stadshagen.nl/ staat een kaart waarop knoppen staan die worden weergegeven met locatie-icoontjes. Als deze worden geactiveerd dan opent er een popup-venster. Dit venster komt over de pagina heen te staan. Het openen van een popup heeft bepaalde eisen met betrekking tot de toetsenbordfocus. Zolang de popup open staat mag de toetsenbordfocus niet teruggaan naar de pagina op de achtergrond. Dat is nu wel mogelijk. Zorg ervoor dat de focus binnen de popup blijft als deze open staat. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.	`2.4.3`	`techniek, content`
`34`	Bovenaan de home pagina https://stadshagen.nl/ staat een Google Maps-kaart van het gebied. De interface-elementen in de kaart krijgen focus voor de werkelijke inhoud van de pagina. Bezoekers die met het toetsenbord navigeren moeten onnodig vaak tabben voor ze bij de inhoud van de pagina komen. Los dit bijvoorbeeld op door boven de kaart een link te plaatsen die de mogelijkheid biedt om de kaart over te slaan en direct naar de eronder staande content te springen. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.	`2.4.3`	`techniek, content`
`35`	Op pagina https://stadshagen.nl/stadshagen/ staat een slider, met daarbinnen een aantal slides. De slider is focusbaar doordat op het div-element met de class "highlight-slides-container flickity-enabled is-draggable" het attribuut tabindex=”0”is geplaatst. De erbinnen staande slides zijn echter verborgen met aria-hidden. Dat is niet logisch. Als de slides verborgen dienen te zijn voor hulpsoftware, dan mag de focus ook niet op het omliggende div-element komen. Verder mogen er binnen elementen waarop het attribuut aria-hidden staat geen interactieve elementen voorkomen. Dat is nu wel het geval. Het gaat dan om de link “www.zwolle.nl/stadshagen” binnen elke slide.	`2.4.3`	`techniek, content`
`36`	Bovenin pagina https://stadshagen.nl/ staat een kaart waarop knoppen staan die worden weergegeven met locatie-icoontjes. Als deze worden geactiveerd dan opent er een popup-venster. Onderaan al deze popup-vensters staat steeds dezelfde link “Naar projectsite”. Zorg dat links naar verschillende doelen unieke linkteksten hebben, door bijvoorbeeld de tekst aan te vullen met de titel van het venster of de pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.	`2.4.4`	`techniek, interactieontwerp, content, visuele vormgeving`
`37`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een afbeelding met de drie buurschappen onder de kop “Klik op een buurschap voor meer info”. Door op een van de oranje vlakken te klikken wordt er naar het betreffende buurschap genavigeerd. Het doel van de links is hier niet duidelijk, doordat de links geen toegankelijke naam hebben. Zorg in alle gevallen voor een duidelijke toegankelijke naam.`	`2.4.4`	`techniek, interactieontwerp, content, visuele vormgeving`
`38`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat de link “Lees meer”. Deze wordt ook voorgelezen als “Lees meer”. Pas dit aan naar bijvoorbeeld “Lees meer over Co-creatie”. Vergelijkbare problemen doen zich ook voor bij de links “Naar projectsite”. Dit laatste probleem doet zich ook voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ en https://stadshagen.nl/aanbod/ .`	`2.4.4`	`techniek, interactieontwerp, content, visuele vormgeving`
`39`	`Er is maar één manier om alle pagina's binnen deze website te vinden en dat is via het volgen van links in het menu en de footer. Zorg dat er nog een manier is om elke pagina te kunnen bereiken. Te denken valt hierbij aan een zoekfunctionaliteit of een sitemap.`	`2.4.5`	`techniek, interactieontwerp, visuele vormgeving`
`40`	`In de cookie pop-up is de focus niet zichtbaar als getabd wordt na “Cookiebot by Usercentrics”. De focus ligt dan op de kop “Deze website maakt gebruik van cookies” en de onderliggende tekst. Dit tekstblok is bovendien niet klikbaar en hoeft dus uberhaupt geen focus te krijgen.`	`2.4.7`	`interactieontwerp, content`
`41`	`Als op https://stadshagen.nl/ na de link “Bekijk hier het nieuwbouwaanbod” verder wordt genavigeerd met de tabtoets, is de focus niet zichtbaar. Als nogmaals de tabtoets wordt gebruikt, ligt de focus op de link “Bekijk het aanbod”. Zorg er voor dat de focus altijd zichtbaar is.`	`2.4.7`	`interactieontwerp, content`
`42`	Op pagina https://stadshagen.nl/contact/ staat bovenaan de pagina een foto van een man met en petje in een moestuin. Als na het laatste menu-item verder wordt genavigeerd met de tabtoets, krijgt deze foto focus, echter is dit niet zichtbaar. (Opmerking: je kan nu met de pijltjestoets naar links en rechts navigeren en zo een nieuwe foto met tekst laten verschijnen. Dit is echter voor geen enkele gebruiker duidelijk.) Een vergelijkbaar probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ en op pagina https://stadshagen.nl/stadshagen/ .	`2.4.7`	`interactieontwerp, content`
`43`	`Op https://stadshagen.nl/ staat een kaart met daarin aangegeven waar de projecten zich bevinden. Als met behulp van het toetsenbord bijvoorbeeld de pop-up van het project “Nieuwbouwwoningen Reede” (het meest noordelijke project) wordt geopend, ligt de focus op het sluitkruisje. De focus is op dat moment echter bedekt. Een vergelijkbaar probleem doet zich voor op pagina https://stadshagen.nl/aanbod/ .`	`2.4.7`	`interactieontwerp, content`
`44`	Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onder de kop “Klik op een buurschap voor meer info” een afbeelding met daarop de drie oranje vlakken die aangeven waar de buurschappen liggen. Door op een van de buurschappen te klikken verschijnt een pop-up met extra informatie. Na drie seconden wordt ineens de bovenkant van de pagina weergegeven en blijkt de pop-up gesloten. Dit kan desoriënterend werken voor gebruikers. Zorg ervoor dat er geen onaangekondigde contextwijzigingen plaatsvinden.	`3.2.2`	`techniek, content`
`45`	Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onderaan de pagina een aanmeldformulier. Als bezoekers formuliervelden niet (goed) invullen dan ververst de pagina en wordt de melding “Er was een probleem met je inzending. Controleer de onderstaande velden” voorgelezen door hulpsoftware. De tekst is echter niet zichtbaar omdat deze helemaal onderaan staat. Slechtzienden die gebruik maken van voorleessoftware kunnen zo niet eenvoudig bepalen waar deze melding staat en waar deze melding naar verwijst. De focus staat helemaal bovenaan de pagina en het formulier helemaal onderaan. Zorg dat de focus direct naar het formulier gaat of naar het eerste foutief ingevulde formulierveld gaat.	`3.3.1`	`techniek`
`46`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een formulier. Als verplichte velden worden leeggelaten en de gebruiker klikt op "Aanmelden" verschijnt een algemene melding met de tekst “Er was een probleem met je inzending. Controleer de onderstaande velden” bovenaan het formulier. Deze melding is echter slecht leesbaar doordat de eerste en tweede regel van de melding over elkaar heen vallen. Hetzelfde probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ .`	`3.3.1`	`techniek`
`47`	Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een formulier. Als de velden “Voornaam” en “Achternaam” worden leeggelaten en vervolgens op “Aanmelden” wordt geklikt, verschijnt een foutmelding bij het veld “Voornaam”, deze luidt “Het veld Naam is verplicht ….”. Deze melding is niet duidelijk, er is namelijk geen veld “Naam”. Zorg dat er voor het veld “Voornaam” en “Achternaam” een afzonderlijk melding is. Hetzelfde probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ .	`3.3.1`	`techniek`
`48`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een formulier. Als in het veld E-mailadres een foutief e-mailadres wordt ingevuld, dan verschijnt de melding “Het veld E-mailadres is verplicht en moet worden ingevuld”. Dit is een instructie en foutsuggestie. Dit is geen correcte foutmelding, geef hier aan dat het ingevoerde e-mailadres niet voldoet aan het standaard formaat van een e-mailadres. De instructie en foutsuggestie mag blijven vanwege succescriterium 3.3.2 en 3.3.3.`	`3.3.1`	`techniek`
`49`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een formulier met onder andere de velden "Toelichting ideeen co-creatie" en "Opmerkingen". In deze velden staat een placeholdertekst die verdwijnt als de gebruiker begint te typen verdwijnt de instructie. Mensen met bijvoorbeeld concentratieproblemen missen mogelijk de instructie. Zorg dat instructies altijd zichtbaar blijven. Een soortgelijk probleem doet zich voor op pagina https://stadshagen.nl/buurtschap/duinzicht/ .`	`3.3.2`	`techniek`
`50`	`Advies: Op pagina https://stadshagen.nl/buurt/de-tippe/ staat onderaan het formulier 'Aanmelden'. De labels die bij de invoervelden horen staan soms onder het betreffende veld (bijvoorbeeld in het geval van “Voornaam”) en soms boven het betreffende veld (bijvoorbeeld in het geval van “E-mailadres”). Dit werkt desoriënterend. Zorg hier voor consistentie door alle velden op dezelfde manier van een label te voorzien.`	`3.3.2`	`techniek`
`51`	Op pagina https://stadshagen.nl/buurt/de-tippe/ staan een aantal ‘kopjes’, waaronder “Transcriptie video De Tippe” en “Waar je nooit meer weg wilt”. Wanneer op één van de kopjes wordt geklikt wordt de erbij behorende content getoond. Dit zijn dus interactieve elementen. De rol van deze elementen kan niet door software worden bepaald. En ook de status (in- of uitgeklapt) van deze elementen kan niet door software bepaald worden. Bovendien zijn deze elementen alleen met de muis te bedienen en niet met het toetsenbord. Zorg dat er een mechanisme is waarmee deze kopjes ook met het toetsenbord in- en uitgeklapt kunnen worden (accordeon) en dat aan hulpsoftware duidelijk overgebracht wordt dat dit interactieve elementen zijn. Dit kan door gebruik te maken van een combinatie van het summary-element en het details-element OF door gebruik te maken van het WAI-ARIA Disclosure Pattern. Lees hier meer over op https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-faq/. Let op: Als WAI-ARIA wordt gebruikt, moet worden voldaan aan de eisen van WAI-ARIA.	`4.1.2`	`techniek, content, visuele vormgeving`
`52`	Als op pagina https://stadshagen.nl/ één van de locatieknoppen op de kaart wordt geactiveerd opent er een dialoogvenster. Hulpsoftware moet de rol en de naam van deze popup kunnen bepalen. Deze zijn hier echter niet beschikbaar op het div-element met het class-attribuut “map-buurten-infowindow-wrapper”. Voeg een rol toe door dit element te voorzien van het attribuut role=”dialog” en het attribuut aria-modal=”true”. En voorzie het element van een toegankelijke naam met het attribuut aria-label of het attribuut aria-labelledby. Met het attribuut aria-describedby kan dan bijvoorbeeld verwezen worden naar de titel binnen het dialoogvenster. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.	`4.1.2`	`techniek, content, visuele vormgeving`
`53`	`Op pagina https://stadshagen.nl/buurt/de-tippe/ staat een afbeelding met de drie buurschappen onder de kop “Klik op een buurschap voor meer info”. Door op een van de oranje vlakken te klikken wordt er naar het betreffende buurschap genavigeerd. deze links missen een toegankelijke naam.`	`4.1.2`	`techniek, content, visuele vormgeving`
`54`	`Bovenin pagina https://stadshagen.nl/ staat een kaart waarop knoppen staan die worden weergegeven met locatie-icoontjes. Al deze knoppen missen een toegankelijke naam. Het is voor screenreadergebruikers nu niet duidelijk wat de knop doet.`	`4.1.2`	`techniek, content, visuele vormgeving`
`55`	`Bovenin pagina https://stadshagen.nl/ staat een kaart binnen een div-element met role=”region” met daarop het attribuut aria-label met de waarde “kaart”. De toegankelijke naam “kaart” geeft onvoldoende informatie. Het dient duidelijk te zijn om wat voor kaart het gaat. Vul dit daarom aan tot bijvoorbeeld “kaart van buurt De Tippe”. Dezelfde kaart komt ook voor op pagina https://stadshagen.nl/aanbod/.`	`4.1.2`	`techniek, content, visuele vormgeving`
`56`	`Als een veld in het filter op pagina https://stadshagen.nl/aanbod/ verandert wijzigt de lijst met projecten daar onder. Blinden en slechtzienden die met een screenreader werken krijgen geen signaal dat er iets is gewijzigd.`	`4.1.3`	`techniek, content`

Bevindingen voor je spreadsheet:
Audit digitale toegankelijkheid website Stadshagen Zwolle

Scope van de evaluatie

Uitgebreide toetsresultaten

Onderbouwing van de evaluatie

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bronnen