Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website De Bilt

(Alleen de bevindingen)

Scope van de evaluatie

Naam website De Bilt
Datum 3 mei 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: 31

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.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 3: Op pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/medewerker-sociaal-domein-asiel-en-opvang staat een video onder de kop 'Zo werkt het in De Bilt'. Deze video heeft geen ondertiteling. Hierdoor kunnen bezoekers met een auditieve beperking de video mogelijk niet volgen. Zorg ervoor dat deze video een ondertiteling krijgt die aangeeft wat er in het audiospoor wordt vertelt.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 4: Op pagina https://www.debilt.nl/vergunningen-en-belastingen/activiteit-organiseren staat een video waarin informatie op het scherm wordt getoond. Het meeste van deze informatie komt ook terug in het audiospoor, maar aan het eind van de video (rond 1:40) komt een websitenaam en e-mailadres in beeld te staan die niet worden uitgesproken door de voice-over. Hierdoor is deze informatie mogelijk niet beschikbaar voor bezoekers die het scherm niet (goed) kunnen zien. Zorg ervoor dat deze informatie op een andere manier beschikbaar is, bijvoorbeeld door gebruik te maken van een transcript van de hele video. Of laat deze informatie voorkomen in het audiospoor om ook te voldoen aan succescriterium 1.2.5.
Het is altijd beter om gebruik te maken van een transcript en een audiodescriptie. Bezoekers met zowel een visuele als auditieve beperking kunnen de video mogelijk alleen tot zich nemen als de tekst in een transcript wordt omgezet door hun hulpsoftware. Dit doet zich ook voor op meerdere vacaturepagina's (opmerking: de onderzochte vacature pagina is momenteel niet meer publiek te bezichtigen. Vergelijkbare situaties doen zich voor op o.a. pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/beleidsmedewerker-mobiliteit-en-ruimte.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 5: In de video op pagina https://www.debilt.nl/vergunningen-en-belastingen/activiteit-organiseren komt informatie aan het eind (rond 1:40) in beeld en wordt niet uitgesproken door de voice-over. Het gaat hier om een e-mailadres en een url. Bezoekers die afhankelijk zijn van het audiospoor om de video tot zich te nemen krijgen deze informatie niet mee als zij de video afspelen. Zorg er daarom voor dat alle visuele informatie ook terugkomt in het audiospoor. Dit kan bijvoorbeeld door de voice-over de tekst uit te laten spreken of door gebruik te maken van een audiodescriptie. (opmerking: de onderzochte vacature pagina is momenteel niet meer publiek te bezichtigen. Vergelijkbare situaties doen zich voor op o.a. pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/beleidsmedewerker-mobiliteit-en-ruimte. (Opmerking: de onderzochte vacature pagina is momenteel niet meer publiek te bezichtigen. Vergelijkbare situaties doen zich voor op o.a. pagina https://www.debilt.nl/bestuur-en-organisatie/organisatie/werken-bij-de-gemeente/onze-vacatures/beleidsmedewerker-mobiliteit-en-ruimte.)

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://www.debilt.nl/afval-en-groen/afval/afval-ophalen/afvalkalenders is elke link naar een afvalkalender opgemaakt als een lijst met maar één item. Lijsten hebben een semantische betekenis en mogen niet worden gebruikt voor de visuele opmaak van teksten. Zorg ervoor dat alleen groeperingen van informatie worden opgemaakt als lijst. Dat houdt in dat een lijst altijd minimaal twee items moet bevatten. Wanneer een lijst is opgemaakt met maar één item kan dat verwarrend zijn voor gebruikers van hulpsoftware. Los dit op door de lijstopmaak op deze links te verwijderen.

Bevinding 7: Op pagina https://www.debilt.nl/wonen-en-bouwen/aardgasvrij-wonen/transitievisie-warmte wordt onder de knop 'Wat gaan we doen?' gebruik gemaakt van het strong-element om koppen op te maken, bijvoorbeeld bij de kop 'Warmtekavel 18 - Brandenburg PAW'. Het strong-element is niet geschikt om koppen mee op te maken, het heeft namelijk een andere semantische waarde dan een kop-element. Het strong-element geeft aan dat een tekst belangrijk is en voorleessoftware kan deze tekst met nadruk uitspreken. Daarom mag dit element alleen gebruikt worden op één of enkele woorden die belangrijk zijn en niet voor de visuele opmaak van teksten. Los het probleem hier op door het strong-element van de koppen te verwijderen en deze op te maken met een kop-element (bijvoorbeeld h4).

Bevinding 8: Op pagina https://www.debilt.nl/zorg-werk-en-jeugd/laag-inkomen-of-schulden/ervaringsverhaal-dylan-1 is de kop 'Zoek hulp bij schulden' opgemaakt met het h3-element en het strong-element. Het strong-element heeft hier geen toegevoegde waarde. Ook is het semantisch niet correct om koppen met het strong-element dikgedrukt te maken. Verwijder daarom het strong-element van deze kop.

Bevinding 9: Op pagina https://www.debilt.nl/zorg-werk-en-jeugd/laag-inkomen-of-schulden/ervaringsverhaal-dylan-1 is het em-element gebruikt om een hele zin schuingedrukt te maken. Het em-element is bedoeld om nadruk te geven aan enkele woorden of korte zinnen, niet voor de opmaak van tekst. Verwijder hier het strong-element en maak de tekst schuingedrukt met CSS.

