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 een criterium niet voldoet, worden hiervan een of meerdere voorbeelden gegeven. Deze bevindingen kunnen dus op meer plekken voorkomen en dienen structureel te 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
21 december 2021

Managementsamenvatting

Dit rapport bevat het deelonderzoek content. In combinatie met het (totaal)onderzoek naar de website enkhuizen.nl (15 december 2021) vormt dit een volledig toegankelijkheidsonderzoek van de website.

Uit dit onderzoek blijkt dat wordt voldaan aan 20 van de 29 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 er in de content geen zintuigelijke eigenschappen zoals kleur worden gebruikt om betekenis over te brengen en dat er geen bewegende onderdelen zijn die de lezer kunnen afleiden van de tekst. Ook wordt bij alle pagina's de taal goed aangegeven. Verbeterpunten zijn er bij enkele afbeeldingen die geen (goede) alternatieve tekst hebben, zoals portretfoto's en infographics. Ook zijn de koppen in de content nog niet overal goed aangegeven: tussen paragrafen, in tabellen en in de PDF-documenten. Er zijn ook op meerdere plekken links gevonden zonder tekst. Dit is met name voor gebruikers van hulpsoftware lastig.

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
Dit rapport bevat het deelonderzoek content. In combinatie met het (totaal)onderzoek naar de website enkhuizen.nl (15 december 2021) vormt dit een volledig toegankelijkheidsonderzoek van de website. Er is in dit onderzoek geen video opgenomen, omdat de enige video op de site dezelfde is die al onderzocht is op de website van drechterland.nl.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 29 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

PDF Burenoverlast

Uitkomst: Onvoldoende

Informatie over beveiligingsincident Log4J

Uitkomst: Onvoldoende

Samenstelling College B&W

Uitkomst: Onvoldoende

Melding datalek

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

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.

PDF Burenoverlast

De illustratie heeft geen alternatieve tekst. Geef een beschrijving van de cartoon.

Informatie over beveiligingsincident Log4J

De afbeelding boven het nieuwsbericht heeft geen alt-attribuut. Zonder alt-attribuut wordt de bestandsnaam voorgelezen. Voeg een beschrijvende alt-tekst toe of een leeg alt -attribuut wanneer de afbeelding als decoratief kan worden beschouwd. Dan negeert hulpsoftware de afbeelding.

Samenstelling College B&W

De portretfoto's hebben een leeg alt attribuut, maar deze foto's zijn niet decoratief. Voeg de naam toe van de geportretteerden.

Melding datalek

Het logo bovenaan de pagina heeft geen alternatieve tekst. Dit logo dient als informatie over de afzender en kan daarom niet als decoratief worden beschouwd. De afbeelding is geplaatst met CSS (wat bedoeld is voor layout, niet voor content). Voeg de afbeelding toe als img-element met alt-tekst of zorg voor een andere vorm van alternatieve tekst.

Inwoners en het coronavirus

Op deze pagina staat een infographic. Voor de informatie op deze afbeelding wordt geen volwaardig tekstalternatief gegeven. Beschrijf de afbeelding in een tekst eronder of geef een link naar een pagina waar deze informatie (letterlijk) staat uitgeschreven.
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: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
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

Burenoverlast

Uitkomst: Onvoldoende

Samenstelling College B&W

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Meedoen regeling

Uitkomst: Onvoldoende

PDF Toezicht in coronatijd

Uitkomst: Onvoldoende

Burenoverlast

De kopjes in het document zijn niet als kop opgemaakt, maar als paragraaf. Maak hier kopelementen van zodat hulpsoftware deze teksten ook als kop kan herkennen.

Samenstelling College B&W

De koppen in de tabellen zijn niet als kopcel (<th>) opgemaakt, maar enkel vetgedrukt via het <strong>-element. Hierdoor wordt de tabeldata niet op de juiste manier - met de juiste relaties tussen de cellen - voorgelezen door screenreaders.

Inwoners en het coronavirus

Het kopje 'Coronabewijs op papier' is niet als een kopje opgemaakt maar via het <strong>-element. Maak hier een h3-element van.

