Audit digitale toegankelijkheid van website Mijn Eteck

#1 - Decoratieve iconen worden voorgelezen

Op alle pagina’s staan decoratieve SVG-iconen, die door hulpsoftware worden voorgelezen. Het <title>-element bevat tekst. Bijvoorbeeld:

• In de footer, onder “Service & contact” en “Storingen & telefonisch contact”, staan decoratieve SVG-iconen met titels zoals “help-circle@1x”, “Group 9” en “Path”.
• Op de pagina https://eteck-accept.fabriquehq.nl/en/ onder “Malfunction?” en “More service”, staan decoratieve SVG-iconen met titels zoals “Path”, “log-in@1x”, “map-pin (2)” en andere.
• Op de pagina https://www.eteck.nl/nl/samenwerken-met-eteck/zakelijkcontact/, onder de koppen “Bel ons”, “Mail ons” en “Volg ons”, staan SVG-iconen met <title>-elementen zoals “Path” en andere.

#2 - Linktekst onduidelijk

Op alle pagina’s staan links met SVG-iconen die betekenisloze tekst of niet-leesbare tekens (zoals streepjes, underscores of andere tekens) bevatten in de toegankelijke naam, waardoor het doel van de links onduidelijk wordt.

Bijvoorbeeld:

• In de footer, onder “Service & contact”, staan links met iconen waarvan de toegankelijke naam bijvoorbeeld “help-circle@1x Veelgestelde vragen” is.
• Op de pagina https://eteck-accept.fabriquehq.nl/en/ onder “Malfunction?”, staan links met iconen waarvan de toegankelijke naam bijvoorbeeld “Path Call 085-0218 000” is.

#3 - Cookies: dialoogvenster mist de juiste rol en naam

Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiedialoogvenster. Dit dialoogvenster mist zowel een correct ARIA-rolattribuut als een toegankelijke naam.

#4 - Hoofdmenu: actieve link wordt niet als dusdanig voorgelezen

In het hoofdmenu heeft de actieve link (naar de huidige pagina), bijvoorbeeld “Klanten”, een onderscheidende visuele weergave, maar dit onderscheid is niet aanwezig in de code.

#5 - Hoofdmenu: koppen worden niet als kopteksten voorgelezen

In het hoofdmenu zijn er knoppen met submenu’s. In deze submenu’s zijn de koppen, zoals “Duurzaam wooncomfort”, “Betaalbare warmte” en andere, niet als koppen opgemaakt.

#6 - Hoofdmenu: decoratieve iconen niet verborgen voor hulpsotware

In het hoofdmenu hebben sommige links pijltjesiconen om submenu’s aan te duiden. Deze SVG-iconen bevatten onduidelijke alternatieve tekst in het <title>-element, namelijk “Path”.

#7 - Footer: kop is niet als koptekst gemarkeerd

De tekst “Storingen & telefonisch contact” zijn niet als koppen opgemaakt.

#8 - Footer: opsomming wordt niet correct voorgelezen

Onder “Service & contact” staat een lijst met directe kind elementen die niet zijn toegestaan: <ul>.

#9 - Footer: zoekveld mist de toegankelijke naam

Onder “Vragen?” staat een zoekveld dat geen toegankelijke naam heeft.

#10 - Footer: zoekveld is niet met stem te bedienen

Onder “Vragen?” staat een zoekveld. De toegankelijke naam van dit zoekveld ontbreekt. Daardoor komt de toegankelijke naam niet overeen met de zichtbare tekst “Vragen?”. Hierdoor functioneert het zoekveld niet correct wanneer het via een spraaksysteem wordt geactiveerd.

#11 - Footer: zoekveld heeft contrastproblemen

