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.
- 13 Voldoende
- 9 Onvoldoende
- 7 Niet van toepassing
- 21 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.1.1: Niet-tekstuele content | Hele sampleUitkomst: Onvoldoende PDF BurenoverlastUitkomst: Onvoldoende Informatie over beveiligingsincident Log4JUitkomst: Onvoldoende Samenstelling College B&WUitkomst: Onvoldoende Melding datalekUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: 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. PDF BurenoverlastDe illustratie heeft geen alternatieve tekst. Geef een beschrijving van de cartoon. Informatie over beveiligingsincident Log4JDe 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&WDe portretfoto's hebben een leeg alt attribuut, maar deze foto's zijn niet decoratief. Voeg de naam toe van de geportretteerden. Melding datalekHet 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 coronavirusOp 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 sampleUitkomst: Niet van toepassing | |
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen) | Hele sampleUitkomst: Niet van toepassing | |
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen) | Hele sampleUitkomst: Niet van toepassing | |
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 BurenoverlastUitkomst: Onvoldoende Samenstelling College B&WUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende Meedoen regelingUitkomst: Onvoldoende PDF Toezicht in coronatijdUitkomst: Onvoldoende | BurenoverlastDe 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&WDe koppen in de tabellen zijn niet als kopcel ( Inwoners en het coronavirusHet kopje 'Coronabewijs op papier' is niet als een kopje opgemaakt maar via het <strong>-element. Maak hier een h3-element van. Meedoen regelingDe 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: PDF Toezicht in coronatijdDe 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 sampleUitkomst: Voldoende | |
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: Voldoende Inwoners en het coronavirusUitkomst: Niet getoetst | Inwoners en het coronavirusOpmerking: 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 sampleUitkomst: Niet van toepassing | |
1.4.3: Contrast (minimum) | Hele sampleUitkomst: Voldoende | |
1.4.4: Herschalen van tekst | Hele sampleUitkomst: Niet getoetst | |
1.4.5: Afbeeldingen van tekst | Hele sampleUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende | Inwoners en het coronavirusOp 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 sampleUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende | Inwoners en het coronavirusBij 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 sampleUitkomst: Onvoldoende Melding datalekUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende | Melding datalekDe 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 coronavirusHet 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 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: Voldoende | |
2.1.4: Enkel teken sneltoetsen | Hele sampleUitkomst: Niet getoetst |
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 van toepassing |
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 BurenoverlastUitkomst: Onvoldoende PDF Toezicht in coronatijdUitkomst: Onvoldoende | PDF BurenoverlastHet 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 coronatijdHet 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 sampleUitkomst: Niet getoetst | |
2.4.4: Linkdoel (in context) | Hele sampleUitkomst: Onvoldoende Zwembad de KloetUitkomst: Onvoldoende BurenoverlastUitkomst: Niet getoetst Melding datalekUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende | Zwembad de KloetBinnen 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. BurenoverlastOpmerking: 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 datalekBovenaan 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 coronavirusEr 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 sampleUitkomst: Niet getoetst | |
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: Voldoende | |
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: Voldoende | |
3.1.2: Taal van onderdelen | Hele sampleUitkomst: Onvoldoende Inwoners en het coronavirusUitkomst: Onvoldoende | Inwoners en het coronavirusOnderaan 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 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: Voldoende | |
3.3.2: Labels of instructies | Hele sampleUitkomst: Onvoldoende Melding datalekUitkomst: Onvoldoende | Melding datalekBij '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 sampleUitkomst: Voldoende | |
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: Voldoende | |
4.1.3: Statusberichten | Hele sampleUitkomst: Niet getoetst |
Sample met getoetste webpagina's
- Homepage - https://www.stedebroec.nl/
- Zwembad de Kloet - https://www.stedebroec.nl/zwembad-de-kloet/
- Sociaal meldpunt - https://www.stedebroec.nl/direct-regelen/gezondheid-jeugd-en-ondersteuning/hulp-en-ondersteuning/sociaal-meldpunt
- Burenoverlast - https://www.stedebroec.nl/direct-regelen/wonen-verkeer-en-veiligheid/veiligheid/burenoverlast
- PDF Burenoverlast - https://openpdckb.stedebroec.nl/wp-content/uploads/sites/3/2021/05/Burenlast-is-vervelend-wat-kunt-u-doen.pdf
- Werk en inkomen - https://www.stedebroec.nl/direct-regelen/werk-en-inkomen
- Informatie over beveiligingsincident Log4J - https://www.stedebroec.nl/actueel/informatie-over-beveiligingsincident-log4j
- Samenstelling College B&W - https://www.stedebroec.nl/bestuur-en-organisatie/samenstelling-college-van-bw/
- Melding datalek - https://prod.stedebroec.nl/Ediensten/Melding_datalek
- Inwoners en het coronavirus - https://www.stedebroec.nl/coronavirus/inwoners-en-het-coronavirus/
- PDF Toezicht in coronatijd - https://www.stedebroec.nl/wp-content/uploads/2021/06/Toezicht-in-coronatijd-SED.pdf
- Plan Waterweide - https://www.stedebroec.nl/projecten/plan-waterweide/
- 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:
- Chrome 96 en Safari 15.1 met Voiceover op Mac 11.6.1
- Adobe Acrobat Pro DC 2021.007.20099 op Mac 11.6.1