Toegankelijkheidsonderzoek

Issues:
Audit Klant Tevredenheidsonderzoek Gemeente Den Haag

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Klant Tevredenheidsonderzoek Gemeente Den Haag
Scope van de website
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 18

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Bij de verplichte velden in het formulier staat een (asterisk) sterretje. Hulpsoftware leest dit niet altijd voor. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk welke velden verplicht zijn. (Zie ook succescriterium 3.3.2.)

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 2: In het formulier zijn de groepslabels “Hoe tevreden bent u in het algemeen over onze website? *” en “Hoe gemakkelijk was het om deze actie uit te voeren? *” opgemaakt met het strong-element. Het probleem is dat strong bedoeld is om nadruk te geven aan één of enkele woorden, niet om (groeps)labels of koppen op te maken. Gebruik hier bijvoorbeeld CSS om de tekst visueel op te maken als label.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 3: Wanneer bij een schermgrootte van 1024x768px ingezoomd wordt tot 200% dan verdwijnt een deel van de informatie onderop buiten het scherm. Met scrollen zie je slechts een deel maar niet alle informatie. Zorg dat deze informatie altijd binnen het venster bereikbaar is.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 4: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt een deel van de keuzes "0" tot en met "10" buiten beeld. Ook andere onderdelen zijn niet altijd in beeld te krijgen. (Zie ook SC 1.4.4). Vermijd overigens de scrollbalk in de leesrichting (horizontaal)!

Bevinding 5: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan komen veel elementen over elkaar heen te staan. De "i"-knop blijft in beeld en blokkeert de content eronder. De Afronden-knop verdwijnt buiten beeld en is niet meer zichtbaar te krijgen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 6: In het dialoogvenster staat rechts bovenin een link met een afbeelding van de letter “i”. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze link niet bedienen. Zorg ervoor dat alle interactieve elementen bedienbaar zijn met het toetsenbord. Er is meer aan de hand met deze link: zie ook succescriterium 4.1.2.

Bevinding 7: Wanneer de hierboven genoemde knop geactiveerd wordt met de muis, wordt aanvullende content getoond. Bovenin staat een afbeelding van de letter “x” die bedoeld is om deze aanvullende content te verbergen. Deze link is niet te bedienen met het toetsenbord, en ook ontbreekt (als alternatief) de mogelijkheid om deze content te sluiten met een Escape toets.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 8: Het dialoogvenster bevindt zich in een html-document dat in een iframe is geplaatst. Een html-document binnen een iframe moet over een paginatitel beschikken en deze moet de inhoud van de pagina duidelijk beschrijven. Zorg dat er door middel van het title-element een beknopte titel aanwezig is die de inhoud van het dialoogvenster beschrijft.
Let op: Om het dialoogvenster staan twee (geneste) iframes en daarmee ook twee html-documenten. Daardoor dienen beide html-documenten te worden voorzien van een title-element. Beter is om, indien mogelijk, één van de iframes te laten vervallen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 9: Als de pagina is geladen dan kan ik door de pagina gaan en deze lezen. Tijdens het lezen word je abrupt onderbroken door het dialoogvenster. Daarna is het even onduidelijk of de focusvolgorde nog goed gaat. Verwacht resultaat:

Vooralsnog lijkt dit laatste niet helemaal goed te gaan.

Bevinding 10: Nadat het dialoogvenster is geopend, wordt de focus op het dialoogvenster geplaatst. Dat gaat goed. Daarbovenop dient de focus ook binnen het dialoogvenster te blijven, zolang dit open staat. Dat gaat hier nog niet goed. Zodra het einde van het pop-up venster is bereikt en er wordt verder getabd dan verdwijnt de focus buiten de pop-up terug naar de ‘onderliggende’ pagina. Zorg ervoor dat de focus binnen de pop-up blijft zolang deze open staat en plaats de focus pas weer terug op een logische plaats binnen de pagina als deze gesloten wordt. Bij voorkeur naar de locatie waar vandaan de modal werd geactiveerd.

