Hercontrole digitale toegankelijkheid van website eteck.nl

#1 - Bij 320px verschijnt een horizontale scrollbar

Op de pagina’s is de horizontale scroll nu niet meer aanwezig, behalve op pagina https://www.eteck.nl/nl/zoeken/?q=eteck en https://www.eteck.nl/nl/samenwerken-met-eteck/nieuws/. Dit zijn pagina’s met paginering en daar is nog steeds een horizontale scroll aanwezig.

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.

#3 - Decoratieve pijlen zijn niet verborgen voor schermlezers

Op alle pagina's staan decoratieve elementen met tekstalternatieven.

Hoewel dit probleem gedeeltelijk is opgelost, is het nog steeds aanwezig op pagina’s van de website. Bijvoorbeeld in de footer, bij de links met decoratieve iconen onder "Service & contact". De tekstalternatieven zijn "help-circle@1x", "Group 9" en "Path".

Op pagina https://www.eteck.nl/nl/ staan onder "Contact" iconen met tekstalternatieven zoals "help-circle@1x", "log-in@1x" en andere. Onder "Overige service" heeft het icoon het tekstalternatief "help-circle@1x". Bekijk ook de andere pagina’s.

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.

#5 - 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.

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

#10 - 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).

#14 - Koppen zijn niet als kop gemarkeerd

In de footer staat de kop "Storingen & telefonisch contact". Deze kop is niet als koptekst gemarkeerd.

Hierdoor krijgt een blinde bezoeker een andere structuur voorgelezen.

Oplossing:

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

#1 - Nieuw-1 - Koppen staan direct in een lijst

In de footer van de pagina's zijn de teksten "Zelf regelen", "Meer Eteck" en "Service & contact" gemarkeerd als <h4>-elementen die direct in een <ul>-element staan. Alleen <li>, <script> en <template> zijn echter toegestaan als directe kinderen van een <ul>. Hierdoor wordt de lijststructuur onjuist doorgegeven aan hulpsoftware. Dit kan voor schermlezer-gebruikers tot verwarring leiden over zowel de koppen als de bijbehorende lijsten.

User story

Als schermlezer-gebruiker navigeer ik door de footer via koppen en lijsten. Ik verwacht dat elke linkgroep een duidelijke kop heeft en dat de lijst zelf alleen lijst-items bevat. Wanneer koppen onjuist in de lijststructuur staan, kan de relatie tussen de kop en de bijbehorende links onduidelijk worden.

Oplossing:

Verplaats de kop buiten het <ul>-element, zodat deze vóór de lijst staat. Bijvoorbeeld:

<h4 class="page-footer-navigation__title">Zelf regelen</h4>
<ul class="page-footer-navigation">
  <li class="page-footer-navigation__item">
    <a href="https://www.eteck.nl/nl/zelf-inzicht-met-mijneteck/">MijnEteck</a>
  </li>
  <li class="page-footer-navigation__item">
    <a href="/nl/hulp-meterstand/">Meterstanden doorgeven</a>
  </li>
  …
</ul>

#15 - 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.

#17 - 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 het <fieldset>-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.

#18 - Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400% [320 px breed], overlappen de teksten “Eteck” en “MijnEteck” de tekst in de cookiebanner. Dit gebeurt ook wanneer de link “voorkeuren aanpassen” wordt geactiveerd. De teksten overlappen dan de checkbox “Functionele cookies”.

Oplossing:

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

#25 - Knop bestaat alleen uit afbeelding, maar alternatieve tekst beschrijft functie niet

De pijlen in de carrousel, waarmee je de slides kunt laten roteren, hebben een alternatieve tekst die de functie van de knop niet beschrijft (“Group 5 Copy 11”). Als een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven (bijvoorbeeld “Volgende slide”, “Vorige slide”). Dit is ook een probleem onder SC 2.4.6, omdat de naam van de knop de functie van de knop niet beschrijft. De carrousels staan op de pagina’s: https://www.eteck.nl/en/, https://www.eteck.nl/nl/ en https://www.eteck.nl/nl/samenwerken-met-eteck/

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.

#26 - 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.

#27 - 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.

#28 - 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.

#29 - 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.

#30 - 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.

#34 - 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.

#35 - 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.

#36 - 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.

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

#39 - 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.

#40 - 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.

#41 - 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.

#44 - 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 icons". 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.

#2 - Nieuw-2 - Kleurcontrast tussen tekst en achtergrond is minder dan 4,5:1

Op deze pagina hebben enkele links roze tekst (#E6007E) op een lichtgrijze achtergrond (#F4F8FB). De contrastverhouding is te laag: 4,2:1.

User story

Als bezoeker met een visuele beperking heb ik moeite om kleine tekst te lezen wanneer het contrast te laag is. Tekst en achtergrond moeten voldoende verschillen om de tekst leesbaar te maken.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt; daarom moet het contrast minimaal 4,5:1 zijn. Verhoog het contrast tussen de tekst en de achtergrond zodat het aan deze eis voldoet.

#56 - 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.

#59 - 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.

#60 - 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

#50 - 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.

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

#52 - 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.

Oplossing:

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

#61 - 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.

#63 - 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.

#64 - Kop-element gebruikt voor tekst die geen kop is

De volgende tekst is geen kop, maar is wel met een h3-element gemarkeerd: “Meld je snel en eenvoudig online aan bij Eteck. Vul je gegevens in via onderstaande link en wij gaan voor je aan de slag.” Waarschijnlijk is dit gedaan om de letters groter te maken. Het kop-element (h) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h-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, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

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

#65 - 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.

#66 - 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.

#67 - 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.

#70 - 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.

#71 - 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.

#74 - Er is een afbeelding van tekst en SC 1.1.1 Er is een informatieve afbeelding zonder tekstalternatief

Onder de knop “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.

#75 - 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”.

#77 - 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.

#78 - 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.

#79 - 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.

#80 - 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.

#81 - 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.

#82 - 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.

#83 - 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.

#84 - 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 “Operator Asset Control Center (ACC)” en “Bij Eteck ga je doen waar anderen over praten”.

Oplossing

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

#85 - Opsomming is niet als lijst gemarkeerd.

Op de tab “Vacature details” onder “Operator Asset Control Center (ACC)” en “Dit krijg je ervoor terug” staan opsommingen. 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.

#86 - 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.

#87 - 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.

#88 - 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.

#89 - 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.

#90 - 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.

#93 - 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

#94 - 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.