Meedoen regeling

De h2 koppen van de vragen vallen binnen het button element. Hierdoor wordt de kopopmaak door hulpsoftware genegeerd. Dat zorgt er ook voor dat als er koppen staan binnen de vraag, de hierarchie niet meer klopt. Dit kan verwarrend zijn voor screenreadergebruikers. Zet de kop daarom buiten het button element.Dus andersom: <h2><button>Tekst</button></h2>. Dan komt de kop wel in de koppenlijst van de screenreader terecht.

PDF Toezicht in coronatijd

De kopjes in het document zijn niet als kop opgemaakt, maar als paragraaf. Maak hier kopelementen van zodat hulpsoftware deze teksten ook als kop kan herkennen.
1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende
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: Voldoende

Inwoners en het coronavirus

Uitkomst: Niet getoetst

Inwoners en het coronavirus

Opmerking: binnen uitklapbare delen tekst komen soms links voor die niet onderstreept zijn. Ze voldoen nog wel aan dit citerium omdat het verschil tussen de linktekst en de 'gewone' tekst hoger dan 3.0:1 is. Het kan echter nog steeds lastig zijn voor slechtzienden of kleurenblinden om deze links als zodanig te herkennen.
1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Voldoende
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Niet getoetst
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Op deze pagina staat een infographic. Omdat deze tekst niet in de HTML staat kan deze niet aangepast worden aan de wensen van de gebruiker, zoals tekstvergroting. Voeg een alternatief in HTML toe.
1.4.10: Reflow
Hele sample

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Bij de links naar informatie in andere talen moet bij inzoomen horizontaal gescrold worden. Er zijn hier witruimte tekens gebruikt voor de layout. Het is beter hier een standaard lijst van te maken.
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Melding datalek

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Melding datalek

De randen van de invoervelden van het formulier hebben de kleur #ddd. Deze kleur geeft een contrastwaarde van 1.4: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.

In de footer hebben de iconen van Twitter en RSS (lichtblauw en oranje) te weinig contrast met de achtergrond. Voor grafische elementen zoals iconen is een minimum contrast vereist van 3.0:1.

Inwoners en het coronavirus

Het icoon met het pijltje om de content open of dicht te klappen onder bijvoorbeeld "Gemeentelijke dienstverlening' heeft te weinig contrast (wit op groen, 1.8:1). Zorg dat iconen minimaal een contrast van 3.0:1 hebben.

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: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Niet getoetst
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 van toepassing
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 Burenoverlast

Uitkomst: Onvoldoende

PDF Toezicht in coronatijd

Uitkomst: Onvoldoende

PDF Burenoverlast

Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Pas de titel aan in de Documenteigenschappen in Adobe PDF.

PDF Toezicht in coronatijd

Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde
Hele sample

Uitkomst: Niet getoetst
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

Zwembad de Kloet

Uitkomst: Onvoldoende

Burenoverlast

Uitkomst: Niet getoetst

Melding datalek

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Zwembad de Kloet

Binnen de lijsten met links staan 5 links zonder tekst. Bijvoorbeeld achter 'Aqua sportief' staat nog een link naar de klachtenpagina zonder tekst. Zie screenshot 1. Gebruikers van hulpsoftware die lijsten opvragen van links weten zo niet waar deze links naar toe gaan. De links krijgen ook toetsenbordfocus zonder dat het duidelijk is waar ze voor zijn. Als deze links geen doel hebben is het beter ze te verwijderen.

Burenoverlast

Opmerking: Bij de PDF download staat dezelfde link er 2 keer in. Dit kan verwarrend zijn omdat bezoekers kunnen denken dat hier twee verschillende documenten staan. Het is beter om hier 1 link van te maken.

Melding datalek

Bovenaan de pagina staat een link achter het logo zonder tekst. Een title-attribuut is niet voldoende aangezien deze slecht wordt ondersteund door hulpsoftware. Voeg een link tekst toe of een aria-label.

Opmerking: Het laatste icoon in de footer heeft als linktekst 'Flickr' maar gaat naar het nieuwsoverzicht.

Inwoners en het coronavirus