Bevinding 11: Als je door het dialoogvenster heen gaat met de tabtoets en na het einde terug gaat met Shift+Tab kom je op 3 plekken waar niet duidelijk is waar je je bevindt, ook worden er door de screenreader geen namen van de focusbare elementen voorgelezen. Zorg dat de tabvolgorde heen en terug logisch is en en maak de focus eventueel zichtbaar.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 12: De html documenten binnen de iframes van het dialoogvenster missen een taalaanduiding van de inhoud van de pagina. Deze moet in de HTML-code worden opgegeven door middel van een lang-attribuut bij het HTML-element. Dit attribuut moet dan de landcode van de taal bevatten. In dit geval moet dat dus zijn (lang=”nl”).

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 13: In de binnenste iframe is in de html een role="dialog" gezet op de body. Op de body kun je enkel role="document" of role="application" zetten. Zorg voor semantisch correcte HTML zodat browsers en hulpsoftware optimaal samenwerken.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 14: In het dialoogvenster staat rechts bovenin een knop die de letter “i” bevat. Deze knop is opgemaakt met het <a> element, maar mist een href-attribuut waardoor de interactieve rol niet kan worden bepaald. Om de waarde van een link te bepalen, moet het href-attribuut aanwezig zijn. Voeg dit alsnog toe of beter, maak van de link een knop (<button> element) want een link is om te verplaatsen naar een andere pagina of ander deel van de pagina. Een knop is er om iets te triggeren, zoals hier, het openen van een venstertje.

Bevinding 15: De functie van de hierboven genoemde link is om extra content te tonen dan wel te verbergen. Bij de link moet daarom informatie gegeven worden over deze 'status' (wordt de content getoond of verborgen). Dat is nu niet door hulpsoftware te bepalen. Dit kan opgelost worden door het toepassen van een aria-expanded attribuut. Deze heeft de waarde "true" als de content wordt getoond en de waarde "false" als de content is verborgen.

Bevinding 16: De iframes die het dialoogvenster omvatten hebben geen toegankelijke naam. Dit kan worden opgelost door aan de iframe-elementen het title-attribuut met een waarde toe te voegen. De waarde van dit title-attribuut moet tevens uniek zijn op de pagina. Let op: er zijn twee iframe-elementen om het dialoogvenster geplaatst. Indien mogelijk is het beter om het dialoogvenster in zijn geheel binnen één iframe te plaatsen. Dat kan ook beter zijn voor de toetsenbordtoegankelijkheid.

Bevinding 17: Als het dialoogvenster tevoorschijn komt gaat de focus naar het frame. Dat is goed. Echter krijg ik vanuit de screenreader de volgende melding: "... frame klikbaar". De focus moet naar het frame gaan, maar dit frame moet niet klikbaar zijn. Overigens kan de kreet "klikbaar" ook verschijnen omdat de focus uiteindelijk op een element staat die niet zichtbaar en/of voorzien is van een naam.

Bevinding 18: Het dialoogvenster zelf heeft een toegankelijke naam nodig. Dat ontbreekt nu. Dit betreft het div-element waarop role=”dialog” staat. Dit element bevat het attribuut aria-labelledby=”header-title”, maar omdat de id “header-title” niet bestaat is er geen toegankelijke naam. Voeg het id alsnog toe aan de kop van het dialoogvenster of de naam van het dialoogvenster (deze heet nu "Enquete").

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Aanvullende opmerkingen

De volgende opmerkingen zijn zaken die wij tegen kwamen en geen onderdeel zijn van het toegankelijkheidsonderzoek.

De testpagina leverde in veel gevallen een dialoogvenster op die onder de footer terecht kwam en wat styling miste. De aaruit voortvloeiende issues (deel van het venster valt onder de footer weg) is in dit onderzoek niet meegenomen.

Het is te overwegen om het dialoogvenster een zichtbare kop te geven, bijvoorbeeld Enquete. Sommige mensen die een screenreader navigeren door middel van de koppen boven de content en kunnen zo het formulier op de pagina snel terugvinden.

Het dialoogvenster is geen echte "modal" waarbij de content in de achtergrond niet meer actief is. Het is te overwegen aan het dialoogvenster de mogelijkheid toe te voegen deze te verplaatsen of verkleinen zodat mensen de onderliggende content kunnen bekijken. Met name bij kleinere schermen belangrijk. Een alternatieve meer toegankelijke oplossing is om de achtergrond inactief te maken, zodat deze niet meer benaderbaar en te (compleet) te bekijken is tot het dialoogvenster wordt gesloten.

Geprint: 2024-03-29 03:02:08 v2.3-011