Rapport:
Audit digitale toegankelijkheid website Mijn Afvalwijzer gemeente Meppel

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.mijnafvalwijzer.nl/ staat een afbeelding met het tekstalternatief "Afvalwagen". Deze afbeelding bevat echter ook het logo met de tekst: “Afvalwijzer.”. Deze tekst is niet opgenomen in het tekstalternatief van de afbeelding, maar dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Afvalwijzer”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op pagina https://www.mijnafvalwijzer.nl/ is op een klein scherm een logo zichtbaar met de volledige tekst “Afvalwijzer”. Dit logo is toegevoegd via een svg-element, maar het title-element ontbreekt. Informatieve afbeeldingen zoals een logo moeten altijd een alternatieve tekst hebben. Zorg ervoor dat informatieve SVG-afbeeldingen altijd een title-element krijgen. In het title-element moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat. Voeg een alternatieve tekst toe die de volledige tekst van het logo bevat. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op alle pagina’s in het besloten deel van de website toont de zoekbalk in de header suggesties in een dropdownlijst terwijl de bezoeker typt. De items in de dropdownlijst worden weergegeven met iconen. Elk icoon heeft als tekstalternatief het woord "icon". Deze iconen zijn echter decoratief maar worden voorgelezen. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Op alle pagina’s in het besloten deel van de website, wanneer deze op een klein scherm worden bekeken, opent de knop met het vergrootglasicoon in de header een zoekbalk. Dit icoon heeft geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie van de knop beschrijven. Voeg de beschrijving toe via een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.
Hetzelfde probleem komt voor bij de knop met drie horizontale lijnen die een zijpaneel opent met het navigatiemenu. Op pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/ is dit probleem ook aanwezig bij een knop met een taalicoon die een dropdown opent met taalopties.

Op pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/ bevat de knop voor het wisselen van taal in de header een afbeelding met als tekstalternatief "NL". Deze tekst herhaalt de aangrenzende tekst. Om herhaling te voorkomen mag deze alternatieve tekst niet gelijk zijn aan tekst die al op de pagina staat. Deze afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").
Hetzelfde probleem komt voor bij de afbeeldingen in de sectie “Bestellen”. Zie ook hetzelfde probleem met afbeeldingen op pagina https://www.mijnafvalwijzer.nl/site/bestellen.
Een vergelijkbaar probleem is vastgesteld op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/, in de sectie “Notificaties”. De selectievakjes bevatten decoratieve iconen waarvan het tekstalternatief de zichtbare labeltekst ernaast herhaalt.

Op pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/ opent de knop voor het wisselen van taal een dropdownlijst met links. Het pijltje-icoon dat aangeeft dat er uitklapbare inhoud is, heeft geen tekstalternatief. Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet aanwezig in de vorm van een aria-expanded-attribuut of een verborgen tekst.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s in het besloten deel van de website opent een knop “menu” in de header het zijpaneel met een navigatiemenu. Deze knop mist echter het attribuut aria-controls. Hierdoor is de knop niet gekoppeld aan het deel dat geopend kan worden. Voeg dit attribuut toe.

Op alle pagina’s in het besloten deel van de website opent een knop “menu” in de header het zijpaneel met een navigatiemenu. In het geopende paneel is de tekst “Zomerdijk 15” niet opgemaakt als kop. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h2, h3, h4, h5 of h6.
Hetzelfde probleem komt voor op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ bij de tekst “Eerstvolgende ophaalmoment” bovenaan de pagina. In de sectie “Nieuws” komt dit probleem voor bij teksten zoals “PMD, hoe zat het ook alweer?”, “Gratis snoeiafval brengen” en andere. In de sectie “Containerlocaties” onder de kaart zijn teksten zoals “Kleding en textiel”, “Glas”, “Restafval” en andere niet opgemaakt als kop. Zie ook andere secties met hetzelfde probleem.
Op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws komt dit probleem voor bij teksten zoals “PMD, hoe zat het ook alweer?”, “Gratis snoeiafval brengen”, “Haal eruit wat erin zit” en andere. Zie ook andere pagina’s met hetzelfde probleem.

