Advies- en onderzoeksbureau in digitale toegankelijkheid | properaccess.nl | 06-28742275 | contact@properaccess.nl
Deelonderzoek content digitale toegankelijkheid van website Wijzer ouder worden woww.boxtel.nl
Onderzocht door
Lana en Julia van Proper Access
In opdracht van
Conformiteitsdoel
WCAG 2.1, Level AA
Methodologie
WCAG-EM
Automatische tools
voldoen aan het ACT Rules Format
Datum
14 september 2024
Samenvatting
De website http://woww.boxtel.nl/ is onderzocht tussen 10 en 14 september 2024. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Voor dit deelonderzoek is alleen de content gecontroleerd. De content voldoet nog niet aan alle onderzochte succescriteria.
Uit het onderzoek naar toegankelijkheid is gebleken dat de website in bepaalde opzichten al goed toegankelijk is. Hierdoor kunnen veel mensen met een functiebeperking een groot deel van de content goed lezen en gebruiken.
Dit onderzoek dient gebruikt te worden in combinatie met het techniekonderzoek. Dit techniekonderzoek is op te vragen bij de leverancier van het platform.
In dit rapport zijn de beschrijvingen van de succescriteria verkort. Volledige beschrijvingen zijn te vinden in de WCAG-documentatie. We bieden bij elk succescriterium ook een algemene toelichting. Hoewel de WCAG-norm voldoende duidelijkheid biedt voor gedegen onderzoek, kan de beoordeling van succescriteria op detailniveau in de toekomst veranderen. Zo kan iets dat nu wordt afgekeurd, bij een volgend onderzoek worden goedgekeurd en andersom.
Dit rapport bevat slechts voorbeelden van geconstateerde problemen; het biedt geen volledig overzicht. Omdat het onderzoek op een steekproef is gebaseerd, kan het zijn dat bepaalde problemen niet worden gedetecteerd. Deze kunnen echter bij een volgend onderzoek aan het licht komen. Bij het doorvoeren van verbeteringen moet men er rekening mee houden dat er nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Resultaten per principe
Principe
Resultaten per principe
Waarneembaar
12 uit 20
Bedienbaar
14 uit 17
Begrijpelijk
9 uit 10
Robuust
3 uit 3
Totaal
38 uit 50
Toelichting bij dit rapport
Doel van dit rapport
Dit onderzoek geeft een overzicht van de mate waarin de website momenteel voldoet aan de WCAG 2.1, niveau A en AA. WCAG, oftewel Web Content Accessibility Guidelines, zijn internationale richtlijnen voor de toegankelijkheid van webinhoud. Deze richtlijnen zijn opgedeeld in vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust, elk met specifieke meetbare succescriteria.
Testproces
Dit onderzoek is uitgevoerd volgens de WCAG-EM methodologie.
Het volgende proces is daarbij gebruikt:
vaststellen wat binnen en buiten scope valt
vaststellen gebruikte technologieën
samenstellen sample (steekproef)
onderzoek van de sample
beschrijven van gevonden issues
Het onderzoek omvat alle eisen uit de Europese toegankelijkheidsnorm EN 301 549 (WCAG 2.2).
Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Chrome Developer Tools.
Kleine letters
Omdat het onderzoek gebaseerd is op een steekproef, kan het zijn dat bepaalde problemen onopgemerkt blijven en bij een volgend onderzoek anders worden geëvalueerd. De steekproef vertegenwoordigt alle content op het getoetste domein Het onderzoek biedt een momentopname; bij het doorvoeren van verbeteringen kunnen nieuwe toegankelijkheidsproblemen ontstaan.
De beoordeling per criterium is gebaseerd op falsificatie: "voldoet" betekent dat we geen redenen hebben gevonden om het als "voldoet niet" te beoordelen.
Voor elk probleem geven we maximaal drie voorbeelden. Het is mogelijk dat hetzelfde probleem op meerdere plaatsen voorkomt. Gebruik dit rapport als een blueprint om alle delen van de website te controleren.
Scope
Pagina's
Scope:
Alle content op woww.boxtel.nl
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
De online kaarten en karteringsdiensten, tenzij ze bedoeld zijn voor navigatie (wettelijke uitzondering voor de overheid)
De kantoorbestanden van vóór 23 september 2018, tenzij ze deel uitmaken van een administratief proces (wettelijke uitzondering voor de overheid)
De audio- en videobestanden die vóór 23 september 2020 op het digitale kanaal zijn geplaatst (wettelijke uitzondering voor de overheid)
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Succescriteria die alleen te maken hebben met techniek 1.3.4, 1.4.4, 1.4.12, 1.4.13, 2.1.1, 2.2.1, 2.4.1, 2.4.3, 2.4.5, 2.4.7, 2.4.11, 2.5.1, 2.5.2, 2.5.4, 2.5.7, 3.2.1, 3.2.2, 3.2.3, 3.2.6, 3.3.4, 3.3.8, 4.1.3
Ondersteuning
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
Mozilla Firefox, versie 130
Google Chrome, versie 127
Apple Safari, versie 16
NVDA screen reader in combinatie met Firefox
VoiceOver screen reader in combinatie met Safari
gangbare browsers en hulpapparatuur
Gebruikte technologieën
De onderzochte maakt gebruik van de volgende technologieën:
HTML
CSS
JavaScript
WAI-ARIA
SVG
Steekproef
Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve in situaties vermeld op https://www.w3.org/Translations/WCAG22-nl/#niet-tekstuele-content.
Decoratieve afbeeldingen niet verborgen voor schermlezer
Op de homepage, onder het kopje "Laat je nog meer inspireren door te luisteren en te kijken", staan afbeeldingen. Deze afbeeldingen voegen geen nieuwe informatie toe aan de pagina en moeten worden verborgen voor de schermlezer. Momenteel is de alt-tekst "WOWW Boxtel podcast" en "WOWW Boxtel video's".
Oplossing
Laat het alt-attribuut leeg: alt="".
Decoratieve afbeeldingen niet verborgen voor schermlezer
Op de pagina "Verhalen" staan blokjes. Elk blokje bevat een afbeelding. Het tekstalternatief bij enkele van deze afbeeldingen herhaalt de tekst die eronder staat, zoals "Susan en Harold", "Musa Tosun", "Diny Stolvoort-Delmee" en anderen, en moet daarom verborgen worden voor de schermlezer. Dit lost het probleem op onder 1.3.2 - leesvolgorde.
Oplossing
Logo geen tekstalternatief
Op de pagina "Hartjes in de wijk" staat een logo. De volledige tekst van het logo is "Hartje in de wijk". Er is geen tekstalternatief voor deze afbeelding.
Het logo is een informatieve afbeelding en moet altijd een tekstalternatief hebben waarin de volledige tekst van het logo is opgenomen. Het tekstalternatief ontbreekt in de volgende situatie.
Oplossing
Geef dit logo een alt-tekst waarin de volledige tekst van het logo is opgenomen.
Logo niet alle tekst in het tekstalternatief
Op de pagina "Wijzer over mantelzorg" staat een logo met de tekst "Beroepsvereniging Mantelzorgmakelaars". Het tekstalternatief is momenteel "Ga naar de website van mantelzorgmakelaar". Het is belangrijk om de volledige tekst van het logo op te nemen in het tekstalternatief om een volledige en accurate representatie van de afbeelding te bieden voor gebruikers die vertrouwen op schermlezers.
Oplossing
Geef dit logo een alt-tekst waarin de volledige tekst van het logo is opgenomen.
1.2.1 - Louter-geluid en louter-videobeeld (vooraf opgenomen)
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld. Er wordt een alternatief geleverd voor op tijd gebaseerde media dat equivalente informatie geeft voor vooraf opgenomen louter-geluid content. Er wordt een alternatief geleverd voor op tijd gebaseerde media of een geluidsspoor dat equivalente informatie geeft voor vooraf opgenomen louter-videobeeld content.
Op de pagina "Podcast" staan podcasts zonder transcript. Mensen die doof of slechthorend zijn, kunnen deze geluidsfragmenten niet horen en daarom moet een alternatief worden geboden. Dit kan een volledig uitgeschreven tekst van de audio zijn.
Oplossing
Deze tekst moet direct bij de audio geplaatst worden (eventueel verborgen en zichtbaar gemaakt met een link), of op een aparte pagina worden gezet, met een link daarnaar direct bij de audio. Het kan ook in een toegankelijke PDF worden uitgeschreven die direct bij de audio wordt aangeboden. Er zijn dus meerdere oplossingen mogelijk.
1.2.3 - Audiodescriptie of media-alternatief (vooraf opgenomen)
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Op de pagina “Video” staat onder de kop “Video van De Herbergier Boxtel” een video met visuele informatie. In het begin en bij de aftiteling verschijnt het logo op 0:07 met de tekst “Herbergier Boxtel”, op 0:15 “Yvonne, Dochter van Mans Martijn”, op 1:47 “Susan Koerntjes, Zorgondernemer Herbergier Boxtel” en op 2:57 het logo met de tekst “Op een slimme en fijne manier ouder worden”. Deze informatie is niet beschikbaar voor blinde en slechtziende mensen, en er moet daarom een alternatief worden aangeboden.
Oplossing
Voor dit succescriterium mag een volledig uitgeschreven transcript worden aangeboden waarin deze en alle andere belangrijke informatie uit de video wordt beschreven. Voor succescriterium 1.2.5 is dit echter niet meer voldoende als er ruimte is voor audiodescriptie; dan moet audiodescriptie worden aangeboden om te voldoen aan niveau AA. Het beste is om zowel een transcript als audiodescriptie aan te bieden. Een transcript kan voor meerdere mensen voordelen hebben, bijvoorbeeld wanneer informatie in een video te snel gaat. Mensen die niet kunnen zien en niet kunnen horen, kunnen een transcript omzetten naar braille.
Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Op de pagina "Video" staan video's met dialoog en voice-over. De ondertitels zijn automatisch gegenereerd door YouTube.
Een video met gesproken woord (dialoog) moet altijd ondertitels hebben om de video toegankelijk te maken voor bezoekers met auditieve beperkingen. De automatisch gegenereerde ondertiteling voldoet niet, omdat deze fouten bevat en de leestekens ontbreken
Oplossing
Ondertiteling moet de exacte tekst bevatten die overeenkomt met wat er in de video wordt gezegd.
Visuele structuur van informatie is niet dezelfde in de HTML
Op de homepage, onder het kopje "Welkom bij WOWW - Wijzer Ouder Worden", staan twee alinea's tekst. In de HTML zijn deze alinea's opgemaakt als één <p>-element. Hetzelfde probleem is te zien op de pagina Charlotte, onder het kopje "Stichting Nabij", in de tweede en derde alinea. De visuele structuur van de informatie die op de pagina is te zien, moet ook in de HTML worden weerspiegeld. Als een artikel uit een aantal alinea's bestaat, moet hetzelfde aantal aanwezig zijn in de HTML.
Oplossing
Om een blinde bezoeker dezelfde structuur van informatie te bieden, moet elke alinea in een apart <p>-element worden geplaatst.
Strong-element voor opmaak
Op de homepage wordt het <strong>-element gebruikt voor styling in de tekst onder de kop "WOWW, veel meer dan een campagne!". De volledige tekst "Deze website is een platform waar je alles kunt vinden over wijzer ouder worden:" of de hele paragraaf wordt opgemaakt met een <strong>-element. Gebruik een stylesheet om tekst in een vet lettertype weer te geven. Het <strong>-element heeft een semantische betekenis en mag alleen worden gebruikt om inhoud te benadrukken. Dit element mag niet worden gebruikt voor visuele presentatie om tekst vetgedrukt te maken.
Oplossing
Gebruik CSS voor opmaak of een neutraal element <b>.
Tekst in een verkeerd element geplaatst
Op de pagina Contactformulier, in stap 3 van 3, verschijnt tekst die begint met "Beste". Deze tekst is geplaatst in een <div>-element. De visuele structuur van de informatie op de pagina moet ook in de HTML worden weerspiegeld. Tekst mag niet in een <div>-element worden geplaatst.
Oplossing
Gebruik hiervoor een <p>-element.
Heading-element verkeerd gebruikt
Op pagina Wegwijzer staan kopjes waar geen content onder staat. Zie alle kopjes die beginnen met “Wijzer”. Een kopje (een headings-element) dient altijd inhoud onder zich te hebben.
Oplossing
Verwijder de h2-elementen.
Kop niet als koptekst opgemaakt
Op de pagina Wijzer over wetten en regels staan kopjes die extra inhoud openklappen. Onder het kopje "Alle afkortingen" staat een lijst met afkortingen en hun definities. De tekst "OCO" is niet opgemaakt als een kop. Tekst die eruitziet en functioneert als een kop, maar niet als zodanig is opgemaakt, verliest zijn functie voor blinde bezoekers. Koppen kunnen worden gebruikt om de inhoud van de pagina te scannen of om naar een sectie te navigeren. Koppen die niet als zodanig zijn opgemaakt, kunnen niet voor deze doeleinden worden gebruikt. Een ander probleem is de structuur en hiërarchie van de informatie. Wanneer tekst alleen visueel als een kop eruitziet, verschilt de structuur van de informatie in de HTML van de zichtbare structuur.
Oplossing
De juiste HTML-elementen (h1 - h6) moeten worden gebruikt om deze koppen op te maken.
Bij succescriterium 1.2.3 worden video’s afgekeurd waarin audiodescriptie of een media-alternatief ontbreekt. Dit criterium vereist audiodescriptie (niveau AA), mits er voldoende ruimte is in het standaard audiospoor om deze informatie te geven. In deze video is voldoende ruimte aanwezig voor audiodescriptie. Het gaat om de video’s op de volgende pagina’s: de pagina “Video”.
Oplossing
Een media-alternatief is in dit geval niet meer toegestaan als oplossing. Dit is vooral van belang voor mensen die de video’s niet of niet goed kunnen zien.
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis kan hebben voor gebruikers in het algemeen.
Dit is vermoedelijk een technisch issue. Op de pagina Wegwijzer staan links met zichtbare tekst, zoals "Wijzer over mantelzorg", "Wijzer over actief blijven", "Wijzer over wetten en regels". Het doel van deze links is echter niet in begrijpelijke taal geschreven en luidt bijvoorbeeld /wegwijzer/wijzer-over-mantelzorg, /wegwijzer/wijzer-over-actief-blijven, /wegwijzer/wijzer-over-wetten-en-regels, etc. Deze teksten worden door een schermlezer voorgelezen en moeten in een begrijpelijke, menselijke taal worden geschreven.
Oplossing
Om dit probleem op te lossen, zou je de kop die boven de link staat in de link zelf kunnen zetten. Andere oplossingen zijn ook mogelijk. Dit zou het probleem oplossen zoals vermeld in succescriterium 2.5.3.
Op de pagina Podcast, onder de kopjes "Podcast met Magda", "Podcast met Tineke" en "Teaser Wijzer Ouder Worden", staan iframes die een podcast bevatten. De titel beschrijft het type inhoud in deze iframes, bijvoorbeeld "Magda over Wijzer Ouder Worden" en "Tineke over Wijzer Ouder Worden". In het title-attribuut van het iframe ontbreekt echter het woord "podcast". Een <iframe> heeft een goede beschrijving nodig, meestal in het title-attribuut.
Oplossing
Dit title-attribuut moet het type inhoud in het iframe beschrijven en een unieke beschrijving van de inhoud geven. Deze tekst helpt blinde bezoekers beslissen of de inhoud van het iframe de moeite waard is om te openen.
iframe onduidelijke naam
Op de pagina Video staan video’s. Deze video’s zijn opgenomen in iframe-elementen. Alle drie iframes hebben op dit moment ‘video’ als de enige tekst in het title-attribute.
Oplossing
Geef deze video’s een betekenisvolle tekst, bijvoorbeeld title=”Video van De Herbergier Boxtel”.
Op de pagina Verhalen staan blokjes met een afbeelding, kop en tekst. De leesvolgorde in de HTML is momenteel niet logisch; de koptekst moet als eerste in de HTML staan. Onder succescriterium 1.1.1 is genoemd dat de afbeeldingen decoratief zijn en verborgen moeten worden voor schermlezers.
Oplossing
Het verbergen van de afbeeldingen lost dit probleem op.
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in specifieke gevallen. Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1. Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis. Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
In de cookiebanner, wanneer de bezoeker de muis over de link "Lees meer over deze cookies in onze cookieverklaring" beweegt, verandert de tekstkleur van de link. De groene (#C8D20A) linktekst staat op een turquoise (#0AA09B) achtergrond en heeft een kleurcontrastverhouding van 1,9:1. Dit komt op alle pagina’s voor. Zie bijvoorbeeld de homepagina.
Oplossing
Omdat deze tekst minder dan 24px groot is en niet vetgedrukt, moet het contrast minstens 4,5:1 zijn.
Onvoldoende contrast tekst (links)
In het hoofdmenu, wanneer de bezoeker met de muis over de links beweegt, verandert de linktekstkleur. De groene (#C8D20A) linktekst staat op een witte achtergrond en heeft een kleurcontrastverhouding van 1,7:1. Dit gebeurt ook in het kruimelpad. Dit probleem komt op alle pagina’s voor in links. Zie bijvoorbeeld:
Contactformuliercontactformulier, in stap 1 van 3, in de link "Adobe Acrobat Reader".
Oplossing
Omdat deze tekst minder dan 24px groot is en niet vetgedrukt, moet het contrast minstens 4,5:1 zijn.
Onvoldoende contrast tekst (foutmeldingen)
Op de pagina Contactformulier, in stap 1 van 3, verschijnt er een foutmelding wanneer het formulier leeg wordt verstuurd. De links in deze melding veranderen van kleur wanneer een bezoeker zijn muis over de links beweegt. De linktekst wordt groen (#C8D20A), terwijl de achtergrond roze (#FCF4F2) is.
Oplossing
De contrastverhouding is slechts 1,5:1, terwijl dit minimaal 4,5:1 moet zijn.
Onvoldoende contrast tekst (knop)
Op dezelfde pagina, in stap 2 van 3, staat de groene tekst "Vorige" (#D0DE00) op een witte achtergrond.
Oplossing
De kleurcontrastverhouding is 1,5:1, wat ook niet voldoet aan de vereiste minimumverhouding van 4,5:1.
ADe menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.
Op de pagina Contactformulier, in stap 3, staat een link met de tekst “Adobe Acrobat Reader”. De link heeft een title-attribuut met de tekst “opens in a new window”. Deze tekst moet een taalwissel krijgen. Het is nog beter om deze tekst naar het Nederlands te vertalen.
De schermlezer hanteert de uitspraakregels van de taal die aangegeven is in het html-element van de webpagina. Wanneer stukken content op de pagina in een andere taal staan, worden deze teksten met de verkeerde uitspraakregels voorgelezen.
Oplossing
Om ervoor te zorgen dat de content correct wordt voorgelezen, dient een taalswitch geplaatst te worden op de container waar de tekst in een vreemde taal staat.
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
De zichtbare tekst op een interactief element moet deel uitmaken van de toegankelijke naam. Anders kan dit problemen veroorzaken voor bezoekers die spraakbesturing gebruiken, omdat de commando's die ze uitspreken deze elementen niet zullen activeren. Om ervoor te zorgen dat stemactivering mogelijk is, moet de zichtbare tekst worden opgenomen in de toegankelijke naam, bij voorkeur aan het begin van de naam.
Zichtbare tekst niet in de naam van een link
Op de pagina Wegwijzer staan links met de zichtbare tekst "Wijzer over mantelzorg", "Wijzer over actief blijven", "Wijzer over wetten en regels", en meer. Deze teksten komen echter niet voor in de toegankelijkheidsnaam van de link, die momenteel luidt /wegwijzer/wijzer-over-mantelzorg, /wegwijzer/wijzer-over-actief-blijven, /wegwijzer/wijzer-over-wetten-en-regels.
Oplossing
Als een link een toegankelijke naam heeft die verschilt van de zichtbare tekst op het linkgebied, zal de toegankelijkheidsnaam, zoals voorgelezen door schermlezers of gebruikt door spraakherkenningssoftware, anders zijn dan de zichtbare tekst. Deze discrepantie kan de link ontoegankelijk maken voor bezoekers die op dergelijke technologieën vertrouwen.