Er staan meerdere links op de pagina zonder tekst. Achter de link 'Lees het volledige nieuwsbericht' staat een link naar de informatie in eenvoudige taal zonder tekst. Onder de 'Links' sectie staan ook 2 links zonder tekst. Gebruikers van hulpsoftware die lijsten opvragen van links weten zo niet waar deze links naar toe gaan. De links krijgen ook toetsenbordfocus zonder dat het duidelijk is waar ze voor zijn. Als deze links geen doel hebben is het beter ze te verwijderen.

Onder 'Tijdelijke wet maatregelen Covid-19' staan links naar downloads. Per PDF staan er 2 links die naar hetzelfde doel verwijzen. 2 links hebben enkel de tekst 'Download' en zijn daardoor niet uniek. Het is aan te raden hier per PDF een link van de maken met een unieke naam. Dat maakt het minder verwarrend voor o.a. screenreader- en toetsenbordgebruikers.

Opmerking: Er staan links onder 'Producten en diensten online aanvragen' die een icoontje hebben dat er op lijkt te wijzen dat de bezoeker naar een externe website wordt verwezen, maar deze links verwijzen naar pagina's binnen de eigen website.
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Niet getoetst
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: Voldoende
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: Voldoende
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Uitkomst: Onvoldoende

Inwoners en het coronavirus

Onderaan de pagina staat een titel en paragraaf in het Engels zonder dat dit in de HTML is aangegeven (via het lang attribuut). Hierdoor lezen screenreaders het mogelijk niet goed voor.
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: Voldoende
3.3.2: Labels of instructies
Hele sample

Uitkomst: Onvoldoende

Melding datalek

Uitkomst: Onvoldoende

Melding datalek

Bij 'Wanneer vond de inbreuk plaats?' staan 3 invoervelden. Bij de eerste staat alleen een icoontje, bij de andere 2 staat geen enkel label. Het kan daardoor lastig zijn voor gebruikers om te weten wat ze waar moeten invullen. Zorg voor zichtbare labels, bij voorkeur (ook) in tekst. Zie screenshot 2.

3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende
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: Voldoende
4.1.3: Statusberichten
Hele sample

Uitkomst: Niet getoetst

Sample met getoetste webpagina&#39;s

  1. Homepage - https://www.stedebroec.nl/
  2. Zwembad de Kloet - https://www.stedebroec.nl/zwembad-de-kloet/
  3. Sociaal meldpunt - https://www.stedebroec.nl/direct-regelen/gezondheid-jeugd-en-ondersteuning/hulp-en-ondersteuning/sociaal-meldpunt
  4. Burenoverlast - https://www.stedebroec.nl/direct-regelen/wonen-verkeer-en-veiligheid/veiligheid/burenoverlast
  5. PDF Burenoverlast - https://openpdckb.stedebroec.nl/wp-content/uploads/sites/3/2021/05/Burenlast-is-vervelend-wat-kunt-u-doen.pdf
  6. Werk en inkomen - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen
  7. Informatie over beveiligingsincident Log4J - https://www.stedebroec.nl/actueel/informatie-over-beveiligingsincident-log4j
  8. Samenstelling College B&W - https://www.stedebroec.nl/bestuur-en-organisatie/samenstelling-college-van-bw/
  9. Melding datalek - https://prod.stedebroec.nl/Ediensten/Melding_datalek
  10. Inwoners en het coronavirus - https://www.stedebroec.nl/coronavirus/inwoners-en-het-coronavirus/
  11. PDF Toezicht in coronatijd - https://www.stedebroec.nl/wp-content/uploads/2021/06/Toezicht-in-coronatijd-SED.pdf
  12. Plan Waterweide - https://www.stedebroec.nl/projecten/plan-waterweide/
  13. Meedoen regeling - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen/uitkering/meedoen-regeling

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,PDF,DOM

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek:

Screenshots

lege links in de web inspector
Figuur 1: Links zonder tekst die wel focus krijgen met het toetsenbord
velden zonder labels
Figuur 2: Invoervelden zonder zichtbare labels wat er ingevuld moet worden