Onderzoek digitale toegankelijkheid van website outsite.rvr.org

Op de pagina's van de website staan geen skiplinks. 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 - Bypass Blocks)

Het logo

In de linkerbovenhoek staat een logo. Het alt-attribuut is leeg. Door het leeglaten van het alt-attribuut wordt de afbeelding verborgen voor de schermlezer. Het is belangrijk om deze informatieve afbeelding een tekstalternatief te geven om te zorgen voor een volledige en accurate representatie van de afbeelding voor gebruikers die vertrouwen op schermlezers. Herhaal de zichtbare tekst van het logo “Raad voor Rechtsbijstand” in het alt-attribuut.

(Voldoet niet aan: SC 1.1.1 - Non-text content)

Het logo werkt als een link. Deze link heeft geen linkdoel. Het logo is een link, maar er is geen tekst die het doel van de link beschrijft. Hierdoor weten gebruikers van hulpsoftware niet naar welke pagina of inhoud de link leidt. Dit kan opgelost worden door een alt-tekst aan de afbeelding van het logo 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 (In Context))

De zichtbare tekst van het logo is "Raad voor Rechtsbijstand". Deze tekst maakt geen deel uit van de toegankelijke naam. Dit logo fungeert als een link, maar de zichtbare tekst van het logo komt niet overeen met de toegankelijkheidsnaam van de link. Hierdoor is de link niet goed toegankelijk voor stemgestuurde systemen. Zorg ervoor dat de zichtbare tekst in de toegankelijkheidsnaam voorkomt, het liefst vooraan.

(Voldoet niet aan: SC 2.5.3 - Label in Name)

Het logo werkt als een link. Deze link heeft geen toegankelijke naam. De link heeft geen toegankelijke naam. Daardoor is de bestemming van de link onbekend voor bezoekers die een schermlezer gebruiken. Geef de link een toegankelijke naam die het doel of de functie van de link beschrijft.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Welkom knop (gebruikersaccount)

In de rechterbovenhoek staat een knop "Welkom ...". Deze knop heeft geen juiste rol. Elk HTML-element heeft een rol, dat wil zeggen een verzameling kenmerken, eigenschappen en methoden om informatie van en/of naar de gebruiker over te brengen. In wezen definieert de rol wat het element is. Schermlezers en andere ondersteunende technologieën moeten de rol van elk element op de webpagina kennen om er op een intelligente manier mee te kunnen interageren, en ze moeten de rol aan de gebruiker kunnen communiceren. Hetzelfde probleem wordt waargenomen bij de zogenaamde hamburgerknop die verschijnt als de pagina op een klein scherm wordt bekeken.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

De knop "Welkom ..." dient om een submenu te openen. De status van deze inhoud kan niet worden bepaald door de schermlezer. Wanneer een knop extra content kan tonen of verbergen, moet de status, of het getoond of verborgen is, door hulpsoftware kunnen worden bepaald. Dit kan worden gedaan door een aria-expanded attribuut toe te voegen. Aria-expanded werkt alleen op knoppen wanneer de focus op deze knop blijft. Als de focus verplaatst wordt, moet er een verborgen tekst gebruikt worden. Hetzelfde probleem wordt waargenomen bij de zogenaamde hamburgerknop die verschijnt als de pagina op een klein scherm wordt bekeken. Er is geprobeerd om het aria-expanded attribuut toe te voegen aan het div-element dat niet interactief is. Het aria-expanded attribuut kan echter wel worden toegepast op interactieve elementen.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

