Audit digitale toegankelijkheid van de Android app Eteck, versie 1.19.0 - production - sdk 52.0.0
Samenvatting
Wij hebben de Android app Eteck onderzocht tussen 1 en 18 juni 2025. Op dit moment zijn 33 van de 50 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 20 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 50 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.1 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
EN 301 549 is de Europese standaard voor digitale toegankelijkheid. In dit onderzoek is versie 3.2.1 van deze norm toegepast. Apps vallen onder het hoofdstuk ‘Software’. Voor apps zijn 44 van de 50 succescriteria uit niveau A en AA van de WCAG 2.1 van toepassing. Bij 13 van deze criteria zijn de notities of definities licht aangepast, zonder dat de context wezenlijk verandert. De volgende succescriteria zijn niet van toepassing op apps: 2.4.1, 2.4.2, 2.4.5, 3.1.2, 3.2.3 en 3.2.4.
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Toestel Samsung A34, Android 14
Toestel Nokia X10, Android 14
TalkBack schermlezer
Andere gangbare browsers en hulpapparatuur
Technologieën van de app
onbekend
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de app op dit moment voldoet aan WCAG 2.1, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je app te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Steekproef
Inloggen
Start (niet ingelogd)
Privacy statement
Start (ingelogd)
Vul een toegangscode in
Privacy statement > Ik ga akkoord > Vul een toegangscode in > Welkom bij Eteck
Welcom bij MijnEteck
Vul een toegangscode in > Welkom bij Eteck
Overzicht
Start (ingelogd)
Verbruik
Start > Verbruik
Maandbedrag
Start > Maandbedrag
Voorschot wijzigen
Start > Maandbedrag > Wijzigen
Contact
Start > Contact
Meer
Start > Meer
Mijn gegevens
Meer > Mijn gegevens
Storingen
Meer > Storingen
Verhuizen
Meer > Mijn gegevens > Verhuizing doorgeven
Betalingen
Meer > Betalingen
Documenten
Meer > Documenten
Gevonden problemen per scherm
Algemene knelpunten
SC 1.4.1 Toetsenbordfocus van een extern toetsenbord is alleen te zien aan verandering van kleur
Op alle schermen is voor alle interactieve elementen een aangepaste focusindicator ingesteld, namelijk een verandering van de achtergrondkleur. For example, on tab elements, buttons, links. Dit geldt alleen bij de bediening met een extern toetsenbord.
Het gebruik van alleen kleur om focus aan te geven is hier niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn.
Oplossing
Zorg dat er een duidelijk zichtbare focusindicator is. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
SC 1.3.4 Alle schermen zijn beperkt tot één weergavestand (staand)
De lay-out van alle schermen is beperkt tot één weergavestand (portret).
Apps moeten zowel in verticale (portret) als horizontale (landschap) stand goed werken. Bezoekers moeten de vrijheid hebben om te kiezen welke modus het beste voor hen werkt. Je mag hier alleen van afwijken als één bepaalde stand echt noodzakelijk is. Dit is bijvoorbeeld belangrijk voor mensen die hun tablet aan hun rolstoel hebben gemonteerd en de oriëntatie niet kunnen aanpassen. Zo kunnen zij de app of website gebruiken op de manier die voor hen het handigst is, zonder iets te missen.
Oplossing
Zorg ervoor dat de inhoud van de app draait en zich aanpast aan de weergavestand.
SC 4.1.3 Statusberichten worden niet voorgelezen
Op sommige schermen verschijnt informatie als resultaat van de interactie van de bezoeker met de app. Bijvoorbeeld, er verschijnen foutmeldingen of berichten dat een actie is geslaagd. Deze informatie is een statusbericht, maar wordt niet door de schermlezer voorgelezen.
Oplossing:
Zorg ervoor dat nieuwe of bijgewerkte informatie duidelijk wordt aangekondigd aan gebruikers van hulpsoftware.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De terugknop bovenaan elk schermen heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.4.4 Tekst valt weg bij inzoomen
Als je de tekst vergroot tot de maximale grootte in de instellingen van je telefoon, worden veel elementen van de applicatie niet zichtbaar of niet bruikbaar, zoals tabs, knoppen, koppen en links.
Oplossing:
Zorg ervoor dat tekst leesbaar blijft wanneer deze wordt vergroot.
Tabs
SC 1.3.1 Screen reader does not announce the number of tabs
Dit scherm heeft vijf tabbladen, maar de schermlezer vertelt gebruikers niet hoeveel tabbladen er zijn of op welk tabblad ze zich bevinden. Blinde gebruikers weten misschien niet dat er meer tabbladen zijn om uit te kiezen.
Oplossing
Zorg ervoor dat de schermlezer aangeeft hoeveel tabbladen er zijn en welk tabblad is geselecteerd, zoals "Tabblad 2 van 5".
SC 1.3.1 Geselecteerde tab geeft een misleidende activatieboodschap
Wanneer een tab is geselecteerd, zegt de schermlezer nog steeds “dubbel tikken om te activeren.” Dit kan verwarrend zijn voor gebruikers, omdat de tab al actief is.
Oplossing:
Zorg ervoor dat de schermlezer alleen meldt dat de tab is geselecteerd, en gebruikers niet opnieuw aanspoort om deze te activeren.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Tab buttons have gray text on white background. The color contrast ratio is too low: 2,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Inloggen
Pad: Start (niet ingelogd)
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm staat de kop “Inloggen”. Deze tekst is niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 4.1.2 Knop met het oog heeft geen toegankelijke naam
Op dit scherm ontbreekt bij de knop om het wachtwoord te tonen een toegankelijke naam. Hierdoor kunnen gebruikers van schermlezers niet begrijpen wat het doel of de bestemming van de knop is. Alle knoppen moeten een toegankelijke naam hebben die duidelijk hun functie beschrijft.
Oplossing:
Geef deze knop een toegankelijke naam.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op dit scherm is de contrastverhouding tussen de grijze rand van het invoerveld en de achtergrond van het scherm van invoervelden 1,3:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 2.1.2 Toetsenbord focus zit vast
Op dit scherm raakt de toetsenbordnavigatie vastgelopen wanneer een bezoeker met het extern toetsenbord vooruit navigeert. Het toetsenbordfocus raakt gevangen, waardoor gebruikers niet naar interactieve elementen op het scherm kunnen navigeren. De toetsenbordfocus blijft onderaan het scherm (Inloggen, Wachtwoord vergeten, Mijn Eteck en Privacyverklaring). Het is niet mogelijk om met het toetsenbord in de invoervelden te komen.
Deze toetsenbordval verhindert dat bezoekers die uitsluitend een toetsenbord gebruiken, vrij over het scherm kunnen navigeren. Dit geldt bijvoorbeeld voor mensen met motorische of visuele beperkingen. Hierdoor wordt de applicatie minder bruikbaar en minder toegankelijk.
Oplossing:
Zorg ervoor dat het altijd mogelijk is om met het toetsenbord naar alle interactieve elementen van het scherm te navigeren.
SC 2.1.1 Invoerveld is niet met het toetsenbord te bedienen
Op dit scherm staan invoervelden "E-mailadres" en "Wachtwoord". Deze invoervelden zijn niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op dit scherm staat een grijze tekst "versie 1.19.0 - productie - sdk 52.0.0" op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Op dit scherm verschijnt de foutmelding in het formulier “[VELD] is een verplicht veld.".
Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 1.4.4 Tekst op de knop verdwijnt
Als een bezoeker op dit scherm inzoomt, verdwijnt de tekst op de knop “Wachtwoord vergeten”. Het woordje “vergeten” is niet meer leesbaar.
Oplossing:
De tekst op de knop moet leesbaar blijven.
Privacy statement
Pad: Start (not logged in) > inloggen
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm zijn er koppen zoals “Contactgegevens”, “Verwerken van persoonsgegevens”, “Persoonsgegevens die wij verwerken” en andere. Deze tekst is echter niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Uitloggen" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Schermlezer kondigt slechts één element aan
Wanneer je een schermlezer gebruikt op een mobiel apparaat, worden bij veegbewegingen (links/rechts of omhoog/omlaag) slechts één element op het scherm aangekondigd (de knop “Uitloggen”), en verplaatst de focus zich niet naar andere elementen. Wanneer je echter het scherm met je vinger aanraakt, worden andere elementen wel correct aangekondigd.
Oplossing:
Zorg ervoor dat alle interactieve en relevante elementen zijn opgenomen in de focusvolgorde van de schermlezer en bereikbaar zijn via veegbewegingen, niet alleen via aanraking.
SC 1.4.4 Kop valt buiten het scherm
De kop “Privacy statement” valt buiten het scherm wanneer de tekst is vergroot. Een bezoeker moet in twee richtingen scrollen om de kop te lezen.
Oplossing:
De koptekst moet zichtbaar zijn.
Welkom bij Eteck
Pad: Vul een toegangscode in > Welkom bij Eteck
SC 1.3.1 Kop is niet gemarkeerd als koptekst
In de caroussel staan koppen: "Welcom bij MijnEteck", “Regel het eenvoudig zelf”, “Heb je een storing?”. Deze tekst is niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
1.4.11 Stippen hebben onvoldoende contrast (carrousel)
Op dit scherm staat een caroussel. De grijze bolletjes die aangeven hoeveel slides er zijn, hebben een contrast van 1,2:1 op de witte achtergrond.
Oplossing
Maak deze stippen donkerder zodat het contrast minimaal 3,0:1 wordt.
Overzicht
Pad: Start (logged in)
SC 1.4.1 Toetsenbordfocus van een extern toetsenbord is alleen te zien aan verandering van kleur
Op dit scherm is voor alle interactieve elementen een aangepaste focusindicator ingesteld, namelijk een verandering van de achtergrondkleur. For example, on links under “Zelf regelen”.
Het gebruik van alleen kleur om focus aan te geven is hier niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn.
Oplossing
Zorg dat er een duidelijk zichtbare focusindicator is. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
On this screen there are headings "Overzicht”, “Zelf regelen”, “Maandbedrag”. Deze tekst is niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
Maandbedrag
Pad: Start > Maandbedrag
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm staan (tussen)kopjes "Maandbedrag", “Opbouw maandbedrag”, “Voorschot” die niet als kopteksten zijn gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.3.2 Leesvolgorde is niet logisch
Op dit scherm staat de knop “Wijzigen” naast "Je betaalt 50 euro”. De schermlezer leest nu voor: “Je betaalt Wijzigen 50 euro”. Dit is geen logische leesvolgorde.
Oplossing
Zorg ervoor dat tekst die bij elkaar hoort in de juiste volgorde wordt gelezen door schermlezers.
SC 4.1.2 De status van knoppen wordt niet correct voorgelezen
Op dit scherm wordt de knop “Voorschot” die verborgen inhoud toont en vergergt altijd aangekondigd als “uitgeklapt”, zelfs wanneer deze is gesloten. Dit kan schermlezergebruikers in verwarring brengen over of de inhoud daadwerkelijk beschikbaar of verborgen is.
Oplossing
Zorg ervoor dat de uitklapstatus van de knop correct is ingesteld, zodat schermlezers de juiste status aankondigen.
SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen
Als je de tekst vergroot tot de maximale grootte via de instellingen van je telefoon, verdwijnt de tekst van veel elementen (zoals de tekst “Maandbedrag”, “Opbouw maandbedrag”, “Voorschot”, “Je betaalt” en de knop “Wijzigen”).
Oplossing
Zorg ervoor dat tekst leesbaar blijft wanneer deze wordt vergroot.
Voorschot wijzigen
Pad: Start > Maandbedrag > Wijzigen
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Maandbedrag" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm staan tussenkopjes "Voorschot wijzigen", “Samenvatting”, “Nieuw maandbedrag” en andere. Deze teksten zijn niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 4.1.2 Knop heeft geen toegankelijke naam
Op dit scherm staat in de slider de knop “Huidig”. Deze knop heeft geen toegankelijke naam. Hierdoor kunnen schermlezergebruikers niet begrijpen wat het doel of de bestemming van de knop is.
Oplossing:
Alle knoppen moeten een toegankelijke naam hebben die hun functie duidelijk beschrijft.
SC 2.1.1 Invoerveld is niet met het toetsenbord te bedienen
Op dit scherm is de knop "Huidig" niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.
SC 1.3.1 Informatie uit de slider wordt niet aangekondigd voor schermlezers
Er staat een slider op het scherm, maar gebruikers van schermlezers horen alleen de waarden "15 euro" en "500 euro" zonder te weten wat deze bedragen betekenen.
Oplossing
Maak deze informatie en functionaliteit toegankelijk voor een blinde bezoeker.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op dit scherm is de contrastverhouding tussen de grijze schuifregelaar en de achtergrond van het scherm van invoervelden 1,3:1. Een bezoeker met milde visuele beperkingen zal deze slider niet goed zien.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Contact
Pad: Start > Contact
SC 1.3.1 Kop is niet gemarkeerd als koptekst
De tussenkopjes "Contact”, “Storingen”, “Veelgestelde vragen”, “Digitaal contact” en anderen zijn niet als kopteksten gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 2.5.8 De grootte van een element voldoet niet
Op dit scherm staan de links onder "Storingen" zo dicht op elkaar dat het klikgebit kleiner is dan 24px.
De oppervlakte waarop geklikt kan worden (het ‘doelgebied’) bij knoppen, links en andere interactieve elementen moet groot genoeg zijn. Anders is het voor bezoekers met een motorische beperking lastig om op het goede element te klikken. Daarom moeten elementen óf een oppervlakte hebben van minimaal 24 bij 24 CSS-pixels, óf voldoende uit elkaar geplaatst zijn. Om te bepalen of klikbare elementen ver genoeg uit elkaar staan, teken je een denkbeeldige cirkel met een diameter van 24 pixels in het midden van het doelgebied. Deze cirkel mag op geen enkele plek (de cirkel van) een ander doelgebied raken.
Oplossing:
Voeg extra ruimte toe tussen deze links.
Meer
Pad: Start > Meer
SC 1.3.1 Kop is niet gemarkeerd als koptekst
De (tussen)kopjes "Meer”, “Betalingen”, “Storingen”, “Documenten” en anderen zijn niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 4.1.2 Naam van de knop beschrijft niet wat de knop doet
Op dit scherm, onder “Wat vind je van de app?”, staan knoppen met smilies. De teksten die worden voorgelezen zijn: “enigszins lachend gezicht”, “neutraal gezicht” en “licht fronsend gezicht”. Deze knoppen staan voor: goed, neutraal en niet goed.
Hetzelfde probleem wordt waargenomen bij twee andere knoppen met neutrale en treurige smilies die doorsturen naar de webpagina van de klantenservice. Overweeg het gebruik van een meer beschrijvende naam zoals "Ik ben niet tevreden - neem contact op met de klantenservice".
Oplossing:
Voeg tekst toe die deze knop goed beschrijft. Overweeg om een meer beschrijvende naam te gebruiken zoals "Ik ben tevreden".
Mijn gegevens
Pad: Meer > Mijn gegevens
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Meer" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
De tussenkopjes "Mijn gegevens”, “Persoonlijke gegevens”, “Account”, “Adres” en anderen zijn niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op dit scherm is de contrastverhouding tussen de grijze rand en de achtergrond van het scherm van invoervelden 2,2:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op dit scherm staat onder "Contact" en onder de invoervelden grijze tekst op witte achtergrond. De kleurcontrastverhouding is te laag: 3:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.4.1 Toetsenbordfocus is alleen te zien aan verandering van kleur
Op dit scherm is voor alle interactieve elementen een aangepaste focusindicator ingesteld, namelijk een verandering van de achtergrondkleur. Dit is bijvoorbeeld het geval voor de knop "Meer" bovenaan, voor de knop "Wijzigen" onder "Contact", de knop "Wijzigen" onder "Betalen" en anderen.
Het gebruik van alleen kleur om focus aan te geven is hier niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn.
Oplossing
Zorg dat er een duidelijk zichtbare focusindicator is. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Op dit scherm wordt in het formulier onder "Account" de foutmelding "E-mailadres is een verplicht veld." weergegeven.
Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".
Hetzelfde probleem wordt waargenomen met het formulier onder "Contact".
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 2.1.1 Invoerveld is niet met het toetsenbord te bedienen
Op dit scherm staat het invoerveld "Telefoonnummer". Dit invoerveld is niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.
Storingen
Pad: Meer > Storingen
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina zijn de tussenkopjes "Storingen", “Mijn meldingen”, “Zelf regelen” en anderen niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.3.1 Informatie is niet toegankelijk voor schermlezers
Schermlezer leest de inhoud van een melding onder “Mijn meldingen” niet voor. In plaats van tekst zoals “Individueel (Warmte)” en de rest van de melding, hoort de schermlezergebruiker alleen de naam van de knop (“Details openen”).
Omdat de zichtbare tekst van de tekst op de knop verschilt, is deze knop niet met stem te bedienen (SC 2.5.3).
Oplossing
Zorg ervoor dat alle informatie en relaties die zichtbaar zijn op het scherm ook beschikbaar zijn voor schermlezers.
SC 1.3.1 Aantal alinea’s in de code is anders dan de visuele weergave
Op het scherm “Storingen” staat een kopje en meerdere alinea’s tekst met de inhoud van de storing. Deze tekst wordt als een blok tekst voorgelezen.
Een blinde bezoeker kan niet in het midden van deze tekst naar een stukje luisteren. Het hele blok moet opnieuw worden voorgelezen. Dit is ontoegankelijk.
Oplossing
Plaats deze alinea’s in afzonderlijke alinea’s.
Verhuizing doorgeven
Pad: Meer > Mijn gegevens > Verhuizing doorgeven
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm zijn de kopjes "Verhuizen", “Wanneer is de sleuteloverdracht?”niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Mijn gegevens" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De contrastratio is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 2.1.1 Invoerveld is niet met het toetsenbord te bedienen
Op dit scherm staat het invoerveld "Datum sleuteloverdracht". Dit invoerveld is niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.
SC 2.5.3 Invoerveld is niet met stem te bedienen
Op dit scherm staat het invoerveld onder het label "Datum sleuteloverdracht". De toegankelijke naam van dit element is “datum kiezer”.
Oplossing:
Verander de naam in "Datum sleuteloverdracht".
Betalingen
Pad: Meer > Betalingen
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Meer" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm zijn de kopjes "Betalingen”, “Openstannde facturen”, “maart 2025” niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 4.1.2 De status van knoppen is onjuist voor schermlezers
Op dit scherm, onder “Openstaande facturen”, wordt de knop “maart 2025” met verborgen inhoud altijd aangekondigd als “uitgeklapt”, zelfs wanneer deze is gesloten. Dit kan schermlezergebruikers in verwarring brengen over of de inhoud daadwerkelijk zichtbaar of verborgen is.
Oplossing
Zorg ervoor dat de expanded state van de knop correct is ingesteld, zodat schermlezers de juiste status aankondigen.
SC 2.4.4 Er zijn links met dezelfde tekst maar een andere bestemming
Op dit scherm bevat de verborgen inhoud onder "Openstaande facturen" verschillende links met dezelfde naam "Download factuur", maar de facturen die ze downloaden zijn niet hetzelfde. Dit kan verwarrend zijn voor bezoekers.
Oplossing:
Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden of dezelfde functie hebben. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.
SC 3.2.2 Als je een knop selecteert, verschuift de focus
Op dit scherm zorgt het selecteren van de knop “Bekijk alle facturen” (of “Toon alleen laatste drie facturen” wanneer een lijst met facturen is geopend) met een extern toetsenbord ervoor dat de toetsenbordfocus onverwacht naar de bovenkant van het scherm verplaatst wordt. Bezoekers worden niet vooraf geïnformeerd over deze contextwijziging.
Een contextwijziging, zoals het verplaatsen van focus, mag niet zomaar plaatsvinden als een bezoeker iets in een formulier aanpast. Het mag dus bijvoorbeeld niet gebeuren als een bezoeker een keuzevakje aanvinkt, een invoerveld invult of een optie uit een keuzelijst selecteert. Andere voorbeelden van grote contextwijzigingen zijn het verzenden van een formulier of het openen van een nieuw venster. Zulke contextwijzigingen mogen alleen gebeuren als de bezoeker van tevoren is gewaarschuwd.
Oplossing:
Zorg ervoor dat de focus naar het volgende logische element gaat na het selecteren van "Bekjik alle facturen" of "Toon alleen laatste drie facturen".
Documenten
Pad: Meer > Documenten
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm zijn fr kopjes "Documenten", “MijnEteck - Informatie”, “MijnEteck - Tarieven” niet als koptekst gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
De knop "Meer" bovenaan het scherm heeft grijze tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.1.1 Een download icoon heeft geen tekstalternatief
Op dit scherm, onder de koppen “MijnEteck - Informatie” en “MijnEteck - Tarieven”, staan informatieve afbeeldingen van roze downloadpictogrammen. Deze pictogrammen hebben echter geen alternatieve tekst, waardoor schermlezergebruikers niet weten dat de link verwijst naar een downloadbaar document. Deze informatie is belangrijk en moet op een toegankelijke manier beschikbaar zijn.
Oplossing
Zorg ervoor dat informatieve afbeeldingen voorzien zijn van alternatieve tekst, bijvoorbeeld “Bestand downloaden”.
Vul een toegangscode in
Pad: Privacy statement > Ik ga akkoord > Vul een toegangscode in
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm staat de kop “Vul een toegangscode in”. Deze tekst is niet als koptekst gemarkeerd
Oplossing:
Maak hier een kop van.
SC 4.1.2 Invoervelden hebben geen toegankelijke rol of naam
De invoervelden om de toegangscode in te toetsen hebben geen toegankelijke rol en geen naam. De schermlezer leest ze helemaal niet voor.
Oplossing:
Deze velden moeten zichtbaar zijn voor de schermlezer.
SC 3.2.2 Focus wordt automatisch verplaatst na input
Op dit scherm staan vier invoervelden om de toegangscode in te vullen. Als in een veld een cijfer wordt ingevuld, springt de focus naar het volgende invoerveld. De focus mag niet automatisch verspringen. Dit gebeurt ook als de cijfers worden verwijderd.
Oplossing:
Beperk de focus tot een invoerveld.
SC 2.1.1 Invoerveld is niet met het toetsenbord te bedienen
Op dit scherm staan vier invoervelden die niet toegankelijk zijn via het extern toetsenbord.
Oplossing:
Zorg ervoor dat alle interactieve elementen bedienbaar zijn met het toetsenbord.
Verbruik
Pad: Start > Verbruik
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op dit scherm staan koppen zoals “Verbruik”, “Vergelijken”, “Koude december” en “Zelf regelen”. Deze teksten zijn echter niet als kopteksten gemarkeerd.
Oplossing:
Maak hier een kop van.
SC 1.3.1 Status geselecteerde tabblad niet aangekondigd
Op dit scherm staat naast “Vergelijken” een interactief element met het label “Energie €” met de rol van tablijst. Wanneer een gebruiker dit element selecteert, zegt de schermlezer niet welke tab momenteel is geselecteerd.
Oplossing:
Zorg ervoor dat de schermlezer aangeeft welke tab momenteel is geselecteerd wanneer een gebruiker deze selecteert.
SC 1.1.1 Informatie is niet toegankelijk voor schermlezers
De grafiek onder “Koude december” de grafiek met de tekst “Buurt” wordt niet voorgelezen
Oplossing
Zorg ervoor dat alle informatie ook beschikbaar zijn voor schermlezers.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op dit scherm staat onder "Koude december" grijze tekst op witte achtergrond. De kleurcontrastverhouding is te laag: 3:1.
Let op! In de testaccount staat weinig informatie (grafieken). Controleer zelf het contrast van tekst in andere scenarions.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Voldoet of niet van toepassing: 33
Voldoet niet: 17
