Rapport in PDF

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.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Hulp bij laag inkomen

Uitkomst: Onvoldoende

College van B&W

Uitkomst: Onvoldoende

Aardgasvrij wonen

Uitkomst: Onvoldoende

PDF Transitievisie warmte

Uitkomst: Onvoldoende

Hele sample

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 inkomen

Boven 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&W

Onderaan 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 wonen

Op 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 warmte

De 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 sample

Uitkomst: Niet van toepassing

1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Voldoende

1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

Participatie

Uitkomst: Onvoldoende

Random pagina 2- Opvang asielzoekers

Uitkomst: Onvoldoende

Participatie

In 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 asielzoekers

In 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 sample

Uitkomst: Niet van toepassing

1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Computerregeling

Uitkomst: Voldoende

Participatie

Uitkomst: Onvoldoende

Random pagina 2- Opvang asielzoekers

Uitkomst: Voldoende

PDF Transitievisie warmte

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

Uitkomst: Onvoldoende

Computerregeling

Opmerking: 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.

Participatie

De 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 asielzoekers

Opmerking: 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 warmte

Niet 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 Broec

De 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 sample

Uitkomst: Onvoldoende

PDF Transitievisie warmte

Uitkomst: Onvoldoende

PDF Transitievisie warmte

De 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 sample

Uitkomst: Voldoende

1.3.4: Weergavestand
Hele sample

Uitkomst: Niet getoetst

1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Niet getoetst

1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Onvoldoende

Aardgasvrij wonen

Uitkomst: Onvoldoende

Random pagina 1 - Wet kwaliteitsborging voor het bouwen

Uitkomst: Voldoende

Aardgasvrij wonen

In 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 bouwen

Opmerking: 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 sample

Uitkomst: Niet getoetst

1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

Hulp bij laag inkomen

Uitkomst: Onvoldoende

Aardgasvrij wonen

Uitkomst: Onvoldoende

PDF Transitievisie warmte

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

Uitkomst: Onvoldoende

Hele sample

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 inkomen

De links op hover (donkergroen/lichtgroen). Zie screenshot 3.

Aardgasvrij wonen

De teksten ‘Processtappen’, ‘Individuele energievoorziening’ en ‘Maatwerk’ op de infographic.

PDF Transitievisie warmte
  • Teksten in de combinatie wit/lichtblauw, zoals de blauwe kopjes op pagina 2 (3:1). Er komen ook lichtblauwe teksten voor binnen paragrafen, zoals op pagina 8.
  • De plus- en min-iconen om waardes aan te geven (groen en rood) zoals op pagina 23 en in de tabel.
PDF Uitvoeringsprogramma verkeer Stede Broec

De tabelkoppen (wit/oranje) op pagina 14.

1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Niet getoetst

1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Voldoende

1.4.10: Reflow
Hele sample

Uitkomst: Niet getoetst

1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Computerregeling

Uitkomst: Voldoende

Aardgasvrij wonen

Uitkomst: Onvoldoende

Hele sample

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.

Computerregeling

Opmerking: 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 wonen

Het contrast tussen de deelgebieden in de infographic (oranje/groen/grijs/wit).

1.4.12: Tekstafstand
Hele sample

Uitkomst: Niet getoetst

1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Niet getoetst

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Niet getoetst

2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Niet getoetst

2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Onvoldoende

Participatie

Uitkomst: Onvoldoende

Participatie

Op 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 sample

Uitkomst: Niet getoetst

2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet getoetst

2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Voldoende

2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Niet getoetst

2.4.2: Paginatitel
Hele sample

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

Het 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 sample

Uitkomst: Niet getoetst

2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

Projecten

Uitkomst: Onvoldoende

Projecten

Bij 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 sample

Uitkomst: Niet getoetst

PDF Transitievisie warmte

Uitkomst: Voldoende

PDF Transitievisie warmte

Opmerking: 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 sample

Uitkomst: Voldoende

2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Niet getoetst

2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet getoetst

2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Niet getoetst

2.5.3: Label in naam
Hele sample

Uitkomst: Onvoldoende

Hele sample

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 sample

Uitkomst: Niet getoetst

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

Uitkomst: Onvoldoende

PDF Uitvoeringsprogramma verkeer Stede Broec

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
Hele sample

Uitkomst: Niet van toepassing

3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Niet getoetst

3.2.2: Bij input
Hele sample

Uitkomst: Niet getoetst

3.2.3: Consistente navigatie
Hele sample

Uitkomst: Niet getoetst

3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende

3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Niet van toepassing

3.3.2: Labels of instructies
Hele sample

Uitkomst: Niet van toepassing

3.3.3: Foutsuggestie
Hele sample

Uitkomst: Niet van toepassing

3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet getoetst

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Niet getoetst

4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Niet getoetst

4.1.3: Statusberichten
Hele sample

Uitkomst: Niet getoetst

Sample

  1. Homepage - https://www.stedebroec.nl/
  2. Hulp bij laag inkomen - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen/hulp-bij-laag-inkomen/
  3. Computerregeling - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen/hulp-bij-laag-inkomen/computerregeling/
  4. Gezondheidsverklaring en medische keuring - https://www.stedebroec.nl/direct-regelen/burgerzaken/rijbewijs/rijbewijs-gezondheidsverklaring-medische-keuring/
  5. Participatie - https://www.stedebroec.nl/bestuur-en-organisatie/participatie/
  6. College van B&W - https://www.stedebroec.nl/bestuur-en-organisatie/samenstelling-college-van-bw/
  7. Projecten - https://www.stedebroec.nl/projecten/
  8. Verkeersplan Stede Broec - https://www.stedebroec.nl/projecten/verkeersplan-stede-broec/
  9. Aardgasvrij wonen - https://www.stedebroec.nl/direct-regelen/wonen-verkeer-en-veiligheid/milieu-en-duurzaamheid/aardgasvrij-wonen/31463/
  10. 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/)
  11. 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/)
  12. Random pagina 1 - Wet kwaliteitsborging voor het bouwen - https://www.stedebroec.nl/projecten/de-nieuwe-omgevingswet/wet-kwaliteitsborging-voor-het-bouwen/
  13. 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:

Screenshots

  1. projectenpagina in webinspector
    Figuur 1: bij de projecten staan links zonder tekst
  2. koppenlijst stappenplan
    Figuur 2: de kopniveaus zijn niet correct
  3. link op hover
    Figuur 3: op hover is het contrast te laag