SC 1.4.10 Bij 320px verschijnt een horizontale scrollbar

Op alle pagina’s wordt een horizontale scrollbalk weergegeven.

Horizontaal scrollen is in de meeste gevallen niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.

Oplossing:

Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.

SC 2.4.11 Elementen die toetsenbordfocus krijgen staan onder sticky footer / header

Als een toetsenbordgebruiker achteruit door de pagina navigeert, staat een deel van de pagina-inhoud onder de sticky header. Interactieve elementen krijgen nog steeds toetsenbordfocus, maar de focusindicator is niet te zien door de sticky header. Het gaat bijvoorbeeld om de links "Overstap naar nieuw betalingssysteem" en "Warm welkom voor hersteld warmtenet Passewaaij" onder "Nieuws" op de homepage.

Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.

Oplossing:

Zorg dat de sticky header of footer niet over interactieve elementen of bijbehorende focusindicatoren heen valt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.

SC 1.1.1 Decoratieve pijlen zijn niet verborgen voor schermlezers

Op alle pagina's staan decoratieve elementen met tekstalternatieven. Op de homepagina hebben de roze pijlen naast links als "Bekijk al het nieuws" het tekstalternatief "Groep 13", en ook de iconen naast de teksten onder "Een storing?", "Meer service" en in de voettekst hebben tekstalternatieven. Hierdoor zijn de afbeeldingen niet verborgen voor hulpsoftware.

Decoratieve afbeeldingen zoals deze geven geen extra informatie en moeten daarom verborgen worden voor schermlezers.

Oplossing:

Dit kan op verschillende manieren. Een svg-element kun je bijvoorbeeld verbergen door het title-element leeg of weg te laten.

SC 2.4.4 Overbodige tekst in link maakt bestemming onduidelijk

Op alle pagina's komen links voor met toegankelijke namen die hun functie niet duidelijk beschrijven. De link "Bekijk al het nieuws" onder het kopje "Nieuws" op de homepage heeft bijvoorbeeld de toegankelijke naam "Bekijk al het nieuws Groep 13". Ook de links onder "Een storing?", "Meer service" en in de footer onder "Service & contact" hebben onduidelijke toegankelijke namen.

Hierdoor krijgt een blinde bezoeker linkteksten te horen als "Bekijk al het nieuws Groep 13", wat verwarrend kan zijn en niet duidelijk het doel van de link omschrijft. De extra tekst van de decoratieve elementen voegt geen nuttige informatie toe en kan de navigatie moeilijker maken voor gebruikers van schermlezers.

Oplossing:

Verwijder de tekstalternatieven van de decoratieve elementen of zorg ervoor dat alleen betekenisvolle en beschrijvende tekst wordt opgenomen in de toegankelijke namen van de links.

SC 1.3.2 Leesvolgorde van artikelen/berichten klopt niet

Op sommige pagina's van de website klopt de volgorde binnen de blokjes van de nieuwsartikelen niet. De afbeelding staat dan vóór de kop in de HTML-code. Dit komt bijvoorbeeld voor op:

• https://www.eteck.nl/nl/ onder "Nieuws";
• https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/ onder "Nieuwsoverzicht";
• https://www.eteck.nl/nl/samenwerken-met-eteck/ onder "Nieuws" in de nieuwsartikelen;
• https://www.eteck.nl/nl/zoeken/?q=eteck in de zoekresultaten.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen en datums bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud (afbeeldingen en tekst) die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Dat doe je door de alt-tekst leeg te laten (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: kop - inhoud.

SC 1.1.1 Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op de pagina's onder “Klanten” en “Samenwerken met Eteck” is het logo bovenaan de website een link. Het logo heeft alleen geen tekstalternatief; hierdoor is de link niet voor iedereen toegankelijk.

Daardoor heeft deze link ook de volgende issues:

• SC 2.4.4 De bestemming van deze link is onbekend
• SC 4.1.2 Deze link heeft geen toegankelijke naam
• SC 2.5.3 Deze link is niet met stem te bedienen omdat de zichtbare tekst (“Eteck”) niet in de toegankelijke naam voorkomt.

Oplossing:

Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Geeft het <img>-element een alt-attribuut met de tekst ‘Eteck homepage’.

Navigatie

SC 2.4.6 Menuknop voor het mobiele menu heeft geen goed tekstalternatief

Op de pagina's onder “Klanten” en “Samenwerken met Eteck” verschijnt op kleine schermen een menuknop met de toegankelijke naam "Navigatiemenu openen". Hiermee kun je het mobiele navigatiemenu openen en sluiten. Deze naam beschrijft de functie van de knop niet duidelijk genoeg.

Oplossing:

Zorg ervoor dat de toegankelijke naam duidelijk de huidige functie van de knop beschrijft ("Menu openen" of "Menu sluiten") en werk deze naam dynamisch bij als de functie verandert.

SC 1.1.1 Pijltjes van submenu’s hebben geen correct tekstalternatief

Op de pagina's onder “Klanten” en “Samenwerken met Eteck” hebben sommige links in het hoofdmenu iconen van een pijltje om aan te geven dat er een submenu is. Deze iconen hebben een alternatieve tekst die niet beschrijvend is ("Pad") en die niet verandert op het moment dat de pijl draait. De pijlen brengen informatie over: er is hier een submenu. Deze informatie moet toegankelijk zijn voor alle bezoekers, ook voor de mensen die de afbeeldingen niet kunnen zien.

Dit is ook een afgekeurd onder:

• SC 4.1.2, omdat de huidige toestand van het submenu niet in HTML is vastgelegd.
• SC 2.4.6, omdat de toegankelijke namen van deze links overbodige tekst hebben, bijvoorbeeld "Wat wij leveren Pad".

Dit laatste komt ook binnen het submenu voor. Zie bijvoorbeeld "Duurzame warmte en verkoeling Path".

Oplossing:

Volg de volgende stappen om dit probleem op te lossen:

Verwijder het <title>-element van de SVG en voeg aria-hidden=”true” toe om de afbeelding voor hulpsoftware te verbergen. Gebruik aria-expanded op het <button>-element. Als het submenu open is, moet er aria-expanded=“true” staan, en anders aria-expanded=“false”.

SC 1.3.1 In de submenu’s zijn geen kop-elementen gebruikt

In de submenu’s op de pagina's onder “Klanten” en “Samenwerken met Eteck” staan beschrijvende teksten boven gegroepeerde links, zoals "Onze levering", "Betaalbare warmte" en "Nog duurzamer met Eteck". Deze teksten zijn eigenlijk koppen, ze geven de hiërarchie van de inhoud aan. Deze relatie is niet vastgelegd in de HTML-structuur. Daardoor interpreteren schermlezers de koppen en de links eronder als elementen op hetzelfde niveau.