Bevinding 10: Op pagina https://www.debilt.nl/wonen-en-bouwen/aardgasvrij-wonen/transitievisie-warmte staat een tabel onder de knop 'Proces'. Deze tabel is niet correct opgemaakt. De tabel bevat namelijk twee lege kolommen die beginnen met lege th-elementen. Een th-element mag nooit leeg zijn omdat dit een kop is voor andere cellen. Ook geeft hulpsoftware de lege cellen in de tabel aan, wat verwarrend kan zijn voor gebruikers van deze software. Los dit probleem bijvoorbeeld op door de lege kolommen in de tabel te verwijderen.

Bevinding 11: 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:

Advies: Op pagina https://www.debilt.nl/over-deze-site wordt de h1 kop 'Over deze site' opgevolgd door de h3 kop 'Algemene vragen'. Voor de toegankelijkheid is het beter om gebruik te maken van een koppenstructuur die logisch afloopt. Dat komt omdat veel gebruikers van hulpsoftware navigeren op basis van de koppen op een pagina. Daarom is het beter om te beginnen met een h1 kop voor de titel van de pagina, gevolgd door h2 koppen voor de koppen, h3 koppen voor de tussenkoppen, ect.

Dit komt ook voor op pagina https://www.debilt.nl/afval-en-groen/afval/afval-ophalen/afvalkalenders.

Bevinding 12: 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'.

Bevinding 13: Advies: Op pagina https://www.debilt.nl/contact-en-veelgestelde-vragen staan twee h1 koppen. Meestal bevatten pagina's maar één h1 kop en is dat het hoofdonderwerp van de pagina. In dit geval zou het beter zijn om de h1 kop 'Ik heb vragen over de WOZ-waarde van mijn woning. Waar kan ik terecht?' op te maken met een h2-element.

Bevinding 14: Advies: Op pagina https://www.debilt.nl/wonen-en-bouwen/aardgasvrij-wonen/transitievisie-warmte staat onder 'Wat gaan we doen?' een stuk tekst ('Warmtekavel 3 - Maartensdijk kavel 1 ...etc'). Deze tekst is toegankelijker als deze in een ongeordende lijst wordt aangeboden. Maak gebruik van het ul-element en li-elementen om deze tekst toegankelijker te maken.

Bevinding 15: Opmerking: Op pagina https://www.debilt.nl/afspraak-maken#select/ staat de tekst 'Fotohokje verdwijnt' in een site-element dat waarschijnlijk normaliter wordt gebruikt om de melding te geven dat een actie succesvol is uitgevoerd door de bezoeker. Dit wordt visueel weergegeven met een groen vinkje, en de screenreader-only tekst 'succesvol'. Inhoudelijk is dit echter gewoon een mededeling, niet een succesvol uitgevoerde actie. Overweeg om de opmaak hier daarom aan te passen, om verwarring bij meerdere doelgroepen te voorkomen.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 16: 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 17: 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 18: Onder de kop 'Vaak gevraagd' op pagina https://www.debilt.nl/contact-en-veelgestelde-vragen staan verschillende links, zoals 'Ik wil iets melden dat kapot is'. Wanneer bezoekers met de muisaanwijzer over deze links heengaan of wanneer met het toetsenbord focus op deze links wordt geplaatst, verandert de tekstkleur naar geel (HEX #F7B036) en de achtergrondkleur naar grijs (HEX #F5F5F5). Deze kleurencombinatie heeft onvoldoende contrast. De contratsverhouding is hier 1,7:1, waar dat minimaal 4,5:1 moet zijn. Zorg ervoor dat teksten altijd voldoende contrast hebben, ook bij muishover en toetsenbordfocus.
Let op, dit contrastprobleem komt ook voor bij soortgelijke links onder de andere tabbladen op deze pagina.

Bevinding 19: 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 20: 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 21: 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.

Bevinding 22: Wanneer toetsenbordgebruikers navigeren over pagina https://www.debilt.nl/vergunningen-en-belastingen/activiteit-organiseren komt een lichtblauwe focusrand te staan om de (eerste) afspeelknop van de video. Op de witte achtergrond heeft deze focusrand onvoldoende contrast. De contrastverhouding is hier 2,5:1, waar dit minimaal 3:1 moet zijn. Op de zwarte achtergrond in de videospeler heeft de focusrand wel voldoende contrast.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 23: 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 24: 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 25: 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/medewerker-sociaal-domein-asiel-en-opvang.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 26: Deze bevinding vereist mogelijke een technische oplossing:
Op onder andere pagina https://www.debilt.nl/ staat de ReadSpeaker knop. Deze knop heeft het visuele label 'Lees voor'. Via een aria-label krijgt de knop de toegankelijke naam 'ReadSpeaker webReader: undefined'. In deze toegankelijke naam komt het visuele label niet in voor, hierdoor is de knop moeilijk te bedienen met spraakgestuurde bediening. Zorg ervoor dat het visuele label volledige voorkomt in de toegankelijke naam van de knop, het liefst vooraan.

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 27: 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 28: 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 29: 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 30: Advies: Op de lijst op pagina https://www.debilt.nl/sitemap is gebruik te gemaakt van role="directory" op het ul-element. Deze rol heeft geen toegevoegde waarde voor gebruikers van hulpsoftware. In dit geval zou het zelfs beter zijn als de lijst de rol lijst heeft. Verwijder daarom het role-attribuut van het ul-element.

Bevinding 31: 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: 2025-01-15 18:04:20 v2.4-011