Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst....

33
Onderzoek toegankelijkheid WCAG 2.1 niveau A en AA https://gemeente.groningen.nl/ Inhoud: Sample................................................................................................ 2 Bevindingen........................................................................................... 3 Gebruikte systemen................................................................................... 14 Screenshots.......................................................................................... 15

Transcript of Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst....

Page 1: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Onderzoek toegankelijkheid WCAG 2.1 niveau A en AA

https://gemeente.groningen.nl/

Inhoud:

Sample...........................................................................................................................................................................................................................2

Bevindingen...................................................................................................................................................................................................................3

Gebruikte systemen.....................................................................................................................................................................................................14

Screenshots.................................................................................................................................................................................................................15

Page 2: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Sample

Nr Omschrijving URL

1 Homepage (inclusief feedback via https://www.kcmsurvey.com/) https://gemeente.groningen.nl/

2 Contact https://gemeente.groningen.nl/contact

3 Contactformulier (algemeen, inclusief formulier achter link op https://dloket.groningen.nl/)

https://gemeente.groningen.nl/vraag-stellen

4 Informatiepagina Overlast en zorg melden (inclusief formulier achter link op https://dloket.groningen.nl/)

https://gemeente.groningen.nl/overlast-en-zorg-melden

5 Student registration or deregistration (Engelse pagina, inclusief afspraak maken formulier achter link op https://afspraken.groningen.nl/services)

https://gemeente.groningen.nl/student-registration-or-deregistration

6 Zoekresultaten toegankelijkheid https://gemeente.groningen.nl/search/site/toegankelijkheid

7 Sitemap https://gemeente.groningen.nl/sitemap

8 Nieuwsoverzicht https://gemeente.groningen.nl/actueel/nieuws

9 Nieuwsbericht Koninklijke onderscheiding voor Gerard Beerthuizen

https://gemeente.groningen.nl/actueel/nieuws/koninklijke-onderscheiding-voor-gerard-beerthuizen

10 Informatiepagina Bekendmakingen bestemmingsplannen https://gemeente.groningen.nl/bekendmakingen-bestemmingsplannen

11 Informatie/servicepagina Nieuwsbrieven en social media https://gemeente.groningen.nl/nieuwsbrieven-en-social-media

2

Page 3: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Nr Omschrijving URL

12 Overzicht Samenstelling gemeenteraad https://gemeente.groningen.nl/samenstelling-gemeenteraad

13 Info wegwerkzaamheden (met kaart op https://live.andes.nl/groningen/?contrast=true)

https://gemeente.groningen.nl/wegwerkzaamheden

14 Informatiepagina Wijken, dorpen, wijkwethouders en gebiedsteams

https://gemeente.groningen.nl/wijken-dorpen-wijkwethouders-en-gebiedsteams

15 PDF Aanvraagformulier leerlingenvervoer https://gemeente.groningen.nl/sites/default/files/aanvraagformulier-leerlingenvervoer-2020-2021-met-toelichting.pdf

16 PDF Besluit Bebouwde kom Wet natuurbescherming https://gemeente.groningen.nl/sites/default/files/3.-Natuurbescherming.pdf

17 Informatie Voor- en Vroegschoolse educatie (video animatie) https://gemeente.groningen.nl/informatie-voor-en-vroegschoolse-educatie

18 Informatiepagina Aanpak Binnenstad Groningen (video) https://gemeente.groningen.nl/aanpak-binnenstad

19 Informatiepagina Markten in de gemeente Groningen (tabel) https://gemeente.groningen.nl/markten-in-de-gemeente-groningen

20 Informatiepagina parkeergarages (kaart en tabel) https://gemeente.groningen.nl/parkeergarages

21 Random pagina 1 (video) https://gemeente.groningen.nl/raadvankinderen

22 Random pagina 2 https://gemeente.groningen.nl/energieloket-groningen

PDF’s via:https://gemeente.groningen.nl/leerlingenvervoer-aanvragen

3

Page 4: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

https://gemeente.groningen.nl/benw-besluiten

Bevindingen

NB: 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

9 De foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit is.

Voeg een beschrijvende alt tekst toe (wie staan er op de foto).

1 Het logo van de Gemeente Groningen heeft als alt tekst ‘home’. Dit is geen goede beschrijving van wat er te zien is op de afbeelding.

Bezoekers die de afbeelding niet kunnen zien krijgen onvolledige informatie.

Voeg ‘logo Gemeente Groningen’ toe aan de alt tekst.

1 Op kcmsurvey.com staat bovenaan een logo van de Gemeente Groningen. Deze heeft als alt tekst

Bezoekers die de afbeelding niet kunnen

Corrigeer de alt tekst in ‘logo Gemeente Groningen’.

4

Page 5: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

“Header Hoe beoordeelt u de website?”. Dit klopt niet.

zien krijgen andere informatie.

13 De kaart heeft geen alt teksten.Als je bijvoorbeeld in de eerste tab de optie gehandicaptenparkeerplaatsen selecteert, verschijnen deze op de kaart als icoontje maar niet in tekst naast de kaart.

Informatie dat alleen op de kaart verschijnt is niet voor alle bezoekers bereikbaar.

Voeg als tekstalternatief (links naar) lijsten toe met geselecteerde informatie, zoals parkeerplekken en bijbehorende details.

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Niet van toepassing

1.2.2 Ondertiteling voor doven en slechthorenden (vooraf opgenomen)

17 De video met de animatie heeft geen ondertiteling. Doven en slechthorenden kunnen het audiogedeelte in deze video niet mee krijgen.

Voeg een ondertiteling toe van de voice-over.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Niet van toepassing

1.2.4 Ondertitels voor doven en slechthorenden (live)

Niet van toepassing

1.2.5 Audiodescriptie (vooraf opgenomen)

18 Er komen in de video tussendoor vragen in beeld (bijvoorbeeld ‘Wat is een zero emissiezone?’) die niet worden uitgesproken. Ook wordt er een kaartje

Mensen die deze teksten visueel niet kunnen waarnemen, missen deze

Voeg deze teksten toe via een audiodescriptiespoor.

5

Page 6: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

getoond zonder toelichting (1:40). informatie.

21 In de video worden de namen van kinderen getoond, maar niet uitgesproken.

1.3.1 Info en relaties 11 De invoervelden voor het aanmelden voor nieuwsbrieven hebben geen labels.

Gebruikers van hulpsoftware weten niet waar deze invoervelden voor zijn.

Voeg labels toe en link deze aan de betreffende invoervelden via een id.

13 Het zoeken invoerveld heeft geen label.

13 De lijst met categorieën heeft geen goede code-opmaak. De lijst heeft de role=group, waardoor de lijststructuur niet meer klopt. De li elementen moeten dan de role=listitem krijgen.

Wanner de code niet correct is opgemaakt kan het voor hulpsoftware zoals screenreaders lastig zijn de inhoud goed te interpreteren.

Maak er een ‘gewone’ lijst van of pas de rol van de list items aan. Zie ook https://www.w3.org/TR/wai-aria-1.1/#listitem.

1 De koppenstructuur op de pagina klopt niet. Zo valt er een kop 3 onder Rijbewijs met ‘Toon meer’, maar dit laat niet meer zien onder Rijbewijs maar op het niveau erboven. Ook zijn er kopniveaus 2 voor Organisatie en Actueel, maar de onderdelen die hieronder vallen hebben niet kopniveau 3, maar ook niveau 2. Tenslotte vallen ‘Contact’ en ‘Zie alle contactgegevens…’ (wat geen kop hoort te zijn) onder ’Nieuwsbrieven en social media’ terwijl deze een

Voor bezoekers die de visuele koppenstructuur (de layout) niet kunnen zien, is er geen duidelijke, koppende hiërarchie. Omdat bijvoorbeeld screenreadergebruikers vaak navigeren via koppen, maakt het dit voor hen

Zorg dat de hiërarchie (zoals die hier visueel wel klopt) ook klopt in de code via de kopniveaus.

6

Page 7: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

niveau hoger horen te staan.Zie screenshot ‘koppen homepage’.

lastig.

10 De koppenstructuur klopt niet. Zo zijn de koppen ‘Acrhief’ en ‘Actueel’ h3’s, en volgen daarna h2’s. Dit zou logischerwijs andersom moeten zijn (deze bekendmakingen vallen onder Actueel). Binnen de bekendmakingen zijn er kopjes (bijvoorbeeld ‘Het plan’) opgemaakt met <strong> i.p.v. een kop element, waardoor ze niet worden opgenomen in een koppenlijst.

10 Opmerking: de meeste pagina’s beginnen qua koppenstructuur met de kop 2: ‘U bent hier’, en daarna de h1 met de titel van de pagina. Om de koppenhiërarchie helemaal juist (op volgorde) te krijgen, kan het broodkruimelpad ook in een navigation landmark worden gezet (met aria-label zodat de verschillende navigation landmarks van elkaar kunnen worden onderscheiden) en zonder kop.

13 Bij de routeopties zijn er labels verborgen voor hulpsoftware via ‘aria-hidden’.

Gebruikers van hulpsoftware weten niet waar deze opties voor zijn.

Haal de ‘aria-hidden’ attributen weg.

15,16 De PDF heeft geen tags (codelaag). Voor hulpsoftware zoals screenreaders is er

Deze codelaag wordt aangemaakt in het bronbestand

7

Page 8: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

Wanneer de codelaag wel aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.

geen informatie beschikbaar om de PDF te interpreteren.

(bijvoorbeeld Word of Indesign) en moet van daaruit goed worden

geëxporteerd.

1.3.2 Betekenisvolle volgorde

Geen problemen gevonden

1.3.3 Zintuiglijke eigenschappen

Geen problemen gevonden

1.3.4 Weergavestand Geen problemen gevonden

1.3.5 Identificeer het doel van de input

3,5,11 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 de relevante ‘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 Geen problemen gevonden

1.4.2 Geluidsbediening Niet van toepassing

1.4.3 Contrast 1 De grijze links in de footer hebben te weinig contrast (4.21:1).

Gebruikers die slechtziend of kleurenblind zijn kunnen de teksten moeilijker of niet lezen.

8

Page 9: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

Gebruik minimaal een contrast van 4.5:1.8,9 De data (gepubliceerd en bijgewerkt) hebben te weinig contrast (4.21:1).

13 De link naar de hoog-contrast versie heeft te weinig contrast (2.72).

20 De iframe met de kaart bevat tekst met te weinig contrast (‘Meer informatie over hoe je…’)(3.44:1)

5 In het afsprakenformulier heeft de grijze tekst onder ‘Create appointment’ te weinig contrast (1.87:1).Ook hebben de placeholder teksten te weinig contrast (2.8:1)

11 Na het aanmelden voor de nieuwsbrief kom je op een pagina (via mailingtool.iwink.nl) met ‘Aanmelding controleren’. Deze kop heeft te weinig contrast (4.22).

1 In het feedbackformulier (kcmsurvey) staat een link naar de contactpagina in grijs met te weinig contrast (1.94:1).

15 De rode teksten in de PDF hebben te weinig contrast (4.2:1).

1.4.4 Herschalen van tekst

Geen problemen gevonden

1.4.5 Afbeeldingen van Geen problemen gevonden

9

Page 10: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

tekst

1.4.10 Reflow 1 Ingezoomd op 400% (bij 1280px breed) is het niet mogelijk om zichtbaar bij alle hoofdmenu items te komen. Het onderste deel valt buiten beeld en er kan niet heen gescrold worden.

Het menu is hierdoor lastiger te gebruiken voor slechtzienden die gebruik maken van zoom.

Zorg dat het gehele menu bereikbaar is via scrollen naar beneden.

1, 20 De header en de ‘Geef uw mening’ link nemen zoveel ruimte in beslag dat het erg moeilijk is de content op de pagina te gebruiken. Zie screenshot ‘400% homepage’.Wanneer er een tabel is, is een deel van de content geheel niet waar te nemen. Zie screenshot ‘400% met tabel’.

De content is lastig te gebruiken voor slechtzienden die gebruik maken van zoom.

Pas de layout aan zodat er meer ruimte blijft voor content, door bijvoorbeeld ook het zoeken inklapbaar te maken en de ‘Geef uw mening’ link te verkleinen.Een tabel mag wel een horizontale scrol balk hebben (deze valt onder de uitzonderingen), ‘gewone’ content moet je kunnen lezen door in enkel in 1 richting te scrollen.

11 Op 400% moet op de pagina met ‘Aanmelding controleren’ (mailingtool.iwink.nl) in 2 richtingen gescrolld worden om de content te kunnen lezen.

Voor slechtzienden die inzoomen is het erg lastig als je in 2 richtingen moet scrollen om iets te kunnen lezen. Daarom moet ‘gewone’ content kunnen ‘reflowen’ naar 1 verticale

Maak de pagina responsive.

10

Page 11: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

kolom.

1.4.11 Contrast van niet-tekstuele content

3,4,5 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 Geen problemen gevonden

1.4.13 Content bij hover or focus

13 Bij verschillende icoontjes op de kaart (bijvoorbeeld P’s) verschijnt extra tekst bij hover. Het is niet mogelijk om met de muisaanwijzer over deze tekst (tooltip) te bewegen. Ook is het niet mogelijk om de tekst te doen verdwijnen op een andere manier dan de muis te bewegen.

Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer op dat moment de tooltip (waar ze heen gaan) verdwijnt, kunnen ze die informatie niet lezen. Ook kan het zijn dat ze de tooltip missen omdat die net buiten beeld valt.

Zorg dat de muis over de tooltip kan bewegen.

Zorg dat de tooltip ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

2.1.1 Toetsenbord 13 De kaart kan niet gebruikt worden met het toetsenbord (in- en uitzoomen, naar rechts en links, tooltips openen).

Toetsenbordgebruikers kunnen bijvoorbeeld wel opties selecteren in het formulier, maar vervolgens niet binnen de kaart navigeren naar de

Maak de functionaliteit bereikbaar met het toetsenbord of bied voor alle opties een toegankelijk alternatief, zoals een lijst met parkeerplaatsen of

11

Page 12: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

resultaten om deze meer in detail te zien.

stallingen naast de kaart.

2.1.2 Geen toetsenbordval

Geen problemen gevonden

2.1.4 Enkel teken sneltoetsen

Geen problemen gevonden

2.2.1 Timing aanpasbaar Niet van toepassing

2.2.2 Pauzeren, stoppen, verbergen

Niet van toepassing

2.3.1 Drie flitsen of beneden drempelwaarde

Geen problemen gevonden

2.4.1 Blokken omzeilen Geen problemen gevonden

2.4.2 Paginatitel 6 De pagina met zoekresultaten is Nederlands maar heeft als paginatitel ‘Searchpage’.

Deze titel kan voor sommige bezoekers verwarrend zijn.

Zet de paginatitel in het Nederlands.

16 Het document heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt

Voeg een goed beschrijvende titel toe aan de pdf. Dit kan in het bronbestand of in Acrobat.

12

Page 13: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

de bestandsnaam getoond, deze is niet altijd even duidelijk.

2.4.3 Focus volgorde 3 De focus gaat op de pagina als eerste naar het veld Huisnummer toevoeging.

Bij het verzenden van het formulier met missende velden, scroll je visueel naar het eerste te corrigeren veld, maar de focus gaat geheel de pagina uit (naar het Browsermenu).

Dit is verwarrend: de header en de eerste velden worden overgeslagen. Een toetsenbordgebruiker moet dan eerst weer terug naar boven navigeren om het formulier goed in te vullen.Voor correctie moet de gebruiker eerst weer de webpagina terug vinden in de browser.

Zorg dat de focusvolgorde gelijk is aan de visuele volgorde, en dat bij het corrigeren de focus ook meteen in het goede veld komt te staan.

1 Opmerking: de focusvolgorde van de talen in de header is anders dan de visuele volgorde op 100% (ingezoomd komt het wel overeen). Dit kan verwarrend zijn voor ziende toetsenbordgebruikers.

13 (Op de pagina met de kaart) Na het activeren van een tab gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Tabs werken ook met pijltjes. Daarom is het handiger voor de gebruiker als de tab toets meteen doorgaat naar het gekozen

De toetsenbordgebruiker moet steeds alle opties (tabs) langs voor hij/zij in de bedoelde content

Zorg dat de code voor tabs is opgemaakt volgens de specificatie, zie ook https://www.w3.org/TR/wai-

13

Page 14: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

panel. komt. aria-practices-1.1/#tabpanel.

2.4.4 Linkdoel 8 Een deel van de thumbnail images heeft een lege alt tekst, waardoor de link die eromheen staat ook geen tekst heeft.

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 duidelijke alt tekst toe of haal de links om de afbeeldingen weg. De link staat ook achter de titel, dus nu zijn ze dubbel.

1 Op kcmsurvey.com staat onderaan de pagina een link met logo. Er is geen alt tekst voor het logo (deze staat in de CSS) en geen linktekst.

Zet het logo als <img> in de html met een goede alt tekst, of voeg een linktekst toe.

2.4.5 Meerdere manieren

Geen problemen gevonden

2.4.6 Koppen en labels Geen problemen gevonden

2.4.7 Focus zichtbaar 1 De focus op de Menu button (wanneer je bent ingezoomd) is niet zichtbaar.

Voor ziende toetsenbordgebruikers is het niet duidelijk wanneer ze op deze button staan.

Voeg een goed zichtbare focusstijl toe. (De outline staat nu op 0)

2.5.1 Aanwijzergebaren Niet van toepassing

2.5.2 Aanwijzerannulering

Niet van toepassing

2.5.3 Label in naam Geen problemen gevonden

14

Page 15: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

2.5.4 Bewegingsactivering

Niet van toepassing

3.1.1 Taal van de pagina 13 De pagina heeft geen taal gespecificeerd. Screenreaders lezen de pagina mogelijk niet in de juiste taal voor.

Stel de juiste taal in op het html element.

15 Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor.

Stel de juiste taal in bij de documenteigenschappen in Acrobat.

3.1.2 Taal van onderdelen

5 Het gedeelte met de Engelse content is niet in de code aangegeven als Engels.Opmerking: De Lees voor-functie staat ook nog in het Nederlands ingesteld. Mogelijk neemt deze de taal over wanneer die juist is ingesteld op het betreffende deel. Controleer dit in de implementatie van ReadSpeaker.

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 Geen problemen gevonden

3.2.2 Bij input Geen problemen gevonden

3.2.3 Consistente navigatie

Geen problemen gevonden

3.2.4 Consistente identificatie

Geen problemen gevonden

3.3.1 Fout Identificatie Geen problemen gevonden

15

Page 16: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

3.3.2 Labels of instructies Geen problemen gevonden

3.3.3 Foutsuggesties 4 Bij het invullen van een adres (Guldenstraat 10 Groningen) komt de foutmelding ‘ Onderstaand veld is niet ingevuld, vul het veld met de juiste informatie’. Het is niet duidelijk aangegeven hoe dit te corrigeren. (Mist er een postcode? Bestaat dit adres niet?) Zie screenshot ‘Guldenstraat’.

Het is lastig voor de gebruiker om het veld goed in te vullen.

Geef duidelijke suggesties voor het verbeteren van de invoer.

3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Niet van toepassing

4.1.1 Parsen 4 De pagina bevat een h2 met daarin een (lege) paragraaf. Dit is niet toegestaan.

Bij incorrecte opmaak kan hulpsoftware de pagina mogelijk lastiger interpreteren.

Haal de paragraaf weg.

5 De pagina bevat een id met een spatie in de waarde (‘external website’).

Pas de id aan.

13 Op de pagina met de kaart is een duplicate id gevonden (ferries-label’).

Pas de id aan.

4.1.2 Naam, rol, waarde 13 (Pagina met de kaart) De sorteeroptie staat verborgen voor hulpsoftware (aria-hidden), maar is wel bereikbaar met het toetsenbord.

Gebruikers van hulpsoftware kunnen bij dit veld komen maar weten niet waar het voor is.

Haal de aria hidden status weg.

17,18 Er mist een title in de iframe van de video. Gebruikers van hulpsoftware weten niet

Voeg een beschrijvende title toe.

16

Page 17: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

wat er in dit iframe staat en of ze deze daarom willen openen of overslaan.

20 De iframe met de kaart bevat een knop zonder tekst. Voor bezoekers die het icoontje niet kunnen zien is het niet duidelijk wat deze knop doet.

Voeg een tekst toe aan de button.

1 De menu button (wanner je bent ingezoomd) geeft geen status aan of deze is in-of uitgeklapt.

Gebruikers van hulpsoftware weten niet of het is uitgeklapt.

Voeg het ‘aria-expanded’ attribuut toe aan de button. Dit attribuut staat nu op de div die geopend wordt, dit is de verkeerde plek.

1 De ‘Toon meer’ link geeft geen status aan of de extra content geopend of gesloten is.

Gebruikers van hulpsoftware weten niet of het is uitgeklapt.

Voeg het ‘aria-expanded’ attribuut toe aan de link. Zie voor meer info https://www.w3.org/TR/wai-aria-1.1/#aria-expanded

5 In het formulier om een afspraak te maken, stap 4, staat een ‘combobox’ met een lijst met landen prefixes. Deze combobox mist een verplicht aria-expanded attribuut. Deze staat nu op de lijst die eronder valt.

Wanneer de structuur niet correct is opgemaakt kan hulpsoftware het mogelijk niet goed interpreteren.

Voeg het aria-expanded attribuut toe aan het juiste element. Maak de code op volgens de specificatie, zie https://www.w3.org/TR/wai-

17

Page 18: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Criterium Pagina(‘s) Beschrijving Gevolg Oplossingsrichting

Ook mist de combobox een textbox element. aria-1.1/#combobox.

3 De menu knop (wanneer ingezoomd) heeft bij het laden van de pagina geen status of deze is in-of uitgeklapt. Deze wordt er pas ingezet nadat het menu een keer is uitgeklapt.

Screenreaders kunnen niet vanaf het begin de status goed weergeven.

Zorg dat de status er al staat bij het laden van de pagina.

4.1.3 Statusberichten Niet van toepassing

Gebruikte systemenChrome 83 op Mac 10.15.5 (Primair)Chrome 83 op Android 9Edge 44 op Windows 10

18

Page 19: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Screenshots

19

Page 20: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Koppen homepage

20

Page 21: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

21

Page 22: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

400% Homepage

22

Page 23: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Grijze link (te weinig contrast en niet onderstreept)

23

Page 24: Onderzoek toegankelijkheid WCAG2.1 AA · Web viewDe foto bij het nieuwsbericht mist een alt tekst. Bezoekers die de afbeelding niet kunnen zien weten niet wat voor afbeelding dit

Guldenstraat (Wat is er niet ingevuld?)

24