De kleur van de knop tekst "Welkom ..." is grijs (#979797). De kleur van de achtergrond is wit (#FFFFFF). De kleurcontrastverhouding is te laag: 2,9:1. Het contrast moet minstens 4,5:1 zijn.

De knop "Welkom ..." opent het submenu met de links. De teksten van de links zijn grijs (#979797) op de lichtblauwe (#E0E7ED) achtergrond. Het contrast is 2,3:1. Dit moet minstens 4,5:1 zijn. Zie ook de tekst "AFAS Profit 3" die hetzelfde probleem heeft.

In het submenu staat een knop "Uitloggen". De tekst van de knop is lichtblauw (#E0E7ED) op de donkerblauwe (#6C8B9A) achtergrond. Het kleurcontrast is te laag: 2,9:1. Het contrast moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum)

De knop "Welkom ..." bevat een pijlafbeelding. Deze informatieve afbeelding heeft een te laag contrast ten opzichte van de achtergrond: 2,9:1. Dit moet minstens 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

De knop "Welkom ..." kan niet worden geactiveerd met alleen het toetsenbord. Wijzig de functionaliteit van de knop zodat deze met een toetsenbord kan worden bediend.

Zorg ervoor dat de knop en het submenu dat wordt geopend, kunnen worden bediend met het toetsenbord. Daarnaast moet de focus beperkt worden tot het submenu om ervoor te zorgen dat de focus niet weggaat totdat het submenu wordt gesloten.

Zie ook de zogenaamde hamburgerknop die verschijnt als de pagina wordt bekeken op een klein scherm. Deze kan niet worden geactiveerd met de spatiebalk of de entertoets.

(Voldoet niet aan: SC 2.1.1 - Keyboard)

De knop "Welkom ..." opent een submenu. Het submenu staat in de HTML onderaan de pagina. De knop gebruikt echter niet het vereiste attribuut om hem te koppelen aan het submenu. Hierdoor kunnen hulptechnologieën niet identificeren welk element door de knop wordt bestuurd. De mogelijke oplossing is om het aria-controls-attribuut toe te voegen aan de knop, met verwijzing naar de ID van het submenu dat wordt bestuurd. Andere oplossingen zijn mogelijk.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

De knop "Welkom ..." opent een submenu. Hoewel de relatie tussen de knop en het submenu visueel duidelijk is, wordt deze relatie niet weerspiegeld in de HTML-structuur. In de code staat het submenu aan het einde van het DOM en zijn de knop en het submenu op geen enkele manier met elkaar verbonden. Hierdoor is de volgorde niet zinvol.

(Voldoet niet aan: SC 1.3.2 - Meaningful Sequence)

In het submenu "Welkom ..." horen de volgende links visueel bij elkaar: "Persoonlijke gegevens", "Accountbeveiliging" en "Organisatie kiezen". Deze relatie ontbreekt in de HTML. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element. Hetzelfde probleem wordt waargenomen bij de navigatie hyperlinks in het mobiele menu dat wordt geopend met de zogenaamde hamburgerknop wanneer de pagina op een klein scherm wordt bekeken.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

De menuknop (drie horizontale streepjes)

Als de website op een klein scherm wordt bekeken, verschijnt de zogenaamde hamburgermenuknop. Deze menuknop heeft een toegankelijke naam "Menu". Als je op deze knop klikt, blijft de toegankelijke naam ongewijzigd. Het is belangrijk om de naam bij te werken om de nieuwe functie van de knop nauwkeurig te beschrijven. Als de functie verandert, moet de toegankelijke naam ook veranderen. In dit geval zou "Sluit menu" geschikter zijn.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

Wanneer de pagina wordt bekeken op een klein scherm en een bezoeker door de pagina navigeert met het toetsenbord, is de volgorde van focus niet logisch. De hamburgerknop krijgt als laatste focus na alle interactieve elementen op de pagina.
Wanneer met het toetsenbord focusbare onderdelen niet in een logische volgorde focus ontvangen, worden mensen met mobiliteitsbeperkingen, leesstoornissen en een verminderd gezichtsvermogen hierdoor beïnvloed. De focusvolgorde van het toetsenbord moet logisch en consistent zijn met de lay-out van de content. De presentatie of wijziging van content op het scherm kan vereisen dat de gebruiker interactie heeft met, of op zijn minst aandacht schenkt aan, de nieuwe of gewijzigde content. Een logische focusvolgorde en logisch focusbeheer maken de interactie met de content voorspelbaar voor mensen die afhankelijk zijn van een toetsenbord om ermee te werken.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Als de pagina op een klein scherm wordt bekeken, opent de hamburgerknop het mobiele menu. Dergelijke dialoogvensters vereisen een specifieke afhandeling voor toetsenbordfocus. Terwijl het dialoogvenster actief is, moet de toetsenbordfocus in het dialoogvenster blijven en niet op de onderliggende pagina terechtkomen. Momenteel is focusbeheer niet correct geïmplementeerd. Dit kan worden opgelost door de focus tot het menu te beperken totdat de bezoeker het menu heeft afgesloten door het klikken op de sluitknop of ESC-toets. Een andere oplossing is het automatisch laten sluiten van het menu wanneer de focus het menu verlaat.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Wanneer de pagina op een klein scherm wordt bekeken en het mobiele menu is geopend, bedekt dit menu de interactieve elementen op de onderliggende pagina. Deze elementen kunnen focus krijgen terwijl ze onzichtbaar zijn, wat een probleem veroorzaakt voor bezoekers die met een toetsenbord navigeren. De focus mag niet worden bedekt door andere elementen, omdat dit verwarring en navigatieproblemen oplevert voor bezoekers die afhankelijk zijn van toetsenbord- of schermlezernavigatie. Om dit probleem op te lossen, moet ervoor worden gezorgd dat de onderliggende interactieve elementen geen focus kunnen krijgen wanneer het mobiele menu is geopend.

(Voldoet niet aan: SC 2.4.11 - Focus Not Obscured (Minimum))

Als de website op een klein scherm wordt bekeken, is er een hamburgermenuknop. Deze opent het mobiele menu. In het menu staat een knop met een tandwielpictogram. De achtergrondkleur van deze knop verandert om de focus aan te geven. Dit gebruik van kleur als de enige manier om informatie over de focuslocatie te geven is ontoereikend.

(Voldoet niet aan: SC 1.4.1 - Use of Color)

De toegankelijke naam van de knop met het tandwielpictogram is "Instellingen". De knop dient echter om te schakelen tussen het hoofdnavigatiemenu en het gebruikersaccountmenu.
Deze toegankelijke naam geeft onvoldoende informatie over de functie van deze knoppen.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

Wanneer het mobiele menu wordt geopend, wordt het hoofdnavigatiemenu weergegeven. Als de bezoeker op de knop met het tandwielpictogram klikt, wordt het gebruikersaccountmenu weergegeven. In het gebruikersaccountmenu staat een link met de tekst "Uitloggen". In de HTML heeft dit element een href-attribuut, maar geen a-element. Als gevolg daarvan heeft deze link geen juiste rol.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

In het formulier bevinden zich knoppen “Aanpassen” naast de velden “Adres” en “Postadres”. De grijze tekst (#64748B) op de lichtgrijze achtergrond (#F1F5F9) heeft een te laag kleurcontrast: 4,3:1. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

Wanneer de knoppen “Aanpassen” focus krijgen, verschijnt de blauwe (#6AAAE1) rand. De focusrand heeft een laag contrast tegen de grijze achtergrond (#ECECEC): 2,1:1. Dit moet minstens 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

In het formulier is er een veld “Nieuw wachtwoord”. In het veld wordt feedback gegeven over de sterkte van het wachtwoord (bijvoorbeeld “Zwak”). De feedback is een statusbericht, maar is niet toegankelijk voor blinde bezoekers. Het bericht krijgt geen focus. Daarom moet aria-live=“beleefd” worden toegevoegd aan dit bericht zodat het automatisch wordt voorgelezen wanneer het bericht verschijnt.

(Voldoet niet aan: SC 1.4.1 - Use of Color)

Het wachtwoordveld vereist dat gebruikers zich houden aan specifieke opmaakregels wanneer ze een nieuw wachtwoord aanmaken. Er worden echter geen instructies gegeven om gebruikers te informeren over deze vereisten. Dit creëert een barrière voor alle gebruikers, vooral voor gebruikers met cognitieve beperkingen, omdat ze moeten raden naar de verwachte opmaak, wat kan leiden tot fouten en frustratie.

(Voldoet niet aan: SC 3.3.2 - Labels or Instructions)

Als het formulier wordt verzonden met lege velden, wordt de foutmelding weergegeven: “Het opgegeven wachtwoord is niet sterk genoeg. ...”. De foutmelding is een statusbericht maar is niet toegankelijk voor blinde bezoekers. Als er fouten in een formulier worden gemaakt, verschijnen de foutmeldingen. Als de focus niet naar de foutmelding wordt gestuurd, krijgen mensen die blind zijn geen melding. Daarom moet aan deze melding een aria-live="polite" worden toegevoegd, zodat de melding automatisch wordt voorgelezen zodra deze verschijnt.

(Voldoet niet aan: SC 4.1.3 - Status Messages)

Als de bezoeker het formulier met lege velden indient, verschijnt de foutmelding zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet naar de eerste foutmelding geleid. Bezoekers die met het toetsenbord navigeren moeten terug om bij de foutmelding te komen, wat niet logisch is. Zorg ervoor dat de focus automatisch naar de eerste foutmelding wordt verplaatst wanneer deze verschijnt, zodat de gebruiker onmiddellijk op de hoogte is van de fout en deze kan corrigeren.

(Voldoet niet aan: SC 2.4.3 Focus Order)

Fouten op deze pagina komen ook voor op andere pagina's en zijn al elders beschreven.

Fouten op deze pagina komen ook voor op andere pagina's en zijn al elders beschreven.

Op de pagina staat een formulier met invoervelden waarmee persoonlijke gegevens worden verzameld. Het autocomplete-attribuut is ingesteld op "uit". Wanneer in een formulier persoonlijke gegevens ingevuld moeten worden, waaronder een achternaam, e-mailadres en telefoonnummer, moet een autocomplete attribuut aanwezig zijn bij deze input-elementen. Dit zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Dit kan door bijvoorbeeld de invoervelden al automatisch in te vullen. Het autocomplete attribuut ontbreekt op dit moment bij deze invoervelden. Bij het invoerveld voor een e-mailadres moet bijvoorbeeld autocomplete=”email” gebruikt worden. Op de volgende pagina is meer informatie te vinden over de toepassing van dit attribuut en welke waardes verplicht zijn om te gebruiken. Zie: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Zie ook de formulieren op de pagina's:

• Aanpassen gegevens
• Twee factor authenticatie
• Aanpassen wachtwoord
• Inloggen

(Voldoet niet aan: SC 1.3.5 - Identify Input Purpose)

In het formulier zijn er velden die placeholder-tekst bevatten: "Telefoon", "Mobiel privé" en "E-mailadres". De donkergrijze tekstkleur tegen de lichtgrijze achtergrond heeft een kleurcontrast van 1,7:1. Dit moet minstens 4,5:1 zijn.

Zie ook het invoerveld "Land". Als een bezoeker op het veld klikt, wordt er een dropdown geopend. Deze bevat een zoekveld met grijze placeholder-tekst.

Zie ook pagina Aanpassen gegevens onder “Telefoon”.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

De invoervelden in het formulier hebben een lichtblauwe (#E2E8F0) randkleur. De contrastverhouding tussen de randkleur en de witte (#FFFFFF) achtergrond is 1,2:1. Wanneer de velden verplicht zijn, is de randkleur oranje (#F59E0B). De contrastverhouding tussen de randkleur en de witte (#FFFFFF) achtergrond is 2,1:1.

Het contrast van de grenzen van invoervelden ten opzichte van aangrenzende gebieden moet ten minste 3,0:1 zijn om ze te onderscheiden van de aangrenzende gebieden.

De verplichte velden bevatten een pictogram "!". Het pictogram gebruikt oranje kleuren. De contrastverhouding is te laag: 2,1:1 Dit moet minstens 3,0:1 zijn.

Zie ook formulieren op de pagina Inloggen

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

Onder het kopje "Adres" staat een invoerveld "Land". Het label "Land" is niet expliciet gekoppeld aan het bijbehorende invoerveld. Hoewel het label-element in de HTML aanwezig is, ontbreekt de koppeling met het invoerveld. Als een label-element aanwezig is, moet het worden gekoppeld aan het bijbehorende invoerveld door het for-attribuut op het label-element te gebruiken. Dit attribuut moet verwijzen naar het id-attribuut van het invoerveld. Deze koppeling zorgt ervoor dat het invoerveld een naam krijgt en vergroot het klikgebied van het label, wat de toegankelijkheid voor gebruikers verbetert. Omdat de naam momenteel ontbreekt, faalt deze bevinding ook voor het succescriterium 4.1.2.

(Voldoet niet aan: 1.3.1 - Info and Relationship and SC 4.1.2 - Name, Role, Value)

Omdat de zichtbare tekst (label "Land") niet in de toegankelijke naam van het invoerveld staat, voldoet dit ook niet aan het succescriterium 2.5.3. Dit succescriterium is bedoeld om bediening met spraaksoftware mogelijk te maken. Belangrijk hierbij is dat de visueel zichtbare tekst onderdeel is van de toegankelijkheidsnaam van het element. De bezoeker zal dit element niet met zijn stem kunnen activeren. Zorg ervoor dat zichtbare tekst in de toegankelijkheidsnaam staat, bij voorkeur vooraan.

(Voldoet niet aan: 2.5.3 - Label in Name)

Zie dezelfde problemen op de pagina Aanpassen gegevens er zijn knoppen "Aanpassen" naast de velden "Adres" en "Postadres". Deze openen het modale venster "Aanpassen adres". Het modale venster bevat het veld "Land".

Het invoerveld "Land" bevat pijlpictogrammen die aangeven dat er een sectie is die kan worden in- of uitgeklapt. De pijlpictogrammen geven de status van de sectie aan (open of gesloten). Deze informatie is echter niet opgenomen in de HTML. De pijliconen in secties met in- en uitklapbare content geven aan of de content gesloten of open is. Als de oriëntatieverandering van een afbeelding informatie overbrengt, moet deze informatie worden opgenomen in een tekstalternatief. Bijvoorbeeld, pijliconen die naar beneden wijzen geven aan dat een sectie met verborgen inhoud gesloten is, en pijlen die naar boven wijzen geven aan dat de verborgen sectie zichtbaar is. Deze verandering moet toegankelijk zijn voor schermlezers. Dit kan worden bereikt door een aria-expanded attribuut of verborgen tekst toe te voegen.

(Voldoet niet aan: SC 1.1.1 - Non-text Content)

Wanneer een bezoeker het invoerveld "Land" activeert, wordt het dropdown-element geopend met een zoekveld en een suggestielijst. Hoewel de relatie tussen het invoerveld en de vervolgkeuzelijst visueel duidelijk is, wordt deze relatie niet weerspiegeld in de HTML-structuur. In de code staat het dropdown element aan het einde van het DOM en het invoerveld en de dropdown zijn op geen enkele manier met elkaar verbonden. Hierdoor is de volgorde niet zinvol.

(Voldoet niet aan: SC 1.3.2 - Meaningful Sequence)

Deze dropdown bevat een zoekveld. In de HTML zijn dit twee invoervelden. Een van deze velden heeft geen toegankelijke naam.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Onder het zoekveld staat een lijst met suggesties. De suggesties zijn in div-elementen opgenomen. Deze items horen bij elkaar, maar deze relatie ontbreekt in de HTML. Dit kan worden opgelost voor deze items in een ul-element op te nemen.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

Onderaan de suggestielijst staat een interactief element met de tekst "Toon alle F10". Het dient om een dialoogvenster te openen. Dit element heeft echter geen eigen rol om zijn functie aan te geven.
(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Onder het kopje "Adres" zijn twee invoervelden gegroepeerd onder één zichtbaar label, "Postcode + huisnummer". Het eerste invoerveld heeft de toegankelijke naam "Postcode + huisnummer", terwijl het tweede invoerveld helemaal geen toegankelijke naam heeft. Hierdoor ontstaan de volgende toegankelijkheidsproblemen. De toegankelijke naam van het eerste invoerveld, "Postcode + huisnummer", definieert niet duidelijk het specifieke doel ervan. Omdat het het doel van beide velden combineert, kunnen gebruikers die gebruikmaken van ondersteunende technologieën, zoals schermlezers, niet onderscheiden of het veld bedoeld is voor postcode of huisnummer. Het tweede invoerveld heeft geen programmatisch te bepalen naam, waardoor het doel ontoegankelijk blijft. De beschrijvende toegankelijke namen voor beide velden moeten worden opgegeven om hun afzonderlijke doelen aan te geven.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels and SC 4.1.2 - Name, Role, Value)

In het formulier staat een veld "Geboortedatum". Het veld bevat een knop met het kalenderpictogram om een datumkiezer te openen. Deze knop wordt niet opgenomen in de focusvolgorde. Dit is niet logisch. Als gevolg hiervan kunnen bezoekers die met een toetsenbord door de pagina navigeren de knop niet openen.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Bovendien is de toegankelijke naam van de knop "Selecteer een datum". Zo'n toegankelijke naam definieert niet duidelijk de functie van de knop.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

Het visuele label voor de knop is "Geboortedatum". Omdat deze zichtbare tekst niet aanwezig is op de toegankelijke naam van de knop, is deze niet stemgestuurd.

(Voldoet niet aan: SC 2.5.3 - Label in Name)

Op de pagina staan toggle-knoppen. Deze knoppen hebben een witte cirkel op de grijze achtergrond als ze niet geactiveerd zijn. Het contrast van de witte kleur (#FFFFFF) tegen de grijze kleur (#CBD4E0) is 1,5:1. Wanneer deze schakelknoppen geactiveerd zijn, hebben een witte cirkel en een vinkje op de blauwe achtergrond (#6AAAE1) een contrast van 2,5:1. Het contrast moet in beide gevallen ten minste 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

Het formulier bevat een teksteditor onder het kopje "Motivatie en CV". Deze teksteditor heeft een aantal toegankelijkheidsproblemen. Een dergelijke teksteditor is ook aanwezig op de pagina Sollicitatie - Mijn Sollicitatie en de problemen beschreven voor deze pagina worden ook waargenomen op de huidige pagina. Zie ook: Mijn sollicitatie

Als een bezoeker het formulier indient met lege verplichte velden, verschijnt er een popup. Het bericht in de popup identificeert alleen het eerste veld waar de fout is gedetecteerd. Bij het sluiten van de popup gaat de focus naar het eerste veld met een fout. Het formulier bevat echter geen andere foutindicatoren. Alleen een popup gebruiken om fouten te melden is onvoldoende omdat bezoekers die de popup sluiten geen verdere indicatie van de fouten hebben. Bovendien kunnen gebruikers met een handicap, zoals gebruikers van schermlezers, moeite hebben om de specifieke velden met fouten te identificeren. Bovendien ontbreken in het formulier inline foutmeldingen of visuele indicatoren (bijvoorbeeld rode randen of foutpictogrammen) om problematische velden te markeren, wat het oplossen van fouten verder bemoeilijkt. Om de informatie over fouten en de velden die correct moeten worden ingevuld te waarborgen, moeten de fouten duidelijk in het formulier worden aangegeven. De mogelijke oplossing is om inline foutmeldingen naast of onder de respectievelijke velden weer te geven. Koppel deze berichten programmatisch aan de velden met behulp van aria-describedby. Vervolgens moeten visuele hints worden toegevoegd om velden met fouten te markeren, zoals rode randen of waarschuwingspictogrammen, zodat fouten beter opvallen voor alle bezoekers. De popup kan worden gebruikt als een aanvullende methode voor foutcommunicatie, zodat de problemen worden samengevat terwijl gebruikers ook kunnen verwijzen naar inline berichten voor gedetailleerde begeleiding.

(Voldoet niet aan: SC 3.3.1 - Error Identification)

Verder is de tekst van de foutmeldingen op de popup een instructie, geen foutmelding, bijvoorbeeld "Roepnaam: Dit veld is verplicht". 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."

(Voldoet niet aan: SC 3.3.1 - Error Identification)

Als het veld "E-mailadres" onjuiste gegevens bevat, wordt een pop-up met een foutmelding weergegeven. Er is een lijst met zeven items. De juiste opmaak ontbreekt. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. 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 Relationship)

Wanneer de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd wordt tot 400%, is het volgende interactieve element gedeeltelijk zichtbaar en niet bruikbaar: de dropdown die wordt geopend wanneer het invoerveld “Land” wordt geactiveerd. Bovendien verschijnt er een scrollbalk in leesrichting (horizontaal). Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, moet de pagina nog steeds functioneel zijn. Bezoekers met een visuele beperking moeten alle functionaliteit van de pagina kunnen gebruiken.

(Voldoet niet aan: SC 1.4.10 - Reflow)

Op de pagina staat een link “Wachtwoord opvragen”. De kleur van de linktekst is lichtgrijs op de grijze achtergrond. De contrastverhouding is 1,3:1. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 Contrast (Minimum))

Het kruimelpad

Op de website zijn er pagina's met breadcrumbs. De tekst van de breadcrumbs-links heeft onvoldoende tekstcontrast wanneer erop wordt gefocust. De tekst is grijs (#979797) op de blauwe (#33587F) achtergrond. De kleurcontrastverhouding is 2,5:1, wat onder de minimumvereiste van 4,5:1 valt. Dit probleem wordt bijvoorbeeld waargenomen op alle pagina's met broodkruimels.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

De breadcrumbs bestaan uit links die visueel bij elkaar horen. Deze relatie ontbreekt in de HTML. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.

Zie ook andere pagina's waar het kruimelpad op staat.

(Voldoet niet aan: SC 1.3.1- Info and Relationship)

Kop met een strong-element

De volgende kop is gemarkeerd met een strong-element: “Actuele vacatures” en “Sollicitatieformulieren”. Gebruik een headings-element.

(Voldoet niet aan: SC 1.3.1- Info and Relationship)

Select-element ontoegankelijk

Onder het kopje "Sollicitatieformulieren" staat een select element zonder visueel label.

(Voldoet niet aan: SC 3.3.2 - Labels or Instructions)

Dit select element heeft de toegankelijke naam "Zoek in". De toegankelijke naam wordt ingesteld door het title-attribuut. De optie zichtbaar is niet opgenomen in de toegankelijke naam. Hierdoor kan dit element niet worden geactiveerd met spraak.

(Voldoet niet aan: SC 2.5.3 Label in Name)

Zoekveld

Onder het kopje "Sollicitatieformulieren" staat een zoekveld. Dit invoerveld heeft geen toegankelijke naam. Het invoerveld heeft geen toegankelijkheidsnaam, waardoor het voor blinde of slechtziende bezoekers die afhankelijk zijn van schermlezers niet duidelijk welke gegevens in dit invoerveld moeten worden ingevoerd. Om dit probleem aan te pakken, moet een toegankelijke naam worden geven.

(Voldoet niet aan: SC 4.1.2 - 4.1.2 Name, Role, Value)

Omdat de naam ontbreekt, kan dit element niet worden geactiveerd met spraak.

(Voldoet niet aan: SC 2.5.3 Label in Name)

De contrastverhouding tussen de rand van het zoekveld en de achtergrond van de pagina is 1,4:1. Het contrast van de grenzen van invoervelden ten opzichte van aangrenzende gebieden moet ten minste 3,0:1 zijn om ze van de aangrenzende gebieden te onderscheiden.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

Naast het zoekveld staat een vergrootglaspictogram dat als knop dient. De kleur van het pictogram is grijs, de achtergrondkleur is lichtgrijs. De contrastverhouding is 2,6:1. Dit moet minstens 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

Het vergrootglaspictogram wordt gebruikt om het type invoerveld (zoekveld) aan te geven. Door het lage contrast is het pictogram echter niet zichtbaar voor bezoekers. Hierdoor is er geen zichtbaar label aanwezig bij dit invoerveld.

(Voldoet niet aan: SC 3.3.2 - Labels or Instructions)

De afbeelding van het vergrootglas dat dient als knop om het zoeken te starten is toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Aangezien de knop een toegankelijke naam heeft die is ingesteld met het attribuut aria-label, is deze afbeelding decoratief. Een decoratieve afbeelding voegt geen informatie toe aan de pagina en moet verborgen worden voor de schermlezer. Er zijn verschillende mogelijke oplossingen. Afbeeldingen die worden toegevoegd via een img element hebben een leeg alt attribuut nodig (alt="").

(Voldoet niet aan: SC 1.1.1 - Non-text Content)

Groep links

Onder het kopje "Sollicitatieformulieren" staat een groep links naar de vacaturepagina's. Visueel is het duidelijk dat ze bij elkaar horen. Deze relatie ontbreekt echter in de HTML. De mogelijke oplossing is om deze elementen op te nemen in een ul of ol element.

(Voldoet niet aan: SC 1.3.1- Info and Relationship)

Zoekresultaat

Wanneer een bezoeker probeert te zoeken naar een waarde die geen resultaten oplevert, bijvoorbeeld "pdf", verschijnt de volgende melding zonder dat de pagina opnieuw wordt geladen: "Dit filter levert geen resultaten op.". Als dit bericht geen focus krijgt, kan de schermlezer deze informatie niet voorlezen. Deze melding is een statusbericht omdat het voldoet aan twee hoofdcriteria: de melding geeft informatie over de resultaten van een actie en ontvangt geen focus. De rol van een statusbericht moet programmatisch kunnen worden bepaald zodat een schermlezer deze informatie kan voorlezen. Dit kan worden opgelost door role="status" aan de melding toe te voegen. Zie voor meer informatie pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19

(Voldoet niet aan: SC 4.1.3 - Status Messages)

Nadat een bezoeker een zoekopdracht heeft gestart, kan er een wachtanimatie worden weergegeven. In de HTML-code heeft het wachtanimatie-element de aria-label="Even geduld graag." Deze statusmelding is echter niet toegankelijk voor blinde bezoekers. Als een gebruiker een bepaald proces in gang heeft gezet, verschijnt een animatie van een laadicoon die aangeeft dat de website/applicatie bezig is en de gebruiker moet wachten. Het icoon ontvangt geen focus. Dit icoon geeft informatie die onder statusberichten valt en moet de juiste rol krijgen zodat een schermlezer dit bericht meteen kan voorlezen. Dit kan bijvoorbeeld door aria-live="polite" of role="status" te gebruiken. Ga voor meer informatie over het gebruik van role="status" naar https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22

Wachtanimatie

(Voldoet niet aan: SC 4.1.3 - Status Messages)

De wachtanimatie die kan verschijnen nadat een bezoeker een zoekopdracht heeft gestart, wordt gepresenteerd met een spinner-element dat een lichtblauwe kleur heeft (#6aaae1) tegen een grijze achtergrond. Het kleurcontrast is te laag: 1,8:1. Dit moet minstens 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

De volgende link in lopende tekst is alleen herkenbaar aan het kleurverschil: "sollicitatie@rvr.org” Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

(Voldoet niet aan: SC 1.4.1 - Use of Color)

Deze link heeft een laag contrast van 4,3:1 ten opzichte van de witte achtergrond. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum)

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd wordt tot 400%, is het volgende interactieve element niet volledig zichtbaar: de link "Lees hier hoe wij omgaan met jouw persoonsgegevens".

Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, moet de inhoud van de pagina nog steeds toegankelijk zijn.

(Voldoet niet aan: SC 1.4.10 Reflow)

Focus indicator

De link "Mijn openstaande taken" heeft geen zichtbare focusindicator. De focus moet zichtbaar zijn zodat een bezoeker weet wanneer hij elementen kan activeren.

(Voldoet niet aan: SC 2.4.7 - Focus Visible)

Link met het toetsenbord

De link "Mijn openstaande taken" kan niet worden bediend met het toetsenbord. De bezoeker kan op deze link klikken om naar een andere locatie te gaan. Dit werkt niet als je alleen met het toetsenbord navigeert. Zorg dat alle links ook met de Enter- en Return-toetsen kunnen worden bediend.

(Voldoet niet aan: SC 2.1.1 - Keyboard)

Een gegevenstabel ontoegankelijk

Op de pagina staat een gegevenstabel. Deze tabel mist de juiste markering. Als gevolg daarvan kunnen schermlezers de structuur van de tabel niet interpreteren of de relaties tussen de verschillende gegevenscellen niet begrijpen.

Een goede oplossing is om semantische HTML-elementen te gebruiken om de tabel te markeren: table, tr, th en td. De tabel moet worden verpakt in een table-element en de kolomkoppen: "Ingestuurd", "Onderwerp", "Instuurder" en "Status" moeten worden gemarkeerd met th-elementen. Elke gegevenscel moet worden gedefinieerd met td-elementen. Om ervoor te zorgen dat de relatie tussen kopteksten en gegevenscellen programmatisch duidelijk is, kunnen de th-elementen het scope-attribuut bevatten. Deze wijzigingen zorgen ervoor dat hulptechnologieën, zoals schermlezers, de tabelstructuur correct kunnen interpreteren en toegankelijke inhoud kunnen bieden voor alle gebruikers.

(Voldoet niet aan: SC 1.3.1- Info and Relationship)

De tabelrij met gegevens van een sollicitatie, is gemarkeerd als een link. Deze link krijgt echter geen focus bij het navigeren met het toetsenbord omdat tabindex="-1" wordt toegepast. Dit attribuut verwijdert het element expliciet uit de tabvolgorde, waardoor het ontoegankelijk wordt voor gebruikers die afhankelijk zijn van toetsenbordnavigatie of ondersteunende technologieën, zoals schermlezers, voor interactie met de pagina. Hetzelfde probleem treedt op wanneer de pagina op een klein scherm wordt bekeken.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Wanneer de pagina op een klein scherm wordt bekeken, ontstaan meer issues in de sollicitatie-informatie. De tabelrij verandert van lay-out. Deze informatie is visueel zo gegroepeerd dat de relatie tussen stukken tekst duidelijk is. In de HTML ontbreekt deze relatie, waardoor schermlezers en hulptechnologieën de relatie tussen de kopteksten en de bijbehorende gegevens niet kunnen interpreteren. Dit kan tot verwarring leiden voor gebruikers die afhankelijk zijn van ondersteunende technologieën, zoals schermlezers. Bovendien is de hele sectie gemarkeerd als een enkel a-element, waardoor het voor hulptechnologieën moeilijk is om door de gestructureerde gegevens te navigeren en deze te begrijpen. Verder is de tekst "Sollicitatie op Open sollicitatie door ..." niet gemarkeerd als een kop.

(Voldoet niet aan: SC 1.3.1- Info and Relationship)

Op een klein scherm heeft de lichtgrijze kleur (#D3D3D3) van de volgende teksten een te laag contrast tegen de witte (#FFFFFF) achtergrond: 'Ingestuurd', 'Instuurder' en 'Status'. Het contrast is 1,5:1. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum)

Op de pagina staan twee links met dezelfde tekst "Mijn sollicitatie". Deze links bevinden zich in het hoofdnavigatiemenu en in de broodkruimels. Uit deze linkteksten is de bestemming van de link niet duidelijk. Je kunt dit oplossen door extra informatie toe te voegen via het title-attribuut, of door de linktekst aan te vullen met een span-element met tekst die alleen zichtbaar is voor de schermlezer.

(Voldoet niet aan: SC 2.4.4 - Link Purpose (In Context))

In de sectie onder het kopje "Persoonlijke informatie" staan labels, bijvoorbeeld "Voorletters" en de bijbehorende waarden, bijvoorbeeld "T.E.S.T.". Deze relatie ontbreekt in de HTML. Zonder expliciete relaties in de HTML-code, zoals het koppelen van labels aan de bijbehorende waarden met behulp van de juiste markering, kunnen hulptechnologieën zoals schermlezers het verband tussen de labels en de bijbehorende waarden niet interpreteren. Dit zorgt voor verwarring bij gebruikers die afhankelijk zijn van hulptechnologieën, omdat ze niet kunnen bepalen welke waarde bij welk label hoort.

Een mogelijke oplossing is om deze elementen te markeren met een dl-element (definitielijst). Elk label, zoals "Voorletters", moet worden ingesloten in een dt-element (definitieterm), en elke waarde, zoals "T.E.S.T.", moet worden ingesloten in een corresponderend dd-element (definitiebeschrijving). Als alternatief kan het table-element worden gebruikt om hetzelfde resultaat te bereiken. Andere oplossingen zijn ook mogelijk.

Zie ook andere secties voor hetzelfde probleem.

Hetzelfde probleem wordt waargenomen op de pagina's:

• Persoonlijke gegevens
• Aanpassen wachtwoord zie “Gebruikersnaam” en zijn waarde

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

Onder de kopjes "Privacyverklaring" en "Contactgegevens" bevinden zich schakelknoppen. De labels "Op de hoogte van privacyverklaring" en "Mijn gegevens mogen 1 jaar bewaard worden." zijn niet expliciet gekoppeld aan deze knoppen.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship en SC 4.1.2 - Name, Role, Value)

Hoewel het label-element aanwezig is in de HTML, ontbreekt de link naar het input-element. Als een label-element aanwezig is, moet het gekoppeld worden aan het corresponderende input-element met behulp van het for-attribuut op het label-element. Dit attribuut moet verwijzen naar het id-attribuut van het input-element. Omdat de naam momenteel ontbreekt, faalt deze bevinding ook onder succescriterium 4.1.2.

Omdat de visuele labeltekst niet aanwezig is in de toegankelijke naam, kunnen deze elementen niet worden geactiveerd met spraak. Zie ook dezelfde knoppen op de pagina Aanmaken sollicitatie

(Voldoet niet aan: SC 2.5.3 - Label in name)

In de secties onder de kopjes "Contactgegevens" en "Bijlagen" staan links met een lichtgrijze kleur (#cfcfcf) op een witte achtergrond. Het contrast is te laag: 1,6:1. Dit moet minstens 4,5:1 zijn.

Zie ook de links voor de bestanden wanneer de bestanden zijn bijgevoegd in het gedeelte "Reacties".

Hetzelfde probleem wordt ook waargenomen op de pagina's:

• Persoonlijke gegevens
• Aanmaken sollicitatie onder de kop “Motivatie en CV” wanneer de bestanden worden geüpload

(Voldoet niet aan: 1.4.3 - Contrast (Minimum))

In de sectie onder het kopje "Bijlagen" staat een link om een pdf-bestand te openen. De bezoeker kan op deze link klikken om het bijgevoegde bestand in een nieuw tabblad te openen. Deze functionaliteit is niet beschikbaar voor de bezoeker die alleen met het toetsenbord door de website navigeert. Hetzelfde probleem wordt waargenomen bij de links in het gedeelte "Reactie" wanneer de bestanden zijn bijgevoegd voordat de reactie is geplaatst.

Zie ook pagina Aanmaken sollicitatie onder de kop “Motivatie en CV” wanneer de bestanden worden geüpload

(Voldoet niet aan: SC 2.1.1 - Keyboard)

In het gedeelte onder het kopje "Algemeen" gebruikt de tekst "Bestemming" een grijze kleur (#97979) op een witte achtergrond. Het contrast is te laag: 2,9:1. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: 1.4.3 - Contrast (Minimum))

In het gedeelte onder het kopje "Algemeen" wordt het em-element gebruikt voor styling in tekst onder het label "Toelichting". Het em-element heeft semantische waarde: het geeft een bepaalde betekenis aan de tekst die het bevat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Daarom moet dit element niet worden gebruikt om alleen een visueel effect (cursief) te bereiken. Gebruik hiervoor CSS. Dezelfde tekst die is gemarkeerd met een em-element verschijnt in de popup. De popup kan worden geopend met de knop die in de rechterbovenhoek verschijnt wanneer een bezoeker met de muis over het blok met de tekst beweegt.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

In de sectie onder het kopje "Algemeen" staat "Onderwerp" en "Toelichting" informatie. Wanneer een bezoeker met de muis over de blokken met waarde beweegt, verschijnt er rechtsboven een knop met een uitvouwpictogram. Dit pictogram heeft geen tekstalternatief. Voor knoppen die alleen uit afbeeldingen bestaan, is het belangrijk om het doel van het element te beschrijven in de alternatieve tekst. Dit is anders dan alternatieve tekst die alleen beschrijft wat er in de afbeelding te zien is. Momenteel kan een schermlezer de functie van de knop niet interpreteren. De volgende oplossingen kunnen worden gebruikt om een tekstalternatief te bieden: voor SVG-afbeeldingen wordt het title-element gebruikt, een aria-label of tekst die verborgen is voor het scherm.

(Voldoet niet aan: SC 1.1.1 - Non-text Content)

Omdat de naam momenteel ontbreekt, faalt deze bevinding ook onder succescriterium 4.1.2. Bovendien heeft deze knop geen goede rol om zijn functie aan te geven.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Deze knop die verschijnt bij het zweven kan niet worden bediend met het toetsenbord. Bezoekers die de website zonder een computermuis met alleen het toetsenbord navigeren moeten alle interactieve elementen kunnen bedienen. Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.

(Voldoet niet aan: SC 2.1.1 - Keyboard)

Dezelfde problemen worden waargenomen bij de knop met horizontale lijnen in de rechterbovenhoek in het gedeelte "Reacties".

(Voldoet niet aan: SC 1.1.1 - Non-text Content, C 4.1.2 - Name, Role, Value, SC 2.1.1 - Keyboard)

De knoppen die verschijnen bij hoveren openen pop-ups. Deze pop-ups hebben een aantal toegankelijkheidsproblemen.

Deze popups vereisen specifiek toetsenbordbeheer. Wanneer deze pop-ups worden geopend, moet de focus erin terechtkomen. Terwijl de pop-up geopend is, moet de focus van het toetsenbord beperkt blijven tot de pop-up en niet verschuiven naar elementen op de onderliggende pagina. Een goed beheer van de focus is essentieel om ervoor te zorgen dat bezoekers effectief door de popup kunnen navigeren en niet in de war raken door per ongeluk interactie te hebben met inhoud buiten de popup terwijl deze open staat.

Zorg ervoor dat de focus in de popup blijft totdat de bezoeker deze sluit door op de sluitknop te klikken of op de ESC-toets op het toetsenbord te drukken. Een andere optie is om de popup automatisch te laten sluiten wanneer de bezoeker het menu verlaat. Dit verbetert de toegankelijkheid en zorgt ervoor dat bezoekers vlot kunnen navigeren zonder onverwachte interacties.

Nadat de popup is gesloten, moet de focus terechtkomen op de knop die hem activeert of op het volgende logische element op de pagina.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Op de pop-ups staat een kopieerknop die verschijnt wanneer een bezoeker met de muis over de pop-up beweegt. Deze knop wordt niet meegenomen in de focusvolgorde. De focusvolgorde is dus niet logisch. Zorg ervoor dat alle interactieve elementen in de popup focus krijgen.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Er is een "X"-knop op de popup. Wanneer deze knop focus krijgt, is de focus niet zichtbaar. Zorg ervoor dat de focus zichtbaar is op interactieve elementen, zodat de bezoeker weet wanneer hij de elementen kan activeren.

(Voldoet niet aan: SC 2.4.7 Focus Visible)

De kopieerknop heeft een pictogram dat verschijnt als je er met de muis overheen gaat. De kleur van het pictogram is lichtblauw (#CBD6E1). Het heeft een laag kleurcontrast ten opzichte van de achtergrond: 1,5:1. Dit moet minstens 3,0:1 zijn.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

Wanneer een bezoeker op de kopieerknop klikt, verschijnt de tekst "Gekopieerd". Dit bericht is een terugkoppeling om de bezoeker te laten weten dat de actie is voltooid. De pagina wordt niet herladen en de focus wordt niet verplaatst naar dit bericht. Dit bericht is een statusbericht en een schermlezer zou het als zodanig moeten kunnen herkennen en aankondigen. Om dit probleem op te lossen, markeer je het statusbericht met aria-live="beleefd" of role="status." Hierdoor wordt het bericht automatisch aangekondigd door de schermlezer zonder dat je de focus hoeft te verplaatsen, waardoor gebruikers zonder verwarring op de hoogte worden gebracht van de voltooide actie.

(Voldoet niet aan: SC 4.1.3 - Status Messages)

De kopieerknop voldoet niet aan de minimale vereisten voor de grootte van een interactief element. De grootte is 20 x 24 CSS px. Als de doelen klein zijn, is het moeilijk voor gebruikers met trillende handen en gebruikers die moeite hebben met de fijne motoriek om ze nauwkeurig te activeren. De aanbevolen minimale grootte voor doelen is 24 x 24 CSS px. Als de doelen voldoende groot zijn of voldoende ruimte tussen de doelen laten, is de kans kleiner dat per ongeluk het verkeerde besturingselement wordt geactiveerd.

(Voldoet niet aan: SC 2.5.8 Target Size (Minimum))

Gebruikers hebben de mogelijkheid om het pop-upvenster met de muis van de beginpositie naar een andere locatie te slepen. Er is echter geen invoeralternatief met één muisaanwijzer waarmee dezelfde functionaliteit kan worden bereikt. Sommige mensen kunnen moeite hebben om sleepbewegingen met precisie uit te voeren, terwijl anderen vertrouwen op gespecialiseerde of aangepaste invoerapparaten, zoals trackballs, hoofdaanwijzers, oogkijksystemen of spraakgestuurde muisemulators, die het slepen omslachtig en foutgevoelig kunnen maken. Een alternatieve aanpak zou kunnen bestaan uit een reeks interacties met een enkele aanwijzer, zoals het activeren van een doel voor beweging. Het probleem wordt waargenomen bij alle pop-upvensters op de website.

(Voldoet niet aan: 2.5.7 Dragging Movements)

In de sectie "Reacties" zijn er knoppen die menu's openen. Ze hebben een aantal toegankelijkheidsproblemen. In de rechterbovenhoek naast het kopje "Reacties" staat een knop met drie horizontale lijnen. Er zijn knoppen met drie stippen. Deze knoppen bevinden zich in de secties met geplaatste reacties.

Deze knoppen openen menu's met interactieve items. De status van het menu (open of gesloten) ontbreekt op de knoppen. Dit kan worden opgelost door het toevoegen van een tekstuele uitleg (bijvoorbeeld "(ingeklapt)" en "(uitgeklapt)" die voor reguliere bezoekers onzichtbaar gemaakt is met CSS.). Een andere oplossing die kan worden gebruikt is het toevoegen van een aria-expanded attribuut aan de knop waarmee dit menu wordt geopend. Deze moet de waarde "true" krijgen als het menu getoond wordt en de waarde "false" als het menu verborgen is.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

De menu's die worden geopend, hebben geen juiste rol en geen toegankelijke naam.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

De opties in de menu's zijn interactieve elementen en ze missen een goede rol.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Deze opties kunnen niet worden bediend met het toetsenbord.

(Voldoet niet aan: SC 2.1.1 - Keyboard)

Visueel is de relatie tussen de knoppen en de menu's die ze openen duidelijk aangegeven. Deze relatie wordt echter niet weerspiegeld in de HTML-structuur. In de code staat het menu aan het einde van het DOM en de knop en het bijbehorende menu zijn op geen enkele manier met elkaar verbonden. Hierdoor is de volgorde niet zinvol. Het probleem wordt waargenomen voor de knop die wordt gepresenteerd met horizontale lijnen en voor de knoppen die worden gepresenteerd met drie stippen.

(Voldoet niet aan: SC 1.3.2 - Meaningful Sequence)

Onder het kopje "Reacties" staat een teksteditor. Deze teksteditor heeft een aantal toegankelijkheidsproblemen.

De toegankelijke naam van de editor is "Rich Text Editor, editor2". Zo'n toegankelijke naam is niet beschrijvend genoeg om het doel van dit element te identificeren.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

De teksteditor heeft een werkbalk met knoppen. Deze knoppen zijn niet aanwezig in de huidige focusvolgorde. Als een bezoeker alleen met het toetsenbord navigeert, worden deze teksteditor-knoppen overgeslagen. Zorg ervoor dat deze knoppen gefocust kunnen worden.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Het tekstgebied in deze teksteditor is toegevoegd via een iframe-element. Het title-attribuut ontbreekt. Een iframe moet een toegankelijke naam hebben. Een bezoeker die een schermlezer gebruikt, moet deze naam kunnen horen om te begrijpen wat er in het iframe staat. Dit kan worden gedaan door een title-attribuut toe te voegen aan het iframe-element. Het title-attribuut moet aanwezig zijn en unieke, betekenisvolle tekst bevatten die de inhoud en het type inhoud beschrijft.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Onderaan de teksteditor staat een knop met de tekst “zoek in bestanden”. De tekst is blauw (#0078D7) op de lichtblauwe achtergrond (#F8FAFC). Het contrast is 4,3:1. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem wordt waargenomen bij het interactieve element met de tekst “Alles downloaden”. Het verschijnt in het gedeelte “Reacties” voor reacties met meerdere geüploade bestanden.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

Naast de knop “zoek in bestanden” staat een knop met een pijlpictogram. Hiermee wordt het submenu geopend. De knop gebruikt het aria-label attribuut om een toegankelijke naam te definiëren. De waarde van het aria-label is echter een driehoekig symbool. Dit symbool geeft geen zinvolle of beschrijvende informatie over het doel van de knop aan gebruikers van ondersteunende technologieën zoals schermlezers.

Hierdoor is de toegankelijke naam onduidelijk en wordt de beoogde functionaliteit niet gecommuniceerd.

Bekijk de knop met dezelfde afbeelding en toegankelijke naam op de pagina's:

• Aanmaken sollicitatie onder de kop “Motivatie en CV” naast de knop “Bestanden kiezen”
• Aanpassen gegevens naast de knop “Afbeelding kiezen”

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

Wanneer de knop “zoek in bestanden” en de pijlknop toetsenbordfocus krijgen, verandert alleen de achtergrondkleur om de focus aan te geven. Dit gebruik van kleur als de enige manier om informatie te geven over de locatie van de focus is ontoereikend. 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 waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond. Hetzelfde probleem wordt waargenomen bij de knop "Reactie plaatsen" wanneer deze actief is.

(Voldoet niet aan: SC 1.4.1 - Use of Color)

De pijlknop opent en sluit het submenu. De status van het menu (open of gesloten) ontbreekt op deze knop. Bovendien heeft dit menu niet de juiste rol en een toegankelijke naam.

Hetzelfde probleem wordt waargenomen bij de knoppen met pijlpictogrammen op de volgende pagina's:

• Aanpassen gegevens de knop naast “Afbeelding kiezen” knop
• Aanmaken sollicitatie de knop naast “Bestanden kiezen” knop

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Visueel is de relatie tussen de knop en het submenu dat wordt geopend duidelijk aangegeven. Deze relatie wordt echter niet weerspiegeld in de HTML-structuur. In de code staat het menu aan het einde van het DOM en de knop en het bijbehorende menu zijn op geen enkele manier met elkaar verbonden. Hierdoor is de volgorde niet zinvol.

(Voldoet niet aan: SC 1.3.2 - Meaningful Sequence)

Het submenu bevat knoppen en deze knoppen. Deze knoppen zijn niet aanwezig in de huidige focusvolgorde. Als een bezoeker alleen met het toetsenbord navigeert, worden deze teksteditorknoppen overgeslagen. Zorg ervoor dat deze knoppen gefocust kunnen worden.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Wanneer een bezoeker een waarde invoert in het tekstveld van de teksteditor, wordt de knop "Reactie plaatsen" actief. In actieve toestand heeft de witte tekst (#FFFFFF) op de knop een te laag contrast tegen de groene achtergrond (#3CC658). Het contrast is 2,2:1. Dit moet minstens 4,5:1 zijn.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

Wanneer een bezoeker meer dan één bestand toevoegt, staan er naast de bestandslinks "X"-knoppen die dezelfde toegankelijke namen hebben: "Bestand verwijderen". Zo'n toegankelijke naam specificeert niet bij welk bestand de knop hoort, waardoor het niet zinvol of uniek is voor gebruikers die afhankelijk zijn van hulptechnologieën zoals schermlezers.

(Voldoet niet aan: SC 2.4.6 - Headings and Labels)

Wanneer deze "X"-knoppen toetsenbordfocus krijgen, is de focus bovendien niet zichtbaar. De focus is niet zichtbaar op de knoppen met drie stippen. Deze knoppen bevinden zich in de secties met geplaatste reacties.

(Voldoet niet aan: SC 2.4.7 - Focus Visible)

Wanneer er reacties zijn geplaatst in de sectie "Reacties" en een bezoeker door de inhoud navigeert met het toetsenbord, komt de focus terecht op onzichtbare links. De focusvolgorde van elementen moet logisch en intuïtief zijn. De focus mag niet terechtkomen op interactieve elementen (links, knoppen, formuliervelden) die niet zichtbaar zijn. Dit kan leiden tot onbedoelde activering van deze elementen. Alleen zichtbare elementen mogen focus krijgen.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Bovendien hebben deze links geen toegankelijke namen.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Wanneer toegevoegde reacties bestanden bevatten, is er voor elk bestand een afbeelding. Deze afbeelding wordt toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Elk bijgevoegd bestand bevat een link om het specifieke bestand te downloaden. De link wordt weergegeven met een downloadpictogram. Deze afbeelding heeft geen tekstalternatief om de functie van de link te beschrijven.

(Voldoet niet aan: SC 1.1.1 - Non-text Content)

Deze link heeft geen toegankelijke naam. Hij voldoet dus ook niet aan het 4.1.2 succescriterium.

(Voldoet niet aan: SC 4.1.2 - Name, Role, Value)

Op de pagina staat een iframe met een kaart. Het title-attribuut ontbreekt. Een iframe moet een toegankelijke naam hebben. Een bezoeker die een schermlezer gebruikt, moet deze naam kunnen horen om te begrijpen wat er in het iframe staat. Dit kan worden gedaan door een title-attribuut toe te voegen aan het iframe-element. Het title-attribuut moet aanwezig zijn en unieke, betekenisvolle tekst bevatten die de inhoud en het type inhoud beschrijft.

(Voldoet niet aan: 4.1.2 Name, Role, Value)

Wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium 1.4.12, verschuift de tekst van de koptekst “Persoonlijke gegevens” naar boven op de donkerblauwe achtergrond. Hierdoor is het kleurcontrast tussen de koptekst en de donkerblauwe achtergrond onvoldoende, waardoor de tekst moeilijk te lezen is, vooral voor gebruikers met een visuele beperking.
Zorg ervoor dat de tekst leesbaar blijft.
Hetzelfde probleem wordt ook op andere pagina's waargenomen, bijvoorbeeld,

• Account beveiligen
• Twee factor authenticatie
• Selecteer organisatie

(Voldoet niet aan: SC 1.4.12 - Text Spacing)

Op de pagina staat een link “Aanpassen”. Wanneer een bezoeker met de muis over deze link beweegt, verandert de tekstkleur van blauw naar wit. Hierdoor ontstaat een laag kleurcontrast tussen de witte tekst en de witte achtergrond. Hierdoor wordt de link moeilijk leesbaar en volledig onzichtbaar.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum)

Wanneer de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, worden de teksten van de links afgekapt. Dit zijn de teksten die beginnen met “Pas je wachtwoord aan ...” en “Verklein de kans dat ...”. Controleer of de inhoud van de pagina nog steeds toegankelijk is wanneer deze wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%.

(Voldoet niet aan: SC 1.4.10 - Reflow)

Op de pagina zijn de teksten onjuist gemarkeerd als kop. Dit zijn de teksten die beginnen met “Pas je wachtwoord aan ...” en “Verklein de kans dat ...”. Deze teksten worden opgenomen in het h3-element. Door deze teksten te markeren met een h-element worden structuur en inforelaties verkeerd weergegeven. Tekst die visueel of structureel niet fungeert als een heading moet niet gemarkeerd worden als een heading. Verwijder ze uit het heading-element en markeer ze met een geschikt element, bijvoorbeeld met een p-element.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

De knop “Activeren” heeft de lichtblauwe tekst (#E0E7ED). Deze tekst heeft een te laag contrast van 2,9:1 ten opzichte van de donkerblauwe achtergrond (#6C8B9A). Dit moet minstens 4,5:1 zijn. Hetzelfde probleem wordt waargenomen bij de knop “Verifiëren” die verschijnt nadat op de knop “Activeren” is geklikt. Zie ook de knop “OK” op het pop-upvenster “Aanmelden”. Het pop-upvenster verschijnt wanneer een bezoeker een onjuiste waarde invoert in het veld “Wachtwoord” of het veld leeg laat en vervolgens op “Verifiëren” klikt.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum)

Wanneer de knop “Activeren” toetsenbordfocus krijgt, is dit zichtbaar door de verandering van de achtergrondkleur en de grijze rand (#979797). De contrastverhouding tussen de focusrand en de witte achtergrond is 2,9:1, waar het minstens 3:1 zou moeten zijn. Het contrast van de achtergrondkleuren in de gefocuste en onfocuste stand is ook laag: 1,9:1. Dit maakt het moeilijk of onmogelijk voor de gebruiker om de achtergrondkleur te zien. Dit maakt het moeilijk of onmogelijk voor slechtzienden en kleurenblinden om het onderscheid waar te nemen. Gebruik een kleurencombinatie met voldoende contrast.

Hetzelfde probleem wordt waargenomen bij de knop “Verifiëren” die verschijnt nadat op de knop “Activeren” is geklikt. Zie ook de knop “OK” op het pop-upvenster “Aanmelden”. Het pop-upvenster verschijnt wanneer een bezoeker een onjuiste waarde invoert in het veld “Wachtwoord” of het veld leeg laat en vervolgens op “Verifiëren” klikt.

(Voldoet niet aan: SC 1.4.11 - Non-text Contrast)

De knoppen die kleuren gebruiken die niet voldoen aan de minimale eisen voor kleurcontrast verschijnen ook op andere pagina's en pop-ups, bijvoorbeeld, Aanpassen gegevens ziet de knoppen op de pagina en in de popup die wordt geopend wanneer op de knop “Aanpassen” wordt geklikt. De knop “Aanpassen” bevindt zich naast de velden “Adres” en “Postadres", zie:

• Aanpassen wachtwoord
• Inloggen

Wanneer een bezoeker een onjuiste waarde invoert in het veld “Wachtwoord” of het veld leeg laat en vervolgens op “Verifiëren” klikt, verschijnt het pop-upvenster. Dit heeft een aantal toegankelijkheidsproblemen.

De tekst “Aanmelden” mist de juiste opmaak. Deze tekst doet dienst als koptekst, maar is in de HTML-code niet gemarkeerd als kop. Als tekst alleen visueel als kop verschijnt, wijkt de structuur van de informatie in de HTML af van de zichtbare structuur. De juiste HTML-elementen (h1 - h6) moeten worden gebruikt om deze koppen op te maken.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

Hetzelfde pop-upvenster heeft geen toegankelijke naam en geen juiste rol.

(Voldoet niet aan: SC 4.1.2 Name, Role, Value)

Wanneer een bezoeker met het toetsenbord door de pagina navigeert en dit pop-upvenster opent, is de volgorde van de focus onjuist. De focus ligt niet vast in het pop-upvenster. Zorg ervoor dat de focus in het venster blijft totdat de bezoeker het sluit door op de sluitknop te klikken of door een ESC-toets op het toetsenbord te gebruiken. Of laat het venster verdwijnen wanneer de focus het paneel verlaat.

(Voldoet niet aan: SC 2.4.3 - Focus Order)

Op hetzelfde pop-upvenster staat een “X”-knop, maar deze heeft geen zichtbare focusindicator. De focus moet zichtbaar zijn zodat de bezoeker weet wanneer hij de elementen kan activeren.

(Voldoet niet aan: SC 2.4.7 - Focus Visible)

Deze problemen worden herhaald in andere pop-upvensters op verschillende pagina's van de website.

Onder de kop staat een invoerveld met plaatshoudertekst: “Typ om te filteren”. De placeholder-tekst heeft een te laag contrast tegen de achtergrond. De tekst is grijs (#BCBCBC). De achtergrond is lichtgrijs (#EBEBEB). Het contrast is 1,6:1.

(Voldoet niet aan: SC 1.4.3 - Contrast (Minimum))

Als een bezoeker een waarde invoert die niet voorkomt in de resultaten, verschijnt er een melding zoals “Het filter levert geen organisaties op.” zonder dat de pagina opnieuw wordt geladen. Als dit bericht geen focus krijgt, kan de schermlezer deze informatie niet voorlezen. Deze melding is een statusbericht omdat het voldoet aan twee hoofdcriteria: de melding geeft informatie over de resultaten van een actie en ontvangt geen focus. De rol van een statusbericht moet programmatisch kunnen worden bepaald zodat een schermlezer deze informatie kan voorlezen. Dit kan worden opgelost door role="status" aan de melding toe te voegen. Zie voor meer informatie pagina ARIA19.

(Voldoet niet aan: SC 4.1.3 - Status Messages)

De focus is niet zichtbaar op de link onder het invoerveld. Er worden geen aangepaste alternatieven geboden. Zorg ervoor dat de focus altijd zichtbaar is. De focus moet altijd zichtbaar zijn op de interactieve elementen die toetsenbord focus krijgen. Wanneer de focus onzichtbaar is, is het niet duidelijk wanneer de bezoeker op Enter moet drukken om de knop of de link te activeren.

(Voldoet niet aan: SC 2.4.7 - Focus Visible)

De volgende kop is gemarkeerd met een strong-element: "Werken bij de Raad". De elementen strong, em en b zijn niet bedoeld om koppen mee te markeren. Dit moest 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. strong en em zijn wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.

(Voldoet niet aan: SC 1.3.1 - Info and Relationship)

Op de pagina staan twee decoratieve afbeeldingen: onder de kopjes "Over ons" en "Vacatures & stageplaatsen". Deze afbeeldingen zijn toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Een decoratieve afbeelding voegt geen informatie toe aan de pagina en moet verborgen worden voor de schermlezer. Er zijn verschillende oplossingen mogelijk. Afbeeldingen die zijn toegevoegd via een img element hebben een leeg alt attribuut nodig (alt=""). Role=”presentation” of aria-hidden=”true” verbergen elementen voor de schermlezer.

Hetzelfde probleem wordt ook waargenomen op de pagina's:

• sollicitatiedossier
• Persoonlijke gegevens afbeelding met pijl op de knop “Aanpassen”
• Vacature afbeelding met pijl op de knop “Aanpassen”
• Account beveiligen
• Mijn sollicitatie bestandstype-pictogrammen zien in het gedeelte "Reactie" wanneer de bestanden worden geüpload

(Voldoet niet aan: SC 1.1.1 - Non-text Content)

Onder de kopjes "Over ons" en "Onze cao" staan links met de tekst 'Lees meer'. Linkteksten als ‘lees meer’ of ‘klik hier’ beschrijven niet duidelijk waar de link naartoe leidt. Blinde bezoekers laten hun schermlezer een lijst maken van alle links op een pagina, om zo de inhoud snel te scannen. Goede, beschrijvende linkteksten zijn hierbij erg belangrijk: die helpen om zonder visuele context te begrijpen wat de bestemming is van de links. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), zijn in zo’n overzicht niet duidelijk. Ze helpen niet bij het begrijpen van de inhoud van de pagina. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de titel van de pagina waarnaar is gelinkt. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

(Voldoet niet aan: SC 2.4.4 - Link Purpose (In Context)

Wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium 1.4.12, worden de linkteksten in het hoofdnavigatiemenu gedeeltelijk onzichtbaar en zijn ze niet langer leesbaar. De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. Zorg ervoor dat de tekst leesbaar blijft.

Hetzelfde probleem wordt waargenomen bij de broodkruimels op alle pagina's die dit element bevatten.

(Voldoet niet aan: SC 1.4.12 - Text Spacing)

Wanneer de homepagina wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, wordt het deel van de lijst onder de kop "Waarom onze mensen graag bij ons werken" afgekapt. De knop "Lees meer" onder deze lijst is niet zichtbaar. Wanneer een bezoeker door de pagina navigeert met het toetsenbord en de knop "Lees meer" onder de kop "Waarom onze mensen graag bij ons werken" wordt gefocust, wordt deze knop zichtbaar. De kop "Waarom onze mensen graag bij ons werken" en een deel van de lijst worden echter afgekapt.

(Voldoet niet aan: SC 1.4.10 - Reflow)