Oplossing:

Gebruik voor deze teksten heading-elementen op het juiste niveau.

SC 1.3.1 Huidige pagina is alleen visueel aangegeven

De actieve link in het topmenu ("Klanten", "Samenwerken met Eteck", "Werken bij Eteck") op de pagina's onder “Klanten” en “Samenwerken met Eteck” is visueel duidelijk te herkennen, maar dit onderscheid is niet in de code vastgelegd.

Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie.

Oplossing:

Zorg 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. Andere opties zijn een h1-kop met dezelfde tekst als het menu-item, of het gebruik van de paginatitel (title).

SC 3.1.2, SC 1.1.1 en SC 2.4.6 Toegankelijke naam van de knop voldoet niet

Op de pagina's onder “Klanten” en “Samenwerken met Eteck” heeft de zoekknop in het bovenste menu de toegankelijke naam "Search (2)".

Deze tekst voldoet niet aan de volgende eisen:

• SC 3.1.2: De tekst is in het Engels en heeft geen lokale taalswitch. Schermlezers zullen deze Engelse labels daardoor uitspreken volgens de uitspraakregels van de primaire taal van de pagina, die in dit geval Nederlands is. Dit kan leiden tot een verkeerde uitspraak en daardoor kan het moeilijk zijn om te begrijpen.
• SC 2.4.6: De tekst beschrijft de functie van de knop niet goed. Niet elke Nederlandstalige bezoeker zal deze tekst begrijpen.

Oplossing:

Het <button>-element heeft al een aria-label met de tekst “Zoeken”. Dit is voldoende om deze knop toegankelijk te maken. Het attribuut ‘aria-label’ is alleen verkeerd gespeld, en daarom werkt het nu nog niet.

SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet

Op de pagina's onder “Klanten” en “Samenwerken met Eteck” staat een knop met de tekst “EN”. Deze knop verandert de taal van de pagina naar Engels. De toegankelijke naam van de knop is “EN”, en dat is geen duidelijke beschrijving van deze functie. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.

Dit gebeurt ook bij de knop "NL" op https://www.eteck.nl/en/.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Als je de pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, is de knop "EN" bovenaan de pagina niet meer zichtbaar of bedienbaar.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 1.3.1 Koppen zijn niet als kop gemarkeerd

In de footer staan de koppen "Zelf regelen", "Meer Eteck", "Service & contact" en "Storingen & telefonisch contact". Deze koppen zijn niet als kopteksten gemarkeerd.

Hierdoor krijgt een blinde bezoeker een andere structuur voorgelezen.

Oplossing:

Plaats deze teksten in heading-elementen, bijvoorbeeld een <h2>.

SC 1.3.1 Advies: lijsten en structuur in de footer zijn niet correct gebruikt

In de footer is informatie over "Storingen & telefonisch contact" in een lijst geplaatst: een kop, wat verklarende tekst en een telefoonnummer. Een lijst-structuur is niet geschikt voor dit soort informatie, omdat elk onderdeel heel anders van aard is. Dit kan verwarrend zijn voor bezoekers met een schermlezer, want die verwachten dat lijsten vergelijkbare, gelijkwaardige onderdelen bevatten.

Bovendien is het tweede <ul>-element niet goed genest. Deze onjuiste structuur kan ervoor zorgen dat sommige schermlezers de geneste lijst overslaan, de volgorde van de informatie verkeerd lezen of de inhoud niet goed weergeven.

Oplossing:

Gebruik geen <ul>-element voor deze inhoud. Gebruik in plaats daarvan een heading-element voor "Storingen & telefonisch contact", een alinea voor de beschrijving en een link voor het telefoonnummer.

SC 2.4.3 Cookiebanner krijgt niet als eerste toetsenbordfocus

Als je de website voor het eerst bezoekt, verschijnt er een cookie-banner. Deze banner krijgt niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt namelijk de inhoud van de pagina, en als de toetsenbordfocus er niet automatisch naartoe gaat, kunnen bezoekers die alleen met het toetsenbord navigeren de melding niet sluiten. Om de banner te sluiten, moet de bezoeker nu helemaal naar de onderkant van de pagina tabben.

