Onderzoek toegankelijkheid almere.nl hertoetsing versie 1.2

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

PDF Monitor coronacrisis januari 2021

Uitkomst: Onvoldoende

PDF Rondkomen in Almere

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

De alt tekst bij het logo van de Gemeente Almere is alleen ‘Almere’ en daardoor niet voldoende. Bezoekers die de afbeelding niet kunnen zien krijgen niet de juiste informatie. Pas de alt tekst aan.

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

De afbeelding van het logo heeft geen alternatieve tekst. Het logo is geplaatst als achtergrondafbeelding in CSS. Het logo van de afzender is echter wel belangrijke content. Plaats het logo in de HTML met een goede alternatieve tekst.

PDF Monitor coronacrisis januari 2021

Afbeeldingen in het document missen een (goede) alt tekst. Dit geldt voor tekstparagrafen die foutief zijn opgemaakt als figuur. De ‘echte’ figuren hebben hier wel een alt-tekst, maar van sommige grafieken komt niet alle informatie voldoende terug in de beschrijving ernaast. Dit moet een volwaardig tekst alternatief zijn.

PDF Rondkomen in Almere

Afbeeldingen in het document missen een (goede) alt tekst. Dit geldt voor illustraties en logo’s. Veel afbeeldingen zijn gemarkeerd als artifact terwijl ze niet decoratief zijn, zoals logo’s. Bij sommige afbeeldingen die wel een figure zijn klopt de alt tekst niet doordat bijvoorbeeld maar een deel van de tekst in de afbeelding wordt vermeld. Opmerking: de inhoudsopgave staat op de kop

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Informatie voor ondernemers over het coronavirus (video)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Contactformulier

Uitkomst: Onvoldoende

PDF Monitor coronacrisis januari 2021

Uitkomst: Onvoldoende

Homepage

Onder ‘Contact met de gemeente’ worden iconen die als links dienen naar social media geplaatst met CSS. CSS is bedoeld voor styling, niet voor betekenisvolle content. Wanneer gebruikers eigen CSS gebruiken of de CSS niet geladen wordt, vallen de iconen en daarmee de links weg. Plaats het icoon in de HTML, bijvoorbeeld als img-element met een alternatieve tekst of een svg met een title element.

Informatie voor ondernemers over het coronavirus (video)

Onder ‘Financiële tegemoetkomingen’ is visueel een tabel gemaakt, maar dit is in de code niet opgemaakt als tabel. Er is veel witruimte gecreëerd met spaties. Voor screenreader gebruikers worden paragrafen opgelezen met veel extra tekens en kan het onduidelijk zijn dat hier eigenlijk een tabel wordt bedoeld. Zet deze informatie in een tabel met correcte opmaak.

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Er zijn invoervelden gevonden zonder (correct geassocieerd) label, namelijk het huisnummer en de beschrijving. Gebruikers van hulpsoftware weten niet waar deze invoervelden voor zijn. Voeg labels toe en koppel deze met een correct id aan de betreffende invoervelden.

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Er zijn vragen met de rol ‘combobox’ maar deze missen daaronder de rol ‘textbox’. Wanneer code niet volgens de specificaties is opgemaakt kan het zijn dat hulpsoftware deze content niet goed kan interpreteren. Maak de code op volgens de (aria) specificaties. Zie ook https://www.w3.org/TR/wai-aria-1.1/#combobox

Er zijn invoervelden gevonden zonder (correct geassocieerd) label. In stap 2 is het label ‘beschikbare datum’ niet correct geassocieerd met het invoerveld, het id klopt niet (‘service’ i.p.v. ‘date’).

De tabel met de beschikbare data is niet goed opgemaakt. Er zijn meerdere tabel headers (th) waar geen cellen onder vallen, zoals die met de previous and next buttons en met een wissen button (deze header staat in de tabel footer). Zorg dat alle headers verwijzen naar datacellen. Overige headers moeten worden verwijderd.

Contactformulier

Er zijn invoervelden gevonden zonder (correct geassocieerd) label, namelijk voornamen en achternaam.

Kopjes op de pagina zijn alleen visueel als kop opgemaakt maar niet in de code. Gebruikers van hulpsoftware krijgen geen informatie over deze kopjes. Voeg kopopmaak toe.

PDF Monitor coronacrisis januari 2021

