Systeem-audit digitale toegankelijkheid van website berichten.postex-accept.com

#1 - Het lang-attribuut ontbreekt

Op deze website ontbreekt het lang-attribuut op het html-element.

Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is.

Oplossing:

Zorg dat het lang-attribuut aanwezig is op het html-element, en dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.

#2 - Er is geen skiplink aanwezig

Op deze website ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.

Oplossing:

Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Zorg dat de skiplink:

• de eerste link op de pagina is;
• visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
• naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.

#3 - De website staat bezoekers niet toe om de afstand tussen teksten aan te passen

Op alle pagina’s staat de website bezoekers niet toe om de tekstafstand (regelafstand, woordafstand en letterafstand) te wijzigen met aangepaste instellingen of CSS. Wanneer aangepaste stijlen worden toegepast, blijft de afstand ongewijzigd, waardoor het niet mogelijk is de leesbaarheid te verbeteren volgens de WCAG-eisen.

Dit kan een probleem zijn voor bezoekers met dyslexie, cognitieve beperkingen of een beperkt gezichtsvermogen, die meer ruimte tussen regels en woorden nodig hebben om de tekst beter te kunnen waarnemen.

Oplossing:

Zorg ervoor dat de website toestaat om de tekstafstand aan te passen en dat alle inhoud leesbaar blijft. Op deze pagina lees je hoe je dit succescriterium kunt testen: https://properaccess.nl/sc-1-4-12-wat-betekent-tekstafstand/ .

#4 - Het attribuut aria-current wordt niet gebruikt zoals bedoeld, of de waarde ervan verandert niet correct

Op alle pagina’s zijn er knoppen met het attribuut aria-current waarvan de waarde “false” niet verandert of onjuist wordt gebruikt, bijvoorbeeld: In de header staat een taalknop die een submenu met taalkeuzes opent. Elke knop heeft het attribuut aria-current, maar de waarde verandert niet van “false” naar “true” bij de actieve knop.

Een soortgelijke situatie komt voor in het mobiele menu, bij de knoppen zoals “Home” en “Voorkeuren”. Op de pagina https://berichten.postex-accept.com/deliverable/2831918217239204526/payment/2831912414595780982 heeft de knop “Doorgaan” het attribuut aria-current. Dit attribuut wordt hier niet gebruikt zoals bedoeld.

Soortgelijke situaties komen ook voor op andere pagina’s. Het attribuut aria-current geeft aan schermlezers aan welk element momenteel “actief” of “huidig” is binnen een reeks gerelateerde elementen (zoals in menu’s, paginering en andere). Zorg ervoor dat het op de juis

Oplossing:

Zorg ervoor dat de waarde van het attribuut aria-current correct verandert; de waarde “false” moet op niet-huidige (niet-actieve) elementen staan en “true” op huidige (actieve) elementen. Verwijder het attribuut aria-current waar het niet wordt gebruikt zoals bedoeld.

#5 - Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op alle pagina’s staan in het head-element van de HTML-code de attributen maximum-scale=1 en user-scalable=no. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

#6 - Kop is niet gemarkeerd als koptekst

Op alle pagina’s staan er teksten die bedoeld zijn als koppen, maar in de code niet als kop zijn opgemaakt, bijvoorbeeld: In de header staat een knop met een pictogram “T” die een modaal dialoogvenster opent. In dit dialoogvenster zijn de volgende teksten niet als koppen opgemaakt: “Lettergrootte” en “Contrast”.

Op de pagina https://berichten.postex-accept.com/login is de tekst “Bekijk bericht” niet als kop opgemaakt. Hetzelfde probleem komt voor op dezelfde pagina met de tekst “Wat is een PTX-code?” in het dialoogvenster dat opent na het klikken op de knop “Wat is een PTX-code?”.

Op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651 komt dit voor bij de teksten “Betaalverzoek” en “Documenten”.

Op pagina https://berichten.postex-accept.com/privacy komt dit voor bij de teksten “Over deze dienst”, “Privacy en Voorwaarden” en “Vragen?”. Dit probleem komt ook op andere pagina’s voor.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

#7 - Contrast tussen focusindicator en achtergrond is te laag