Op alle pagina’s in het besloten deel van de website opent de knop “menu” in de header een zijpaneel met het navigatiemenu. In dit paneel zijn de navigatielinks gegroepeerd in een nav-element, wat correct is. De links zijn echter direct geplaatst in li-elementen zonder een bovenliggend ul- of ol-element. Lijst-items (li) moeten altijd onderdeel zijn van een lijst (ul of ol), zodat schermlezers de lijst en het aantal items correct kunnen aankondigen. Voor een correcte lijststructuur zijn zowel bovenliggende als onderliggende elementen nodig. Zorg dat alle li-elementen binnen een ul- of ol-element staan.
Een vergelijkbaar probleem komt voor op pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/bestellen. De filteropties, zoals “Containers 140ltr”, zijn li-elementen met het attribuut role="button" die binnen een ul-element zijn geplaatst. Hierdoor bevat de lijst (ul) interactieve elementen (knoppen) in plaats van lijst-items (li).

Op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ staan onder de kop "Jaaroverzicht" meerdere groepen links die visueel gepresenteerd worden als groepen, maar deze groepering is niet terug te zien in de HTML-structuur. Zie de links met jaren, de links met maanden en andere groepen. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul-element. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ geven de links “2025” en “2026” onder de kop “Jaaroverzicht” visueel aan welk jaar op dat moment is geselecteerd. Deze informatie wordt echter niet overgebracht naar schermlezers. Er is geprobeerd de geselecteerde toestand over te brengen met het attribuut aria-selected, maar dit attribuut wordt niet ondersteund op links (a-elementen). Hierdoor is de geselecteerde toestand niet programmatisch te bepalen. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de actieve link.
Een vergelijkbaar probleem komt voor bij de links naar maanden. De momenteel geselecteerde maand heeft een afwijkende visuele opmaak, maar deze aanduiding is niet aanwezig in de code.

Op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ staat in de sectie “Notificaties” een groep selectievakjes. Deze vakjes zijn visueel gegroepeerd, maar deze relatie is niet programmatisch gedefinieerd in de HTML. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt.

