Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website De Bilt

(Alleen de bevindingen)

Scope van de evaluatie

Naam website De Bilt
Datum 26 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
Buiten de scope van het onderzoek valt:
  • De techniek van het domein www.debilt.nl. Dit is onderzocht bij het onderzoek toegankelijkonline.nl/audits/5bbfed3d-459c-41dc-a908-9b3419e0f9c6.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 17

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: De PDF op pagina https://www.debilt.nl/fileadmin/bestanden/Afval/Afvalkalender_De_Bilt__gebied_2__met_Bilthoven-West__2024.pdf bevat het logo van de gemeente De Bilt. Deze afbeelding is opgemaakt in de codelaag met een Text-tag en heeft geen alternatieve tekst. Hierdoor krijgen gebruikers van hulpsoftware niet de juiste informatie mee. Zorg ervoor dat dit logo correct wordt opgemaakt met een Figure-tag en een goede alternatieve tekst krijgt, bijvoorbeeld 'Logo gemeente De Bilt'.
Ook het kaartje in het bestand moet correct zijn opgemaakt en een goede alternatieve tekst krijgen.

Bevinding 2: Advies: Op onder andere pagina https://www.debilt.nl/ staat achter de link 'Mijn De Bilt' een icoon dat aangeeft dat deze link verwijst naar een externe pagina. Dit icoon heeft via het title-attribuut op het a-element van de link een alternatieve tekst gekregen. Dit is niet de meest geschikte manier om dit icoon een alternatieve tekst te geven. Het title-attribuut wordt namelijk overschreven door de inhoud van het a-element en wordt niet door alle hulpsoftware aangegeven/voorgelezen. Het zou beter zijn om dit icoon een alternatieve tekst te geven door het svg-element van het icoon een title-element te geven als eerste child element en aria-hidden van het svg-element te verwijderen, of door gebruik te maken van een screenreader only tekst. De afbeelding verbergen en de extra tekst opnemen in de linktekst is ook een goede optie.
Dit icoon komt ook op andere pagina's voor, bijvoorbeeld op https://www.debilt.nl/over-deze-site.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: Nieuwe bevinding t.o.v. het vorige rapport:
De introductietekst op pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/beleidsmedewerker-mobiliteit-en-ruimte is opgemaakt met het strong-element. Het strong-element is niet geschikt om teksten visueel dikgedrukt mee te maken. Dat komt omdat het element een eigen semantische waarde heeft; het geeft aan dat tekst belangrijker is dan omliggende tekst. Daarom mag het element alleen gebruikt worden op enkele woorden of korte zinnen. Verwijder het strong-element van deze tekst en maak het op een andere manier op, bijvoorbeeld door gebruik te maken van CSS.

Bevinding 4: De PDF op pagina https://www.debilt.nl/fileadmin/bestanden/Afval/Afvalkalender_De_Bilt__gebied_2__met_Bilthoven-West__2024.pdf heeft een codelaag die meerdere toegankelijkheidsproblemen bevat:

Bevinding 5: Advies: Op elke pagina staan skiplinks die geplaatst zijn in een nav-element met daarop het aria-label 'skipnav menu'. Voor sommige gebruikers van hulpsoftware is de term 'skipnav' misschien onduidelijk. Het zou beter zijn om dit aan te passen naar een andere term, bijvoorbeeld 'skiplink menu'.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 6: In het formulier op pagina https://www.debilt.nl/afspraak-maken#select/ kunnen bezoekers een selectie maken bij de combobox 'Product'. Wanneer bezoekers met de muis over de opties in de combobox gaan en wanneer deze items toetsenbordfocus hebben, is de tekstkleur wit en de achtergrond lichtblauw (HEX #5897FB). Deze kleurencombinatie heeft een contrastverhouding van 2,9:1, waar dat minimaal 4,5:1 moet zijn. Zorg ervoor dat teksten altijd voldoende contrast hebben, ook bij muishover en focus.

Bevinding 7: In het formulier op pagina https://www.debilt.nl/afspraak-maken#select/ kunnen bezoekers bij stap 3 persoonsgegevens invullen. In het veld 'E-mailadres' staat een placeholdertekst. Deze grijze tekst (HEX #A9A9A9) heeft onvoldoende contrast op de witte achtergrond. De contrastverhouding is hier 2,3:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 8: In de PDF op pagina https://www.debilt.nl/fileadmin/bestanden/Afval/Afvalkalender_De_Bilt__gebied_2__met_Bilthoven-West__2024.pdf staan de volgende contrastproblemen:

