Deelonderzoek content stedebroec.nl
Inleiding
Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
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. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
- Rapport auteur
- Janita Top
- Evaluatie opdrachtgever
- SED
- Evaluatiedatum
- 3 februari 2025
Managementsamenvatting
Dit rapport bevat het deelonderzoek content. In combinatie met het onderzoek van de techniek vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 13 van de 25 van toepassing zijnde content-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de video’s goede ondertiteling hebben, dat er geen bewegende onderdelen worden gebruikt die niet gepauzeerd kunnen worden en dat de webpagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
- Onjuiste of missende alt-teksten bij afbeeldingen
- Onjuist opgemaakte koppen en kopcellen
- Te laag contrast van tekst
Scope van de evaluatie
- Website naam
- stedebroec.nl
- Scope van de website
- Alle pagina's op https://www.stedebroec.nl/.
- WCAG Versie
- 2.1
- Conformiteitsdoel
- AA
- Basisniveau van toegankelijkheid-ondersteuning
- Gangbare webbrowsers en hulpapparatuur.
- Verdere onderzoeksvereisten
- Niet ingevuld
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 25 van 50 WCAG 2.1 AA Success Criteria.
- 6 Voldoende
- 12 Onvoldoende
- 7 Niet van toepassing
- 25 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.1.1: Niet-tekstuele content | Hele sampleUitkomst: Onvoldoende Hulp bij laag inkomenUitkomst: Onvoldoende College van B&WUitkomst: Onvoldoende Aardgasvrij wonenUitkomst: Onvoldoende PDF Transitievisie warmteUitkomst: Onvoldoende | Hele sampleBevindingen: Het logo in de header heeft de zichtbare tekst 'Gemeente Stede Broec' maar de alt tekst luidt 'Logo SED - Stede Broec'. Zorg dat de alternatieve tekst gelijk is aan de zichtbare tekst. Hulp bij laag inkomenBoven elke lijst staat een afbeelding waarvan de alt-tekst bestaat uit een herhaling van de titel, zoals ‘Bijzondere bijstand’. Dit is geen correcte beschrijving van de afbeelding. Het is beter om de alt-teksten hier leeg te laten zodat de screenreader de afbeeldingen negeert. (Mogelijk is dit een technisch issue en moet de webbouwer dit aanpassen.) College van B&WOnderaan op de pagina staan portretfoto’s van collegeleden. Deze foto’s hebben een lege alt-tekst. Portretfoto’s zijn echter niet decoratief (ze hebben een functie) en moeten daarom altijd een beschrijving hebben van de persoon op de foto. Zo weten gebruikers van hulpsoftware dat deze foto’s er op staan en kunnen er eventueel naar verwijzen. De groepsfoto heeft wel een caption, maar de alt-tekst is leeg. Voor screenreaders lijkt er nu geen afbeelding te zijn. Beter is het om ook een alt-tekst toe te voegen. Een alt-tekst moet de afbeelding beschrijven, een caption kan extra informatie geven. Aardgasvrij wonenOp de pagina staat een infographic. Deze informatieve afbeelding heeft geen alternatieve tekst. De alt-tekst is leeg en er staat ook geen beschrijving bij de afbeelding. De pdf die als download wordt aangeboden is ook niet toegankelijk opgemaakt. Voeg een korte beschrijving toe in de alt-tekst en daarbij ook een verwijzing naar een volledig tekstalternatief. Bijvoorbeeld: ‘Infographic van de transitievisie in één oogopslag. Een volledige beschrijving staat onder deze afbeelding.’ PDF Transitievisie warmteDe afbeeldingen in het document missen een alternatieve tekst. Afbeeldingen van content zoals logo’s hebben een goede omschrijving nodig in de alt-tekst. Meer complexe afbeeldingen zoals infographics (bijvoorbeeld de tijdlijn op pagina 6) hebben naast een korte alt-tekst ook een volledig tekstalternatief nodig. Deze kan zichtbaar als uitgeschreven tekst bij de afbeelding worden geplaatst of bijvoorbeeld via een (gelinkte of uitklapbare) alternatieve datatabel of lijst. De decoratieve afbeeldingen moeten als artifact worden gemarkeerd, zodat screenreaders ze niet voorlezen. |
1.2 Op tijd gebaseerde media
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen) | Hele sampleUitkomst: Niet van toepassing | |
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen) | Hele sampleUitkomst: Voldoende | |
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen) | Hele sampleUitkomst: Onvoldoende ParticipatieUitkomst: Onvoldoende Random pagina 2- Opvang asielzoekersUitkomst: Onvoldoende | ParticipatieIn de animatievideo komt informatie in beeld die niet wordt uitgesproken. Het gaat om de aftiteling met logo’s. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video. Random pagina 2- Opvang asielzoekersIn de animatievideo komt informatie in beeld die niet wordt uitgesproken. Het gaat om teksten, logo’s en links naar websites aan het begin en aan het eind van de video. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video. |
1.2.4: Ondertitels voor doven en slechthorenden (live) | Hele sampleUitkomst: Niet van toepassing | |
1.2.5: Audiodescriptie (vooraf opgenomen) | Hele sampleUitkomst: Niet van toepassing |
1.3 Aanpasbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.3.1: Info en relaties | Hele sampleUitkomst: Onvoldoende ComputerregelingUitkomst: Voldoende ParticipatieUitkomst: Onvoldoende Random pagina 2- Opvang asielzoekersUitkomst: Voldoende PDF Transitievisie warmteUitkomst: Onvoldoende PDF Uitvoeringsprogramma verkeer Stede BroecUitkomst: Onvoldoende | ComputerregelingOpmerking: binnen de vragen staan h2-koppen zoals ‘Wat zijn de voorwaarden’. Op zich is het goed om koppen te gebruiken voor de vragen, maar hier worden deze door screenreaders genegeerd omdat ze binnen een button-element staan. Hierdoor wordt er ook een kopniveau overgeslagen. Dit kan worden opgelost door de volgorde om te draaien en de button binnen de kop te zetten. Dan worden zowel de kop als de button herkend door screenreaders. ParticipatieDe koppenstructuur is niet geheel logisch opgemaakt. Er is een h2-kop ‘Veelgestelde vragen’, maar de de kop ‘Stappenplan’ dat onder een vraag valt, heeft ook h2-niveau. Dit moet dan h3-niveau zijn. Zie screenshot 2. (De h4-koppen zijn hier wel correct.) Onder stap 3 staat een tabel. Deze heeft visueel kopcellen. Deze zijn echter niet als kop (th-elementen) opgemaakt, maar via het strong-element. Screenreaders kunnen daardoor deze tabel niet correct voorlezen. Dit komt op meerdere pagina’s voor, bijvoorbeeld bij College van B&W. Random pagina 2- Opvang asielzoekersOpmerking: de pagina heeft drie h1-koppen. Beter is het om alleen ‘Opvang Asielzoekers’ als h1-kop op te maken, omdat dit de titel van de pagina is. PDF Transitievisie warmteNiet alle (sub)koppen in het document zijn niet als kop opgemaakt, maar als paragraaf. In de tabel op pagina 24 zijn niet alle kolomkoppen als kop (th) opgemaakt. PDF Uitvoeringsprogramma verkeer Stede BroecDe PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag 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. |
1.3.2: Betekenisvolle volgorde | Hele sampleUitkomst: Onvoldoende PDF Transitievisie warmteUitkomst: Onvoldoende | PDF Transitievisie warmteDe visuele volgorde en de bronvolgorde komen niet met elkaar overeen, wat verwarrend kan zijn voor screenreadergebruikers. Zo staat bijvoorbeeld de kop ‘Colofon’ op pagina 2 na ‘Leden Klankbordgroep en stakeholders’. |
1.3.3: Zintuiglijke eigenschappen | Hele sampleUitkomst: Voldoende | |
1.3.4: Weergavestand | Hele sampleUitkomst: Niet getoetst | |
1.3.5: Identificeer het doel van de input | Hele sampleUitkomst: Niet getoetst |
1.4 Onderscheidbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.4.1: Gebruik van kleur | Hele sampleUitkomst: Onvoldoende Aardgasvrij wonenUitkomst: Onvoldoende Random pagina 1 - Wet kwaliteitsborging voor het bouwenUitkomst: Voldoende | Aardgasvrij wonenIn de infographic worden er drie categorieën enkel aangegeven met behulp van kleur. Voeg een ander visueel middel toe voor mensen die de kleuren niet kunnen zien, zoals een tekst of icoon. Random pagina 1 - Wet kwaliteitsborging voor het bouwenOpmerking: De links in de tekst worden alleen met een verschil in kleur aangegeven. Omdat het contrast tussen de links en de omliggende tekst meer dan 3:1 is, wordt dit hier toegestaan. Echter, slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijk te maken. Dit komt op meerdere plekken voor. |
1.4.2: Geluidsbediening | Hele sampleUitkomst: Niet getoetst | |
1.4.3: Contrast (minimum) | Hele sampleUitkomst: Onvoldoende Hulp bij laag inkomenUitkomst: Onvoldoende Aardgasvrij wonenUitkomst: Onvoldoende PDF Transitievisie warmteUitkomst: Onvoldoende PDF Uitvoeringsprogramma verkeer Stede BroecUitkomst: Onvoldoende | Hele sampleBevindingen: Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden. Hulp bij laag inkomenDe links op hover (donkergroen/lichtgroen). Zie screenshot 3. Aardgasvrij wonenDe teksten ‘Processtappen’, ‘Individuele energievoorziening’ en ‘Maatwerk’ op de infographic. PDF Transitievisie warmte
PDF Uitvoeringsprogramma verkeer Stede BroecDe tabelkoppen (wit/oranje) op pagina 14. |
1.4.4: Herschalen van tekst | Hele sampleUitkomst: Niet getoetst | |
1.4.5: Afbeeldingen van tekst | Hele sampleUitkomst: Voldoende | |
1.4.10: Reflow | Hele sampleUitkomst: Niet getoetst | |
1.4.11: Contrast van niet-tekstuele content | Hele sampleUitkomst: Onvoldoende ComputerregelingUitkomst: Voldoende Aardgasvrij wonenUitkomst: Onvoldoende | Hele sampleBevindingen: Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden. ComputerregelingOpmerking: het pijltjesicoon om een vraag dicht te klappen heeft te laag contrast (2.7:1). Dit wordt niet afgekeurd omdat je op de gehele vraag kunt klikken, maar het wordt wel geadviseerd om dit contrast wat te verhogen. Aardgasvrij wonenHet contrast tussen de deelgebieden in de infographic (oranje/groen/grijs/wit). |
1.4.12: Tekstafstand | Hele sampleUitkomst: Niet getoetst | |
1.4.13: Content bij hover of focus | Hele sampleUitkomst: Niet getoetst |
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.1.1: Toetsenbord | Hele sampleUitkomst: Niet getoetst | |
2.1.2: Geen toetsenbordval | Hele sampleUitkomst: Niet getoetst | |
2.1.4: Enkel teken sneltoetsen | Hele sampleUitkomst: Onvoldoende ParticipatieUitkomst: Onvoldoende | ParticipatieOp deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Een oplossing is om 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'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb Deze bevinding komt ook voor op de pagina Opvang asielzoekers. |
2.2 Genoeg tijd
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.2.1: Timing aanpasbaar | Hele sampleUitkomst: Niet getoetst | |
2.2.2: Pauzeren, stoppen, verbergen | Hele sampleUitkomst: Niet getoetst |
2.3 Toevallen en fysieke reacties
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.3.1: Drie flitsen of beneden drempelwaarde | Hele sampleUitkomst: Voldoende |
2.4 Navigeerbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.4.1: Blokken omzeilen | Hele sampleUitkomst: Niet getoetst | |
2.4.2: Paginatitel | Hele sampleUitkomst: Onvoldoende PDF Uitvoeringsprogramma verkeer Stede BroecUitkomst: Onvoldoende | PDF Uitvoeringsprogramma verkeer Stede BroecHet PDF-bestand 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 de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF. Stel daarnaast in de eigenschappen in dat de documenttitel wordt getoond in plaats van de bestandsnaam. |
2.4.3: Focus volgorde | Hele sampleUitkomst: Niet getoetst | |
2.4.4: Linkdoel (in context) | Hele sampleUitkomst: Onvoldoende ProjectenUitkomst: Onvoldoende | ProjectenBij de projecten staan onder de foto’s in een paragraaf lege links. Screenreadergebruikers weten nu niet waar deze links heen gaan. Zie screenshot 1. Haal deze links weg als ze niet bereikbaar zouden moeten zijn, of voeg teksten toe aan de links. Dit komt bij meerdere projecten op deze pagina voor. (Mogelijk is dit een technisch issue en moet de webbouwer dit aanpassen.) |
2.4.5: Meerdere manieren | Hele sampleUitkomst: Niet getoetst PDF Transitievisie warmteUitkomst: Voldoende | PDF Transitievisie warmteOpmerking: 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.6: Koppen en labels | Hele sampleUitkomst: Voldoende | |
2.4.7: Focus zichtbaar | Hele sampleUitkomst: Niet getoetst |
2.5 Input Modaliteiten
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.5.1: Aanwijzergebaren | Hele sampleUitkomst: Niet getoetst | |
2.5.2: Aanwijzerannulering | Hele sampleUitkomst: Niet getoetst | |
2.5.3: Label in naam | Hele sampleUitkomst: Onvoldoende | Hele sampleBevindingen: De link achter het logo bovenaan de website heeft een andere toegankelijke naam (Logo SED - Stede Broec) dan wat er zichtbaar is (Gemeente Stede broec). Hierdoor kan de link mogelijk niet goed met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat. Zie ook 1.1.1. |
2.5.4: Bewegingsactivering | Hele sampleUitkomst: Niet getoetst |
3 Begrijpelijk
3.1 Leesbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.1.1: Taal van de pagina | Hele sampleUitkomst: Onvoldoende PDF Uitvoeringsprogramma verkeer Stede BroecUitkomst: Onvoldoende | PDF Uitvoeringsprogramma verkeer Stede BroecHet 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 | Hele sampleUitkomst: Niet van toepassing |
3.2 Voorspelbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.2.1: Bij focus | Hele sampleUitkomst: Niet getoetst | |
3.2.2: Bij input | Hele sampleUitkomst: Niet getoetst | |
3.2.3: Consistente navigatie | Hele sampleUitkomst: Niet getoetst | |
3.2.4: Consistente identificatie | Hele sampleUitkomst: Voldoende |
3.3 Assistentie bij invoer
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.3.1: Foutidentificatie | Hele sampleUitkomst: Niet van toepassing | |
3.3.2: Labels of instructies | Hele sampleUitkomst: Niet van toepassing | |
3.3.3: Foutsuggestie | Hele sampleUitkomst: Niet van toepassing | |
3.3.4: Foutpreventie (wettelijk, financieel, gegevens | Hele sampleUitkomst: Niet getoetst |
4 Robuust
4.1 Compatibel
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
4.1.1: Parsen | Hele sampleUitkomst: Niet getoetst | |
4.1.2: Naam, rol, waarde | Hele sampleUitkomst: Niet getoetst | |
4.1.3: Statusberichten | Hele sampleUitkomst: Niet getoetst |
Sample
- Homepage - https://www.stedebroec.nl/
- Hulp bij laag inkomen - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen/hulp-bij-laag-inkomen/
- Computerregeling - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen/hulp-bij-laag-inkomen/computerregeling/
- Gezondheidsverklaring en medische keuring - https://www.stedebroec.nl/direct-regelen/burgerzaken/rijbewijs/rijbewijs-gezondheidsverklaring-medische-keuring/
- Participatie - https://www.stedebroec.nl/bestuur-en-organisatie/participatie/
- College van B&W - https://www.stedebroec.nl/bestuur-en-organisatie/samenstelling-college-van-bw/
- Projecten - https://www.stedebroec.nl/projecten/
- Verkeersplan Stede Broec - https://www.stedebroec.nl/projecten/verkeersplan-stede-broec/
- Aardgasvrij wonen - https://www.stedebroec.nl/direct-regelen/wonen-verkeer-en-veiligheid/milieu-en-duurzaamheid/aardgasvrij-wonen/31463/
- PDF Transitievisie warmte - https://openpdc.stedebroec.nl/wp-content/uploads/sites/2/2021/10/Transitievisie-Warmte-SED-gemeenten.pdf (via https://www.stedebroec.nl/direct-regelen/wonen-verkeer-en-veiligheid/milieu-en-duurzaamheid/aardgasvrij-wonen/31463/)
- PDF Uitvoeringsprogramma verkeer Stede Broec - https://www.stedebroec.nl/wp-content/uploads/2023/05/2023-Uitvoeringsprogramma-verkeer-Stede-Broec-definitief-versie-16-3.pdf (via https://www.stedebroec.nl/projecten/verkeersplan-stede-broec/)
- Random pagina 1 - Wet kwaliteitsborging voor het bouwen - https://www.stedebroec.nl/projecten/de-nieuwe-omgevingswet/wet-kwaliteitsborging-voor-het-bouwen/
- Random pagina 2- Opvang asielzoekers - https://www.stedebroec.nl/opvang-asielzoekers/
Technologie
HTML,CSS,WAI-ARIA,JavaScript,SVG,PDF,DOM
Onderbouwing van de evaluatie
Gebruikte systemen tijdens het onderzoek:
- Chrome 132 en Safari 18.1.1 met Voiceover op Mac 15.1.1
- Adobe Acrobat Pro DC 2024.005.20320 op Mac 15.1.1
- PDF Accessibility Checker 2024 (Windows)