Op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ staat in de sectie “Notificaties” een formulier. Wanneer het e-mailadres onjuist is en het formulier wordt verzonden, verschijnt de foutmelding: “Het e-mailadres is niet correct ingevuld (voorbeeld naam@domein.nl).”. De relatie tussen de foutmelding en invoerveld is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
Hetzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ in het dialoogvenster dat verschijnt wanneer de schakelknoppen “Afgemeld” zijn geactiveerd. De foutmelding “Het is niet mogelijk om deze ophaaldatum te registreren, omdat de registratieperiode is verlopen” wordt weergegeven wanneer de knop “Bevestig” is geactiveerd.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staat in de sectie “Scheidingsinformatie” links die informatie tonen over het type afval. In sommige omschrijvingen is kop onjuist gemarkeerd met strong in plaats van met een correct kop-element. In de beschrijving van “Restafval” gaat het bijvoorbeeld om “Wat is het?” en “Waar kan het heen?”. In de beschrijving van “GFT/E” zijn dit de koppen “Wat is het?”, “Waar kan het heen?”, “Tip: Gebruik een bio-bakje” en andere. In de beschrijving van “Papier” gaat het om “Wat is het?”, “Waar kan het heen?”, “Tip: minder papier” en andere. Dit komt ook voor in andere teksten. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.
Hetzelfde probleem wordt waargenomen in de sectie “Tips” bij de koppen “Wijzer met afval”, “Wat gebeurt er met mijn afval?”, “Wat kan er worden gescheiden?” en andere.
Hetzelfde probleem wordt ook gezien in de dialoogvensters die worden geopend via de links in de sectie “Nieuws” op deze pagina en op https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws. Dit komt ook voor op andere pagina’s.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staat in de sectie “Scheidingsinformatie” dat de links informatie tonen over het type afval. In de beschrijving van “Kleding en Textiel” worden een kop-element en een strong-element door elkaar gebruikt in koppen. Het gaat om de teksten “Waar kan het heen?” en “Wat gebeurt ermee?”. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag het element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staan in de sectie “Scheidingsinformatie” links die informatie tonen over het type afval. In de tekst onder “Kringloopgoederen” wordt een kop van niveau 4 direct gevolgd door een andere kop van hetzelfde niveau. Het gaat om de koppen “Tweedehands is tweede kans” en “Wat is het?”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt.
Hetzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=milieustraat bij de koppen “Afvalbrengstation Havelte” en “Wat is het?”, waar een kop van niveau 4 direct gevolgd wordt door een andere kop van hetzelfde niveau.
Een vergelijkbaar probleem komt voor in de beschrijving van “Asbest”. Daar wordt een kop van niveau 4 direct gevolgd door een kop van een hoger niveau 3. Het gaat om de koppen “Adressen en openingstijden” en “Gemeentewerf Meppel”.
Ditzelfde probleem wordt gezien met dezelfde koppen op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=asbest.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staat in de sectie “Scheidingsinformatie” dat de links informatie tonen over het type afval. In de beschrijving van “Kringloopgoederen”, onder “Inleveren bruikbare spullen bij kringloopwinkels”, staat een lijst. Het lijstitem “Bruikbare spullen zoals huisraad brengt u naar:” bevat een sublijst. In de code is deze sublijst echter onjuist direct in het ul-element geplaatst in plaats van genest binnen het bijbehorende li-element. Hierdoor ontstaat een onjuiste lijststructuur waarbij het ul-element een directe onderliggende ul bevat, wat niet is toegestaan. De lijststructuur moet worden gecorrigeerd door de geneste ul in het bijbehorende li-element te plaatsen.
Hetzelfde probleem wordt waargenomen bij de lijst onder “Op het gratis veld kunt u het volgende afval brengen in verschillende containers:” op https://www.mijnafvalwijzer.nl/nl/7942JR/15/uw-gemeente.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staan in de sectie “Scheidingsinformatie” links die informatie tonen over het type afval. In de tekst onder “Asbest” staat onder “De stappen in het kort:” een lijst die gemarkeerd is met een ol-element. Alle lijstitems zijn echter geplaatst binnen één li-element en worden van elkaar gescheiden door br-elementen. Elk item van de lijst moet afzonderlijk worden gemarkeerd met een eigen li-element, zodat hulpsoftware de lijststructuur correct kan herkennen en aankondigen.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=asbest.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 staan in de sectie “Scheidingsinformatie” links die informatie tonen over het type afval. In de beschrijving van “Asbest” staat onder “2. Indienen sloopmelding” een lijst met vijf items, maar deze mist de juiste markering. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.
Ditzelfde probleem wordt waargenomen in de subsectie “Grofvuil mag niet naast de ondergrondse container” van de sectie “Tips”.
Hetzelfde probleem wordt ook gezien op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=asbest.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 wordt in de sectie “Tips” onder "Geef het door! Afval is grondstof" het strong-element onjuist gebruikt voor opmaakdoeleinden. De volledige alinea tekst is in een strong-element geplaatst om de tekst vet te maken. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.
Ditzelfde probleem wordt waargenomen bij de alinea die begint met “Minder afval produceren is goed voor …” onder “Tips voor minder afval” en ook bij de alinea die begint met “Grofvuil is afval dat niet in een vuilniszak …” onder “Grofvuil mag niet naast de ondergrondse container”. In beide gevallen is het strong-element onjuist gebruikt om de volledige alinea vet weer te geven.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 wordt in de sectie “Tips” onder “Tips voor minder afval” de tekst die begint met “Minder afval produceren is goed voor …” onjuist gemarkeerd met een h4-element. Deze tekst is niet bedoeld als kop, maar wordt op deze manier weergegeven om een visueel effect te bereiken. Het kop-element is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Maar door het h4-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, gebruiken koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h4-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ opent onder de kop “Nieuws” de link “Cameratoezicht en weegunit in vuilniswagens moe…” een dialoogvenster. In dit dialoogvenster wordt het em-element onjuist gebruikt voor opmaakdoeleinden. Dit is te zien bij de tekst die begint met “Wethouder Klaas de Vries licht toe:...”. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst). Gebruik hiervoor CSS.
Hetzelfde probleem wordt waargenomen op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/afvalabc is een zoekveld aanwezig. In de HTML heeft dit input-element een label-element met de tekst “zoeken...”, maar dit label is met display:none verborgen voor schermlezers. De CSS-code display:none zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/privacystatement staat onder de kop “2. Bijzondere en/of gevoelige persoonsgegevens die wij verwerken” de link “afvalwijzer@iprox.nl”. Deze link heeft het attribuut aria-haspopup="menu". Dit attribuut geeft aan hulpsoftware door dat het activeren van de link een menu zal openen, maar dat is niet het geval. De link is een standaard e-maillink en activeert geen pop-up of menu. Het ARIA-attribuut geeft hierdoor geen correcte weergave van het daadwerkelijke gedrag van het element. Verwijder dit attribuut.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ opent in de header de taalschakelknop een dropdownlijst met links die visueel gegroepeerd zijn. Deze groepering is echter niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.