Op verschillende pagina’s is het contrast tussen de indicator van de toetsenbordfocus en de achtergrond te laag.

Op pagina https://berichten.postex-accept.com/login staan in de header knoppen, bijvoorbeeld voor het selecteren van een taal. Deze knoppen hebben een grijze (#E0E0E0) toetsenbordfocus op een witte achtergrond. De contrastratio is 1,3:1.

Hetzelfde probleem doet zich voor in de footer bij de knop “Privacy en Voorwaarden”. De toetsenbordfocus is donkerblauw (#000F20) op een zwarte (#000000) achtergrond. De contrastratio is 1,1:1.

Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Hetzelfde probleem doet zich voor op

• de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651 bij de knop menu;
• op de pagina https://berichten.postex-accept.com/privacy bij de knop “<”;
• op de pagina https://berichten.postex-accept.com/deliverable/2831918217239204526/payment/2831912414595780982 bij de knop “<”;
• en op andere pagina’s.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

#8 - De melding dat een sessie gaat verlopen wordt niet automatisch voorgelezen door schermlezers

Op alle pagina’s verschijnt na enige tijd een melding over het einde van de sessie: “Uw sessie verloopt binnen 2 minuten en 15 seconden. U wordt dan automatisch uitgelogd. Klik hier om uw sessie te verlengen”. Deze melding is nu een statusbericht, omdat deze geen toetsenbordfocus krijgt. De melding wordt niet door schermlezers aangekondigd.

Statusberichten moeten automatisch door schermlezers worden voorgelezen, maar de code die dit mogelijk maakt, is nog niet toegevoegd.

Oplossing:

Je lost dit op door aria-live-attribute aan de melding toe te voegen. Andere oplossingen zijn mogelijk.

#9 - Het mechanisme om een sessie te verlengen is niet toegankelijk met het toetsenbord

Op alle pagina’s verschijnt na enige tijd een melding over het einde van de sessie: “Uw sessie verloopt binnen 2 minuten en 15 seconden. U wordt dan automatisch uitgelogd. Klik hier om uw sessie te verlengen”. Deze melding is niet toegankelijk met het toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve elementen ook met het toetsenbord te bedienen zijn.

#10 - Tekstalternatief van het logo is niet voldoende

Het logo bovenaan de website toont de volledige tekst “Postex QA”, maar de alt-tekst is alleen “beginscherm”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel, zodat bezoekers die het beeld niet kunnen zien, ook precies weten wat er staat.

Dit probleem heeft ook betrekking op succescriterium 2.4.4, omdat het doel van de link niet duidelijk is, en op succescriterium 2.5.3, omdat de zichtbare tekst niet voorkomt in de toegankelijke naam en de link daardoor niet met spraak kan worden aangestuurd.

Oplossing:

Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Postex QA”. Op deze pagina vind je een instructie hoe je zelf toegankelijke naam van deze link kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#11 - Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina opent de knop met het pictogram “T” in de header een dialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

#12 - Knop heeft geen toegankelijke naam

Op deze pagina staat in de header een knop met een pictogram “T” die een modaal dialoogvenster opent. In dit dialoogvenster hebben geen van de knoppen een toegankelijke naam, bijvoorbeeld “x”, “standaard” en andere. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.

Oplossing:

Voorzie deze knoppen van een toegankelijke naam, bijvoorbeeld door een beschrijvende knoptekst, een aria-label of een andere geschikte techniek te gebruiken.

Op deze pagina vind je een instructie hoe je zelf toegankelijke naam kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#13 - Toestand van de schakelknop is niet vastgelegd in de code

Op deze pagina staat in de header een knop met het pictogram “T” die een modaal dialoogvenster opent. In dit dialoogvenster zijn er knoppen met meerdere toestanden (bijvoorbeeld ingedrukt of niet ingedrukt), maar er is geen programmatische aanduiding van hun huidige toestand.

Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop. Dit probleem heeft ook betrekking op succescriterium 1.3.1, omdat informatie over de toestand van de knop alleen visueel wordt weergegeven en niet aanwezig is in de HTML-code.

Oplossing:

Zorg ervoor dat de toestand van de knop ook in de code wordt weergegeven. Dit kan bijvoorbeeld door het attribuut aria-pressed toe te voegen aan de actieve knop.

#14 - Een element met de ARIA-rol “menu” bevat niet de juiste onderliggende rollen

Op deze pagina staat in de header een taalkeuzeknop die een submenu met talen opent. Dit submenu heeft de rol “menu”. Dit element heeft echter niet de juiste onderliggende rollen, zoals “menuitem”.

Bovendien vereisen deze ARIA-rollen andere toetsenbordbedieningen. Je kunt ze toevoegen, maar dan moet je ook de bijbehorende toetsenbordfuncties configureren. Voor dit eenvoudige menu is dat allemaal niet nodig.

Oplossing:

Gebruik geen role="menu". De beste oplossing is om een geneste lijst (ul) te gebruiken. Het zou ook een optie zijn om voor een element met role=”combobox” te gaan, maar ook daar zitten specifieke voorwaarden aan verbonden. Voor meer informatie over wat er nodig is om een toepassing met role="combobox" te maken, zie het artikel https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

#15 - De betekenis van tekst gaat verloren door de volgorde in de code

Op deze pagina staat in de header een knop met het pictogram “T” die een modaal dialoogvenster opent. In dit dialoogvenster staan verschillende knoppen met daarbij een tekstueel label. In de code staan steeds eerst alle knoppen na elkaar, gevolgd door dan alle labels na elkaar. Door deze volgorde gaat betekenis verloren. Zorg ervoor dat het bij de knop horende label in de code er direct voor of na staat.

Op deze pagina staan ook de teksten “Betaalverzoek” en “Documenten”. Deze teksten zeggen iets over de content die eronder staat, maar in de volgorde van de code staan deze direct na elkaar. Daarna komt pas de content die er visueel bij hoort. Hierdoor gaat betekenis verloren.

Oplossing:

Zorg ervoor dat tekst die bij elkaar hoort, ook in de code direct na elkaar staat. Zo gaat er geen betekenis verloren voor gebruikers die de tekst met een schermlezer lezen.

#16 - Knop heeft niet de juiste toegankelijke rol

Op deze pagina staat onder “Betaalverzoek” een knop “Factuur garage november 2025” die extra inhoud opent en sluit. Deze knop heeft niet de juiste toegankelijke rol en toestand (open-dicht). Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.

Oplossing:

Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik het button-element. De toestand van de knop kan worden aangegeven door het attribuut aria-expanded aan de knop toe te voegen of door visueel verborgen tekst toe te voegen.

#17 - Knop kan niet bediend worden met het toetsenbord

Op deze pagina staat onder “Betaalverzoek” een knop “Factuur garage november 2025” die extra inhoud opent en sluit. Deze knop is niet met het toetsenbord te bedienen.

Oplossing:

Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

#18 - De afbeelding heeft onterecht de rol van knop

Op deze pagina staan onder de tekst “Documenten” twee PDF-documenten die bestaan uit een afbeelding dat aangeeft dat het een PDF is, een knop met zichtbare tekst en een knop met een downloadpictogram. De afbeelding met “PDF” heeft echter de rol “button”, wat onjuist is, omdat de afbeelding niet als knop functioneert. Dit kan verwarrend zijn voor bezoekers, vooral voor gebruikers van schermlezers of toetsenbordnavigatie. Daarnaast zijn nu verschillende knoppen geplaatst binnen een andere knop, “Document Downloaden.” De rol “button” is hier niet geschikt; gebruik in dit geval een andere rol voor groepering, zoals “group.”

Oplossing:

Verwijder de rol “button” van de afbeelding en pas de rol van de overkoepelende knop aan.

#19 - Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina opent de knop “Waarmee kunnen we u helpen?” een dialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

#20 - Nieuwe chatberichten worden niet automatisch voorgelezen door schermlezers

Op deze pagina staat een knop “Waarmee kunnen we u helpen?” die een dialoogvenster opent met vraagknoppen. Wanneer op een vraag wordt geklikt, wordt het antwoord geladen in de vorm van een chat. De chatfunctie toont nieuwe berichten zonder deze toetsenbordfocus te geven of als statusberichten te markeren. Hierdoor kondigen schermlezers nieuwe berichten niet automatisch aan. Dat moet wel.

Oplossing:

Gebruik bijvoorbeeld een aria-live-attribuut of voeg role="status" toe aan de chatberichten.

#21 - Toetsenbordfocus komt niet in dialoogvenster terecht

Op deze pagina opent de knop “Waarmee kunnen we u helpen?” een modaal dialoogvenster. De toetsenbordfocus wordt echter niet automatisch in het dialoogvenster geplaatst wanneer het wordt geopend. Ook kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende pagina verplaatsen.

Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster actief is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Oplossing:

Zorg dat de focusvolgorde logisch blijft, door deze naar de nieuwe inhoud te verplaatsen.

Houd de focus ook binnen het venster totdat de bezoeker op de sluitknop of de ESC-toets drukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten wanneer de focus verloren gaat.

#22 - Contrast tussen focusindicator en achtergrond is te laag

Op deze pagina staan onder de tekst “Documenten” PDF-documenten. Wanneer deze PDF’s toetsenbordfocus krijgen, is deze zichtbaar als een lichtgrijze (#E0E0E0) focusrand. De contrastratio tussen de focusrand en de witte achtergrond is 1,3:1.

Hetzelfde probleem doet zich op dezelfde pagina voor bij de knop “Waarmee kunnen we u helpen?” en binnen het dialoogvenster bij knoppen zoals “Kan je de inhoud van deze documenten toelichten?” en andere.

Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Hetzelfde probleem doet zich voor op

• de pagina https://berichten.postex-accept.com/deliverable/2831918217239204526/payment/2831912414595780982 bij de knop “Waarmee kunnen we u helpen?” en binnen het dialoogvenster bij de knoppen;
• op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/9df5e540-0adf-4bb2-8030-f027bb7e58a1/summary bij de knop “Nederlands” en de schakelaar “Makkelijke taal”;
• op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary bij de knop “Nederlands” en de schakelaar “Makkelijke taal”; en op andere pagina’s.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

#23 - Alleen kleurverschil bij toetsenbordfocus, met te laag contrast

Op deze pagina staat een knop “Waarmee kunnen we u helpen?” die een dialoogvenster opent. In dit dialoogvenster wordt op de knoppen een aangepaste toetsenbordfocusindicator gebruikt, bijvoorbeeld bij “Kan je de inhoud van deze documenten toelichten?”, zichtbaar als een verandering van de achtergrondkleur van wit naar grijs.

Het gebruik van alleen kleur om focus aan te geven is hier echter 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. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.

Hetzelfde probleem doet zich voor op

• de pagina https://berichten.postex-accept.com/deliverable/2831918217239204526/payment/2831912414595780982;
• op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/9df5e540-0adf-4bb2-8030-f027bb7e58a1/summary bij de knop “Nederlands”;
• op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary bij de knop “Nederlands”; en op andere pagina’s.

Oplossing:

Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

#24 - Contrast tussen focusindicator en achtergrond is te laag

Op deze pagina staan knoppen met download- en “i”-pictogrammen. Wanneer deze knoppen toetsenbordfocus krijgen, is deze zichtbaar als een lichtblauwe (#E5EDF6) focusrand. De contrastratio tussen de focusrand en de witte achtergrond is 1,2:1.

Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

#25 - De accordion heeft geen koppen of de rol van kop is overschreven

Op deze pagina staat onderaan een sectie met verborgen inhoud “Waarmee kunnen we u helpen?”. De elementen die de verborgen inhoud openen en sluiten, zijn niet als koppen opgemaakt. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Oplossing:

Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. Meer informatie over dit element staat op deze pagina: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

#26 - Invoerveld heeft geen toegankelijke naam

Op deze pagina heeft het invoerveld onder de tekst “Vul hier uw PTX-code in” geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Dit veroorzaakt ook een probleem onder succescriterium 2.5.3, omdat de zichtbare tekst geen onderdeel is van de toegankelijkheidsnaam.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen met ‘for’ en ‘id’. Zorg ervoor dat de zichtbare tekst die bij het label staat, in dit geval “Vul hier uw PTX-code in”, onderdeel is van die toegankelijke naam. Op deze pagina vind je een instructie hoe je zelf toegankelijke naam kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#27 - De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat onder de tekst “Vul hier uw PTX-code in” een invoerveld. De contrastratio tussen de grijze rand (#C8D1E1) en de lichtgrijze achtergrond van de pagina (#F1F0F5) is 1,4:1.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

#28 - Dialoogvenster heeft niet de juiste rol

Op deze pagina opent de knop “Wat is een PTX-code?” een modaal dialoogvenster. De schermlezer herkent dit venster niet als een dialoogvenster. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft.

Oplossing:

Voeg een role="dialog" toe het dialoogvenster toe.

#29 - Alleen kleurverschil bij toetsenbordfocus, met te laag contrast

Op de knop “Controleer code” wordt een aangepaste toetsenbordfocusindicator gebruikt, zichtbaar als een verandering van blauw naar lichtblauw op een grijze achtergrond. Het gebruik van alleen kleur om focus aan te geven is hier echter 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. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.

Oplossing:

Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

#30 - Contrast tussen focusindicator en achtergrond is te laag

Op deze pagina staat de knop “Wat is een PTX-code?”. Deze knop heeft een lichtblauwe (#D8E1EF) toetsenbordfocus op een lichtgrijze (#F1F0F5) achtergrond. De contrastratio is 1,2:1. Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

#31 - 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%, zijn het invoerveld en de knoppen “Controleer code” en “Wat is een PTX-code?” niet zichtbaar en niet bedienbaar.

Oplossing:

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

#32 - PDF-document heeft geen titel

Dit pdf-document heeft geen titel ingesteld 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 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: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

#33 - Structuur van pdf-document is niet in codes vastgelegd

Dit pdf-document bevat geen codering, 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.

#34 - De taal is niet ingesteld in de metadata

In de metadata van dit pdf-document is de taal niet ingesteld. 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.

#35 - Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat blauwe tekst (#407FD5) op een witte achtergrond, bijvoorbeeld “Burgemeester Jamessingel 41”. De contrastratio is te laag: 4,0:1.

Oplossing:

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

#36 - De taal is verkeerd ingesteld

In de metadata van dit pdf-document is de taal ingesteld op “Engels” (en).

Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker.

Oplossing:

Verander de ingestelde taal van het document naar Nederlands.

#37 - Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn alle kopteksten niet als koppen opgemaakt. Zie bijvoorbeeld “Postex QA”, “Onderwerp: Voorbereiding toegankelijkheidsonderzoek transactiepagina Postex QA” en andere. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

#38 - Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina staat onder de tekst “Factuur huur garage november 2025” een lijst met vijf items, maar deze heeft geen correcte opmaak.

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. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary.

Oplossing:

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

img-element heeft geen alt-attribuut

Op deze pagina staat naast de tekst “Factuur huur garage november 2025” een decoratieve pijlafbeelding. Deze afbeelding is geplaatst als flt-semantics-element met daarop role=”image”. Hulpsoftware leest nu wel voor dat er een afbeelding staat, maar vervolgens ontbreekt een tekstalternatief. Gebruik voor decoratieve afbeeldingen niet role=”image”.

Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg.

#39 - De schakelaar heeft geen toegankelijke naam

Op deze pagina staat een schakelaar “Makkelijke taal” zonder toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de schakelaar is. Hiermee voldoet de schakelaar niet aan succescriterium 4.1.2 vanwege het ontbreken van een toegankelijke naam, maar ook niet aan 2.5.3, doordat de zichtbare tekst bij de schakelaar geen onderdeel is van de toegankelijke naam. Dit levert problemen op bij gebruikers die spraakbesturing gebruiken. Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary.

Oplossing:

Voorzie deze schakelaar van een toegankelijke naam, bijvoorbeeld door een beschrijvende schakelaartitel, een aria-label of een andere geschikte techniek te gebruiken. Zorg ervoor dat deze de zichtbare tekst bij de schakelaar bevat. Op deze pagina vind je een instructie hoe je zelf toegankelijke naam kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#40 - De schakelaar is niet met het toetsenbord te bedienen

Op deze pagina is de schakelaar “Makkelijke taal” niet met het toetsenbord te bedienen.

Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/deliverable/2831918232045097651/document/a02416c1-1cbf-4d82-9e0b-e317e16bccd3/summary.

Oplossing:

Zorg dat de schakelaar zowel met de spatiebalk als de Enter-toets bediend kan worden.

#41 - Placeholder-tekst is gebruikt als label voor invoerveld

Op deze pagina is er een knop voor het selecteren van een landcode voor telefoonnummers, die een dialoogvenster opent met een zoekveld. Dit zoekveld met de tijdelijke tekst “Zoeken op landnaam of landnummer” heeft geen permanent label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen.

Oplossing:

Voeg een label toe in de vorm van een tekst of een icoon.

#42 - Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina is er een knop voor het selecteren van een landcode voor telefoonnummers, die een dialoogvenster opent. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

#43 - Het invoerveld met zoeksuggesties heeft niet de juiste rol

Op deze pagina is er een knop voor het selecteren van een landcode voor telefoonnummers, die een dialoogvenster opent met een zoekveld. Dit zoekveld geeft tijdens het typen suggesties weer in een keuzelijst en functioneert als een combobox. De vereiste ARIA-rol ontbreekt echter.

Oplossing:

Om deze zoekbalk toegankelijk te maken, voeg je het volgende toe:

• role="combobox": voeg dit attribuut toe aan het invoerveld om aan te geven dat het een keuzelijst is.
• aria-expanded: voeg dit attribuut toe aan het invoerveld om de status van de suggestielijst aan te geven. Stel aria-expanded="true" in als de lijst zichtbaar is en aria-expanded="false" als deze verborgen is.
• er zijn meer attributen die nodig zijn om dit element toegankelijk te maken. Zie https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Deze attributen helpen hulpsoftware om de zoekbalk correct te herkennen en te gebruiken als een keuzelijst.

#44 - Het selectievakje heeft geen toegankelijke naam

Op deze pagina staat een selectievakje “Makkelijke taal” zonder toegankelijke naam.

Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van het selectievakje.

Oplossing:

Voorzie dit selectievakje van een toegankelijke naam, bijvoorbeeld door een koppeling te maken tussen de tekst die erbij staat, een aria-label of een andere geschikte techniek te gebruiken.

Op deze pagina vind je een instructie hoe je zelf toegankelijke naam kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#45 - Het selectievakje is niet met het toetsenbord te bedienen

Op deze pagina is het selectievakje “Makkelijke taal” niet met het toetsenbord te bedienen.

Oplossing:

Zorg dat de selectievakje zowel met de spatiebalk als de Enter-toets bediend kan worden.

#46 - Het selecteren van selectievakje zorgt zonder waarschuwing voor een contextwijziging

Op deze pagina veroorzaakt interactie met het selectievakje “SMS-berichten ontvangen” een aanzienlijke contextwijziging, doordat er een nieuwe pagina wordt geladen en de focus naar een andere locatie verplaatst.

Oplossing:

Zorg dat de bezoeker van tevoren wordt gewaarschuwd over deze verandering of zorg ervoor dat een bezoeker de keuze eerst kan bevestigen, voordat er een nieuwe pagina wordt geladen.

#47 - Invoerveld heeft geen toegankelijke naam

Op deze pagina heeft het invoerveld “Uw e-mailadres” geen toegankelijke naam.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

Op deze pagina vind je een instructie hoe je zelf toegankelijke naam kunt testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/ .

#48 - Invoerveld voor persoonlijke gegevens heeft geen correct autocomplete-attribuut

Op deze pagina staat een invoerveld met het label “Uw e-mailadres”. Hierbij wordt onterecht de waarde autocomplete=”off” gebruikt.

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. Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/preferences/phone.

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.

#49 - De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat het invoerveld “Uw e-mailadres”. De contrastratio tussen de lichtblauwe rand (#B7CBE2) en de witte achtergrond van de pagina is 1,7:1.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

#50 - Foutmelding is een instructie in plaats van een uitleg over de fout

Op deze pagina toont het formulier de melding “Geef een geldig e-mail adres op”. Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zich bevindt. Vaak bevat de melding een ontkenning. Een voorbeeld van een goede foutmelding is: “Het veld “Uw e-mailadres” is niet (goed) ingevuld”.

Hetzelfde probleem doet zich voor op de pagina https://berichten.postex-accept.com/preferences/phone met de melding “Vul een geldig telefoonnummer in”.

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.