Als je sterk inzoomt, bijvoorbeeld tot 300%, bedekt de cookie-melding de hele pagina. Als een toetsenbordgebruiker dan door de pagina navigeert, komt de focus terecht op elementen die verborgen zijn achter de banner (bijvoorbeeld de link “Bekijk al het nieuws” onder het kopje “Nieuws” op de pagina https://www.eteck.nl). Dit wordt afgekeurd onder SC 2.4.11.

Oplossing:

Zorg dat de focus eerst naar de cookie-melding gaat en dan binnen de cookiemelding blijft totdat de bezoeker deze sluit.

SC 1.3.1 Onderlinge relatie tussen keuzevakjes staat niet in de code

In de cookie-instellingen (klik op “voorkeuren aanpassen” om te openen) staat een groep keuzevakjes. Deze zijn visueel gegroepeerd, maar deze relatie is niet vastgelegd in de HTML. Hierdoor kan hulpsoftware de samenhang tussen de elementen niet herkennen.

Oplossing:

Je kunt de keuzevakjes binnen een fieldset-element plaatsen. Als er geen zichtbaar label is voor de groep, moet je in hetfieldset-element een legend plaatsen met een visueel verborgen beschrijvend label (zoals “Voorkeuren”) dat dient als label voor de groep keuzevakjes. Hierdoor is dit label gekoppeld aan de keuzevakjes die bij elkaar horen, en kan hulpsoftware deze relatie overbrengen.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

SC 2.1.1 Verwijderknop is niet met toetsenbord te bedienen

De knop om het zoekveld te wissen is niet bereikbaar via het toetsenbord. Het zoekveld staat op alle pagina's in de header, ook staan er zoekvelden op de pagina's https://www.eteck.nl/nl/zoeken/?q=eteck, https://www.eteck.nl/nl/klantenservice/

Alle interactieve elementen, waaronder knoppen, moeten toegankelijk zijn voor toetsenbordgebruikers.

Oplossing:

Verwijder tabindex="-1".

Video’s

Dialoogvenster heeft geen toegankelijke naam

De video opent in een dialoogvenster. Het element met role=”dialog” moet een toegankelijke naam hebben. Bij alle dialoogvensters waar video’s in zitten ontbreken de toegankelijke namen.

Oplossing:

Pas de spelling van het attribuut aria-labelledby aan.

SC 1.2.2 Video heeft geen ondertitels, ondertitels zijn automatisch gegenereerd

Op onderstaande pagina’s staan video’s met gesproken tekst, maar ze hebben geen ondertiteling. Ondertitels zijn essentieel voor doven en slechthorenden om toegang te krijgen tot de inhoud van de video.

Het gaat om video’s op de volgende pagina’s:

• https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/Webinar/ naast “Webinar: Tariefswijzigingen in warmte”;
• https://www.eteck.nl/nl/betalen-bij-eteck/ naast “Jaarnota”; * https://www.eteck.nl/nl/een-warm-welkom/ naast “Bekijk de video om te zien wat Eteck doet en wat je zelf nog moet regelen.”;
• https://www.eteck.nl/nl/samenwerken-met-eteck/onze-diensten/ naast “Duurzame warmte voor bestaande bouw” en “Duurzame warmte bij nieuwbouw”.

Oplossing:

Op de iframe-elementen met video is nu het attribuut ytp-hide-controls gebruikt, waardoor bezoekers geen ondertiteling kunnen inschakelen. Pas de insluitingsparameters van YouTube aan om deze bedieningselementen van de speler zichtbaar te maken. Als je dit attribuut verwijdert, ontstaat het volgende probleem: de meeste van deze video’s hebben automatisch gegenereerde ondertitels. Die zijn niet goed genoeg, omdat ze vaak niet alle tekst weergeven en/of fouten bevatten. Zorg voor zelfgemaakte ondertitels die correct zijn.

SC 2.1.1 Knop kan niet met het toetsenbord worden bediend

De pauzeknop in de videospeler kan niet met het toetsenbord worden bediend.

Het gaat om video’s op de volgende pagina’s:

• https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/Webinar/ naast “Webinar: Tariefswijzigingen in warmte”;
• https://www.eteck.nl/nl/betalen-bij-eteck/ naast “Jaarnota”; * https://www.eteck.nl/nl/een-warm-welkom/ naast “Bekijk de video om te zien wat Eteck doet en wat je zelf nog moet regelen.”;
• https://www.eteck.nl/nl/samenwerken-met-eteck/onze-diensten/ naast “Duurzame warmte voor bestaande bouw” en “Duurzame warmte bij nieuwbouw”.

Alle interactieve elementen, inclusief knoppen, moeten toegankelijk zijn voor toetsenbordgebruikers. Dit betekent dat ze moeten worden opgenomen in de natuurlijke tabvolgorde en focus moeten krijgen bij het navigeren met de Tab-toets. Als een knop geen focus kan krijgen, is deze volledig ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken. Het maakt dan niet uit of de knop kan worden geactiveerd met Enter of de spatiebalk.

Oplossing:

Pas de instellingen van het iframe aan.

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Als een video in een dialoogvenster wordt geopend, komt de toetsenbordfocus terecht op een onzichtbaar element na de sluitknop.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Het gaat om video’s op de volgende pagina’s:

• https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/Webinar/ naast “Webinar: Tariefswijzigingen in warmte”;
• https://www.eteck.nl/nl/betalen-bij-eteck/ naast “Jaarnota”; * https://www.eteck.nl/nl/een-warm-welkom/ naast “Bekijk de video om te zien wat Eteck doet en wat je zelf nog moet regelen.”;
• https://www.eteck.nl/nl/samenwerken-met-eteck/onze-diensten/ naast “Duurzame warmte voor bestaande bouw” en “Duurzame warmte bij nieuwbouw”.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

SC 2.4.6 Het type content in het iframe is niet beschreven in het title-attribuut

Er staan video’s in iframes. Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Het gaat om video’s op de volgende pagina’s:

• https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/Webinar/ naast “Webinar: Tariefswijzigingen in warmte”;
• https://www.eteck.nl/nl/betalen-bij-eteck/ naast “Jaarnota”; * https://www.eteck.nl/nl/een-warm-welkom/ naast “Bekijk de video om te zien wat Eteck doet en wat je zelf nog moet regelen.”;
• https://www.eteck.nl/nl/samenwerken-met-eteck/onze-diensten/ naast “Duurzame warmte voor bestaande bouw” en “Duurzame warmte bij nieuwbouw”.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Caroussels

SC 1.1.1 Knop bestaat alleen uit afbeelding, maar alternatieve tekst beschrijft functie niet

Oplossing:

Gebruik een van de volgende opties om de alternatieve tekst te verbeteren:

• Verander het <title>-element van de SVG.
• aria-label: Voeg een aria-label-attribuut toe aan het button-element met een beknopte beschrijving van de functie.
• Visueel verborgen tekst: Neem beschrijvende tekst op in het button-element en verberg deze visueel met CSS terwijl de tekst toegankelijk blijft voor schermlezers.

SC 1.1.1 img-element heeft geen alt-attribuut

De afbeeldingen in de carrousel staan in een <img>-element. Deze elementen hebben geen alt-attribuut.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

SC 1.3.2 Leesvolgorde klopt niet

In artikelen in de carrousel staat de afbeelding vóór de kop in de HTML-code.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen en datums bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud (afbeeldingen en tekst) die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Dat doe je door de alt-tekst leeg te laten (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: koptekst - inhoud.

Disclosure elements (accordion)

Accordeons (secties met inhoud die kan worden in- en uitgeklapt) zijn onder andere te vinden in de zoekresultaten op pagina's https://www.eteck.nl/nl/klantenservice/ en https://www.eteck.nl/nl/zoeken/?q=eteck.

SC 1.3.1 Relatie tussen elementen in groep is niet in HTML vastgelegd

In de accordeons staan onder elke alinea twee knoppen ("Ja" en "Nee") die visueel bij elkaar horen. Deze relatie is niet vastgelegd 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.

Oplossing:

Neem de elementen op in een fieldset met een legend.

SC 2.4.3 Volgorde toetsenbordfocus is niet logisch

In de accordeons staan onder elke alinea twee knoppen ("Ja" en "Nee"). Als de focus op een van deze knoppen is en de bezoeker op Enter drukt, verschuift de toetsenbordfocus naar het vorige element en gaat de focus van de schermlezer naar de bovenkant van de pagina. Deze volgorde van toetsenbordfocus is niet logisch.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.

SC 4.1.3 Statusbericht wordt niet voorgelezen

In de accordeons staan onder elke alinea twee knoppen ("Ja" en "Nee"). Als je de “Ja”-knop activeert, verschijnt het bericht: “Bedankt voor je feedback”. Dit is een statusbericht, maar wordt niet als dusdanig voorgelezen. Een blinde bezoeker krijgt dit bericht daardoor niet te horen.

Oplossing:

Los dit op door aria-live="polite" aan het bericht toe te voegen.

Paginatie

De paginatie staat onder andere op de pagina https://www.eteck.nl/nl/zoeken/?q=eteck, https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/ boven de footer.

SC 1.1.1 Links bestaan alleen uit afbeelding, maar alternatieve tekst beschrijft functie niet

De pijltjes (vorige, volgende) hebben alternatieve teksten die de functie van de links niet beschrijven (“Group 5 Copy 11”). Als een knop of een link uitsluitend uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie beschrijven (bijvoorbeeld “Volgende pagina”, “Vorige pagina”).

Oplossing:

Gebruik een van de volgende methoden om de alternatieve tekst te verbeteren:

• aria-label: Voeg een aria-label-attribuut toe aan het a-element met een korte, duidelijke beschrijving van de functie.
• Visueel verborgen tekst: Plaats beschrijvende tekst binnen het a-element en verberg deze visueel met CSS, zodat de tekst toegankelijk blijft voor schermlezers.

SC 2.4.4 Paginering heeft onvoldoende linktekst

De teksten van de paginatielinks bieden niet genoeg context. Ziende bezoekers begrijpen dat de teksten "1", "2", "3", enz. paginanummers voorstellen, maar dit is niet altijd duidelijk voor slechtziende bezoekers of bezoekers die schermlezers gebruiken.

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "pagina”.

SC 1.3.1 Huidige pagina in paginering wordt alleen visueel aangegeven, maar niet in de code

De paginering onder de zoekresultaten toont een visueel onderscheid tussen het huidige paginanummer en de andere nummers, maar dit onderscheid is niet aanwezig in de HTML-code. Dit betekent dat schermlezers de bezoeker niet kunnen laten zien welke pagina momenteel actief is.

Oplossing:

Om deze informatie toegankelijk te maken, gebruik je een van de volgende technieken:

• Verborgen tekst: Neem visueel verborgen tekst op in de link van de huidige pagina die aangeeft dat het de huidige pagina is (bijvoorbeeld <span class="sr-only">Huidige pagina</span>).
• aria-current-attribuut: Voeg het aria-current="page"-attribuut toe aan het linkelement van de huidige pagina.

SC 1.4.1 Huidige pagina is alleen herkenbaar aan kleur

Het huidige paginanummer in de paginering wordt alleen aangegeven door een andere tekstkleur.

Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dus niet welke link actief is en welke niet.

Oplossing:

Zorg ervoor dat actieve links ook nog op een andere manier te herkennen zijn, bijvoorbeeld door ze te onderstrepen of vetgedrukt te maken.

SC 1.4.11 Het contrast tussen de focusindicator en de achtergrond is minder dan 3.0:1

In de paginering bestaat de toetsenbordfocus op de links in de paginering uit een grijze rand (#7299B0) tegen een lichtgrijze achtergrond (#DDE5E9). De contrastverhouding tussen deze kleuren is 2,4:1, wat onder het vereiste minimum van 3,0:1 ligt. Dit lage contrast maakt het moeilijk of onmogelijk voor slechtziende of kleurenblinde bezoekers om de focus van het toetsenbord waar te nemen.

Oplossing:

Kies een kleurencombinatie voor de focus die een contrastverhouding van minstens 3,0:1 ten opzichte van de achtergrondkleur biedt. De makkelijkste oplossing is het gebruik van de standaard browserfocus.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Als je de pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, zijn de pijlen van de paginering en de paginaknoppen niet meer zichtbaar of bedienbaar.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: Homepagina

SC 2.1.1 Link is niet met het toetsenbord te bedienen

Op deze pagina zijn de links onder de kop "Nieuws" niet toegankelijk voor toetsenbordgebruikers.

Alle interactieve elementen, inclusief links, moeten toegankelijk zijn voor bezoekers die met een toetsenbord navigeren. Dit betekent dat ze moeten worden opgenomen in de natuurlijke tabvolgorde en focus moeten krijgen bij het navigeren met de Tab-toets. Als een link geen focus kan krijgen, is deze volledig ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken. Het maakt dan niet uit of de link kan worden geactiveerd met Enter of de spatiebalk.

Oplossing:

Zorg ervoor dat links toetsenbordfocus kunnen ontvangen door ze op te nemen in de natuurlijke tabvolgorde. Vermijd het gebruik van display: contents op links, omdat dit in sommige browsers ertoe leidt dat het element zelf uit de toegankelijkheidsboom (accessibility tree) wordt verwijderd (ook al blijven de onderliggende elementen zichtbaar). Hierdoor wordt de link ontoegankelijk voor hulpsoftware en toetsenbordgebruikers. Lees meer over dit issue: https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents.

SC 2.5.3 Zichtbare tekst komt niet terug in toegankelijke naam en SC 1.1.1 alternatieve tekst bevat niet alle zichtbare tekst

Onder het kopje "Regel het zelf met de MijnEteck App" staan twee logo’s: voor Google Play en App Store. De zichtbare tekst van het logo ("Get it on Google Play") is niet opgenomen in de toegankelijke naam van het logo ("Google Play"), die uit het alt-attribuut komt.

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.

Oplossing:

Om ervoor te zorgen dat spraakbesturing werkt, moet je de zichtbare tekst opnemen in de toegankelijke naam, bij voorkeur aan het begin. Verander in dit geval de alt-tekst, neem hier de zichtbare tekst in op. Bijvoorbeeld alt="Get it on Google Play".

Link naar pagina: English homepage

SC 3.1.2 Toegankelijke namen zijn in het Nederlands

Deze pagina bevat elementen met toegankelijke namen in het Nederlands. Bijvoorbeeld de skiplink met de naam "Sla het navigatiemenu over en ga direct naar de inhoud" en de verwijderknop in het zoekveld met de naam "Wis". Onder "Renewable heat, we think it's extraordinarily ordinary" staat een afbeelding met de alt-tekst "Een man zittend op een bank met een cactus op schoot" en onder "Be in control with the Eteck App" staat een afbeelding met de alt-tekst "De Eteck app op een telefoon".

Schermlezers zullen deze Nederlandse labels uitspreken volgens de uitspraakregels van de primaire taal van de pagina, die in dit geval Engels is. Dit kan leiden tot een verkeerde uitspraak en maakt de labels moeilijk te begrijpen.

De kwaliteit van de alt-teksten valt onder SC 1.1.1.

Oplossing:

Vertaal de toegankelijke namen in het Engels om ervoor te zorgen dat ze correct worden uitgesproken door schermlezers.

SC 2.5.3 Zichtbare tekst van een link staat niet in de toegankelijke naam

Onderaan de pagina staan logo’s van Apple Store en Google Play. Niet alle zichtbare tekst van de afbeeldingen is aanwezig in de alt-teksten van de logo’s. De alt-teksten geven deze links hun toegankelijke naam.

Oplossing:

Voeg de zichtbare tekst toe aan de alt-tekst van de logo’s.

Link naar pagina: Zoekresultaten

Op deze pagina staan issues die al eerder zijn beschreven.

SC 2.1.1 Link is niet met het toetsenbord te bedienen

Sommige links in de zoekresultaten zijn niet toegankelijk via het toetsenbord. Bijvoorbeeld de links "Mijn Eteck", "Eteck Academy" en "Waarom Eteck?". Hierdoor kunnen bezoekers die met het toetsenbord navigeren deze onderdelen niet openen of bedienen.

Alle interactieve elementen, inclusief links, moeten toegankelijk zijn voor toetsenbordgebruikers. Dit betekent dat ze moeten worden opgenomen in de natuurlijke tabvolgorde en focus moeten krijgen bij het navigeren met de Tab-toets. Als een link geen focus kan krijgen, is deze volledig ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken. Het maakt dan niet uit of de link kan worden geactiveerd met Enter of de spatiebalk.

Oplossing:

Zorg ervoor dat links toetsenbordfocus kunnen ontvangen door ze op te nemen in de natuurlijke tabvolgorde. Vermijd het gebruik van display: contents op linkelementen, omdat dit in sommige browsers ertoe leidt dat het linkelement zelf uit de toegankelijkheidsboom verdwijnt (ook al blijven de onderliggende elementen aanwezig). Dit maakt de link ontoegankelijk voor hulpsoftware en toetsenbordgebruikers.

SC 1.3.1 <ul>-element bevat elementen die er niet in mogen voorkomen

In de zoekresultaten zijn elementen met verborgen inhoud gemarkeerd met <details>-elementen. De lijst met resultaten is gegroepeerd in een <ul>-element, maar daarin mag het <details>-element niet als direct onderliggend element voorkomen.

Schermlezers en andere hulpsoftware kunnen de structuur en relaties alleen goed overbrengen als elementen zoals lijsten correct zijn opgebouwd. Als een lijst andere elementen dan <li> bevat als rechtstreeks kindelement (“direct child”), slaan schermlezers deze inhoud soms over, lezen ze de volgorde verkeerd of kondigen ze het aantal lijstitems niet goed aan. Dat maakt de informatie moeilijker te gebruiken en te begrijpen voor bezoekers met hulpsoftware.

Oplossing:

Gebruik alleen <li> als “direct child” van een <ul>. Als je een <details>-element in een lijst moet opnemen, nest het dan in een <li>.

Link naar pagina: Nieuws

SC 1.4.3 Kleurcontrast van tekst is te laag

Op deze pagina staat blauwe tekst (#7199AF) op een lichtblauwe achtergrond (#F4F8FB). Het gaat om de datums naast nieuwe artikelen, bijvoorbeeld "13 Mei 2025" of "18 Februari 2025". De contrastverhouding van deze teksten is te laag: 2,9:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Link naar pagina: Samenwerken met Eteck

SC 1.1.1 Decoratieve afbeelding is niet verborgen voor schermlezers

Onder het kopje "Een duurzame samenwerking" op deze pagina staat een groep decoratieve afbeeldingen. Het tekstalternatief voor elk van de afbeeldingen is "Artboard" of "Eteck pictogrammen". Schermlezers lezen deze teksten voor.

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Dit kan op verschillende manieren. Een svg-element kun je bijvoorbeeld verbergen door het title-element leeg of weg te laten.

SC 2.1.1 Link is niet met het toetsenbord te bedienen

Op deze pagina zijn de links van de artikelen onder "Nieuws" niet toegankelijk via het toetsenbord.

Alle interactieve elementen, inclusief links, moeten toegankelijk zijn voor toetsenbordgebruikers. Dit betekent dat ze moeten worden opgenomen in de natuurlijke tabvolgorde en focus moeten krijgen bij het navigeren met de Tab-toets. Als een link geen focus kan krijgen, is deze volledig ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken. Het maakt dan niet uit of de link kan worden geactiveerd met Enter of de spatiebalk.

Oplossing:

Vermijd het gebruik van display: contents op a-elementen, omdat de huidige implementaties in sommige browsers het element zelf uit de toegankelijkheidsboom verwijderen. Dit maakt de link ontoegankelijk voor hulpsoftware.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, zijn de volgende interactieve elementen niet meer zichtbaar of bedienbaar: de groep links onder "Een duurzame samenwerking" ("Gemeenten en overheden" en anderen) en de nieuwsartikelen onder "Nieuws".

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: Login

SC 2.4.2 De paginatitel beschrijft de inhoud niet

De tekst in het <title>-element van deze pagina is "- Eteck". Dit is geen goede beschrijving van de inhoud van de pagina. Het title-element moet een duidelijke en beknopte samenvatting geven van het onderwerp van de pagina, bij voorkeur gevolgd door de naam van de organisatie. Dit helpt bezoekers de inhoud van de pagina te begrijpen en effectiever te navigeren tussen verschillende pagina's of browsertabbladen. Dit geldt ook voor de pagina https://www.eteck.nl/users/register/.

Oplossing:

Verander de tekst in <title>Inloggen Eteck”</title>

SC 1.1.1 Knop met oog is niet toegankelijk voor schermlezer

Naast het invoerveld "Wachtwoord" staat een knop met een icoon van een oog. Hiermee kun je het wachtwoord tonen of verbergen. Deze knop heeft geen alternatieve tekst, en dat moet wel. Dit valt onder SC 1.1.1.

Deze knop heeft ook geen toegankelijke naam. Dit valt onder SC 4.1.2.

Deze knop staat ook op https://www.eteck.nl/users/register/.

Oplossing:

Gebruik een van de volgende opties:

• aria-label: Voeg een aria-label-attribuut toe aan het element van de knop met een beknopte beschrijving van de functie. <button>Toon wachtwoord</button>/<button>Verberg wachtwoord</button>

• Visueel verborgen tekst: Neem beschrijvende tekst op in het element van de knop en verberg deze visueel met CSS terwijl de tekst toegankelijk blijft voor schermlezers.

SC 2.1.1 Knop met oog is niet toegankelijk met het toetsenbord

Naast het invoerveld "Wachtwoord" staat een knop met een icoon van een oog. Hiermee kun je het wachtwoord tonen of verbergen. Deze knop kan niet met het toetsenbord worden bediend.

Alle interactieve elementen, inclusief knoppen, moeten toegankelijk zijn voor toetsenbordgebruikers. Dit betekent dat ze moeten worden opgenomen in de natuurlijke tabvolgorde en focus moeten krijgen bij het navigeren met de Tab-toets. Als een knop geen focus kan krijgen, is deze volledig ontoegankelijk voor bezoekers die alleen een toetsenbord gebruiken. Het maakt dan niet uit of de knop kan worden geactiveerd met Enter of de spatiebalk.

Deze knop staat ook op https://www.eteck.nl/users/register/.

Oplossing:

Zorg dat de knop toetsenbordfocus kan ontvangen door een button-element te gebruiken, of zorg dat het element wordt opgenomen in de natuurlijke tabvolgorde.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke gegevens (e-mailadres en wachtwoord). Deze hebben geen autocomplete-attribuut.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Deze bevinding geldt ook voor de invoervelden op https://www.eteck.nl/users/register/.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

SC 3.3.1 De foutmeldingen vertellen niet wat er fout is

De invoervelden “e-mailadres” en “wachtwoord” hebben geen goede foutmeldingen. De huidige foutmeldingen zijn instructies (“dit veld is verplicht”) in plaats van uitleg over wat er fout is gegaan. Foutmeldingen moeten specifieker zijn en de aard van de fout uitleggen.

Deze bevinding geldt ook voor de foutmeldingen op https://www.eteck.nl/users/register/.

Oplossing:

In een goede foutmelding staat meestal een ontkenning: “Dit veld (e-mailadres) is niet ingevuld”. Dan weet de bezoeker wat er precies niet goed is.

SC 1.3.1 Foutmelding is niet gekoppeld aan invoerveld

De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker.

Deze bevinding geldt ook voor de foutmeldingen op https://www.eteck.nl/users/register/.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

SC 1.4.3 Kleurcontrast van tekst is te laag

Op deze pagina staat de roze tekst "Wachtwoord vergeten" (#E6007E) op een lichtgrijze achtergrond (#DDE5E9). De contrastverhouding is hier te laag: 3,5:1. De roze teksten "Account aanmaken" en "Meld je eerst aan" (#E6007E) staan op een witte achtergrond en hebben een contrast van 4,2:1.

Deze bevinding geldt ook voor de instructies op https://www.eteck.nl/users/register/.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Link naar pagina Aanmelden bij Eteck

Deze pagina bevat een proces van 6 stappen.

SC 2.5.3 Invoervelden zijn niet met stem te bedienen

Onder het kopje “Op welk adres wil jij je aanmelden?” staan drie invoervelden. De toegankelijke namen van deze invoervelden zijn afkomstig van placeholder-teksten. Dit is ontoegankelijk.

Zo zijn deze invoervelden niet met stem te bedienen (SC 2.5.3). De placeholder-tekst verdwijnt als een bezoeker begint te typen. Het label dat erboven staat komt niet in de naam van het invoerveld voor.

Oplossing:

Verbind deze invoervelden met <label>-elementen door middel van for en id.

SC 1.4.3 Tekst heeft onvoldoende contrast

De stappen die nog niet zijn voltooid worden weergegeven als grijze cijfers op een grijze achtergrond. Het contrast is hier 4,1:1. Dit is onvoldoende voor sommige bezoekers.

Oplossing

Het contrast van deze tekst moet minimaal 4,5:1 zijn.

4.1.3 Statusbericht wordt niet voorgelezen

Als een postcode en huisnummer worden ingevoerd die niet in het juiste gebied vallen, wordt een melding getoond. Deze melding is een statusbericht, maar wordt niet als dusdanig voorgelezen. Dit geldt ook voor de melding over een zakelijke aanmelding.

Oplossing:

Dit kan worden opgelost door aria-live=”polite” aan de meldingen toe te voegen. De container waar dit attribuut aan wordt toegevoegd moet al in de DOM aanwezig zijn als de pagina wordt geladen.

SC 4.1.2 Invoerveld heeft geen toegankelijke naam

Het invoerveld onder “Datum sleuteloverdracht” heeft geen toegankelijke naam.

Oplossing:

Koppel het <label>-element aan het invoerveld.

SC 1.1.1 Afbeeldingen van groene vinkjes hebben geen tekstalternatief

De groene vinkjes laten zien dat een stap is voltooid. Het zijn dus informatieve afbeeldingen, maar ze hebben geen tekstalternatief. Daardoor heeft een blinde bezoeker geen toegang tot deze informatie.

Oplossing

Voeg een verborgen tekst toe die alleen zichtbaar is voor schermlezers.

SC 2.5.3 Invoervelden zijn niet met stem te bedienen

Het select-element met een vlag in stap 3 heeft als toegankelijke naam “Phone number country”. Dit is ook fout onder SC 3.1.2 - Taal van onderdelen.

Het invoerveld “Aanmaken wachtwoord” heeft als toegankelijke naam “Verzin een wachtwoord”. Ook het invoerveld “IBAN” in stap 4 heeft een toegankelijke naam die afwijkt van de zichtbare tekst.

Omdat de zichtbare tekst en de toegankelijke naam verschillen, zijn deze invoervelden niet met stem te bedienen.

Oplossing:

Verbind de labels met de bijbehorende invoervelden.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke informatie (bijvoorbeeld e-mailadres, telefoonnummer). Deze velden hebben geen autocomplete-attribuut.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

Link naar pagina Account aanmaken

Op deze pagina komen dezelfde issues voor als op de Login-pagina.

Link naar pagina: Over je maandbedrag en jaarnota

SC 3.1.2 Taalwisseling ontbreekt op anderstalige content

Onder het kopje "Jaarnota" op deze pagina staat een link in een andere taal zonder taalcode: "Watch this video in English".

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, vallen delen weg van de teksten "Over je maandbedrag en jaarnota" en "Onze betaalmogelijkheden". Je moet in twee richtingen scrollen om de tekst te lezen. Dit mag niet gebeuren.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: Een warm welkom

SC 1.3.1 Opsomming is niet opgebouwd met het HTML-element ul of ol

Onder de kop "Een warm welkom" op deze pagina staat een lijst met 3 items, beginnend met "meld je eenvoudig online aan". Deze lijst is niet als lijst gemarkeerd in de code.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. 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.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is

Oplossing:

Verwijder het h-element en gebruik een ander element, zoals een p-element.

Link naar pagina: Onze diensten

SC 1.1.1 img-element heeft geen alt-attribuut

Onder de kop "Een duurzame samenwerking" staan afbeeldingen die geplaatst zijn met een img-element. Deze hebben geen alt-attribuut. Het gaat bijvoorbeeld om de afbeelding onder "Gemeenten en overheden".

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element en bepaal of het om een informatieve of decoratieve afbeelding gaat. In het eerste geval voeg je een beschrijving toe, in het tweede geval laat je het attribuut leeg.

SC 1.1.1 Decoratieve afbeeldingen zijn niet verborgen voor schermlezers

Onder het kopje “Onze diensten” staan decoratieve iconen met alt-teksten die niets toevoegen aan de pagina.

Oplossing:

Laat de alt-attributen van deze afbeeldingen leeg.

Link naar pagina: Webinar over tariefswijzigingen in warmte

SC 1.3.2 Leesvolgorde klopt niet

De video op deze pagina staat boven de kop die deze video introduceert. Dit is geen logische leesvolgorde.

Oplossing:

Zet de kop boven de video.

SC 1.2.3 Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina staat de video "Webinar: Tariefswijzigingen in warmte". In de video worden op verschillende momenten teksten en logo's getoond, bijvoorbeeld rond 0:00-0:07 en 8:58-9:08. Deze visuele informatie wordt niet uitgesproken. Bezoekers die blind of slechtziend zijn, missen hierdoor de informatie van de teksten en logo’s.

Oplossing:

Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

SC 1.2.5 De video heeft geen audiobeschrijving, terwijl daar wel ruimte voor is

De video op deze pagina voldoet niet aan succescriterium 1.2.5, dat een audiobeschrijving voor video's vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor.

Oplossing:

Voeg een audiobeschrijving toe aan de video. Een media-alternatief is hier niet meer toegestaan als oplossing.

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus niet zichtbaar op de links onder “Vragen over de nieuwe tarieven?” (“Volgend artikel Etecks vijftigste…”, “Vorig artikel Ik heb een storing…”).

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

Link naar pagina: Eteck Academy

SC 1.1.1 Alternatieve tekst van logo’s voldoet niet

Onder het kopje “Zij gingen je voor:” staan logo’s met slechte alternatieve teksten. Deze teksten bestaan namelijk uit de bestandsnamen van de afbeeldingen, bijvoorbeeld “logo BZK.png” en “logo-gemeente-amsterdam_transparant.png”.

alt-teksten mogen niet de extensies van de bestandsformaten bevatten (zoals ‘.png’), en ook geen symbolen zoals streepjes en underscores. Deze tekens maken de alternatieve tekst onduidelijk.

Oplossing:

Verander de alternatieve teksten in de teksten die op de logo’s te zien zijn.

Link naar pagina: Klantenservice

SC 2.4.4 Linktekst is niet duidelijk genoeg

Op deze pagina staan meerdere links met de tekst "Meer informatie". Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’ en ‘meer informatie’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Dat kan verwarrend zijn, vooral voor bezoekers met een cognitieve beperking of die gebruikmaken van een schermlezer.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘Meer informatie’ aan te vullen met informatie over de bestemming:

<a href=”#”>Meer informatie <span class=”sr-only”> over verkoeling</span></a>

SC 1.4.3 Kleurcontrast van tekst is te laag

Op deze pagina staat de roze tekst "Meer informatie" (#e6007e) op een zeer lichtgrijze achtergrond (#fbfafa). De contrastverhouding is te laag: 4,3:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Link naar pagina Werken bij Eteck

SC 1.4.5 Er is een afbeelding van tekst en SC 1.1.1 Er is een informatieve afbeelding zonder tekstalternatief

Onder de knop “Bekijk onze vacatures" staan drie afbeeldingen van tekst. Verderop de pagina staat nog een afbeelding met de tekst “Onderweg naar ..”. Als tekst als afbeelding wordt geplaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen. Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding staat, kunnen ze dit niet doen.

Oplossing

Plaats deze tekst als platte tekst op de pagina.

SC 2.4.4 Er zijn meerdere links met dezelfde tekst

Elke vacature heeft een link met de tekst “Bekijk vacature”. Deze tekst biedt onvoldoende informatie om te begrijpen waar de link naartoe verwijst.

Oplossing

Je kunt dit op meerdere manieren oplossen:

• Elke vacature bestaat momenteel uit twee links. Combineer deze links tot één link. Dit is de beste oplossing.
• Voeg een span-element met de titel van de vacature toe aan de link “Bekijk vacature”.

SC 1.3.1 Heading-elementen zijn niet correct gebruikt

Onder het kopje “Krijg je hier ook energie van?” staan h3-elementen zonder inhoud eronder. Een kop moet altijd inhoud hebben. Deze elementen zijn niet correct gebruikt.

Oplossing

Vervang de h3-elementen door neutralep- of span-elementen.

SC 1.1.1 Er zijn afbeeldingen zonder tekstalternatief

Onder het kopje “#lifeatEteck” staat een carrousel met afbeeldingen. De img-elementen in de carrousel hebben een leeg alt-attribuut, waardoor ze verborgen zijn voor hulpsoftware. Dit is verwarrend voor een blinde bezoeker, want die komt hierdoor een ‘lege’ caroussel tegen.

Oplossing

In een carrousel moeten afbeeldingen tekstalternatieven krijgen. Beschrijf wat op de afbeelding is te zien.

Link naar pagina: Over je maandbedrag en jaarnota

Link naar pdf: Jaarnota_toelichting_Eteck

SC 2.4.2 Pdf-document heeft geen titel

Dit pdf-document heeft geen titel in de bestandseigenschappen.

Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document voor hen relevant is.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Jaarnota toelichting Eteck".
5. Klik op OK en sla het bestand op.

SC 1.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document ontbreken codes, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Oplossing:

Voeg codes toe aan het document die de structuur van het document weergeven.

SC 1.4.3 Kleurcontrast van kleine tekst is te laag

In het pdf-document staat roze tekst (#EA2D97) op een grijze achtergrond (#D4DFE3). Het gaat bijvoorbeeld om de tekst "Vaste kosten". De contrastverhouding is te laag: 2,9:1.

Oplossing:

Zorg dat het contrast minimaal 4,5:1 is.

Link naar pagina Vacature

SC 4.1.2 aria-live=”polite” is verkeerd gebruikt

In dit deel van de website is aria-live=”polite” gebruikt voor alle knoppen. Dit maakt de website niet toegankelijker en kan er zelfs toe leiden dat schermlezers deze knoppen te vaak gaan voorlezen.

Oplossing

Verwijder dit attribuut.

SC 1.1.1 Niet alle tekst van het logo staat in het tekstalternatief

Bovenaan de pagina staat het logo. Niet alle zichtbare tekst van het logo staat in het tekstalternatief.

Oplossing

Voeg de slogan toe aan het tekstalternatief.

SC 1.4.3 Witte tekst op afbeelding heeft onvoldoende contrast

De titel van de vacature staat in het wit over de grote foto bovenaan de pagina. Op sommige lichte plekken van de foto is het contrast tussen de witte tekst en de achtergrondkleur minder dan 3,0:1.

Oplossing

Voor deze grote tekst moet het contrast minimaal 3,0:1 zijn. Voor de tekst van normale grootte (onder de kop) moet de tekst minimaal 4,5:1 zijn.

SC 1.3.1 Koppen zijn niet als kop gemarkeerd

Op de tab “Vacature details” staan koppen die met het strong-element zijn gemarkeerd in plaats van met de juiste heading-elementen. Bijvoorbeeld de teksten “IT & Business Architect” en “Bij Eteck ga je doen waar anderen over praten”.

Oplossing

Verwijder het strong-element en gebruik de juiste heading-elementen, zoals h2.

SC 1.3.1 Opsomming is niet als lijst gemarkeerd.

Op de tab “Vacature details” staat een opsomming met drie punten die begint met “Ontwerp en beheer..”. Deze opsomming is niet met een ul-element gemarkeerd. Hulpsoftware leest deze opsomming daardoor niet als een lijst. Dit gebeurt ook bij andere lijsten op deze pagina.

Oplossing

Markeer deze opsomming met een ul-element.

SC 2.5.3 select-element is niet met stem te bedienen

Op de tab “Solliciteer” staat een select-element onder het label “Telefoonnummer”. De toegankelijke naam van het eerste select-element is “Kies de landcode: Nederland”. De zichtbare tekst is “Nederland”. Dit element is niet met stem te bedienen omdat deze teksten verschillen.

Oplossing

Plaats “Kies de landcode:” boven het select-element.

Er staat een invoerveld met de zichtbare tekst “Bestanden uploaden …”. De toegankelijke naam is “Motivatiebrief”. Dit element is hierdoor ook niet met stem te bedienen. Dit los je op door de uitleg over het type bestanden boven dit invoerveld te plaatsen.

SC 1.3.2 Leesvolgorde klopt niet

Onder het formulier staat uitgelegd wat een sterretje betekent. Het is belangrijk om dit al te weten voordat je het formulier invult.

Oplossing

Plaats de uitleg boven het formulier.

Link naar pagina: Home

Link naar pdf: Warmte-etiket_Eteck_2023

SC 2.4.2 Titel is niet beschrijvend en wordt niet in titelbalk getoond

In de instellingen van dit document staat de titel "Warmte-etiket Eteck 2023_details.xlsx". Dit is niet duidelijk genoeg. Daarnaast wordt de bestandsnaam getoond in de titelbalk, in plaats van de documenttitel.

Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Warmte etiket Eteck 2023"
5. Klik op OK en sla het bestand op.

SC 3.1.1 De taal is niet ingesteld in de metadata

De taal is niet ingesteld in de metadata van dit pdf-document.

Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Geavanceerd.
4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
5. Klik op OK en sla het bestand op.

SC 1.3.1 Structuur van pdf-document is niet in codes vastgelegd

In dit pdf-document ontbreken codes, waardoor de inhoud niet toegankelijk is voor schermlezers.

Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Oplossing:

Voeg codes toe aan het document die de structuur van het document weergeven.

Link naar pagina: Contactpagina

SC 1.4.3 Kleurcontrast van tekst is te laag

Onder de invoervelden op deze pagina staan blauwe teksten (#7299b0) op een grijze achtergrond (#dde5e9). Bijvoorbeeld de tekst "Vul je naam in.". De contrastverhouding van deze teksten is te laag: 2,4:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

SC 1.3.1 label-element verwijst naar verkeerde id

Het label "Wie ben je?" in het formulier op deze pagina is niet expliciet gekoppeld aan het bijbehorende invoerveld. Dat komt doordat het for-attribuut van het label-element "wie-ben-je" is, maar het id-attribuut van het invoerveld waar het label aan gekoppeld zou moeten worden is "id_wie-ben-je". Dat is dus niet hetzelfde, en daardoor werkt de koppeling niet.

label-elementen moeten gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Bovendien lezen schermlezers het label door deze koppeling voor als een bezoeker direct naar het invoerveld navigeert.

Hetzelfde probleemkomt voor bij andere invoervelden op deze pagina, zoals "Wat is het (leverings)adres?", "Wat is je klantnummer?" en "Waar gaat je vraag/opmerking over?".

Dit is ook een probleem onder SC 4.1.2 omdat de toegankelijke namen van deze invoervelden ontbreken, en onder SC 2.5.3 omdat invoervelden niet met stem te bedienen zijn.

Oplossing:

Verander de waarde van het id-attribuut zodat die hetzelfde is als de tekst die in het for-attribuut staat.

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Het formulier op deze pagina heeft invoervelden voor persoonlijke informatie (bijvoorbeeld e-mailadres, telefoonnummer). Deze hebben niet het autocomplete-attribuut, en dat moet wel.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

SC 2.4.7 Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de invoervelden “Bijlage(n)” en “Ik bevestig dat ik het privacy statement…”.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

SC 2.4.3 Volgorde toetsenbordfocus is niet logisch

Op deze pagina gaat de toetsenbordfocus na het invoerveld "Bijlage(n)" naar de Recaptcha-knoppen (Privacy, Voorwaarden). Deze volgorde is niet logisch.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg ervoor dat de toetsenbordfocus in een logische volgorde op het volgende invoerveld terechtkomt in plaats van op de Recaptcha-knoppen.

SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 200%, overlapt de tekst in de footer "Storingen kun je 24 uur..." met de recaptcha-knop.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: Privacy statement

SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Als je deze pagina bekijkt met een schermresolutie van 1280 bij 1024 pixels en inzoomt tot 400%, valt een deel van de volgende tekst weg: "gegevensoverdraagbaarheid".

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.