Op https://www.mijnafvalwijzer.nl/nl/DEMO/0/0/bestellen/grofvuil/012 is de kruimelpadnavigatie geïmplementeerd als een verzameling links, maar de onderliggende structuur en de relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Dit kan worden opgelost door de links in een nav- of een ul- of ol-element te plaatsen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ staat onder de kop “Melding maken” een formulier met invoervelden voor persoonlijke gegevens (“Telefoonnummer” en “E-mailadres”). Deze velden missen het attribuut autocomplete. Invoervelden voor persoonlijke informatie, zoals het e-mailadres en telefoonnummer, moeten het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut met de juiste waarde voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/DEMO/0/0/bestellen/grofvuil/012 wordt in de stap “Besteloverzicht & gegevens” de foutmelding in het formulier weergegeven door alleen de randkleur van het invoerveld te wijzigen. Dit is niet toegankelijk voor bezoekers die de kleur helemaal niet kunnen zien of die kleurenblind zijn. Zorg ervoor dat informatie niet alleen met kleur wordt overgedragen. Gebruik daarnaast nog andere manieren om fouten of ontbrekende informatie door te geven, bijvoorbeeld met tekst of iconen. Zie ook succescriterium 3.3.1.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/ zijn invoervelden aanwezig. De grijze plaatshoudertekst (HEX #9CA3AF) tegen de lichtgrijze achtergrond (HEX #F8F8F8) heeft een contrastratio van 2,4:1. Zorg dat de placeholder-tekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.

Op https://www.mijnafvalwijzer.nl/ is een formulier aanwezig. Tijdens het invullen van het formulier verschijnt onder de knop “Inloggen” de tekst met het voorgestelde adres, zoals “Meppel, Zomerdijk 1”. De oranje tekst (HEX #E1A627) op een witte achtergrond heeft een contrastratio van 2,2:1. Dit moet minimaal 4,5:1 zijn.

