Advies- en auditbureau in digitale toegankelijkheid | WEB: properaccess.nl | TEL: 06-28742275 | MAIL: contact@properaccess.nl
Onderzoek digitale toegankelijkheid van website https://mijnbin.nl/home
Samenvatting
Wij hebben de website https://mijnbin.nl/home onderzocht tussen 1 en 7 februari 2025. Op dit moment zijn 33 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 22 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek zijn 55 succescriteria onderzocht.
Julia F van Proper Access; Julia T van Proper Access
In opdracht van
gemeente 's-Hertogenbosch
Leverancier techniek
geen
Conformiteitsdoel
WCAG 2.2, Level AA
Methodologie
WCAG-EM
Datum
8 februari 2025
Scope van het onderzoek
Alle pagina's op de website https://mijnbin.nl/home
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 131
Google Chrome, versie 130
Apple Safari, versie 17
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
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 website of 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 website op dit moment voldoet aan WCAG 2.2, 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. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website 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.
De hoofdtaal op de website Home is Nederlands, maar de waarde van het lang-attribuut is ingesteld op "en".
Zorg dat de primaire taal van een pagina aangegeven is met een taalcode via het lang-attribuut op het html-element, bijvoorbeeld lang="en" of lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen. Stel de taalcode correct in voor elke pagina.
Voldoet niet aan SC 3.1.1 - Language of Page
Tekst heeft niet genoeg contrast
Op alle pagina's van de website wordt de kleurencombinatie groen en wit gebruikt voor teksten en iconen. Het contrast tussen deze kleuren is 1,8:1.
Als de tekst minder dan 24px is, moet het contrast minstens 4,5:1 zijn. Als de tekst meer dan 24px is, moet het contrast minstens 3,0:1 zijn. Hieronder staan enkele voorbeelden, maar het komt op nog meer plekken voor.
In het navigatiemenu in de header heeft de linktekst een groene kleur op een witte achtergrond als de link actief is of toetsenbordfocus krijgt. Het kleurcontrast moet ten minste 4,5:1 zijn.
Op de homepage Home staat onder het kopje "Word lid van BIN" de tekst "Als wijkbewoner nodigen wij u uit om lid te worden van BIN. Lees meer". Het kleurcontrast moet minimaal 4,5:1 zijn.
Op pagina's Lid worden en Aanmelden staat een knop met de tekst "Lid Worden" met witte tekst op een groene achtergrond. Het kleurcontrast moet minimaal 3,0:1 zijn.
Op de pagina Aanmelden heeft de knop met de tekst "Verzenden" witte tekst op een groene achtergrond. Het kleurcontrast moet ten minste 3,0:1 zijn.
Als een bezoeker is ingelogd, staat op alle pagina's een witte tekst op een groene achtergrond. Bijvoorbeeld op homepagina. In de header staan witte links op een groene achtergrond in het navigatiemenu. Op de homepage gaat het bijvoorbeeld om de teksten: "Nieuws" en "Nieuwe Berichten". Ook op pagina Uitnodiging staat een witte tekst op een groene achtergrond: "Uitnodiging buurttent: incident Wibauthof" en "Maaspoort Wijk BOA | 4 maanden geleden".
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Interactieve elementen hebben niet genoeg contrast
Bij pictogrammen, iconen of andere belangrijke visuele informatie moet het kleurcontrast ten minste 3,0:1 zijn ten opzichte van de achtergrond. Zo kunnen mensen met matig slecht zicht ze ook zien.
Als een bezoeker is ingelogd, bevat de header witte iconen op een groene achtergrond in het navigatiemenu: het profiel-icoon en het uitlog-icoon.
Als de website wordt bekeken op kleine schermen en de bezoeker is ingelogd, staat in de header een menuknop met drie witte horizontale lijnen op een groene achtergrond. Als een bezoeker is ingelogd staan op de pagina's Mijn BIN en Berichten tabellen met icoontjes van klokjes.
Voldoet niet aan SC 1.4.11 - Non-text Contrast
Paginatitel verandert niet als de content verandert
De inhoud van pagina’s verandert op deze website dynamisch, terwijl de URL hetzelfde blijft. Bij zo’n verandering moet de tekst in het title-element ook aangepast worden. Een blinde bezoeker laat het title-element namelijk als eerste voorlezen. Daarom moet dit element tekst bevatten die de actuele inhoud van de pagina duidelijk beschrijft. Zorg dat de tekst in het title-element mee verandert op het moment dat de inhoud van de pagina dynamisch wordt gewijzigd.
Voldoet niet aan SC 2.4.2 - Page Titled
De header
Situatie: bezoeker is niet ingelogd
Alt-tekst van het logo bevat niet alle tekst
In de header van de website staat een logo. De volledige tekst van het logo is "BIN Buurt Informatie Netwerk". De alternatieve tekst is “Logo BIN”.
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
Voldoet niet aan SC 1.1.1 - Non-text content
Linkdoel is niet duidelijk
Het logo in de header werkt als een link. De toegankelijke naam van de link is "Logo BIN". De bestemming van de link is niet duidelijk.
Hierdoor weten gebruikers van hulpsoftware niet naar welke pagina of inhoud de link leidt. Dit kan worden opgelost door een alt-tekst aan de logo-afbeelding toe te voegen, of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label.
Voldoet niet aan SC 2.4.4 - Link purpose
Toegankelijke naam is niet volledig
De toegankelijke naam van de link met het logo bevat niet de volledige tekst van het logo: het gedeelte "Buurt Informatie Netwerk" ontbreekt.
De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is, voorkomt in de toegankelijke naam, het liefst vooraan.
Voldoet niet aan SC 2.5.3 - Label in Name
Visuele structuur van de navigatie is anders in de HTML
In de header staat een navigatiemenu met links naar de pagina's van de website. In de HTML-structuur zijn deze links correct opgemaakt als een lijst. De verticale scheidingslijnen tussen de links zijn echter ook gemarkeerd als afzonderlijke lijstitems. Hierdoor lijkt het menu visueel 5 items te bevatten, maar bevat de onderliggende HTML 9 items. Dit verschil kan verwarring veroorzaken, vooral voor bezoekers met een schermlezer, omdat het onjuiste aantal items wordt aangekondigd. De menustructuur wordt dus niet op de correcte manier gepresenteerd aan bezoekers die een schermlezer gebruiken.
Hetzelfde probleem komt voor bij de links in het navigatiemenu als een bezoeker is ingelogd.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Huidige link is alleen visueel te herkennen
In de header is de link in het navigatiemenu van de huidige pagina alleen visueel anders.
Bezoekers die de pagina laten voorlezen, hebben geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link. Hetzelfde probleem komt voor bij de links in het navigatiemenu als de bezoeker is ingelogd.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Toetsenbordfocus is niet zichtbaar
In de header is de toetsenbordfocus niet zichtbaar op de link met het logo. Er wordt geen aangepast alternatief geboden.
Hetzelfde probleem komt voor in de header als een bezoeker is ingelogd. De toetsenbordfocus is op alle elementen in de header niet zichtbaar.
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.
Dit probleem komt voor op alle pagina's van de website, inclusief de dialoogvensters op de pagina's.
Op de startpagina Home is de toetsenbordfocus niet zichtbaar op de volgende elementen: links onder de carrousel, bijvoorbeeld "BIN, wat is dat? Het Buurt Informatie Netwerk is een samenwerking van bewoners, politie en gemeente. Lees meer".
Op de pagina's Word lid van BIN en Aanmeldinfo is de toetsenbordfocus niet zichtbaar op de knop "Lid Worden". Op de pagina Aanmeldinfo is de toetsenbordfocus niet zichtbaar op de knop "Verzenden". Als de bezoeker is ingelogd op de pagina Mijn BIN is de focus niet zichtbaar op de interactieve elementen van de tabellen: "Alle Berichten", "Alle Reacties", "Meer Nieuws" en ook op de links "Lees hele bericht" die verschijnen als de bezoeker klikt op een rij in de tabel "Nieuwe Berichten". Als de bezoeker is ingelogd op de pagina Berichten is de focus niet zichtbaar op de knop "Filter" en op de knoppen in het paneel dat wordt weergegeven als de knop "Filter" is geactiveerd: "opslaan" en "annuleren". In dit paneel met filtercategorieën op de actieve knop is bijvoorbeeld "Bevat Tekst" niet zichtbaar.
Op de pagina My profile staat, als een bezoeker is ingelogd, een tabblad met de tekst "Mijn wijken". Als de bezoeker op de knop "Opslaan" in dit tabblad klikt, verschijnt een dialoogvenster. De focus is niet zichtbaar op de knoppen: "Nee" en "Ja".
Dit komt ook voor bij andere pagina's en dialoogvensters.
Voldoet niet aan SC 2.4.7 - Focus Visible
Interactieve elementen hebben niet genoeg contrast
Als de website op kleine schermen wordt bekeken, wordt in de header een knop weergegeven met drie horizontale lijnen. De witte lijnen (hexkleur #FFFFFF) op de grijze achtergrond (hexkleur #BFBFBF) hebben een kleurcontrast van 1,8:1. Dit moet minstens 3,0:1 zijn.
Voldoet niet aan SC 1.4.11 - Non-text Contrast
ARIA-attribuut is niet correct gebruikt
Als de website op kleine schermen wordt bekeken, wordt in de header het aria-expanded-attribuut gebruikt op een div-element dat het verborgen navigatiemenu opent. Het aria-expanded-attribuut is echter niet toegestaan op dit HTML-element. Raadpleeg de pagina ARIA-expanded voor meer informatie.
Dit probleem is zowel aanwezig als de bezoeker een gast is, als wanneer de bezoeker is ingelogd.
Hetzelfde probleem komt voor op de pagina Berichten als de bezoeker is ingelogd. Het aria-expanded-attribuut is toegevoegd aan de div die om het paneel met filters staat dat kan worden geopend door op de knop "Filter" te klikken.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Situatie: bezoeker is ingelogd
Bestemming van de link is onduidelijk
In de header staat een link met de tekst "Overzicht". Deze link opent de homepage. Deze linktekst, "Overzicht", beschrijft niet duidelijk wat de bestemming is van de link.
Voldoet niet aan SC 2.4.4 - Link Purpose (In Context)
In het navigatiemenu in de header staat een link met een profiel-icoon. Deze link bevat tekst die niet bedoeld is om door mensen te worden gelezen: symbolen zoals streepjes, underscores en andere karakters. Deze tekens mogen niet in de linktekst staan. Een beschrijving voor de link wordt gegeven met behulp van het title-attribuut: "Mijn instellingen." Dit is niet genoeg: de link moet een toegankelijke naam hebben die duidelijk de bestemming van de link aangeeft. Het title-attribuut kan aanvullende informatie geven. De opgegeven beschrijving "Mijn instellingen" kan misleidend zijn omdat de link eigenlijk naar de profielpagina leidt: "Mijn Account".
De onleesbare karakters maken het doel van de link onduidelijk. Verwijder ze en herschrijf de tekst.
Hetzelfde probleem komt voor bij de afmeldlink. De toegankelijke naam van deze link bevat ook symbolen of karakters die niet bedoeld zijn om door mensen te worden gelezen.
Voldoet niet aan SC 2.4.4 - Link Purpose (In Context)
Er is geen tekstalternatief
Omdat afbeeldingen de enige inhoud van deze links zijn, worden ze als informatief beschouwd. Deze afbeeldingen zijn echter geïmplementeerd als achtergrondafbeeldingen en er is geen tekstueel alternatief aanwezig om de inhoud van de links over te brengen.
Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element plaatsen en de informatie in de alt-tekst zetten.
Voldoet niet aan SC 1.1.1 - Non-text Content
Focusvolgorde klopt niet
Als een bezoeker een van de links in de header selecteert, gaat de toetsenbordfocus niet naar de geopende pagina. In plaats daarvan blijft deze in de header staan en moet de bezoeker door het navigatiemenu navigeren om bij de inhoud van de pagina te komen. Dit is niet logisch.
Zorg ervoor dat de focus onmiddellijk naar de inhoud van de geselecteerde pagina gaat op het moment dat bezoeker de bijbehorende link in het navigatiemenu heeft geselecteerd.
Voldoet niet aan SC 2.4.3 - Focus Order
De footer
Tekst heeft niet genoeg contrast
In de footer staat een grijze tekst (hexkleur #999999) op een lichtgrijze achtergrond (hexkleur #EFF3F6). Het kleurcontrast is 2,6:1. Dit moet minstens 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Link is niet met toetsenbord te bedienen
In de footer staat een link met de tekst "disclaimer". Deze link kan niet met het toetsenbord worden bediend.
Zorg dat alle interactieve elementen met het toetsenbord te bedienen zijn.
Voldoet niet aan SC 2.1.1 - Keyboard
Dit probleem komt ook op andere pagina's voor. In dit rapport zijn voorbeelden opgenomen in de beschrijvingen van de desbetreffende pagina's, maar het probleem kan op nog meer plekken voorkomen.
De cookie-banner
De eerste keer dat een bezoeker de website bezoekt, verschijnt er een dialoogvenster voor cookie-instellingen.
Naam en rol van een interactief element is niet aangegeven
Het dialoogvenster voor cookie-instellingen heeft geen toegankelijke naam. Bezoekers met een schermlezer kunnen het doel niet onderscheiden van elementen met role="dialog" die geen toegankelijke naam hebben.
Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.
Dit probleem komt ook voor bij andere dialoogvensters op meerdere pagina's op de website. De volgende voorbeelden zijn niet volledig.
Als een bezoeker is ingelogd op pagina My profile, bevat het tabblad "Mijn wijken" subsecties. Er is een knop "Opslaan" die een dialoogvenster activeert. In het tabblad "Contactgegevens" zijn twee knoppen die dialoogvensters openen: "Wijzig Wachtwoord" en "BIN-account verwijderen". Al deze dialoogvensters hebben geen toegankelijke naam. Op de pagina Zwembadjes staan twee knoppen als een reactie is toegevoegd aan het bericht: met een potlood-icoon en met een prullenbak-icoon. Deze knoppen openen dialoogvensters die geen toegankelijke naam hebben. Op de pagina Uitnodiging staat een miniatuur waarmee een dialoogvenster wordt geopend. Ook dit dialoogvenster heeft geen toegankelijke naam.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Koptekst is niet als kop gemarkeerd
In het dialoogvenster voor cookie-instellingen staat een tekst die niet is gemarkeerd als koptekst: “Cookie beleid”.
Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.
Dit probleem komt ook voor bij andere dialoogvensters op meerdere pagina's op de website.
Als een bezoeker is ingelogd op de pagina My profile bijvoorbeeld, bevat het tabblad "Mijn wijken" subsecties. Er is een knop "Opslaan" die een dialoogvenster activeert. De tekst "Weet u het zeker?" in dit dialoogvenster is niet gemarkeerd als kop. Dit komt ook voor bij andere dialoogvensters.
In het dialoogvenster voor cookie-instellingen staat een knop "Nee". De tekst van de knop is wit (hexkleur #FFFFFF). De achtergrond is blauw (hexkleur #738FAC). Het contrast is 3,4:1. Dit moet minstens 4,5:1 zijn.
Dit probleem komt ook voor bij andere dialoogvensters op meerdere pagina's op de website. Bijvoorbeeld op de pagina My profile, als een bezoeker is ingelogd. Als de bezoeker klikt op "Contactgegevens" en vervolgens op "Wijzig Wachtwoord", wordt een dialoogvenster weergegeven. Het gaat hier om de knop "Annuleren". Dit komt ook voor bij andere dialoogvensters.
Als een bezoeker is ingelogd staat op de pagina's Berichten en Reacties een knop met de tekst "Filter", waarmee een paneel met filtercategorieën wordt geopend. In dit paneel staat een knop met de tekst "annuleren". Deze knop gebruikt dezelfde kleurencombinatie.
Er is geen skiplink op de homepagina. 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. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers 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. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.
Voldoet niet aan SC 2.4.1 - Blokken omzeilen
Decoratieve afbeelding heeft alternatieve tekst
Op de homepagina staat een carrousel. Deze carrousel bevat een decoratieve afbeelding met tekstalternatief "Buurt Informatie Netwerk (BIN) Golf".
Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").
Hetzelfde probleem komt ook voor op andere pagina's. Op de pagina Word lid van BIN bijvoorbeeld, heeft de decoratieve afbeelding met kinderen het tekstalternatief "Buurt Informatie Netwerk Word lid van BIN". Op de pagina https://mijnbin.nl/bin heeft de decoratieve afbeelding van een vrouw die rent, tekstalternatief "Buurt Informatie Netwerk (BIN) Wat is dat?". Controleer ook de andere pagina's.
Voldoet niet aan SC 1.1.1 - Non-text Content
Informatieve afbeeldingen hebben geen alt-tekst
Op de homepagina bevat de carrousel informatieve afbeeldingen. Daarom hebben ze een goed tekstalternatief nodig om te beschrijven wat er op de afbeelding staat. Het tekstalternatief dat op deze afbeeldingen is toegepast, is echter niet zinvol en beschrijft de afbeeldingen niet. Bijvoorbeeld: op de afbeelding van een man en een vrouw die lopen en glimlachen, is het tekstalternatief “Buurt Informatie Netwerk (BIN) Carousel Img 1”.
Voldoet niet aan SC 1.1.1 - Non-text Content
Tekst is niet gemarkeerd als kop
Op de homepagina staat in de carrousel een tekst die niet is gemarkeerd als kop: “Samen voor veilig Doe ook mee!”.
Markeer koppen altijd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.
Hetzelfde probleem komt voor op andere pagina's.
Op de pagina Registreren is de tekst "Lid Worden" bijvoorbeeld niet gemarkeerd als kop.
Op pagina Word lid van BIN staat de tekst "Wachtwoord vergeten" die niet is gemarkeerd als een koptekst.
Op pagina Registreren staat in het formulier de tekst "Vereisten". Deze tekst fungeert als een koptekst, maar is niet als kop gemarkeerd.
Als een bezoeker is aangemeld op de pagina Uitnodiging
wordt de volgende koptekst niet gemarkeerd als koptekst: "Nieuwe reactie".
Controleer ook andere pagina's.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Tekst heeft onvoldoende contrast
Op de homepagina staat in de carrousel witte tekst (hexcode #FFFFFF) "Samen voor veilig Doe ook mee!" als overlay over de afbeeldingen. Hierdoor staat deze tekst op achtergronden met verschillende kleuren. Op sommige lichte plekken op de afbeeldingen onder de tekst wordt het contrast tussen de witte tekst en de afbeelding eronder bijna 1,1:0.
Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.
Op de homepagina staat onder het kopje "Aanmelden" een witte tekst (hexcode #FFFFFF) op een grijze achtergrond (hexcode #BFBFF) met een contrast van 1,8:1. Dit is de tekst "Samen voor veilig. Doe ook mee! Lees meer". Het contrast moet minstens 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Rol en staat van de knoppen ontbreekt
Op de homepagina hebben de knoppen om te schakelen tussen de afbeeldingen in de carrousel geen juiste rol om hun functie aan te geven.
Bovendien ziet de actieve knop op de carrousel er anders uit dan de knoppen die niet actief zijn. Deze informatie ontbreekt in de HTML.
Een bezoeker met een schermlezer heeft geen toegang tot deze informatie. Dit kan worden opgelost met ARIA-technieken of een verborgen tekst.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Informatie wordt alleen met kleur overgedragen
Daarnaast heeft de actieve knop een witte achtergrond. Er wordt alleen kleur gebruikt om informatie over de actieve knop te geven. Alleen mensen die de kleuren kunnen zien en ze van elkaar kunnen onderscheiden, nemen deze informatie waar.
Voldoet niet aan SC 1.4.1 - Use of Color
Knoppen hebben niet genoeg contrast
Ook hebben deze knoppen een te laag contrast ten opzichte van de achtergrond. Zorg ervoor dat het contrast minstens 3,0:1 is.
Voldoet niet aan SC 1.4.11 - Non-text Contrast
Knoppen zijn niet met toetsenbord te bedienen
De knoppen om te schakelen tussen de afbeeldingen kunnen niet worden bediend met het toetsenbord.
Voldoet niet aan SC 2.1.1 - Keyboard
Knoppen zijn niet groot genoeg
De knoppen om te schakelen tussen de afbeeldingen in de carrousel hebben niet genoeg hoogte en breedte. Het totaal van de hoogte plus de breedte plus de ruimte eromheen is minder 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.
Op deze pagina is de volgorde van de toetsenbordfocus niet logisch. Als bezoekers door de website navigeren met de Tab-toets en de link "Lid Worden" selecteren in het navigatiemenu in de header, worden ze correct doorgestuurd naar de pagina "Lid Worden". Als de bezoekers echter verder navigeren met de Tab-toets, is het eerste element dat focus krijgt de knop "Lid Worden". Dit is niet logisch en kan verwarrend zijn voor bezoekers met schermlezers, omdat op alle andere pagina's die beschikbaar zijn voor een niet ingelogde bezoeker de focusvolgorde vanaf het begin begint.
Op deze pagina staan tabellen. Elke tabel bevat een interactief element. Dit zijn de volgende elementen: "Meer Nieuws", "Alle Reacties" en "Alle Berichten". Deze elementen missen de juiste rol voor hun functie.
Op deze pagina zijn de rijen van de tabel "Nieuwe Berichten" interactief. Bezoekers kunnen erop klikken en dan verschijnt er extra inhoud. Deze elementen hebben echter niet de juiste rollen en attributen om aan te geven dat een bezoeker ze kan activeren, en of de uitvouwbare inhoud open of gesloten is.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Elementen zijn niet met toetsenbord te bedienen
Bovendien kunnen al deze bovengenoemde interactieve elementen niet met het toetsenbord worden bediend. Bezoekers die een muis gebruiken, kunnen klikken op "Meer Nieuws", "Alle Reacties" of "Alle Berichten" en op elke rij in de tabel. Deze functionaliteit is echter niet toegankelijk voor gebruikers die alleen een toetsenbord gebruiken.
Hetzelfde probleem met de tabelrijen komt voor op de pagina Berichten.
Voldoet niet aan SC 2.1.1 - Keyboard
Er is geen tekstalternatief
Op deze pagina in de tabel "Nieuwe Berichten" in de kolom "Status" staan klok-iconen. Deze informatieve pictogrammen zijn toegevoegd als achtergrondafbeeldingen en er is geen tekstalternatief.
Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element plaatsen en de informatie in de alt-tekst zetten.
Hetzelfde probleem komt voor op de pagina Berichten.
Op de pagina Reacties zijn ook informatieve iconen toegevoegd als achtergrondafbeeldingen in de kolom "Status".
Voldoet niet aan SC 1.1.1 - Non-text Content
Tooltip niet toegankelijk
Op deze pagina in de tabel "Nieuwe Berichten" staat een kolom "Wijk". Deze kolom bevat ingekorte tekst. Er is een tooltip voor de inhoud "Kruiskamp/ Schutskamp". Deze informatie is echter niet toegankelijk voor bezoekers met een schermlezer.
Een mogelijke oplossing is om een aria-label te gebruiken om de volledige tekst voor schermlezers te bieden. Andere oplossingen zijn ook mogelijk.
In dezelfde tabel bevat de kolom "Bericht" ook tekst die is afgekapt: "Uitnodiging buurten ...". Deze tekst wordt niet voorgelezen door de schermlezers, waardoor deze informatie niet toegankelijk is voor blinde bezoekers.
Hetzelfde probleem komt voor op de pagina Reacties .
Voldoet niet aan SC 1.3.1 - Info and Relationships
Elementen zijn niet met toetsenbord te bedienen
Bezoekers passen soms de tekstafstand aan met aangepaste CSS om de leesbaarheid voor zichzelf te verbeteren. Als bezoekers dit op deze pagina doen zoals beschreven in succescriterium 1.4.12, vallen sommige tabelcellen in de tabel "Nieuwe Berichten" buiten beeld. Bezoekers die alleen met een toetsenbord werken, kunnen de inhoud van de tabel buiten het scherm niet zien.
Hetzelfde probleem komt voor als deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%.
Een mogelijke oplossing is om tabindex="-1" toe te voegen aan de tabel, zodat deze focus kan krijgen.
Controleer ook andere pagina's met tabellen.
Voldoet niet aan SC 1.4.12 - Text resize
Voldoet niet aan SC 2.1.1 - Keyboard
Koppen zijn gemarkeerd met strong-element
Op deze pagina kunnen de rijen van de tabel "Nieuwe Berichten" worden geopend door erop te klikken. De geopende inhoud bevat koppen die zijn gemarkeerd met een strong-element. Een bezoeker kan bijvoorbeeld klikken op de rij met "De Bossche buurtwagen" en in de uitgeklapte inhoud staat de tekst "De Bossche buurtwagen". Deze tekst werkt en ziet eruit als een kop, maar is gemarkeerd met strong-element.
Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.
Hetzelfde probleem komt voor op de pagina Berichten.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Linkdoel is onduidelijk
Op deze pagina wordt extra inhoud getoond als een bezoeker op een rij in de tabel "Nieuwe Berichten" klikt. Er is een knop "Lees hele bericht". Deze tekst beschrijft niet wat de bestemming is van de link.
Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.
Op deze pagina staat een tabel. In de tabel staan rijen met de tekst "Spoed". Deze rode tekst (hexcode #CE3C3C) op een grijze achtergrond (hexcode #EFF3F6) heeft een kleurcontrast van 4,3:1. Dit moet minstens 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Focusvolgorde is onlogisch
Op deze pagina is de volgorde van de toetsenbordfocus niet logisch. Als een bezoeker op de knop "Filters" klikt, worden de filters weergegeven. De toetsenbordfocus gaat echter niet verder naar de filters, maar naar de adresbalk van de browser. De bezoeker moet vanaf het begin door de pagina bladeren om bij deze filters te komen.
Hetzelfde probleem komt voor in het paneel dat wordt getoond als de knop "Filter" wordt geactiveerd. De bezoeker activeert een optie in het paneel, bijvoorbeeld "Type", maar de toetsenbordfocus gaat niet naar de nieuw geopende inhoud. Dit is niet logisch.
Hetzelfde probleem komt voor als de categorie "Wijk" is geactiveerd. Als hier een filtertype wordt geselecteerd, bijvoorbeeld "onbekend", gaat de focus niet meteen naar de geopende inhoud.
Voldoet niet aan SC 2.4.3 - Focus Order
Knoppen hebben niet genoeg contrast
Op deze pagina wordt een paneel met filters getoond als de knop "Filter" wordt geactiveerd. Als de inactieve categorieknoppen toetsenbordfocus krijgen, verandert de tekst van de knoppen van zwart naar wit. Op de witte achtergrond is er niet voldoende contrast en worden de knoppen onzichtbaar.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Toestand van knop niet vastgelegd in de code
In hetzelfde paneel met filters hebben deze categorieknoppen verschillende statussen en kunnen ze worden ingedrukt. De ondersteunende technologie krijgt geen informatie over de status van de knoppen.
De actuele toestand van de knop is namelijk niet in de code vastgelegd. Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop.
Hetzelfde probleem komt voor bij de filters voor de categorie "Wijk". Er zijn knoppen die kunnen worden ingedrukt, bijvoorbeeld, “TESTGEMEENTE”.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Invoerveld heeft geen toegankelijke naam
Op deze pagina in het paneel met filters staat een knop met de tekst "Bevat Tekst". Als de bezoeker deze knop activeert, wordt een invoerveld weergegeven. Dit invoerveld heeft geen toegankelijke naam om het doel ervan te beschrijven.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Element is niet met stem te bedienen
Bovendien kan dit invoerveld niet worden geactiveerd met spraak. De zichtbare tekst is "Bevat Tekst". De toegankelijke naam bevat deze tekst niet.
Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.
Voldoet niet aan SC 2.5.3 - Label in Name
Invoerveld heeft niet genoeg contrast
Verder heeft dit invoerveld een donkergrijze randkleur (hexkleur #C7D3DE) op een witte achtergrond (hexkleur #FFFFFF). De contrastverhouding tussen de randkleur en de achtergrond is 1,5:1.
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Dezelfde kleur wordt gebruikt voor de selectievakjes en keuzerondjes die worden weergegeven in de rest van de filtercategorieën.
Hetzelfde probleem komt voor op de pagina My profile in het tabblad "Meldingen".
Voldoet niet aan SC 1.4.11 - Non-text Contrast
Groepering ontbreekt
In het paneel met filters op deze pagina staan selectievakjes in de categorieën: "Type" en "Wijk". Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin respectievelijk de tekst “Type” en “Wijk”.
Hetzelfde probleem komt voor bij de keuzerondjes in de categorie "Datum".
Ook op de pagina’s Reacties
en My profile komt dit probleem voor.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Statusberichten worden niet voorgelezen
In het paneel met filters op deze pagina zijn er in de categorie "Wijk" drie opties, bijvoorbeeld "Gemeente 's-Hertogenbosch". Als een bezoeker een filter aanvinkt, bijvoorbeeld "Engelen", wordt het nummer op de knop "Gemeente 's-Hertogenbosch" bijgewerkt. De melding met het getal valt onder de definitie van een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Dit kan bereikt worden door role="status" aan de melding toe te voegen. Zorg dat de melding duidelijk is.
Als op deze pagina filters worden toegepast, wordt informatie over de geselecteerde filters met het icoon "X" weergegeven. Bezoekers kunnen op het icoon "X" klikken om een filter te verwijderen. Deze interactieve iconen kunnen niet via het toetsenbord worden bediend.
Voldoet niet aan SC 2.1.1 - Keyboard
Iconen hebben geen tekstalternatief
Bovendien zijn deze "X"-iconen toegevoegd als achtergrondafbeelding en is er geen tekstalternatief om hun functie te beschrijven. Een afbeelding die als achtergrondafbeelding is geplaatst, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie die dit icoon overbrengt dus niet door.
Voldoet niet aan SC 1.1.1 - Non-text Content
Elementen hebben geen toegankelijke naam
Daarnaast hebben deze interactieve elementen met "X"-iconen geen toegankelijke namen en juiste rollen om hun doel te identificeren.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Tekst heeft niet genoeg contrast
De witte teksten (hexcode #FFFFFF) naast de "X"-iconen hebben een laag kleurcontrast tegen de blauwe achtergrond (hexcode #738FAC): 3,4:1. Dit moet minstens 4,5:1 zijn.
De filters zijn ook aanwezig op de pagina Reacties. De hierboven beschreven problemen komen hier ook voor.
Witte tekst op een blauwe achtergrond (hexcode #738FAC) met een contrast van 3,4:1 komt ook voor op de pagina My profile in het tabblad "Meldingen". Het gaat om de tekst "Selecteer hier de berichten die u via e-mail wilt ontvangen".
Op deze pagina staan drie alinea's tekst. In HTML zijn deze alinea's gemarkeerd als één p-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Element is niet met toetsenbord te bedienen
Op deze pagina staat een afbeelding. Het is een miniatuur waarop een bezoeker kan klikken om de afbeelding te vergroten. Dit werkt niet met het toetsenbord.
Voldoet niet aan SC 2.1.1 - Keyboard
Er is geen tekstalternatief
Bovendien heeft deze informatieve afbeelding een leeg alt-attribuut.
Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alt-tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.
Dit geldt ook voor de informatieve afbeelding in het dialoogvenster dat wordt geopend door op deze miniatuur te klikken. Deze afbeelding in het dialoogvenster is toegevoegd via een img-element, maar het alt-attribuut ontbreekt.
Een img-element moet altijd een alt-attribuut hebben. Gaat het om een decoratieve afbeelding, die geen betekenis overdraagt? Laat dit attribuut dan leeg. Dan staat er alt="". Is het een informatieve afbeelding? Voeg dan een duidelijke beschrijving van de afbeelding toe.
Voldoet niet aan SC 1.1.1 - Non-text Content
Knop heeft niet de juiste rol en geen naam
Bovendien werkt deze miniatuur als een knop. Deze heeft echter geen toegankelijke naam en geen juiste rol.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Toegankelijke naam van knop is niet correct
In het dialoogvenster dat wordt geopend door op de miniatuur te klikken, staat een knop met een "X". Deze knop heeft de toegankelijke naam "x". Deze tekst beschrijft de functie van de knop niet goed.
Voldoet niet aan SC 2.4.6 - Headings and Labels
Interactief element is verborgen
Daarnaast heeft deze "X"-knop het attribuut aria-hidden="true". Dit is niet toegestaan op interactieve elementen. Het gebruik van aria-hidden="true" op een element maakt het volledig ontoegankelijk voor schermlezers en andere ondersteunende technologieën.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Voldoet niet aan SC 1.3.1 - Info and Relationships
Tekst heeft niet genoeg contrast
In hetzelfde dialoogvenster dat wordt geopend door op de miniatuur te klikken, staat een witte tekst (hexcode #FFFEFF) op een bruine achtergrond (#B4975B). Het kleurcontrast is 2,8:1.
De tekst "vrijdag 11 oktober ... " is groter dan 19px maar kleiner dan 24px en vet, daarom moet het contrast minstens 3,0:1 zijn.
De tekst "Hebt u vragen ..." is kleiner dan 19px, daarom moet het contrast minstens 4,5:1 zijn.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Element is niet met toetsenbord te bedienen
Element is niet met toetsenbord te bedienen
Op deze pagina staat een interactief element met de zichtbare tekst "Hoe heeft u gereageerd?". Als een bezoeker met de muis over dit element beweegt, verschijnt aanvullende informatie. Deze informatie is echter niet beschikbaar voor bezoekers die alleen een toetsenbord gebruiken.
Hetzelfde probleem komt voor op de pagina's Woensdagochtend noodhulp en Zwembadjes.
Voldoet niet aan SC 2.1.1 - Keyboard
Status knop is niet in code vastgelegd
Als een bezoeker met de muisaanwijzer over het interactieve element met de zichtbare tekst "Hoe heeft u gereageerd?" gaat, worden er twee knoppen weergegeven. Deze twee knoppen hebben verschillende statussen. Ze kunnen worden geselecteerd. De toestand van deze knoppen is niet vastgelegd in de code. Hierdoor krijgen bezoekers met een schermlezer deze informatie niet door.
Op deze pagina staat een lijst met 11 items. Deze lijst is niet op de goede manier in de code gemarkeerd.
Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. 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.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Toegankelijke naam van knoppen is niet duidelijk genoeg
Op deze pagina staan knoppen met iconen van een potlood en een prullenbak in het gedeelte met de toegevoegde reactie. De toegankelijke namen van deze knoppen bevatten tekst die niet bedoeld is om door mensen te worden gelezen. De beschrijving werd voor deze knoppen geleverd met het title-attribuut. Een knop moet echter een toegankelijke naam hebben die duidelijk zijn functie aangeeft. De beschrijving door het title-attribuut kan aanvullende informatie bieden.
Voldoet niet aan SC 2.4.6 - Headings and Labels
Er is geen alt-tekst
Omdat afbeeldingen de enige inhoud van deze knoppen zijn, worden ze als informatief beschouwd. Deze informatieve afbeeldingen worden echter toegevoegd als achtergrondafbeeldingen, en er is geen tekstueel alternatief om de inhoud van de knoppen te leveren.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.
Visuele structuur van informatie staat niet in de HTML
Op pagina Bin worden onder de kopjes "BIN, wat is dat?" en "Hoe werkt het BIN?" de alinea's tekst in een div-element geplaatst.
HTML-elementen dragen een bepaalde betekenis over. Voor alinea’s wordt bijvoorbeeld het p-element gebruikt. Door HTML-elementen op de juiste manier te gebruiken, blijft de visuele structuur van de informatie gelijk aan de structuur in de code. Daardoor wordt deze structuur goed doorgegeven aan voorleessoftware.
Plaats elke alinea in een apart p-element.
Hetzelfde probleem komt voor op pagina Aanmelden.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Op deze pagina staat onder het kopje "Hoe zit het met de toegankelijkheid van deze site?" in de lopende tekst een link met de tekst "hier". De blauwe linktekst (hexcode #2780E3) op de witte achtergrond (hexcode #FFFFFF) heeft een te laag kleurcontrast: 4,0:1. Dit moet minstens 4,5:1 zijn.
Als een bezoeker is ingelogd, komt hetzelfde probleem voor op pagina Vragen.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Link is niet met het toetsenbord te bedienen
Op deze pagina kan de link met de tekst "hier" niet met het toetsenbord worden bediend.
Hetzelfde probleem komt voor op pagina [Vragen](https://mijnbin.nl/veelgestelde-vragen-alt als de bezoeker is ingelogd).
Op deze pagina staat een formulier met invoervelden waarmee persoonlijke gegevens worden verzameld. Het autocomplete-attribuut ontbreekt.
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt.
Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: Input purposes
Hetzelfde probleem komt voor op de pagina's Login en Wachtwoord vergeten. Als een bezoeker is ingelogd, wordt ook de pagina My profile weergegeven. Op deze pagina staat op het tabblad "Contactgegevens" een knop met de tekst "Wijzig Wachtwoord" waarmee een dialoogvenster met invoervelden wordt geopend.
Voldoet niet aan SC 1.3.5 - Identify Input Purpose
Er is geen permanent zichtbaar label
Op deze pagina in hetzelfde formulier hebben de invoervelden geen permanente labels. De placeholder-tekst wordt gebruikt als label.
Invoervelden moeten een label hebben dat altijd zichtbaar is. Hier kan dus niet een placeholdertekst voor worden gebruikt, want die verdwijnt zodra de bezoeker begint te typen.
Hetzelfde probleem komt voor op de pagina's Login en Wachtwoord vergeten.
Voldoet niet aan SC 3.3.2 - Labels or Instructions
Tekst heeft onvoldoende contrast
Op deze pagina in hetzelfde formulier bevatten de invoervelden donkerblauwe placeholder-tekst (hexcode #738FAC ). De achtergrond is wit (hexcode #FFFFFF). Het kleurcontrast is 3,4:1. Dit moet minstens 4,5:1 zijn.
Hetzelfde probleem komt voor op de pagina's Login en Wachtwoord vergeten . Als een bezoeker is ingelogd, wordt ook de pagina My profile weergegeven. Op deze pagina staat op het tabblad "Contactgegevens" een knop "Wijzig Wachtwoord" waarmee een dialoogvenster met invoervelden wordt geopend. Als een bezoeker is ingelogd, staat op de pagina Zwembadjes een tekstveld met de placeholder-tekst "Uw reactie" waarbij dezelfde kleurencombinatie is gebruikt.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Interactieve elementen hebben niet genoeg contrast
Op deze pagina in hetzelfde formulier hebben de invoervelden een lichtgrijze rand (hexcode #EDEDED) op een lichtblauwe achtergrond (hexcode #EFF3F6). Het contrast is 1,0:1. Dit moet minstens 3,0:1 zijn.
Voldoet niet aan SC 1.4.11 - Non-text Contrast
Kwaliteit foutmeldingen is onvoldoende
Op deze pagina verschijnen foutmeldingen met de volgende teksten als het formulier wordt verzonden met lege velden of onjuiste gegevens: "Dit veld is verplicht.", "Dit veld moet een geldig e-mailadres zijn.", "Dit veld moet ten minste één kleine letter bevatten.", enz. 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."
Daarnaast geeft de foutmelding "Dit veld moet een geldig e-mailadres zijn." niet aan wat er mis is gegaan met de gegevens die zijn ingevoerd in het veld "E-mail".
Hetzelfde probleem komt voor op de pagina My profile, als de bezoeker is ingelogd. Op deze pagina staat op het tabblad "Contactgegevens" een knop "Wijzig Wachtwoord" waarmee een dialoogvenster met invoervelden wordt geopend.
Voldoet niet aan SC 3.3.1 - Error Identification
Tekst heeft niet genoeg contrast
Als het formulier op deze pagina wordt verzonden met lege velden of met onjuiste gegevens, verschijnen er foutmeldingen met rode tekst (hexcode #FF0039) op een lichtblauwe achtergrond (#EFF3F6). Het contrast is 3,5:1. Dit moet minstens 4,5:1 zijn.
Hetzelfde probleem komt voor op de pagina Login.
Zie ook pagina My profile als de bezoeker is ingelogd. Op deze pagina staat op het tabblad "Contactgegevens" een knop "Wijzig Wachtwoord" waarmee een dialoogvenster met invoervelden wordt geopend.
Voldoet niet aan SC 1.4.3 - Contrast (Minimum)
Relatie tussen foutmeldingen en invoervelden is niet vastgelegd in de code
Op deze pagina worden foutmeldingen getoond als een bezoeker het formulier instuurt met lege velden of met onjuiste gegevens. De schermlezer leest in de "formulier"-modus niet de tekst tussen de invoervelden en geeft deze foutmeldingen daarom niet door.
De relatie tussen de foutmeldingen en invoervelden is namelijk niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
Zie ook pagina My profile als de bezoeker is ingelogd. Op deze pagina staat op het tabblad "Contactgegevens" een knop "Wijzig Wachtwoord" waarmee een dialoogvenster met invoervelden wordt geopend.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Statusberichten worden niet voorgelezen
Op deze pagina verschijnen foutmeldingen als er fouten worden gemaakt in het formulier. De schermlezer geeft deze foutmeldingen niet door.
Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Raadpleeg de pagina Live Regions voor meer informatie.
Hetzelfde probleem komt voor als een bezoeker het formulier instuurt met gegevens van een bestaande account. Er verschijnt dan een waarschuwing om de bezoeker erop te wijzen dat er iets fout is gegaan. Er verschijnt nog een melding als het formulier met succes is verzonden. Deze informatie wordt niet voorgelezen door schermlezers.
Zie ook pagina Uitnodiging als de bezoeker is ingelogd. Als een bezoeker met de muisaanwijzer over het interactieve element met zichtbare tekst "Hoe heeft u gereageerd?" gaat en een van de knoppen activeert, bijvoorbeeld de knop met de zichtbare tekst "112", verschijnt er een bericht in de rechterbovenhoek van de pagina: "Uw manier van contact opnemen is opgeslagen. Bedankt voor de feedback.".
Op pagina Zwembadjes verschijnt een melding als een bezoeker een bestand probeert te uploaden dat geen afbeelding is, bijvoorbeeld een pdf. Rechts bovenin de pagina verschijnt dan de melding:"Alleen afbeeldingen kunnen worden geupload.".
Op pagina Woensdagochtend noodhulp wordt een bericht getoond als een bezoeker een reactie verstuurt. De tekst van de melding is: "Gereageerd op reactie". De toetsenbordfocus wordt niet naar dit bericht verplaatst.
Controleer ook andere pagina's op de website met dit soort statusberichten.
Voldoet niet aan SC 4.1.3 - Status Messages
Bezoeker krijgt te weinig tijd om te lezen
Waarschuwingen zoals op deze pagina, die bijvoorbeeld worden weergegeven als iemand het formulier instuurt met gegevens van een bestaande account, verdwijnen na korte tijd.
Hierdoor hebben sommige bezoekers niet voldoende tijd om de fout te lezen en te begrijpen. Zorg daarom dat de foutmeldingen zichtbaar blijven. Voeg eventueel een sluitknop toe waarmee bezoekers de foutmelding zelf kunnen afsluiten.
Hetzelfde probleem komt voor op andere pagina's met dit soort statusberichten.
Voldoet niet aan SC 2.2.1 - Timing Adjustable
Foutmeldingen hebben onvoldoende contrast
Op deze pagina wordt een waarschuwing getoond als een bezoeker het formulier instuurt met gegevens van een bestaande account. De witte tekst op de transparant rode achtergrond heeft mogelijk een te laag contrast. Als de onderliggende pagina bijvoorbeeld een witte kleur heeft, is de achtergrond van de waarschuwing #CA5E59. Het contrast is dan 4,0:1. Zorg ervoor dat het contrast minstens 4,5:1 is.
Hetzelfde probleem ontstaat als het formulier met succes wordt verzonden. Er verschijnt een waarschuwing met witte tekst op een groene achtergrond. Op sommige punten is het kleurcontrast 2,4:1.
Controleer ook andere pagina's op de website met dit soort foutmeldingen.
Op deze pagina staat een formulier. Dit formulier gebruikt alleen HTML5-validatie in de invoervelden.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
Voldoet niet aan SC 2.2.1 - Timing Adjustable
Als hetzelfde formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnen er HTML5-foutberichten: “Please fill out this field.”
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.
Op deze pagina staan drie links: "Mijn wijken", "Contactgegevens" en "Meldingen". Deze links zijn niet met het toetsenbord te bedienen.
Voldoet niet aan SC 2.1.1 - Keyboard
Visuele structuur is niet in de HTML vastgelegd
Bovendien zijn deze links in de code gemarkeerd als een eenvoudige lijst met links, maar visueel zijn ze vormgegeven als tabbladen. Elk tabblad hoort bij een specifiek blok met inhoud, dat per tab wordt getoond. Deze tabbladenstructuur is niet in de code vastgelegd. De vereiste semantiek en relaties tussen de tabs en de tabbladen is niet geïmplementeerd.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Voldoet niet aan SC 1.3.1 - Info and Relationships
Label is niet gekoppeld met invoerveld
Op deze pagina verschijnt een formulier als de link "Meldingen" wordt geselecteerd. Er is een vervolgkeuzelijst (select-element) met het label "Ontvang een e-mail met alle nieuwe berichten per". Visueel is duidelijk dat dit label- en select-element bij elkaar horen, maar voor schermlezer is dat niet zo. Om een label-element te koppelen aan een select-element in HTML, kun je het for-attribuut op het label gebruiken en het id-attribuut op het select-element. Hierdoor zijn ze in de code aan elkaar gekoppeld.
Hetzelfde probleem komt voor bij het select-element dat verschijnt als in de keuzelijst "Ontvang een e-mail met alle nieuwe berichten per" de waarde "week" wordt geselecteerd.
Voldoet niet aan SC 1.3.1 - Info and Relationships
Dit zorgt er ook voor dat de select-elementen toegankelijke namen hebben, want die hebben ze nu niet.
Voldoet niet aan SC 4.1.2 - Name, Role, Value
Element is niet met stem te bedienen
Daarnaast kunnen de select-elementen niet met spraak worden bediend. Zorg ervoor dat de toegankelijke namen van de select-elementen de zichtbare labels bevatten, bij voorkeur vooraan.
Voldoet niet aan SC 2.5.3 - Label in Name
Interactieve elementen hebben niet genoeg contrast
Op deze pagina staat op het tabblad "Contactgegevens" een knop met de tekst "Wijzig Wachtwoord", waarmee een dialoogvenster met invoervelden wordt geopend. De kleur van de rand van de velden is blauw (hexcode #C7D3DE) en de achtergrondkleur is lichtblauw (hexcode #EFF3F6). Het contrast is 1,4:1.
Hetzelfde probleem komt voor op pagina https://mijnbin.nl/messages/16777, bij het invoerveld onder de tekst "Nieuwe reactie".
Dezelfde kleurencombinatie wordt ook gebruikt voor de selectievakjes in het tabblad "Mijn wijken".
Het contrast moet ten minste 3,0:1 zijn.
