Onderzoek toegankelijkheid WCAG 2.1 niveau A en AA
almere.nl
22 februari 2021 Janita Top
Dit document is een bijlage bij het Managementrapport ‘almere.nl onderzoek webtoegankelijkheid’.
Inhoud:
Scope ... 3
Evaluatiemethode ... 3
Sample ... 3
Basisniveau van toegankelijkheidsondersteuning ... 4
Gebruikte technieken ... 5
Gebruikte systemen tijdens het onderzoek ... 5
Bevindingen ... 5
Screenshots ... 28
https://www.almere.nl/
Evaluatiemethode
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools.
De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA, vereist in de Europese toegankelijkheidsnorm EN 301 549.
Sample
De onderzoeksresultaten van deze sample zijn representatief voor alle content op het onderzochte domein.
Nr Omschrijving URL
1 Homepage https://www.almere.nl/
2 Contact https://www.almere.nl/contact
3 Coronavirus https://www.almere.nl/wonen/zorg-en-welzijn/maatregelen-in-almere-tegen-coronavirus 4 Informatie voor ondernemers over het
coronavirus (video) https://www.almere.nl/ondernemen/informatie-voor-ondernemers-over-het-coronavirus
5 Meldingen https://www.almere.nl/dienstverlening/meldingen
6 Melding openbare ruimte https://www.almere.nl/?id=4015 7 Melding openbare ruimte doorgeven (formulier, 4
stappen) https://formulieren.almere.nl/TriplEforms/formulier/nl-
NL/evAlmere/scMeldingOpenbareRuimte.aspx/fMor (via https://www.almere.nl/?id=4015) 8 Afspraak maken https://www.almere.nl/dienstverlening/afspraak-maken-wijzigen-of-afzeggen
9 Afspraak maken (formulier, 4 stappen, keuze
kavelwinkel) https://mijn.almere.nl/afspraakmaken/services
10 The municipality (Engelse pagina, tabel) https://english.almere.nl/the-municipality
11 Zoekresultaten ‘toegankelijkheid’ https://www.almere.nl/zoeken?tx_solr%5Bq%5D=toegankelijkheid
12 Uitkering https://www.almere.nl/werken/uitkering
13 Werken en meedoen https://www.almere.nl/werken/werken-en-meedoen
14 Rondkomen met een laag inkomen https://www.almere.nl/werken/rondkomen-met-een-laag-inkomen 15 AlmereVerhalen (video’s) https://www.almere.nl/over-almere/almereverhalen
16 Afvalwijzer voor nieuwe inwoners https://www.almere.nl/wonen/afval/afvalwijzer-voor-nieuwe-inwoners
17 Contactformulier https://formulieren.almere.nl/TriplEforms/formulier/nl-NL/evAlmere/scContactformulier.aspx/fIntro (via https://www.almere.nl/contact)
18 Tarieven belastingen (tabellen) https://www.almere.nl/wonen/belastingen/tarieven-belastingen
19 Random pagina https://www.almere.nl/ondernemen
20 Random pagina https://www.almere.nl/bestuur/college-van-b-en-w/wethouder-jan-hoek-groenlinks
21 PDF Monitor coronacrisis januari 2021 https://www.almere.nl/fileadmin/user_upload/OenS/Monitor_Coronacrisis/Monitor_Coronacrisis- nr_13_definitief_V20210114.pdf
22 PDF Rondkomen in Almere https://www.almere.nl/fileadmin/files/almere/werken/Rondkomen_met_een_laag_inkomen/201127_R ondkomen_in_Almere_folder_okt20.pdf
Basisniveau van toegankelijkheidsondersteuning
Gangbare webbrowsers en hulpapparatuur.
HTML, CSS, JavaScript, WAI-ARIA, PDF
Deze technieken vallen onder de door W3C uitgebrachte technieken die ondersteund zijn door toegankelijkheid.
Gebruikte systemen tijdens het onderzoek
Chrome 88 en Safari 14.0.3 met VocieOver op Mac 10.15.7 Adobe Acrobat Pro DC 2021.001.20138 op Mac 10.15.7 Chrome 88 op Android 9
Edge 88 op Windows 10
Bevindingen
Bevindingen die op meerdere pagina’s in vergelijkbare vorm voorkomen, worden niet op alle pagina’s benoemd.
Wanneer er ‘opmerking:’ bij een bevinding staat, is dit gedeelte geen afkeuring (er wordt voldaan aan de norm), maar een advies ter verbetering voor de gebruiker.
Alle criteria zijn in te zien op https://www.w3.org/Translations/WCAG21-nl/.
Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting
1.1.1 Niet-tekstuele
content (A) 3 Er staat een afbeelding op de pagina met informatie over de avondklok. Deze afbeelding heeft geen goede
alternatieve tekst. Eerst is het alt attribuut leeg en na het selecteren van de afbeelding is het alt attribuut afwezig.
Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit is.
Voeg een korte beschrijving toe in de alt tekst en geef een verwijzing naar de gehele tekst in HTML. (Zie ook 1.4.5)
1 Boven de footer staan 4 afbeeldingen. Van 2 hiervan is de alt tekst niet beschrijvend voor wat er op de foto is te zien: ‘Ondernemen’ en ‘Zelf bouwen in Almere’.
Bezoekers die de afbeelding niet kunnen zien krijgen niet de juiste informatie.
Als deze afbeeldingen puur decoratief zijn bedoeld, kunnen de alt attributen beter leeg worden gelaten. Dan negeert hulpsoftware de foto’s.
4 Onder ‘Zelfstandigen/zzp'ers - aanvragen Tozo’ staat een infographic. Deze heeft wel een goede beschrijving in de alt tekst, maar er wordt geen volledig alternatief
geboden voor de beschreven stappen in de afbeelding.
Bezoekers die de afbeelding niet kunnen zien of goed kunnen lezen missen deze informatie.
Plaats deze informatie in HTML in plaats van in een afbeelding of plaats bij de afbeelding een link naar de alternatieve tekst elders.
7,17 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.
9 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.
Bezoekers die de afbeelding niet kunnen zien missen deze informatie.
Plaats het logo in de HTML met een goede alternatieve tekst.
12 In de kolom naast/achter de hoofdcontent staat een afbeelding met de tekst ‘Rondkomen in Almere..’. Dit geeft informatie dat er een folder is over dit onderwerp (zonder link). De alt tekst is echter leeg alsof het een decoratieve afbeelding betreft.
Bezoekers die de afbeelding niet kunnen zien missen deze informatie.
Pas de alt tekst aan.
15 Opmerking: Bij de portretfoto staat 3 keer de tekst ‘
Niña Weijers © Iris Duvekot‘, als title, alt en caption. Dit geeft ruis voor
gebruikers van hulpsoftware die 3 keer dezelfde tekst krijgen voorgelezen.
Haal het title attribuut weg en pas de alt tekst aan met enkel ‘portret Nina Weijers’. Copyright
informatie hoort niet in een alt tekst.
15 Bij de beschrijving van de video’s wordt de tweede video
niet genoemd. Bezoekers die de
afbeeldingen niet kunnen zien weten niet dat er 2 video’s onder de tekst staan.
Pas de beschrijving aan.
21,22 De afbeeldingen in het document missen een alt tekst.
Bij 22 geldt dit voor illustraties en logo’s. Bij 21 geldt dit 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.
Bezoekers die de
afbeeldingen niet kunnen zien krijgen niet de juiste informatie.
Pas de alt-teksten en beschrijvingen aan.
1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (A)
Niet van toepassing
1.2.2 Ondertiteling voor doven en slechthorenden (vooraf opgenomen) (A)
4 De video over ‘Optimaal gebruik maken van NOW 3 0’
heeft geen goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal.
Doven en slechthorenden kunnen het audiogedeelte in deze video niet goed mee krijgen.
Voeg een correcte ondertiteling toe.
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (A)
4 In de video over ‘Optimaal gebruik maken van NOW 3 0’
komt informatie in beeld die niet wordt uitgesproken. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee.
Behalve via audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
15 In de video ‘Niña Weijers vierde schrijver Almere Verhalen’ komen in het begin 3 boekomslagen in beeld.
Deze informatie wordt niet uitgesproken.
Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee.
Behalve via audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video. (En dit hoeft ook geen audiodescriptiespoor te zijn onder 1.2.5 omdat deze informatie niet tijdskritiek is maar algemeen.)
1.2.4 Ondertitels voor doven en slechthorenden (live) (AA)
Niet van toepassing
1.2.5 Audiodescriptie
(vooraf opgenomen) (AA) 4 In de video over ‘Optimaal gebruik maken van NOW 3 0’
komt informatie in beeld die niet wordt uitgesproken. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee.
Er komt informatie in beeld die niet wordt uitgesproken. Onder niveau AA kan niet worden volstaan met een alternatief, maar is audiodescriptie vereist.
1.3.1 Info en relaties (A) 1,2 Opmerking: de pagina heeft 4 banner landmarks (via het
<header> element), behalve op de plek in de header waar deze verwacht wordt. Er wordt aangeraden om per pagina maar 1 banner te gebruiken waarin de
belangrijkste header elementen zitten (logo, navigatie, search). De pagina mist een ‘main’ landmark. Zie screenshot 1.
Op pagina 2 zijn er zelfs 11 banner landmarks. Dit komt doordat elke kop in een <header> element staat.
Gebruikers van hulpsoftware kunnen sneller navigeren via landmarks. Deze moeten dan wel een goede weergave zijn van de paginastructuur.
Voeg een main landmark toe.
Haal de banner landmarks buiten de ‘echte’ header weg en voeg deze toe in de header van de pagina. De footer kan een navigation en een contentinfo landmark krijgen. Bij meerdere landmarks van dezelfde soort (zoals navigation) kun je met aria- label het verschil aangeven, zoals hoofdmenu en footermenu. Alle
content op een pagina hoort onder een landmark te vallen.
Zie voor meer info
https://webaim.org/techniques/a ria/#landmarks
1,2 Het invoerveld om te zoeken heeft geen label. Gebruikers van hulpsoftware weten niet waar dit
invoerveld voor is.
Voeg een (eventueel met CSS verborgen) label element toe en link deze via een id aan het invoerveld.
3 Het invoerveld voor de vraag in de live chat popup heeft
geen label. Gebruikers van hulpsoftware
weten niet waar dit invoerveld voor is.
Voeg een label toe.
1,2,3 De koppenstructuur klopt niet. Zo vallen op pagina 1
‘College’, ‘Gemeenteraad’ en ‘Ondernemen’ als h3 onder de h2 kop ‘Veel bekeken’ (of zijn die items ook veel bekeken?) en vallen de h3 koppen ‘Growing Green Cities’
en verder onder de h2 kop ‘Contact met de gemeente’.
De koppen in de footer vallen op pagina 2 onder
‘Huisregels’.
Op pagina 3 vallen er onder de h2 kop ‘Situatie rondom corona blijft ernstig, lockdown verlengd’ opnieuw h2 koppen. Deze moeten op h3 niveau zijn.
Screenreader gebruikers die navigeren via koppen kunnen hierdoor in verwarring raken. De structuur is niet duidelijk.
Zorg voor een goede koppen hiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan.
Voeg boven de footer een (eventueel met CSS verborgen) kopje toe om deze af te scheiden van de hoofdcontent.
1 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.
4 De koppenstructuur klopt niet. Zo staat er een h2
‘Information in English’ waaronder de h3 koppen
‘Stadhuis’, ‘Burgerzaken’ etc in de footer vallen.
Screenreader gebruikers die navigeren via koppen kunnen hierdoor in verwarring raken. De structuur is niet duidelijk.
Zorg voor een goede koppen hiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan.
7,9 De vraag op welke straat de melding van toepassing is, is niet goed opgemaakt. Dit element heeft de rol
‘combobox’ maar mist 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
7,9,17 Er zijn meerdere invoervelden gevonden zonder (correct geassocieerd) label, bijvoorbeeld het huisnummer en de beschrijving (pagina 7), voornamen en achternaam (pagina 17).
Op pagina 9, stap 2, is het label ‘beschikbare datum’ niet correct geassocieerd met het invoerveld, het id klopt niet (‘service’ i.p.v. ‘date’).
Gebruikers van hulpsoftware weten niet waar deze invoervelden voor zijn.
Voeg labels toe en koppel deze met een correct id aan de betreffende invoervelden.
9 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).
Hulpsoftware kan deze tabel
niet goed interpreteren. Zorg dat alle headers verwijzen naar datacellen. Overige headers moeten worden verwijderd.
4 In de menu-items staan checkboxes en labels voor de
dropdown menu’s. De checkboxes zijn verborgen voor Het is verwarrend voor screenreader gebruikers wat hier gebeurt. Een label hoort
Verberg het label ook voor hulpsoftware.
hulpsoftware maar de labels niet. Hier wordt nu een
icoontje opgelezen. bij een input maar die is hier
niet.
6 De actieve pagina in het menu wordt aangegeven met een pijltje voor de tekst. In de tekst wordt dit echter niet aangegeven.
Hulpsoftware kan niet opmaken uit de code welk menu-item actief is.
Voeg aria-current=“page” toe aan het actieve menu-item.
11 De actieve pagina in de paginanummering wordt aangegeven met een blauwe achtergrondkleur. In de tekst wordt dit echter niet aangegeven.
Hulpsoftware kan niet opmaken uit de code welk paginanummer actief is.
Voeg aria-current=“page” toe aan het actieve nummer.
13,14,16,19 Er staan koppen op de pagina waarachter geen content volgt. Deze koppen zijn enkel links en moeten daarom ook alleen als link in de code zijn opgemaakt.
Dit kan verwarrend zijn voor gebruikers van hulpsoftware omdat ze kunnen denken dat ze content missen.
Haal de kopopmaak weg. Pas eventuele styling aan met CSS.
16 Er is een (h5) kop waarachter geen content volgt. Dit kan verwarrend zijn voor gebruikers van hulpsoftware omdat die navigeren via koppen.
Haal de kopopmaak weg.
17 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.
18 In de tabellen van de onroerendzaakbelasting, rioolheffing en afvalstoffenheffing worden de horizontale headers niet in de code als header aangegeven.
Voor gebruikers van hulpsoftware is het nu niet duidelijk welke cellen aan elkaar gekoppeld zijn.
Voeg header cellen toe met scope=’row’ en geef met rowspan aan hoeveel regels er onder deze header cell vallen. Zie als
voorbeeld
https://www.w3.org/WAI/tutorial
s/tables/irregular/#table-with- headers-spanning-multiple-rows- or-columns
22 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.
1.3.2 Betekenisvolle
volgorde (A) Geen problemen gevonden
1.3.3 Zintuiglijke
eigenschappen (A) Geen problemen gevonden
1.3.4 Weergavestand (AA) Geen problemen gevonden 1.3.5 Identificeer het doel
van de input (AA) 7,17 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
1.4.1 Gebruik van kleur (A) 7 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
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).
duidelijk welke optie is geselecteerd.
9 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.
1.4.2 Geluidsbediening (A) Niet van toepassing
1.4.3 Contrast (AA) 1 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.
1 De witte teksten in de footer hebben te weinig contrast
met de achtergrond (2.94:1). Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
4 De groene h4 kopjes zoals ‘KVK Coronaloket’ hebben te weinig contrast (3.41:1). (De h3 kopjes voldoen wel doordat zij groter zijn.)
Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
4,19 De menu-items in de header (English, Contact, Mijn Almere.nl) hebben te weinig contrast doordat de witte teksten op een lichte achtergrondfoto staan.
Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1. Zorg dat er altijd een donkere foto achter staan of voeg een achtergrondbalkje toe.
6 De knop met ‘Melding Openbare Ruimte’ heeft te weinig
contrast (2.93:1). Gebruikers die slechtziend
of kleurenblind zijn kunnen Gebruik minimaal een contrast van 4.5:1.
de teksten moeilijker of niet lezen.
10 De tabel captions (turquoise) hebben te weinig contrast
(3.41:1), bijv. ‘Almere’s city council’. Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
11 De vermelding van de site achter de resultaten (‘[Site:
growinggreencities.almere.nl]‘) heeft te weinig contrast (2.84:1).
Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
17 De turquoise kopjes hebben te weinig contrast (3.41:1). Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
9 De placeholdertekst zoals bij het mobiele nummer (stap
3) heeft te weinig contrast (2.8:1) Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
22 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.
Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.
Gebruik minimaal een contrast van 4.5:1.
1.4.4 Herschalen van tekst
(AA) 7,17 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.
1 Bij het inzoomen vanaf 110% verdwijnen de afbeeldingen bij College, Gemeenteraad en
Ondernemen. Deze foto’s hebben beschrijvingen en zijn daarom content. Content moet bij inzoomen altijd beschikbaar blijven.
Gebruikers die inzoomen om de tekst te vergroten missen een deel van de content.
Zorg via responsive bouwen dat alle content en functionaliteit beschikbaar blijft wanneer je inzoomt.
1 Bij het inzoomen van 100% naar 110% verandert de menuknop qua layout. Er zit nu ineens een ander menu achter (submenu i.p.v. hoofdmenu).
Gebruikers die inzoomen om de tekst te vergroten krijgen ineens een ander menu op dezelfde plek. Dit is verwarrend.
Geef visueel aan om wat voor menu het gaat, bijvoorbeeld met een kopje ‘submenu’. (En eventueel een link naar het hoofdmenu, want die is nu verdwenen).
6 Bij het inzoomen komt de feedback-afbeelding over de subitems te staan van het submenu wanneer die wordt uitgeklapt.
De subitems knoppen zijn deels niet meer zichtbaar en bereikbaar.
Zorg via responsive bouwen dat alle content en functionaliteit beschikbaar blijft wanneer je inzoomt.
1.4.5 Afbeeldingen van
tekst (AA) 3,4 Er staat een informatieve afbeelding op de pagina over de avondklok (en op pagina 4 over de Tozo stappen) 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. In de alt tekst kan hier dan naar verwezen worden.
16 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
Biedt deze informatie (ook) in gewone tekst aan
kunnen aanpassen zoals vergroten of de kleuren aanpassen.
1.4.10 Reflow (AA) 1,4,8 Op 400% (bij een breedte van 1280px) valt een deel van de content buiten beeld. Voorbeelden:
• Een gedeelte van het chatvenster valt weg.
• De links ‘Gemeenteraad’ en ‘Ondernemen’ staan over elkaar heen (p1).
• Soms worden teksten afgebroken (p8).
• De ‘Menu’ knop valt soms over teksten heen zoals in de sidebar en het kruimelpad.
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.
15 Opmerking: Wanneer ingezoomd boven de 200% zijn de video’s voor een deel 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.
18 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.
1.4.11 Contrast van niet-
tekstuele content (AA) 4 Het contrast van de uitklap-icoontjes in het submenu (achter ‘Ik ben een starter in Almere’) heeft onvoldoende contrast.
Slechtzienden kunnen moeite hebben om te bepalen waar ze input kunnen geven.
Verhoog het contrast van interactieve elementen ten opzichte van de achtergrondkleur tot tenminste 3.0: 1.
1 Het contrast van de social media iconen heeft te weinig
contrast (2.7:1) Slechtzienden kunnen
moeite hebben om te bepalen waar ze input kunnen geven.
Verhoog het contrast van interactieve elementen ten opzichte van de achtergrondkleur tot tenminste 3.0: 1.
9 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.
1.4.12 Tekstafstand (AA) 5 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.co m/tests/tsbookmarklet.html 7 Wanneer ingezoomd op 400% de tekstafstanden uit dit
succescriterium worden toegepast (zoals line-height, letter of word spacing), valt een deel van de tekst buiten beeld. Zie screenshot 6.
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.
1.4.13 Content bij hover or
focus (AA) 1 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,
Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.
moeten ze deze met het toetsenbord weg kunnen halen.
2.1.1 Toetsenbord (A) 1 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.
Alle 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.
3 De grijze secties met pijltjes kunnen niet worden
uitgeklapt met het toetsenbord. Toetsenbordgebruikers kunnen deze content niet openen.
Maak de functionaliteit ook bedienbaar met het toetsenbord, bijvoorbeeld door hier een standaard button element voor te gebruiken.
4,6 De submenu’s in de sidebar, zoals onder ‘Ik ben een starter in Almere’, kunnen niet geopend worden met het toetsenbord.
Toetsenbordgebruikers kunnen de submenu’s niet gebruiken. Soms kun je er indirect via de hoofdlink wel komen, maar dit is niet bij alle subitems het geval.
Maar de submenu’s ook
bereikbaar met het toetsenbord.
3 Het chat venster kan niet worden gesloten met het
toetsenbord. Toetsenbordgebruikers
kunnen dit gedeelte niet afsluiten en uit beeld halen.
Maak de knop bedienbaar met het toetsenbord en voeg eventueel toe dat het gesloten kan worden met de escape toets, aangezien dit een veelgebruikt patroon is.
7,17 De checkbox om akkoord te gaan kan niet worden
ingevuld met het toetsenbord. Toetsenbordgebruikers
kunnen dit formulier niet afronden en verzenden.
Maak deze checkbox ook
bedienbaar met het toetsenbord.
1 Wanneer je inzoomt van 100 naar 110% komt het submenu achter een knop te staan. Deze is niet te openen met het toetsenbord.
Toetsenbordgebruikers kunnen het submenu niet gebruiken.
Maak de knop bedienbaar met het toetsenbord.
1 Wanneer je bent ingezoomd op 150% worden de ‘Veel bekeken’ links ingeklapt. Deze zijn met het toetsenbord niet te openen.
Toetsenbordgebruikers die inzoomen kunnen deze links niet gebruiken,
Maak de links uitklapbaar met het toetsenbord.
2.1.2 Geen toetsenbordval
(A) 7,17 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.
2.1.4 Enkel teken
sneltoetsen (A) 15 Op deze pagina wordt gebruik gemaakt van een
videospeler van Youtube. Deze videospeler voldoet niet aan dit succescriterium omdat deze gebruik maakt van bediening door tekentoetsen. Als de focus in dit iframe staat is de video bijvoorbeeld te pauzeren door op de letter 'K' te drukken. Dit is niet toegestaan.
Deze sneltoetsen zitten de werking van
voorleessoftware in de weg.
De oplossing is de embedcode van de YouTube video aanpassen zodat de bediening met
tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze
aanpassing is de videospeler van YouTube toegankelijk.
Zie ook
https://developers.google.com/y outube/player_parameters#disabl ekb
2.2.1 Timing aanpasbaar
(A) Niet van toepassing
2.2.2 Pauzeren, stoppen,
verbergen (A) Niet van toepassing
2.3.1 Drie flitsen of beneden drempelwaarde (A)
Geen problemen gevonden
2.4.1 Blokken omzeilen (A) Alle Er is een skiplink om direct naar de inhoud te gaan, maar deze werkt op de homepage niet doordat het doel niet aanwezig is op de pagina (met het id ‘main’).
Op pagina 2 en verder lijkt het visueel te werken, maar de toetsenbordfocus is niet veranderd waardoor je alsnog door de header items heen moet (en op sommige pagina’s ook door alle menu-items in de sidebar).
Toetsenbordgebruikers die via de tabtoets navigeren kunnen de header items niet overslaan.
Voeg het id ‘main’ toe aan de homepage. Zorg op andere pagina’s dat de toetsenbordfocus ook naar de hoofdcontent gaat.
21,22 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.
2.4.2 Paginatitel (A) 7,17 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).
22 Het document heeft geen titel. Voor gebruikers van
hulpsoftware is het voor de navigatie tussen
documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn.
Wanneer een pdf geen titel heeft wordt de
bestandsnaam getoond, deze is niet altijd even duidelijk.
Geef het document een
beschrijvende titel via document eigenschappen.
2.4.3 Focus volgorde (A) 4,6 Wanneer submenu’s zoals onder ‘Ik ben een starter in Almere’ zijn ingeklapt (dus niet zichtbaar), krijgen de links nog wel toetsenbordfocus.
Dit gebeurt met alle (sub)menu items wanneer je bent ingezoomd en deze achter een ‘Menu’ knop komen te staan.
Dit is verwarrend voor ziende
toetsenbordgebruikers omdat ze op links komen te staan die ze niet kunnen zien.
Zorg dat als links visueel
verborgen zijn, ze ook geen focus kunnen ontvangen.
7,9 Wanneer een optie in het formulier is geactiveerd, zoals de straat, 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
Zorg dat na de submit de focus op het volgende veld komt dat moet worden ingevuld.
verwarrend en gebruiksonvriendelijk.
2.4.4 Linkdoel (in context)
(A) 3,12 Er staat een link naar een afbeelding over de avondklok
zonder linktekst. 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.
Voeg een (eventueel met CSS verborgen) linktekst toe of een beschrijvende alt tekst bij de afbeelding.
1 De links naar social media onder ‘Contact met de gemeente’ hebben geen tekst. (Een title attribuut is niet voldoende omdat dit niet door alle hulpsoftware wordt ondersteund.)
Dit geldt ook voor de social media links in het hoofdmenu.
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.
Voeg tekst toe binnen de links of via het aria-label attribuut op de links.
10 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.
11 Bij de paginanummering staan links met pijltjes. Deze
hebben geen tekst. Screenreaders lezen hier
een teken op in plaats van
‘volgende’ of ‘vorige’.
Voeg geschikte tekst toe aan deze links.
12 Er staan er 2 links met afbeeldingen op de pagina zonder tekst. Een link gaat naar de play store en een naar een pdf.
Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke
Geef de afbeeldingen
beschrijvende alt teksten zodat het doel duidelijk is.
informatie geven kunnen ze niks met deze links.
16 De link naar grof vuil (blok met afbeelding en o.a. de
tekst ‘grofvuil laten ophalen’) 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 afbeelding een beschrijvende alt tekst of voeg een tekst toe binnen de link.
20 Er staat een link naar een foto van de wethouder zonder
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 afbeelding een beschrijvende alt tekst.
7 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.
2.4.5 Meerdere manieren
(AA) Geen problemen gevonden
2.4.6 Koppen en labels
(AA) Geen problemen gevonden
2.4.7 Focus zichtbaar (AA) 17 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.
2.5.1 Aanwijzergebaren (A) Niet van toepassing 2.5.2 Aanwijzerannulering
(A) Geen problemen gevonden
2.5.3 Label in naam (A) 2 De link met de afbeelding met tekst ‘Uw reactie’ heeft als toegankelijke tekst (in de code) ‘Wat vindt u van onze website?’. Deze teksten moeten met elkaar
overeenkomen.
Wanneer een gebruiker met spraak de link wil activeren, werkt dit niet door ‘Klik uw reactie’ als commando te geven.
Pas de alt tekst aan.
12, 16 De links naar de app en de uitkeringsfolder bestaan uit afbeeldingen met tekst, maar de links hebben in de code geen naam.
Dit geldt ook voor de link naar Grofvuil op pagina 16.
Wanneer een gebruiker met spraak de links wil activeren, werkt dit niet doordat er geen naam achter zit.
Pas de alt tekst aan.
2.5.4 Bewegingsactivering
(A) Niet van toepassing
3.1.1 Taal van de pagina
(A) 10 De pagina heeft geen geldig taalattribuut (lang=’en’). Nu
staat er xml:lang="en". Screenreaders lezen de pagina mogelijk niet in de juiste taal voor.
Stel de juiste taal in op het html element via het lang attribuut.
3.1.2 Taal van onderdelen
(AA) 16 Onder de hoofdcontent staat een zin in het Engels
zonder dat dit in de code is aangegeven (‘Icons made by…’).
Screenreaders kunnen niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd op.
Geef de taal van de Engelse tekst aan met het attribuut lang="en"
op het betreffende element.
3 Bij de linktekst ‘Corona-information in other languages’
is geen taal aangegeven in de code. Screenreaders kunnen niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd op.
Geef de taal van de Engelse tekst aan met het attribuut lang="en"
op het betreffende element.
3.2.1 Bij focus (A) Geen problemen gevonden
3.2.2 Bij input (A) 7,9 Wanneer een optie in het formulier is geactiveerd, zoals de straat, 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.
3.2.3 Consistente navigatie
(AA) Geen problemen gevonden
3.2.4 Consistente
identificatie (AA) Geen problemen gevonden
3.3.1 Fout Identificatie (A) 7,17 Wanneer er fouten zijn gevonden in het formulier wordt dit niet duidelijk in tekst aangegeven. Er is geen
algemene melding dat het formulier niet verzonden kan worden (per processtap) en ook geen tekst met uitleg welke velden verbeterd moeten worden. Er staan wel icoontjes en tooltip-teksten, maar die komen niet goed door in hulpsoftware zoals screenreaders.
Gebruikers van hulpsoftware weten niet wat er gebeurt en wat ze moeten
aanpassen.
Voeg een algemene foutmelding toe en per te verbeteren veld een voor iedereen bruikbare tekst.
3.3.2 Labels of instructies
(A) Geen problemen gevonden
3.3.3 Foutsuggesties (AA) Geen problemen gevonden
3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (AA)
Niet van toepassing
4.1.1 Parsen (A) 1,7,17 Er zijn id’s gevonden die meerdere keren op de pagina
voorkomen. Wanneer id’s meerdere
keren op een pagina voorkomen kan
hulpsoftware de code niet goed interpreteren.
Maak de id’s uniek.
4.1.2 Naam, rol, waarde
(A) 4,15 Er mist een title in de iframe van de video. Gebruikers van hulpsoftware
weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan.
Voeg een beschrijvende title toe.
1 De button voor de livechat heeft een Engelse benaming:
‘messenger launcher’. De sluitknop heeft als label ‘close’. Het is verwarrend als op een Nederlandse pagina Engelse buttons staan.
Zet de aria-label van de svg’s in het Nederlands.
1 In de menuknop wordt niet aangegeven of het menu uit- of ingeklapt is.
Wanneer je bent ingezoomd wordt niet aangegeven of de lijst met ‘Veel bekeken’ links is uitgeklapt.
Gebruikers van hulpsoftware weten niet of het is
uitgeklapt.
Voeg het ‘aria-expanded’
attribuut toe aan de button. Zie voor meer info
https://www.w3.org/TR/wai-aria- 1.1/#aria-expanded
1 Wanneer je inzoomt op 110% komt het submenu achter een menuknop te staan. Deze knop heeft als naam
‘navigation’. Dit is een label zonder bijbehorend invoerveld, want deze is verborgen voor hulpsoftware.
Voor gebruikers van hulpsoftware is het niet duidelijk om wat voor invoerveld het hier gaat.
Maak hier een button element van met een duidelijke
(Nederlandse) naam.
3 Bij de secties in de grijze blokken met pijltjes wordt niet
aangegeven of de content in-of uitgeklapt is. Gebruikers van hulpsoftware weten niet of het is
uitgeklapt.
Voeg het ‘aria-expanded’
attribuut toe aan de button.
4 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.
4.1.3 Statusberichten (AA) Niet van toepassing
Figuur 1: overbodige banner landmarks op de homepage
Figuur 2: kalender gezien zonder kleuren
Figuur 3: het chatvenster wanneer ingezoomd op 400%
Figuur 4: op 400% komen links door elkaar heen te staan
Figuur 5: bij het aanpassen van de tekstafstand worden teksten afgebroken
Figuur 6: bij het aanpassen van de tekstafstand valt een deel van de tekst buiten de kaders