Op alle pagina’s in het besloten deel van de website heeft de zoekbalk in de header een plaatshoudertekst “Zoeken”. De kleur van deze plaatshoudertekst is lichtgrijs (HEX #AEACAC) en staat op een groene achtergrond (HEX #036563). De contrastratio is te laag: 3,1:1.

Op alle pagina’s in het besloten deel van de website opent de knop met drie horizontale lijnen een zijpaneel met het navigatiemenu. In dit paneel staat de grijze tekst “7942 JR MEPPEL” (HEX #6B7280) op een lichtgrijze achtergrond (HEX #F5F5F5). De contrastratio is 4,4:1. Dit moet minimaal 4,5:1 zijn.

Op alle pagina’s in het besloten deel van de website opent de knop met drie horizontale lijnen een zijpaneel met het navigatiemenu. De witte tekst van de links in dit paneel heeft bij hoveren onvoldoende contrast tegen de grijze achtergrond (HEX #ABABAB). De huidige contrastratio is 2,3:1. Interactieve elementen moeten in alle toestanden voldoende contrast hebben, dus ook als de muis erover beweegt (hover). Zorg dat de links ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ opent in de sectie “Jaaroverzicht” de link “DOWNLOAD KALENDER” een dialoogvenster. In dit venster heeft de knop “Annuleer” bij toetsenbordfocus witte tekst op een lichtgrijze achtergrond (HEX #EDEDED). De contrastratio is te laag: 1,2:1. Dit moet minimaal 4,5:1 zijn.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ in de sectie “Jaaroverzicht”. In het dialoogvenster dat wordt geopend via de link “FYSIEKE KALENDER AANVRAAG” geldt dit voor de knoppen met de tekst “Annuleer” en “Gesloten”. In het dialoogvenster dat wordt geopend door de schakelknop “Aangemeld” naast “woensdag 26 november Groente, Fruit en Tuinafval” te activeren, geldt dit voor de knop met de tekst “Annuleer”.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ staat in de sectie “Jaaroverzicht” de grijze tekst “Afgemeld” (HEX #6B7280) naast “zaterdag 08 november Restafval” op een lichtgrijze achtergrond (HEX #E5E7EB). De contrastratio is 3,9:1. Dit moet minimaal 4,5:1 zijn.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ wordt in het dialoogvenster dat verschijnt wanneer de schakelknoppen “Afgemeld” zijn geactiveerd, de foutmelding “Het is niet mogelijk om deze ophaaldatum te registreren, omdat de registratieperiode is verlopen” weergegeven wanneer de knop “Bevestig” is geactiveerd. De rode tekst (HEX #FF0000) op een witte achtergrond heeft een contrastratio van 4,0:1. Dit moet minimaal 4,5:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, overlapt content elkaar, waardoor een deel van de content niet meer leesbaar is. Enkele voorbeelden zijn: het laatste deel van de datum bij "Eerstvolgende ophaalmoment"; de tekst "Restafval" onder "Notificaties"; de tekst "Kleine elektronische apparaten" onder "Scheidingsinformatie". Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Wanneer de pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt een groot deel van de inhoud van het dialoogvenster met nieuws, dat wordt geopend via de links onder de kop “Nieuws”, verloren. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, bijvoorbeeld door een scrollbalk toe te voegen, die ook toegankelijk is voor toetsenbordgebruikers.
Hetzelfde probleem wordt waargenomen op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws.

Wanneer de pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/uw-gemeente wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt de tekst die begint met “Let op: Als het KNMI code 'oranje' …” deels verloren.
Ditzelfde probleem wordt waargenomen met dezelfde tekst op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=milieustraat.

Wanneer de pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/privacystatement wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt de linktekst “https://autoriteitpersoonsgegevens.nl/nl/contact-met-de-autoriteit-persoonsgegevens/tip-ons” deels verloren.

Wanneer de pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt in de sectie “Jaaroverzicht” de tekst van links, zoals “zaterdag 04 januari Restafval”, deels verloren. Wanneer de schakelknoppen “Afgemeld” worden geactiveerd, verschijnt een dialoogvenster. De tekst in dit dialoogvenster wordt dan afgekapt en is slechts gedeeltelijk zichtbaar.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/ zijn invoervelden aanwezig. De contrastratio tussen de grijze rand (HEX #CCCCCC) en de witte achtergrond van de pagina is 1,6:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 is in de sectie “Notificaties” een formulier aanwezig. Wanneer de selectievakjes toetsenbordfocus krijgen, wordt dit zichtbaar door een lichtblauwe schaduwrand (HEX #C0D7EB). De contrastratio tussen deze focusrand en de lichtgrijze achtergrond (HEX #F9FAFB) is te laag: 1,4:1. Dit moet minimaal 3,0:1 zijn. Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ bij de knop “VERZENDEN” onder de kop “Melding maken”. Op https://www.mijnafvalwijzer.nl/nl/DEMO/0/0/bestellen/grofvuil/012, in de stap “Besteloverzicht & gegevens”, wordt hetzelfde probleem gezien bij het selectievakje “Ik ben het eens met de algemene voorwaarden van de gemeente Showcase” en bij de knop “Order bevestigen”.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s in het besloten deel van de website toont de zoekbalk in de header suggesties in een dropdownlijst terwijl de bezoeker typt. De opties in deze dropdownlijst zijn niet met het toetsenbord te bedienen. Zorg dat alle interactieve elementen met het toetsenbord kunnen worden bediend.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina’s na het inloggen, zoals https://www.mijnafvalwijzer.nl/nl/7942JR/15/, missen een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Voldoende

Bevindingen: Advies: de volgende pagina’s hebben dezelfde tekst in het title-element van de pagina: “De Afvalwijzer - Uw zoekresultaten”: https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=gft, https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=vet, https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=asbest en https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=milieustraat. Dit zijn technisch gezien waarschijnlijk dezelfde pagina, maar dan met een andere parameter. Omdat het voor de bezoeker wel verschillende pagina's lijken, kunnen ze beter een unieke paginatitel krijgen die meer informatie geeft.
Dit geldt ook voor pagina https://www.mijnafvalwijzer.nl/nl/1404AR/3/search?icon=electra.

Advies: op de pagina’s https://www.mijnafvalwijzer.nl/nl/1404AR/3/bestellen en https://www.mijnafvalwijzer.nl/nl/DEMO/0/0/bestellen/grofvuil/012 is de paginatitel “De Afvalwijzer - Bestellen”. Deze pagina's worden gezien als stappen in een proces en daarom hoeven ze geen unieke paginatitels te krijgen, maar het zou wel goed zijn om de paginatitels uniek en duidelijker beschrijvend te maken.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s in het besloten deel van de website komt de toetsenbordfocus terecht op onzichtbare interactieve elementen na de knop “menu” in de header. Ditzelfde wordt waargenomen op een klein scherm na de knop met drie horizontale lijnen. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Op alle pagina’s in het besloten deel van de website, wanneer deze op een klein scherm worden bekeken, opent de knop met drie horizontale lijnen een zijpaneel met het navigatiemenu. Op dit moment kunnen bezoekers met het toetsenbord buiten dit paneel navigeren terwijl het menu open blijft. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu zichtbaar blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 wordt in de sectie “Scheidingsinformatie” bij het activeren van een link de bijbehorende afvalomschrijving getoond en de pagina wordt naar het gedeelte met de omschrijving gescrold. De toetsenbordfocus verplaatst zich echter naar andere links voordat de omschrijving wordt bereikt. Dit is geen logische volgorde. De toetsenbordfocus moet direct naar de nieuw weergegeven inhoud gaan.
Ditzelfde probleem wordt waargenomen in de sectie “Jaaroverzicht” wanneer links zoals “vrijdag 21 november Papier” worden geactiveerd.
Een vergelijkbaar probleem wordt gezien op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=gft wanneer de link “Toon alle inzamellocaties” wordt geactiveerd. De pagina wordt naar boven gescrold, maar de toetsenbordfocus verplaatst zich niet naar de elementen van de getoonde sectie.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15 openen de links onder de kop "Nieuws" een dialoogvenster. De toetsenbordfocus wordt echter niet automatisch binnen het dialoogvenster geplaatst wanneer dit opent. Daarnaast kan de toetsenbordfocus ontsnappen uit het geopende dialoogvenster en zich verplaatsen naar de onderliggende pagina. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Zorg dat de focusvolgorde logisch blijft door de toetsenbordfocus te verplaatsen naar het dialoogvenster wanneer dit opent. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het venster te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat. Zorg dat na het sluiten van het dialoogvenster de toetsenbordfocus terugkeert naar het element dat het venster heeft geopend of naar het eerstvolgende logische element in de focusvolgorde van de pagina.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ staan onder de kop “Jaaroverzicht” maandlinks zoals “januari”, “februari” en andere. Wanneer bepaalde links worden geactiveerd, zoals “december”, wordt een visueel verborgen tekst “undefined” toegevoegd aan de toegankelijke naam van de link. Hierdoor kondigen hulpsoftware de link aan als “december undefined”, wat verwarrend is en het doel van de links onduidelijk maakt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s in het besloten deel van de website opent een knop “menu” in de header een zijpaneel met een navigatiemenu. In dit geopende paneel bevindt zich een knop “x” die dient om het menu te sluiten, maar de toegankelijke naam is alleen “x”. Dit beschrijft de functie van de knop niet op een duidelijke manier. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/search?icon=vet staat onder “Scheidingsinformatie” een link met een afbeelding en de zichtbare tekst “Vetten”. Deze zichtbare tekst is niet opgenomen in de toegankelijke naam van de link (“Scheidingsinformatie over Frituurvet en bakolie”). Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/afvalabc is de zichtbare tekst van de zoekbalk (plaatshoudertekst) “zoeken” en is de toegankelijke naam van het input-element leeg. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ staat in de sectie “Jaaroverzicht” naast “woensdag 26 november Groente, Fruit en Tuinafval” een schakelknop met de zichtbare tekst "Aangemeld", maar de toegankelijke naam is leeg. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ opent de taalschakelknop een dropdownlijst met opties. Er is een optie met de zichtbare tekst “EN”. De hoofdtaal van de pagina is Nederlands, maar de alt-tekst van de afbeelding in de optie “EN” is in het Engels (“English”). Hiervoor is geen taalwisseling aangegeven. Voeg lang="en" toe aan een omliggend HTML-element. Eventueel kan de alt-tekst ook vertaald worden naar het Nederlands, maar dat lijkt in dit geval niet handig, omdat het juist bedoeld is voor mensen die de pagina in het Engels willen lezen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/nl/DEMO/0/0/bestellen/grofvuil/012 wordt in de stap “Besteloverzicht & gegevens” een invoerfout in het formulier aangeduid door alleen de randkleur van het invoerveld te wijzigen. Wanneer een invoerfout automatisch wordt gedetecteerd, moet deze fout ook in tekst aan de bezoeker worden meegedeeld. Alleen vertrouwen op kleur biedt onvoldoende feedback en voldoet niet aan de toegankelijkheidseisen. Zie ook succescriterium 1.4.1.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s na het inloggen toont de zoekbalk in de header suggesties in een dropdownlijst terwijl de bezoeker typt, waarbij de functionaliteit overeenkomt met een combobox. Het vereiste ARIA-role ontbreekt echter op het inputveld. Voeg role=”combobox” aan het invoerveld toe. Er is ook een aria-expanded-attribuut nodig om de toestand van de verborgen content aan te geven (zichtbaar of niet). Er zijn meer attributen die nodig zijn om dit element toegankelijk te maken. Zie https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Op alle pagina’s in het besloten deel van de website opent een knop “menu” in de header een zijpaneel met een navigatiemenu. De knop geeft geen informatie over de toestand van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de menuknop. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.
Ditzelfde probleem wordt waargenomen op een klein scherm. De knop met een vergrootglasicoon in de header opent een zoekbalk, maar de toestand van deze zoekbalk is niet toegankelijk voor schermlezers.
Hetzelfde geldt voor de knop met drie horizontale lijnen die een zijpaneel met het navigatiemenu opent. De toestand van dit paneel wordt niet aangegeven in de code.
Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ wordt hetzelfde probleem gezien bij de taalschakelknop die een dropdownlijst opent. De toestand van deze lijst wordt niet aangegeven in de code. Dit komt ook voor op een klein scherm.

Op de pagina’s na het inloggen, wanneer deze op een klein scherm worden bekeken, opent de knop met een vergrootglasicoon in de header een zoekbalk. Deze knop heeft echter geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de functie is van de knop. Geef deze knop een toegankelijke naam die het doel van de knop beschrijft.
Ditzelfde probleem wordt waargenomen bij de knop met drie horizontale lijnen die een zijpaneel met het navigatiemenu opent.
Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ wordt hetzelfde probleem gezien bij de knop met een taalicoon die een dropdown met taalopties opent. Ook deze knop heeft geen toegankelijke naam.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ staan onder de kop “Jaaroverzicht” links met de tekst “2025” en “2026”. Deze links gebruiken het attribuut aria-selected. Dit attribuut is echter niet toegestaan op links (a-elementen), omdat aria-selected in combinatie met deze rol niet wordt ondersteund. Hierdoor wordt de geselecteerde status niet aangekondigd door schermlezers. Verwijder aria-selected van de links. Het attribuut aria-current="true" kan worden gebruikt op de actieve link om het momenteel geselecteerde jaar aan te duiden. Een andere mogelijke oplossing is het gebruik van een visueel verborgen tekst die alleen door schermlezers wordt aangekondigd om de geselecteerde link aan te geven.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ opent in de sectie “Jaaroverzicht” de link “DOWNLOAD KALENDER” een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Een blinde bezoeker heeft deze naam nodig om de inhoud van het dialoogvenster te kunnen begrijpen. Schermlezers kunnen hierdoor niet doorgeven wat hier staat. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ bij het dialoogvenster dat wordt geopend via de link “FYSIEKE KALENDER AANVRAAG” en bij het dialoogvenster dat wordt geopend door de schakelknop “Aangemeld” naast “woensdag 26 november Groente, Fruit en Tuinafval” te activeren. Beide dialoogvensters hebben geen toegankelijke naam, terwijl een blinde bezoeker deze nodig heeft om de inhoud van het venster te begrijpen.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ openen de links onder de kop "Nieuws" een dialoogvenster. Dit dialoogvenster mist zowel een correcte rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") of een aria-describedby en role="dialog". Zie ook https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/.
Hetzelfde probleem wordt waargenomen op pagina https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/ openen de links onder de kop "Nieuws" nieuwsberichten in een dialoogvenster, maar deze functionaliteit wordt niet aangegeven in de code. Om dit op te lossen, kan het attribuut aria-haspopup="dialog" worden toegevoegd aan de knop. Dit attribuut geeft aan dat er door het klikken op de knop een dialoogvenster wordt geopend. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het aria-expanded-attribuut, dat de waarde true of false moet krijgen. Let wel op dat aria-expanded alleen werkt als beide acties (openen en sluiten) door dezelfde knop worden uitgevoerd. Zie ook https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/.
Ditzelfde probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws.
Een vergelijkbaar probleem doet zich voor op https://www.mijnafvalwijzer.nl/nl/7942JR/15/nieuws in de sectie “Jaaroverzicht”. De link “DOWNLOAD KALENDER” opent een dialoogvenster, maar deze functionaliteit wordt niet aangegeven in de code.
Ditzelfde probleem wordt ook gezien bij de link “FYSIEKE KALENDER AANVRAAG” op https://www.mijnafvalwijzer.nl/nl/1404AR/3/.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/afvalabc ontbreekt een toegankelijke naam bij het zoekveld. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op https://www.mijnafvalwijzer.nl/nl/7942JR/15/afvalabc heeft de knop met het “x”-icoon in het zoekveld niet de juiste toegankelijke rol. Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik het button-element.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ ontbreekt in de sectie “Jaaroverzicht” een toegankelijke naam bij de schakelknop "Aangemeld" naast “woensdag 26 november Groente, Fruit en Tuinafval”. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/bestellen staan knoppen om resultaten te filteren, zoals “Containers 140ltr”. Deze knoppen hebben meerdere toestanden (bijvoorbeeld ingedrukt of niet ingedrukt), maar er is geen programmatische aanduiding van de huidige toestand. Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop. Zorg dat de toestand van de knop ook in de code wordt weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.mijnafvalwijzer.nl/ is een formulier aanwezig. Wanneer er fouten optreden, verschijnen foutmeldingen zoals “Huisnummer is verplicht en dient enkel uit cijfers te bestaan” of “Adres niet gevonden”. Deze meldingen krijgen geen focus. Hierdoor zullen schermlezers de meldingen niet op tijd aankondigen aan blinde gebruikers. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Een vergelijkbaar probleem wordt waargenomen op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ in het dialoogvenster dat verschijnt wanneer de schakelknoppen “Afgemeld” zijn geactiveerd. De foutmelding “Het is niet mogelijk om deze ophaaldatum te registreren, omdat de registratieperiode is verlopen” wordt weergegeven wanneer de knop “Bevestig” is geactiveerd, maar deze melding krijgt geen focus. Hierdoor wordt de foutmelding waarschijnlijk niet aangekondigd door schermlezers.

Op https://www.mijnafvalwijzer.nl/ is een formulier aanwezig. Tijdens het invullen van het formulier verschijnt onder de knop “Inloggen” een tekst met een voorgesteld adres, bijvoorbeeld “Meppel, Zomerdijk 1”. Ook verschijnt de tekst “Uw adres is niet bekend bij ons Klopt dat niet? Neem contact met uw gemeente of afvalinzamelaar.” wanneer bijvoorbeeld het invoerveld “Huisnummer toevoeging (Optioneel)” onjuist is ingevuld. Deze statusmeldingen worden niet automatisch aangekondigd door schermlezers.
Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Gebruik hiervoor een aria-live-attribuut. Bekijk voor meer informatie de pagina https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html#techniques.

Op https://www.mijnafvalwijzer.nl/nl/1404AR/3/ opent in de sectie “Jaaroverzicht” de link “FYSIEKE KALENDER AANVRAAG” een dialoogvenster. Wanneer de knop “Verzoek indienen” is geactiveerd, verschijnt de tekst “Je aanvraag voor een fysieke kalender is succesvol geregistreerd en zal zo spoedig mogelijk verzonden worden.”. Dit is een statusmelding, maar deze wordt niet aangekondigd door de schermlezer. Een schermlezer kan dit bericht alleen voorlezen aan een blinde bezoeker als het bericht in de code als statusbericht is gemarkeerd. Daarvoor moet het bericht het attribuut aria-live="polite" of role="status" krijgen. Dit zorgt ervoor dat schermlezers het bericht automatisch voorlezen.