Onder “Vragen?” staat een zoekveld waarvan de grijze rand (HEX #DCE4E8) op een lichtgrijze achtergrond (HEX #F4F8FB) een te laag contrast heeft. De contrastverhouding is 1,2:1, terwijl dit minimaal 3,0:1 moet zijn. Een placeholdertekst zou een alternatief kunnen zijn, maar ook deze heeft een onvoldoende contrastverhouding van 2,2:1. Het icoon is geen geldig alternatief.
Ditzelfde probleem doet zich ook voor op een klein scherm in het mobiele menu.

#12 - Kop-element niet juist gebruikt

Op deze pagina, onder de kop “Nieuws”, staan drie koppen die onjuist zijn opgemaakt met een <h3>-element om de lettergrootte te vergroten, bijvoorbeeld: “Eteck stapt over op nieuw betalingssysteem”. De teksten die als kop zijn opgemaakt, zijn geen echte koppen, omdat er geen content onder staat.
Ditzelfde probleem komt ook voor op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/ onder de kop “Nieuws”.

#13 - Onvoldoende kleurcontrast van tekst

Op deze pagina, onder de kop “Nieuws”, staat een roze link (HEX #E6007E) met de tekst “Bekijk al het nieuws” op een lichtgrijze achtergrond (HEX #F4F8FB). De contrastverhouding is laag: 4,2:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

#14 - Informatieve afbeeldingen hebben geen tekstalternatief

Op deze pagina, onder de kop “Regel het zelf met de MijnEteck App”, staat een carrousel. Alle afbeeldingen in de carrousel zijn toegevoegd via een <img>-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/en/ boven de kop “Be in control with the Eteck App”; op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/projecten/; op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/ onder de kop “Om voorop te lopen kun jij rustig achterover leunen”.

#15 - Leesvolgorde klopt niet

Op deze pagina, boven de kop “Regel het zelf met de MijnEteck App”, staat een carrousel met artikelen. Alle artikelen hebben tekst boven de kop, bijvoorbeeld “Onze ambitie”. Wanneer deze artikelen van boven naar beneden worden gelezen door een schermlezer, is het onduidelijk welke tekst bij welk artikel hoort. Dit komt doordat de koppen niet bovenaan in de code staan voor elk artikel.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/en/ boven de kop “Be in control with the Eteck App”, bijvoorbeeld “Our ambition”; op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/ onder de kop “Om voorop te lopen kun jij rustig achterover leunen”.

#16 - Knoppen hebben onduidelijke namen

Op deze pagina, boven de kop “Regel het zelf met de MijnEteck App”, staat een carrousel met pijltjestoetsen. Deze knoppen hebben de functie om door de slides te scrollen, maar hun toegankelijke naam is “Group 5 Copy 11”, wat de functie niet juist beschrijft.

Ditzelfde probleem doet zich voor:

• op de pagina https://eteck-accept.fabriquehq.nl/en/ boven de kop “Be in control with the Eteck App”;
• op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/projecten/;
• op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/ onder de kop “Om voorop te lopen kun jij rustig achterover leunen”.

#17 - Logo’s missen correct tekstalternatief

Op deze pagina, onder de kop “Regel het zelf met de MijnEteck App”, staan twee links met logo’s. Niet alle zichtbare tekst in de logo’s is opgenomen in de alt-tekst. De zichtbare tekst is bijvoorbeeld “Get in on Google Play”, maar de alt-tekst is alleen “Google Play”.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/en/ onder de kop “Be in control with the Eteck App”.

#18 - Onvoldoende kleurcontrast van UI-elementen

Onder de kop “Zoeken” staat een zoekveld. De grijze rand (HEX #7799AF) op een lichtgrijze achtergrond (HEX #DDE5E9) heeft een laag contrast. De contrastverhouding is 2,4:1, terwijl deze minimaal 3,0:1 moet zijn. Een placeholdertekst zou een alternatief kunnen zijn, maar ook deze heeft een onvoldoende contrastverhouding van 2,2:1. Het icoon is geen geldig alternatief.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/klantenservice/.

#19 - Relatie tussen elementen is onduidelijk in de HTML

Op deze pagina staat in elk uitklaponderdeel de tekst “Heeft dit antwoord geholpen?” met de knoppen “Ja” en “Nee”. Hoewel deze visueel gegroepeerd zijn, is deze relatie niet programmatisch gedefinieerd in de HTML. Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/klantenservice/.

#20 - Kop is niet als koptekst gemarkeerd

Op deze pagina staat in elk uitklaponderdeel de tekst “Heeft dit antwoord geholpen?” met de knoppen “Ja” en “Nee”. Deze tekst is niet als kop opgemaakt. Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/klantenservice/.

#21 - Relatie tussen elementen wordt niet correct voorgelezen

Op deze pagina bevat elk zoekresultaat een lijst met directe kindelementen die niet zijn toegestaan: <details>.

#22 - Onduidelijke bestemming van een link

Op deze pagina staan in de paginering links met pijltjesiconen. Deze links bestaan uitsluitend uit iconen, en de alternatieve tekst van het icoon fungeert als naam van de knop. Dit icoon bevat onduidelijke alternatieve tekst in het title-element “Group 5 Copy 11”. Het doel van de link is onduidelijk.

#23 - Onvoldoende contrast van focus

Op deze pagina heeft de toetsenbordfocus op de paginalinks een lage contrastverhouding. De focuskleur is grijs (HEX #6491AA) op een lichtgrijze achtergrond (HEX #DDE5E9). De contrastverhouding is 2,7:1, terwijl deze minimaal 3,0:1 moet zijn. Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/users/login/ bij knoppen en links op een grijze achtergrond; en op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/nieuwsupdates/ bij het selectelement “Aanhef” en de knop “Aanmelden”.

#24 - Bij 400% zoom moet bezoeker in 2 richtingen scrollen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt er een horizontale schuifbalk.

#25 - Focuspositie in onzichtbaar

Op deze pagina mist de volgende link een zichtbare toetsenbordfocusindicator: “Vorig artikel Eteck stapt over op nieuw betalingssysteem”.

#26 - Onvoldoende contrast van UI-elementen

Op deze pagina staat een formulier. De grijze rand (HEX #7299B0) op een lichtgrijze achtergrond (HEX #DDE5E9) heeft een laag contrast. De contrastverhouding is 2,4:1, terwijl deze minimaal 3,0:1 moet zijn.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/samenwerken-met-eteck/nieuwsupdates/.

#27 - Onvoldoende contrast van tekst

Op deze pagina heeft de roze tekst (HEX #DC0F80) “Inloggen”, “Account aanmaken” en “Meld je eerst aan” op een lichtgrijze achtergrond (HEX #F4F8FB) een lage contrastverhouding van 4,4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

#28 - Knop mist de juiste rol en naam

Op deze pagina staat in het hoofdmenu een knop met de naam van de gebruiker. Deze knop heeft geen correcte toegankelijke rol en status (open/gesloten).

#29 - Informatief icoon heeft onvoldoende tekstalternatief

Op deze pagina staat in het hoofdmenu een knop met de naam van de gebruiker en een pijltjesicoon dat aangeeft dat er extra inhoud geopend kan worden. Dit SVG-icoon heeft een title-element met onduidelijke tekst “Path”. Wanneer erop wordt geklikt, verandert het icoon en schakelt de functie van de knop naar open. De alternatieve tekst verandert echter niet mee.

#30 - Focusvolgorde niet logisch

Op deze pagina, in stap 2, krijgen de onzichtbare elementen achter na de knop “Account” de focus. Focus mag niet landen op elementen die niet zichtbaar zijn.

Op deze pagina, onder de kop “Wijzigingen”, komt de toetsenbordfocus na de link “Verhuizing doorgeven” terecht op een onzichtbaar interactief element.

#31 - Onvoldoende kleurcontrast van tekst

Op deze pagina heeft de roze tekst (HEX #E6007E) “Quickly and easily generate Lorem Ipsum placeholder text” in stap 2 op een grijze achtergrond (HEX #DDE5E9) een lage contrastverhouding van 3,5:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

#32 - Tekst in een andere taal heeft geen taalswitch

Op deze pagina staat in stap 2 de zin “Quickly and easily generate Lorem Ipsum placeholder text. [TEST] Terms of delivery” in een andere taal (Engels) zonder taalcode.

#33 - Onvoldoende kleurcontrast van tekst

Op deze pagina heeft de roze tekst (HEX #E6007E) “Zelfhulp individuele warmtepomp” op een grijze achtergrond (HEX #DDE5E9) een lage contrastverhouding van 3,5:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

#34 - Afbeelding zonder een alt-attribuut

Op deze pagina staat onder het kopje "Stap 1 - De werking van WKO" een afbeelding zonder alt-attribuut. Momenteel wordt de bestandsnaam voorgelezen. Voeg een leeg alt-attribuut toe aan deze afbeelding.

#35 - Koppen verkeerd toegepast

Op deze pagina, onder "Verwarmen", in een sectie met verborgen inhoud, zijn de elementen die verborgen inhoud openen en sluiten niet gemarkeerd als een koptekst.

Op deze pagina wordt een koptekst van niveau 3 onmiddellijk gevolgd door een andere koptekst van hetzelfde niveau. Zie "Welk merk warmtepomp heb je?" en "ITHO/DAALDEROP".

#36 - Lijst is niet gemarkeerd als opsomming

Op deze pagina is een lijst met links onder het kopje "ALPHA INNOTEC" visueel weergegeven als een lijst, maar is niet semantisch gemarkeerd met HTML-lijstelementen (

,
,
1. ).

#37 - Ondertitels ontbreken bij video

Op deze pagina staat een video met gesproken tekst, maar er ontbreken ondertitels.

#38 - Video is niet toegankelijk voor bezoekers die de video niet kunnen zien

Op deze pagina staat een video. De video bevat tekst en logo’s op verschillende momenten (bijvoorbeeld rond 0:01, 0:07 en andere). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. 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.

#39 - Citaten zijn niet correct gemarkeerd

Op deze pagina staan onder de koppen “Gebiedsontwikkeling”, “Nieuwbouw” en “Bestaande bouw en overnames” citaten die visueel als citaten zijn vormgegeven, maar deze informatie is niet in de code opgenomen.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/duurzame-warmte-en-verkoeling-voor-woningen-en-bedrijven/ bij “Om goed bezig te zijn hoef je dus eigenlijk niets te doen!”.

#40 - Alt-attribuut ontbreekt bij afbeeldingen

Op deze pagina staan onder de koppen “Gebiedsontwikkeling”, “Nieuwbouw” en “Bestaande bouw en overnames” afbeeldingen. Deze afbeeldingen zijn toegevoegd via een <img>-element, maar het alt-attribuut ontbreekt.

#41 - Kop is niet correct opgemaakt

Op deze pagina is de volgende tekst niet als kop opgemaakt: “Gebiedsontwikkeling”. Onder deze kop staat de tekst “6 gebiedsontwikkelingen 4 steden”. Ditzelfde probleem doet zich verderop voor bij de teksten “Projecten in nieuwbouw” en “Projecten in bestaande bouw”.

#42 - Interactieve elementen zijn niet toegankelijk via toetsenbord

Op deze pagina staat onder de koppen “Gebiedsontwikkeling”, “Nieuwbouw” en “Bestaande bouw en overnames” een carrousel met links. De links met artikelen in deze carrousel zijn niet toegankelijk via het toetsenbord.

#43 - Type content is niet aangegeven

Op deze pagina staat een iframe met het title-attribuut "Volg Eteck op LinkedIn!". Dit attribuut bevat geen informatie over het type iframe (video, podcast).

#44 - Dialoogvenster mist de toegankelijke naam

Op deze pagina staat een video die wordt geopend in een dialoogvenster. Dit dialoogvenster mist een toegankelijke naam, waardoor schermlezers de betekenis niet aan gebruikers kunnen overbrengen.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/duurzame-warmte-en-verkoeling-voor-woningen-en-bedrijven/. Het aria-labelledby attribuut is verkeerd toegepast.

#45 - Video is ontoegankelijk voor blinde bezoekers

Op deze pagina staat een stille instructievideo, die ontoegankelijk is voor blinde gebruikers. Voeg een trascript toe.

#46 - Leesvolgorde klopt niet

Op deze pagina is de volgorde van HTML-elementen incorrect. De kop “Mis niets van ons nieuws!” hoort bij de video, maar staat in de HTML onder de video.
Ditzelfde probleem doet zich voor op de pagina https://eteck-accept.fabriquehq.nl/nl/duurzame-warmte-en-verkoeling-voor-woningen-en-bedrijven/.

#47 - Relatie tussen elementen ontbreekt in de HTML

Op deze pagina staat onder de kop “Aanmeldformulier nieuwsbrief” een groep selectievakjes, voorafgegaan door de tekst "Hoe vernam je van onze nieuwsbrief?". Hoewel deze visueel gegroepeerd zijn, is deze relatie niet programmatisch gedefinieerd in de HTML.

#48 - Toetsenbordfocus onzichtbaar

Op deze pagina staat onder de kop “Aanmeldformulier nieuwsbrief” een groep selectievakjes. De toetsenbordfocus is niet zichtbaar op deze selectievakjes.

#49 - Informatie heeft een andere structuur in de HTML

Op deze pagina staat onder "Hoe kunnen we je helpen?" een tekstblok met 2 alinea’s dat onjuist is opgemaakt als één div-element.

#50 - Verlies van content bij inzoomen

Wanneer deze pagina wordt bekeken bij een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200% en 400% (320 CSS-pixels breed), zijn de knoppen onder de kop “Veelgestelde vragen” gedeeltelijk of volledig niet zichtbaar. Dit geldt bijvoorbeeld voor de knop “Betalingen”.

#51 - Video is ontoegankelijk voor mensen die de video niet kunnen horen

Op deze pagina staat een video met gesproken tekst, maar er ontbreken ondertitels.

#52 - Video is ontoegankelijk voor mensen die de video niet kunnen zien

Op deze pagina staat een video. De video bevat tekst en logo’s op verschillende momenten (bijvoorbeeld rond 0:01, 0:07 en andere). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. 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.

#53 - Informatieve afbeelding heeft geen tekstalternatief

Op alle pagina’s van dit pdf-document staat een logo als artifact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers.

#54 - Koppen zijn niet als kopteksten gemarkeerd

In dit pdf-document zijn alle koppen niet als koppen opgemaakt. Zie bijvoorbeeld op pagina 1 “Privacy statement”, “Contactgegevens:” en anderen.

#55 - Niet alle informatie uit PDF kan worden voorgelezen

Dit pdf-document is gedeeltelijk getagd. De volgende inhoud is niet getagd: op pagina 1, de inhoud boven de kop “Privacy statement”.

#56 - Andere structuur van informatie wordt voorgelezen

In dit pdf-document staat op pagina’s 1-2 een lijst met 9 items. In de tags staan echter twee afzonderlijke lijsten. Ditzelfde probleem doet zich voor op pagina’s 2-3.

#57 - Niet alle informatie uit PDF kan worden voorgelezen

Dit pdf-document is gedeeltelijk getagd. De volgende inhoud is niet getagd: op pagina 1, de inhoud boven de kop “Welke cookies gebruiken we?”.

#58 - Koppen zijn niet als kopteksten gemarkeerd

In dit pdf-document zijn er verschillende koppen die niet als koppen zijn opgemaakt. Zie bijvoorbeeld op pagina 1 “Functionele cookies”; op pagina 2 “Analytische cookies” en op pagina 3 “Third party cookies”.

In dit pdf-document zijn onder de koppen “Functionele cookies”, “Analytische cookies” en “Third party cookies” de tabelkoppen onjuist getagd. Bijvoorbeeld, de tabellen op pagina’s 1 en 2 bevatten een rij lege koppen zonder tekst. Ook wordt het <th>-element alleen gebruikt in de eerste kolom, zelfs voor tekst die geen kop is, zoals “cookiebar_policy”.
In de tabel op pagina 3 is de eerste rij koppen correct gemarkeerd. Deze tabel bevat echter ook koppen in de eerste kolom, wat onjuist is.