Bevinding 9: Advies: Op pagina https://www.debilt.nl/ staat de tekst 'Snel naar:' over een achtergrondafbeelding. Deze witte tekst heeft een schaduweffect gekregen en heeft hierdoor voldoende contrast voor grote tekst (vanaf 18pt). Toch wordt het afgeraden om (witte) teksten voor afbeeldingen te plaatsen. Wanneer bezoekers inzoomen op een pagina verandert de plaats van de tekst op deze afbeeldingen en kan dat invloed hebben op de leesbaarheid van deze tekst. Ook worden achtergrondafbeeldingen soms verandert en heeft dat ook invloed op de leesbaarheid. Het is daarom beter om ervoor te zorgen dat teksten niet over afbeeldingen staan maar een vaste achtergrondkleur hebben die voldoende contrast heeft met de tekst.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 10: In het formulier op pagina https://www.debilt.nl/afspraak-maken#select/ kunnen bezoekers bij stap 2 een datum kiezen. Als de datumkiezer geopend is is een kalender zichtbaar met daarin knoppen om naar de vorige en volgende maand te navigeren. Deze witte knoppen met een oranje pijl hebben onvoldoende contrast. De contrastverhouding tussen het wit en oranje (HEX #FF9933) is 2,1:1, waar dat minimaal 3:1 moet zijn. Een mogelijk oplossing is om het wit te vervangen voor een kleur die wel voldoende contrast heeft met het oranje, zoals zwart.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 11: De PDF op pagina https://www.debilt.nl/fileadmin/bestanden/Afval/Afvalkalender_De_Bilt__gebied_2__met_Bilthoven-West__2024.pdf heeft de documenttitel 'AfvalWijzer voor Debilt_DeBilt'. Deze documenttitel omschrijft het document onvoldoende, het geeft bijvoorbeeld niet aan het het hier gaat om een afvalkalender van 2024 die alleen voor een bepaald gebied in gemeente De Bilt geldt. Zorg ervoor dat de PDF een goede documenttitel krijgt, bijvoorbeeld 'Afvalkalender 2024 De Bilt (met Bilthoven-West) gebied 2'.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

Bevinding 12: Advies: Op pagina https://www.debilt.nl/zoeken?q=paspoort zijn de zoekresultaten volledig opgemaakt als link. Dit betekent dat alle content van een zoekresultaat (de kop en onderstaande tekst) in het a-element is geplaatst. Dit zorgt ervoor dat de toegankelijke naam van deze links erg lang zijn en misschien moeilijk te volgen voor sommige gebruikers van hulpsoftware. Het is daarom beter om alleen de kop van een zoekresultaat op te maken als link. Daarna kan het klikgebied van de link eventueel worden vergroot met Javascript.
Hetzelfde komt voor bij de links naar nieuwsberichten op pagina https://www.debilt.nl/nieuwsoverzicht.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Niet aanwezig

Bevinding 13: Opmerking: Op pagina https://www.debilt.nl/vergunningen-en-belastingen/activiteit-organiseren wordt niet-zichtbare toetsenbordfocus geplaatst op de hele videospeler. Ziende toetsenbordgebruikers weten niet op dat moment waar de focus zich bevindt. De reden dat focus wordt geplaatst op de hele videospeler is omdat een tabindex=0 staat op het div-element met het aria-label 'Videospeler'. Zorg ervoor dat de focus wordt aangegeven met een visuele indicator zoals een focusrand, of zorg ervoor dat de videospeler geen focus krijgt want dit is geen bedienbaar element. Omdat dit een technische bevinding is wordt hier niet op afgekeurd bij deze content-audit, toch is het beter voor de toegankelijkheid van de website om dit probleem op te lossen.
Dit komt ook voor bij de videospelers op pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/beleidsmedewerker-mobiliteit-en-ruimte.

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 14: De PDF op pagina https://www.debilt.nl/fileadmin/bestanden/Afval/Afvalkalender_De_Bilt__gebied_2__met_Bilthoven-West__2024.pdf heeft geen taalinstelling. Hierdoor wordt het bestand mogelijk niet correct voorgelezen door voorleessoftware. Zorg ervoor dat het bestand een taalinstelling krijgt die overeenkomt met de hoofdtaal van het bestand, wat in dit geval Nederlands is.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 15: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://www.debilt.nl/afspraak-maken#select/ kunnen bezoekers de combobox 'Product' uitklappen en daarmee een zoekveld zichtbaar maken. Dit zoekveld heeft geen visueel label dat aangeeft wat bezoeker bij dit veld kunnen doen. Dit kan het lastig maken voor sommige bezoekers met bepaalde cognitieve beperkingen om dit veld correct te gebruiken. Geef het veld daarom een visueel label en koppel dit label aan het input-element om de bevinding bij succescriterium 4.1.2 op te lossen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 16: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://www.debilt.nl/afspraak-maken#select/ kunnen bezoekers de combobox 'Product' uitklappen en daarmee een zoekveld zichtbaar maken. Dit zoekveld heeft geen toegankelijke naam en is daarmee moeilijk te bedienen voor bezoekers die gebruikmaken van hulpsoftware. Zorg ervoor dat dit zoekveld een toegankelijke naam krijgt.

Bevinding 17: Advies: Op de website wordt op meerdere plekken overbodige of onjuiste aria-attributen, zoals de role "searchbox" op een invoerelement waar al type=search aan is toegevoegd, of een role="application" op een video element. Dit zijn technische bevindingen maar verdienen mogelijk toch extra aandacht als deze niet zijn benoemd in het technische rapport.

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.

Geprint: 2024-12-03 18:31:16 v2.4-011