De kopjes in het document zijn in de code niet als header aangegeven. Gebruikers van hulpsoftware krijgen geen informatie over deze kopjes. Voeg kopopmaak toe.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Contactformulier

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Autofill maakt het invullen van formulieren voor veel gebruikers gemakkelijker, zoals voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Voeg ‘autocomplete’ attributen toe bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98

Contactformulier

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Autofill maakt het invullen van formulieren voor veel gebruikers gemakkelijker, zoals voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Voeg ‘autocomplete’ attributen toe bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Onderaan de pagina van de eerste stap staan 2 velden om wel of niet akkoord te gaan met het doorgeven van contactgegevens. Het wordt visueel alleen aangegeven met een verschil in kleur welke is geselecteerd. Voor gebruikers die geen kleuren kunnen onderscheiden of niet weten dat blauw hier geselecteerd betekent, is het niet duidelijk welke optie is geselecteerd. Geef op een extra manier visueel aan welke optie is geselecteerd, bijvoorbeeld met een aangevinkte checkbox (die al in de code staat maar is verborgen met CSS).

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

In de kalender (stap 2) staan de beschikbare dagen alleen aangegeven met een verschillende kleur. Zie screenshot 2. Voor gebruikers die geen kleuren kunnen onderscheiden is het niet (goed) duidelijk welke dagen beschikbaar zijn. Geef op een extra manier visueel aan welke dagen beschikbaar zijn, bijvoorbeeld met een onderstreping.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Contactformulier

Uitkomst: Onvoldoende

PDF Rondkomen in Almere

Uitkomst: Onvoldoende

Homepage

De tekst ‘Kan ik u helpen?’ (wit op groen) heeft een contrast van 3.41:1. Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen. Gebruik minimaal een contrast van 4.5:1.

Contact

De skiplink ‘direct naar paginainhoud’ heeft een te laag contrast (turqoise op zwart, 3.84:1).

Melding openbare ruimte doorgeven (formulier, 4 stappen)

De teksten van de foutmeldingen/suggesties in het formulier (rood) hebben te weinig contrast (4:1).

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

De placeholdertekst zoals bij het mobiele nummer (stap 3) heeft te weinig contrast (2.8:1).

Contactformulier

De turquoise kopjes hebben te weinig contrast (3.41:1). De teksten van de foutmeldingen/suggesties in het formulier (rood) hebben te weinig contrast (4:1).

PDF Rondkomen in Almere

Het contrast van de tekst is op meerdere pagina’s niet voldoende, bijvoorbeeld de combinaties wit op groen, wit op turquoise, en wit op oranje.

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Contactformulier

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Het inzoomen op mobiele apparaten is onmogelijk gemaakt via het meta element. Gebruikers op mobiel kunnen mogelijk niet inzoomen om de tekst te vergoten. Haal de ‘maximum-scale=1’ weg van het meta element.

Contactformulier

Het inzoomen op mobiele apparaten is onmogelijk gemaakt via het meta element. Gebruikers op mobiel kunnen mogelijk niet inzoomen om de tekst te vergoten. Haal de ‘maximum-scale=1’ weg van het meta element.

Hele sample

Uitkomst: Onvoldoende

Afvalwijzer voor nieuwe inwoners

Uitkomst: Onvoldoende

Afvalwijzer voor nieuwe inwoners

Er staat een informatieve afbeelding op de pagina over grofvuil zonder dat hier een alternatief in tekst voor wordt geboden. Screenreader gebruikers missen deze informatie. Slechtzienden kunnen deze informatie missen omdat ze de tekst niet naar wens kunnen aanpassen zoals vergroten of de kleuren aanpassen. Biedt deze informatie (ook) in gewone tekst aan. Hertoetsing: het telefoonnummer in de alt tekst is anders dan op de afbeelding.

Hele sample

Uitkomst: Onvoldoende

AlmereVerhalen (video’s)

Uitkomst: Niet getoetst

Tarieven belastingen (tabellen)

Uitkomst: Niet getoetst

Hele sample

Bevindingen:

Op 400% (bij een breedte van 1280px) valt een deel van de content buiten beeld. Voorbeelden: • Een gedeelte van het chatvenster valt weg. Zie screenshot 3 en 4.

Slechtzienden die inzoomen missen een deel van de content. Ze kunnen niet alles zien wat ze intypen in het chatvenster. Zorg via responsive bouwen dat alle content en functionaliteit beschikbaar blijft tot in ieder geval 400% zonder in 2 richtingen te hoeven scrollen.

