Advies- en onderzoeksbureau in digitale toegankelijkheid | properaccess.nl | 06-28742275 | contact@properaccess.nl
Deelonderzoek content digitale toegankelijkheid van website Mijnafvalwijzer van Sint-Michielsgestel
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
18 sept 2024
Samenvatting
De website https://www.mijnafvalwijzer.nl/nl/5271NC/1/ is onderzocht tussen 10 en 18 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
17 uit 20
Bedienbaar
14 uit 17
Begrijpelijk
9 uit 10
Robuust
3 uit 3
Totaal
43 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 https://www.mijnafvalwijzer.nl die door gemeente Sint-Michielsgestel is toegevoegd
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 17
PAC software om PDF te testen
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
PDF
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.
Op de homepage, op de grote afbeelding, staat het logo met de tekst "Sint-Michielsgestel geeft ruimte". De huidige alternatieve tekst is "Logo gemeente SINT-MICHIELSGESTEL".
Oplossing
Het is belangrijk om alle tekst van het logo in de alt-tekst op te nemen, zodat gebruikers die vertrouwen op schermlezers een volledige en nauwkeurige weergave van de afbeelding krijgen. Zorg ervoor dat de alternatieve tekst voor het logo luidt: "Sint-Michielsgestel geeft ruimte".
Op de homepage, onder het kopje "Scheidingsinfo", staan afbeeldingen die extra content openen. In deze content staan kopjes waarvan het niveau niet correct is. Bijvoorbeeld onder "Medisch Afval" volgt een kop 3 direct na een kop 1. Wanneer twee koppen elkaar opvolgen zonder inhoud ertussen, is het essentieel om de juiste kopvolgorde te hanteren. Als dit verkeerd gebeurt, kan een blinde bezoeker de indruk krijgen dat er inhoud ontbreekt.
Oplossing
Om dit probleem op te lossen, pas je de koptekstniveaus aan, of voeg je extra tekst tussen de koppen toe, zodat de structuur logisch en toegankelijk blijft.
Verkeerd gebruik van een heading-element
Op de homepage, onder het kopje "Scheidingsinfo", staan afbeeldingen die extra content openen. De afbeelding onder de tekst “PMD” opent extra content waarin de eerste alinea als een kop4 is opgemaakt. Zie de tekst begint met "Pmd is een afkorting voor plastic verpakkingen". Deze tekst is geen kop, maar een H4 is gebruikt om de tekst een groter lettertype te geven.
Oplossing:
Verwijder dit H4-element en gebruik CSS om de tekst opvallend te stylen zonder een kop-element te gebruiken.
Heading-element is leeg
Op de homepage, onder het kopje "Scheidingsinfo", in de sectie "Grofvuil", staat onder de paragraaf "Hier vind je de tarieven van het Milieustation Schijndel." een leeg heading-element. Deze koptekst is niet zichtbaar op de pagina, maar is wel toegankelijk voor schermlezers.
Ook op de FAQ-pagina, onder de alinea die begint met "Ja, onder het tabblad 'uw afval' is de optie 'download PDF'", staat een leeg heading-element. Kop-elementen (H1 - H6) mogen niet leeg zijn. Lege heading-elementen kunnen voor blinde bezoekers de indruk wekken dat er inhoud ontbreekt.
Oplossing
Verwijder deze elementen of voeg de juiste tekst toe om dit probleem op te lossen.
Kop met em- en strong-elementen
Op de homepage, onder het kopje "Scheidingsinfo", staan afbeeldingen die extra content openen. In deze content zijn em- en strong-elementen gebruikt als alternatief voor koppen. Enkele voorbeelden zijn: onder “Milieustation” worden de koppen "Adres", "Openingstijden" en "Adressen" met een strong-element aangeduid. Onder “Koelkasten en diepvriezers” gaat het om de koppen "Wat zijn elektrische en elektronische apparaten?", "Waar kan je elektrische en elektronische apparatuur kwijt?" en "Inzameling witgoed". Controleer alle teksten in deze sectie.
Zie ook de pagina Uw gemeente met de koppen “TARIEVEN 2024”, “CONTAINER OF CHIP KAPOT”, “CONTAINER NIET LEEGGEMAAKT?” en anderen.
Het strong- en em-element zijn niet bedoeld als vervanging voor kop-elementen. Een kop moet altijd worden opgemaakt met een kop-element (bijvoorbeeld H4). Wanneer een kop correct wordt opgemaakt met een kop-element, kan de structurele informatie die de tekst biedt ook doorgegeven worden aan hulpsoftware, zoals schermlezers. Daarnaast zijn deze elementen slechts bedoeld om nadruk te geven aan woorden of zinsdelen, niet om de tekststructuur te bepalen.
Dit probleem doet zich ook voor op de pagina Nieuws. Wanneer je klikt op "Lees meer", wordt een extra venster geopend waarin koppen niet correct als koppen zijn opgemaakt. Een voorbeeld hiervan is de kop "Wat houdt dat in voor de bereikbaarheid van de Milieustraat aan de Bogaard 2?" in het volledige nieuwsartikel dat verschijnt na het klikken op de link "LEES MEER" onder de kop "Bereikbaarheid milieustraat Schijndel".
Oplossing
Verwijder de strong- en em-elementen en vervang ze door kop-elementen (H1 - H6) om de juiste hiërarchie te waarborgen.
Verkeerd gebruik van em- en strong-elementen
Op de homepage, onder “Scheidingsinfo” en vervolgens onder “Piepschuim”, staat tekst die is opgemaakt met een strong- en em-element. Deze elementen zijn gebruikt voor opmaak, maar hebben een bepaalde semantische betekenis en mogen alleen worden gebruikt om nadruk te leggen op enkele woorden of zinsdelen. Deze elementen worden toegevoegd met de knoppen B (strong) en I (em) in de tekstbewerker.
Oplossing
Verwijder deze opmaak en gebruik de knoppen B en I alleen om nadruk te leggen op belangrijke woorden.
Opsomming niet correct opgemaakt
Screen
Op de homepage https://www.mijnafvalwijzer.nl/nl/5271NC/1/, onder het kopje "Afvalcontainer en (nacht)vorst", staat een link "LEES MEER". Deze link opent een venster met een artikel. In dit artikel staat een lijst met 10 items, maar de juiste opmaak ontbreekt. Er zijn meer voorbeelden op deze pagina waar lijsten niet als opsommingen zijn opgemaakt.
Oplossing
Gebruik het <ul>-element (onopgemaakte lijst) of het <ol>-element (genummerde lijst). Dit element is te vinden onder de lijstknop in een tekstbewerker. Wanneer een lijst correct wordt opgemaakt met een lijstelement, zoals <ul> of <ol>, wordt de structurele informatie van de lijst overgedragen aan hulpsoftware, zoals schermlezers, wat bijdraagt aan de toegankelijkheid van de pagina.
Visuele structuur van informatie niet in de HTML
Op de pagina Privacy, onder het kopje "Privacyverklaring", staan twee alinea's tekst. In de HTML zijn deze alinea's echter opgemaakt met slechts één <p>-element. De visuele structuur van de informatie op de pagina moet ook correct worden weerspiegeld in de HTML. Als een artikel uit meerdere alinea's bestaat, moet elke alinea in een apart <p>-element worden geplaatst, zodat blinde bezoekers dezelfde informatie- en structuur hebben.
Oplossing
Gebruik twee aparte <p>-elementen om de alinea's correct op te maken.
PDF niet getagd
Het volgende PDF-document, “AfvalWijzer voor Sint-Michielsgestel”, bevat geen codes, waardoor hulpsoftware (zoals voorleessoftware) de PDF niet kan interpreteren. Door het ontbreken van tags kan de PDF niet volledig worden beoordeeld met betrekking tot andere toegankelijkheidscriteria.
Oplossing
Corrigeer het bron-document en sla het op met behoud van toegankelijkheidseigenschappen. Let erop dat bij het oplossen van dit probleem geen nieuwe toegankelijkheidsproblemen ontstaan. Een alternatief kan zijn om een volledig toegankelijke PDF te maken die alleen tekstuele informatie over de afvalverzameling bevat.
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.
Wanneer een bezoeker voor het eerst de pagina https://www.mijnafvalwijzer.nl/ opent en sterk inzoomt, verandert de tekst op de knop "Voer uw gegevens in" in wit, terwijl de achtergrond van de knop oranje (#E1A627) blijft. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing
De tekst moet een contrastverhouding van minimaal 4,5:1 hebben voor kleine tekst, of 3,0:1 voor grote tekst, ten opzichte van de achtergrond. Pas de kleuren aan om aan deze vereisten te voldoen.
Tekst in PDF onvoldoende contrast
In het PDF-document "AfvalWijzer voor Sint-Michielsgestel", dat te downloaden is via https://www.mijnafvalwijzer.nl/nl/5271NC/1/, staat witte tekst met de tekst "Afval Wijzer 2024" op een lichtgroene achtergrond. De kleurcontrastverhouding is te laag: 2,8:1.
Oplossing
Zorg ervoor dat het contrast tussen de tekst en de achtergrond minstens 3,0:1 is. Pas de kleuren van de tekst of achtergrond aan om deze minimale vereiste te behalen.
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.
Op de homepage, komt de link met de tekst “Hier” meerdere malen voor, bijvoorbeeld in de sectie onder "Milieustation" en "Grofvuil". De tekst van een link moet betekenisvol zijn en de bestemming van de link duidelijk aangeven. Linkteksten zoals "Hier" of "Lees meer" beschrijven niet goed waar de link naar toe leidt en helpen bezoekers die schermlezers gebruiken niet om te begrijpen wat het doel of de bestemming van de link is.
Bezoekers die schermlezers gebruiken, genereren vaak lijsten met links om de inhoud van een pagina te scannen. Nietszeggende of dubbelzinnige linkteksten, zoals "Hier" of "Lees meer", maken het moeilijk om te bepalen waar de link over gaat of naar toe leidt.
Dit probleem komt ook voor op andere pagina's:
Uw gemeente: zie de link met de tekst "link" onder de kop "TARIEVEN 2024".
Nieuws: zie de link "link" in het volledige nieuwsartikel dat verschijnt nadat je klikt op "LEES MEER" onder de kop "Bereikbaarheid milieustraat Schijndel".
Oplossing
Vervang onduidelijke linkteksten zoals "Hier" of "link" door meer beschrijvende teksten die het doel of de bestemming van de link aangeven, zoals "Bekijk milieustation tarieven" of "Lees meer over grofvuil".
Mogelijke technische issues onder dit succescriterium zijn niet genoemd.
Op de pagina Ingekomen berichten staan koppen die de inhoud die erop volgt niet duidelijk beschrijven. Een voorbeeld hiervan zijn teksten zoals '12-08-2024 15:12'. Gebruikers van screenreaders gebruiken koppen om de structuur van de pagina te scannen en snel de gewenste content te vinden. Daarom is het belangrijk dat de koppen voldoende beschrijvend zijn, zodat ze duidelijk aangeven welke content volgt.
Oplossing
Voeg extra tekst toe aan de koppen, bijvoorbeeld "Milieustraat Schijndel beperkt bereikbaar", zodat de koptekst relevant is voor de bijbehorende inhoud en duidelijk is voor alle gebruikers, inclusief mensen die schermlezers gebruiken.
Mogelijke technische issues onder dit succescriterium zijn niet genoemd.
Controleer andere pagina's op het voorkomen van dit issue.
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 van een keuzevakje verschilt van de technische naam
Op de homepage, onder het kopje "Notificaties", staan een aantal selectievakjes. De zichtbare tekst van enkele selectievakjes komt echter niet overeen met hun toegankelijke naam. Bijvoorbeeld, de toegankelijke naam is "Groente, Fruit en Tuinafval", terwijl de zichtbare tekst "gft" is, of de toegankelijke naam is "Plastic, Metalen en Drankkartons", maar de zichtbare tekst is "PMD". Dit geldt ook voor de links onder het kopje "Scheidingsinfo". Hier is de toegankelijke naam bijvoorbeeld "Scheidingsinformatie over Groente, Fruit en Tuinafval", maar de zichtbare tekst is "gft", en "Scheidingsinformatie over Plastic, Metalen en Drankkartons" heeft de zichtbare tekst "PMD". Hetzelfde probleem doet zich voor onder "Scheidingsinfo" met de tekst "kca", terwijl de toegankelijke naam "Scheidingsinformatie over Klein chemisch afval" is.
Dit kan problemen veroorzaken voor bezoekers die spraakbesturing gebruiken, omdat de zichtbare tekst die zij uitspreken niet overeenkomt met de toegankelijke namen van de keuzevakjes en links.
Oplossing
Zorg ervoor dat de zichtbare tekst van de selectievakjes en links overeenkomt met de toegankelijke naam, zodat gebruikers die spraakbesturing gebruiken, gemakkelijk toegang hebben tot de juiste functionaliteit.
Vervang de alt-tekst door de zichtbare tekst alt=”gft”.
Mogelijke technische issues onder dit succescriterium zijn niet genoemd.
In de metadata van de PDF "AfvalWijzer voor Sint-Michielsgestel" is de taal niet ingesteld. De taalinstelling is belangrijk, zodat hulpsoftware (zoals schermlezers) de informatie uit het bestand correct kan overdragen aan de bezoeker in de juiste taal.
Oplossing
De taal kan worden ingesteld via de bestandseigenschappen van de PDF. Zorg ervoor dat de taal correct wordt ingesteld om de toegankelijkheid voor gebruikers van hulpsoftware te waarborgen.