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:

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:

Niet in scope:

Ondersteuning

De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:

Gebruikte technologieën

De onderzochte maakt gebruik van de volgende technologieën:

Steekproef

Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:

Succescriteria met bevindingen

1.1.1 - Niet tekstuele content

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.

1.1.1 - Niet tekstuele content

Logo niet alle tekst in de alt-tekst

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".

Meer informatie over 1.1.1

Terug naar de issuelijst

1.3.1 - Info en realties

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

1.3.1 - Info en realties

Kopniveau klopt niet

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.

Meer informatie over 1.3.1

Terug naar de issuelijst

1.4.3 - Contrast (minimum)

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.

1.4.3 - Contrast (minimum)

Tekst op de knop onvoldoende contrast

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.

Meer informatie over 1.4.3

Terug naar de issuelijst

2.4.4 - Linkdoel (in context)

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.

2.4.4 - Linkdoel (in context)

Link met een onduidelijke tekst

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:

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.

Meer informatie over 2.4.4

Terug naar de issuelijst

2.4.6 - Koppen en labels

Koppen en labels beschrijven het onderwerp of doel.

2.4.6 - Koppen en labels

Onduidelijke kopteksten

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.

Meer informatie over 2.4.6

Terug naar de issuelijst

2.5.3 - Label in naam

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

2.5.3 - Label in naam

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.

Meer informatie over 2.5.3

Terug naar de issuelijst

3.1.1 - Taal van de pagina

De standaard menselijke taal van diverse webpagina's kan door software bepaald worden.

3.1.1 - Taal van de pagina

PDF-taal niet ingesteld

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.

Meer informatie over 3.1.2

Terug naar de issuelijst