AlmereVerhalen (video’s)

Opmerking: Wanneer ingezoomd boven de 200% zijn de video’s voor een deel (de bedieningsknoppen) niet meer zichtbaar. Voor video bestaat onder dit criterium een uitzondering, maar het is wel gebruiksvriendelijker wanneer de bezoeker niet naar YouTube of fullscreen hoeft te gaan om de video te kunnen bekijken. Slechtzienden die inzoomen missen een deel van de content. Zorg via responsive bouwen dat alle content en functionaliteit beschikbaar blijft tot in ieder geval 400% zonder in 2 richtingen te hoeven scrollen.

Tarieven belastingen (tabellen)

Opmerking: Wanneer ingezoomd boven de 200% valt een deel van de tabel buiten beeld. Er is een scrollbar onderaan de tabel, maar het is lastig om naar onderen te gaan, te scrollen en daarna weer naar boven. Slechtzienden die inzoomen kunnen de tabel moeilijk gebruiken. Maak de tabel geheel responsive of zorg dat de horizontale scrollbar eerder in beeld komt.

Hele sample

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

De randen van de invoervelden van het formulier hebben de kleur #ccc. Deze kleur geeft een contrastwaarde van 1.6:1. Slechtzienden kunnen moeite hebben om te bepalen waar ze input kunnen geven. Verhoog het contrast van de randen van de interactieve elementen ten opzichte van de achtergrondkleur tot tenminste 3.0:1.

Hele sample

Uitkomst: Onvoldoende

Meldingen

Uitkomst: Onvoldoende

Meldingen

Wanneer de tekstafstanden uit dit succescriterium worden toegepast (zoals line-height, letter of word spacing), is niet alle tekst meer goed leesbaar, zoals de linkteksten in de blokjes en de placeholder tekst binnen het zoeken invoerveld.. Zie screenshot 5. Bezoekers die hun eigen styles gebruiken om de tekst beter leesbaar te maken missen een deel van de content. Dit kan worden opgelost door containers in de lay-out te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: http://www.html5accessibility.com/tests/tsbookmarklet.html

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De tooltip tekst bij de cookieverklaring (de vingerafdruk) kan alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) hover content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Onderaan de pagina staat een afbeelding met een vingerafdruk. Wanneer je hier met de muis overheen gaat, komt de tekst ‘Cookieverklaring’ tevoorschijn en kun je er op klikken. Met het toetsenbord kun je er echter niet bij (en weet je ook niet waar deze afbeelding voor dient). De links binnen de banner om al dan niet akkoord te gaan werken ook niet met het toetsenbord (doordat de href afwezig is). Toetsenbordgebruikers kunnen deze functionaliteit niet gebruiken. Maak de functionaliteit ook bedienbaar met het toetsenbord, bijvoorbeeld door hier een standaard button element voor te gebruiken. Het is duidelijker als het woord ‘Cookieverklaring’ altijd in beeld is. Hertoetsing: de button kan nu toetsenbordfocus krijgen, maar laat het woord ‘Cookieverklaring’ dan nog niet zien. Zie ook 4.1.2

Het hoofdmenu kan niet geopend en gebruikt worden met het toetsenbord. Toetsenbordgebruikers kunnen het hoofdmenu niet gebruiken. Maak de menuknop en de onderliggende menu’s bedienbaar met het toetsenbord. Hertoetsing: het kan nu geopend worden, maar nog niet goed gebruikt. De focus is niet zichtbaar en de focus gaat ook niet langs de juiste onderdelen (volgens de visuele volgorde).

Melding openbare ruimte doorgeven (formulier, 4 stappen)

De checkbox om akkoord te gaan kan niet worden ingevuld met het toetsenbord. Ook de verplichte keuze om wel of geen bijlagen mee te sturen is niet in te vullen met het toetsenbord. Toetsenbordgebruikers kunnen dit formulier niet afronden en verzenden. Maak deze invoer ook bedienbaar met het toetsenbord.

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Wanneer je gaat inzoomen komt er een menuknop (een plaatje). Deze is met het toetsenbord wel te openen, maar niet te gebruiken of te sluiten. Na het openen van het menu zit de gebruiker vast en kan niet verder met het formulier. Maak het menu bedienbaar met het toetsenbord en bied een manier om het menu te sluiten, bijvoorbeeld via een sluiten knop en/of escape toets.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

PDF Monitor coronacrisis januari 2021

Uitkomst: Onvoldoende

PDF Monitor coronacrisis januari 2021

Het document heeft geen bladwijzers. Bij documenten met veel pagina’s geven bladwijzers de gebruiker de mogelijkheid om meteen naar bepaalde content te springen. Dat is hier niet mogelijk. Voeg bladwijzers toe aan de PDF via koppen. Dit kan automatisch of handmatig, afhankelijk van het gebruikte programma.

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

De pagina’s met formulieren hebben geen unieke titel, namelijk ‘Almere formulieren’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Pas de titel aan met vermelding van het specifieke formulier (Melding openbare ruimte, Contactformulier).

Hele sample

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je het (sub)menu uitklapt, gaat de focus eerst naar het zoeken en daarna pas naar de menu-items. Dit kan verwarrend zijn voor screenreadergebruikers die verwachten meteen in een menu te komen. Pas de focusvolgorde aan.

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Wanneer een optie in het formulier is geactiveerd, ververst de pagina automatisch en komt de focus weer bovenaan de pagina te staan. Toetsenbordgebruikers moeten na elke keuze (submit) weer van bovenaf de pagina terug navigeren naar het veld waar ze gebleven waren. Dit is verwarrend en gebruiksonvriendelijk. Zorg dat na de submit de focus op het volgende veld komt dat moet worden ingevuld.

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

The municipality (Engelse pagina, tabel)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Wanneer je gaat inzoomen verdwijnen de stappen aan de linkerkant onder een link. Deze link (een afbeelding in CSS) heeft geen tekst. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Geef de link een naam.

The municipality (Engelse pagina, tabel)

Er staat een link naar de homepage zonder tekst. Deze link is niet zichtbaar via een afbeelding, maar wel bereikbaar met het toetsenbord. Gebruikers van hulpsoftware en toetsenbordgebruikers komen een link tegen zonder dat het duidelijk is waar deze heen gaat. Zorg dat de link ook voor hulpsoftware en toetsenbordgebruikers onzichtbaar is (geen focus kan krijgen), of geef de link een tekst.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

Uitkomst: Onvoldoende

Melding openbare ruimte doorgeven (formulier, 4 stappen)

In de stap met de bijlagen moet je een keuze maken tussen ‘ja’ en ‘nee’. Het is echter niet duidelijk waar de focus op staat. Met het toetsenbord is het lastig om hier een antwoord te selecteren. Maak de focus zichtbaar bijvoorbeeld via een outline.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Uitkomst: Onvoldoende

Afspraak maken (formulier, 4 stappen, keuze kavelwinkel)

Wanneer een optie in het formulier is geactiveerd, ververst de pagina automatisch. Dit is onverwacht gedrag, want dit verwacht je alleen bij een submit (verzend) knop. Voor gebruikers van hulpsoftware kan dit erg verwarrend zijn omdat ze ineens weer bovenaan de pagina staan en zich opnieuw moeten oriënteren. Voorkom een pagina refresh tijdens het invullen van een formulier.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De sluitknop voor de livechat heeft een Engelse benaming: ‘close’. Het is verwarrend als op een Nederlandse pagina Engelse buttons staan. Zet de aria-label in het Nederlands.

Bij de links in het menu wordt niet aangegeven of het submenu in-of uitgeklapt is. Gebruikers van hulpsoftware weten niet of het is uitgeklapt. Voeg het ‘aria-expanded’ attribuut toe aan de link. Hertoetsing: Wanneer de pagina geladen wordt, is de aria-expanded state afwezig. Deze wordt pas gevuld na de eerste activatie, maar hoort er altijd te staan. Dit geldt voor de Menu knop en voor de onderliggende uitklapbare items. Dit geldt ook voor de ‘Veel bekeken’ link op de homepage.

Hertoetsing: De button voor de cookieverklaring heeft als naam ‘revoke cookies’. Dit klopt niet qua taal en qua status, want dit staat er ook als ik geen akkoord heb gegeven. Binnen de cookiebar staan de buttons ook in het Engels (deny en allow cookies). Aria-label overschrijft de content van een button. Voor gebruikers van hulpsoftware is het onduidelijk wat deze buttons doen. Zorg voor een correcte benaming in de juiste taal. Haal overbodige aria-labels weg.

Hele sample

Uitkomst: Niet van toepassing