Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Sociale Dienst Drechtsteden

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Sociale Dienst Drechtsteden
Datum 4 september 2023
Scope van de website
  • alle pagina's op socialedienstdrechtsteden.nl
  • de vragenpagina op e-loket-sdd.drechtsteden.nl/eformer
  • niet de pagina's op Mijn SDD (apart onderzoek)
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 102

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op pagina www.socialedienstdrechtsteden.nl/ staan bij de blokken met de koppen “Werk”, “Bijstand”, “Schulden” en “Wmo” afbeeldingen. Deze afbeeldingen hebben nu een tekstalternatief, maar zijn decoratief. Daarom dient de alt-tekst van deze afbeeldingen leeg gelaten te worden. De afbeelding heeft dan nog wel een leeg alt-attribuut (alt="") nodig, zodat hulpsoftware weet dat de afbeelding genegeerd kan worden. Ook in het rode blok onder de kop “Veel bezocht” staan voorafgaand aan elk item decoratieve afbeeldingen met een tekstalternatief. Dit blok komt ook voor op pagina www.socialedienstdrechtsteden.nl/bestaatniet. En op pagina www.socialedienstdrechtsteden.nl/nieuws staat bij elk nieuwsbericht een decoratieve afbeelding. Controleer dit voor alle pagina’s.

Bevinding 2: Op pagina www.socialedienstdrechtsteden.nl/contactmogelijkheden staat een afbeelding van een man met een headset. Deze afbeelding heeft nu een tekstalternatief, maar is decoratief. Daarom dient de alt-tekst van deze afbeelding leeg gelaten te worden. Op pagina www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… staat een soortgelijke afbeelding van een man met een notebook. Ook deze afbeelding heeft een tekstalternatief, terwijl deze decoratief is. Controleer dit voor alle pagina’s.

Bevinding 3: Op pagina www.socialedienstdrechtsteden.nl/op-deze-website/toegankelijkheidsverklaring staat een afbeelding met als tekstalternatief “toegankelijkheidsverklaring”. Dit beschrijft onvoldoende de inhoud van de afbeelding, beter zou zijn “Status toegankelijkheid website Sociale Dienst Drechtsteden”. Dit kan eventueel aangevuld worden met een verwijzing naar de link eronder.

Bevinding 4: Op pagina www.socialedienstdrechtsteden.nl/nieuws staat bij elk nieuwsbericht een decoratieve afbeelding. De afbeeldingen zijn klikbaar. De alternatieve tekst bij de afbeeldingen beschrijft de afbeelding maar beschrijft niet het doel van de link. Omdat er op dezelfde pagina al twee andere links met hetzelfde linkdoel aanwezig zijn, is het beter om de link om de afbeelding te verwijderen en de alt-tekst van deze afbeeldingen leeg te laten. Zie ook succescriterium 2.4.4.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 5: Op pagina www.socialedienstdrechtsteden.nl/overons/ons-verhaal komt er in de video bij de aftiteling het logo van “Sociale Dienst Drechtsteden” in beeld. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Ook is het niet duidelijk wanneer een wisseling van sprekers plaatsvindt. Dit gebeurt op de tijdstippen 1:38, 1:58 en 2:15. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals schermvoorleessoftware niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript, of voeg een audiodescriptie toe aan het audiospoor om ook te voldoen aan succescriterium 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Bij succescriterium 1.2.3 staat een video beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie verplicht (niveau AA), een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video niet (goed) kunnen zien. Zie pagina www.socialedienstdrechtsteden.nl/overons/ons-verhaal.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op pagina www.socialedienstdrechtsteden.nl/ staat onder de kop “Veel bezocht” een opsomming. Deze is nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven. Dezelfde opsomming komt ook voor op pagina www.socialedienstdrechtsteden.nl/bestaatniet. Controleer dit voor alle pagina’s.

Bevinding 8: Op pagina www.socialedienstdrechtsteden.nl/contactmogelijkheden staat in het uitvouwbare blok met de kop “Langskomen” onder de koppen “Openingstijden” soms een opsomming van openingstijden. Deze zijn nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven. Dit komt op meerdere pagina’s voor, waaronder op www.socialedienstdrechtsteden.nl/energietoeslag in het uitvouwbare blok “Hoe zit het met de energietoeslag in 2023?”.

Bevinding 9: Op elke pagina staat in de footer content waarvan er een aantal koppen hebben van niveau 4 (h4). Als in de content erboven koppen worden gebruikt van niveau 1 tot en met 3, dan lijkt het of de koppen in de footer onderdeel zijn van de laatste kop in de content. Dit is op te lossen door de koppenstructuur in de footer te wijzigen door er koppen van niveau 2 (h2) van te maken of door er een (visueel onzichtbare) kop toe te voegen aan de footer dat aangeeft dat dit

Bevinding 10: Op pagina www.socialedienstdrechtsteden.nl/contactmogelijkheden staat een tekst schuingedrukt. De tekst luidt "Let op! Op een aantal dagen zijn wij gesloten. Bekijk deze dagen via het kopje 'Feestdagen'.". Deze tekst is opgemaakt als kopniveau 6 (H6-element). Maak hier gewone tekst van.

Bevinding 11: Advies: Op veel pagina's ontbreekt kopniveau 1, worden koppen overgeslagen of is de koppenstructuur niet altijd even duidelijk. Bezoekers die gebruikmaken van schermvoorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, etcetera.

Bevinding 12: Op pagina www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… staat onder een aantal van de uitvouwbare blokken een tabel. Het gaat om de tabellen met drie kolommen. De tabelkoppen hiervan zijn opgemaakt met een h4-element. Dat is niet correct. Hierdoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element.

Bevinding 13: Op pagina www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… staat onder een aantal van de uitvouwbare blokken een tabel. Het gaat om de tabellen met drie kolommen. In de eerste kolom staat in elke cel één item dat is opgemaakt als een lijst. Dat is niet de bedoeling. Maak alleen gebruik van een lijst als er meerdere bij elkaar behorende items aanwezig zijn.

Bevinding 14: Op elke pagina is een zoekknop waarmee je een zoekformulier kunt oproepen. Als dit zoekformulier tevoorschijn komt is hier ook een sluitknop aanwezig. Dit kruisje is klikbaar. De naam is echter niet duidelijk. Deze luidt 'close' in plaats van 'sluiten'.

Bevinding 15: Op pagina www.socialedienstdrechtsteden.nl/zoek= staat een zoekformulier. Deze heeft een legend-element met de tekst “Trefwoorden”. Dit is visueel verborgen doordat de fontgrootte ervan 0 is. Gebruikers van hulpsoftware krijgen dit mogelijk wel voorgelezen. Deze informatie moet ook beschikbaar zijn voor ziende mensen. Bovendien is een legend-element hier overbodig, er is namelijk maar één invoerveld.

Bevinding 16: Op pagina www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… is de tekst “Belangrijk: De bedragen die op deze pagina worden genoemd zijn netto bedragen.” opgemaakt met zowel een strong- als een em-element. Het em- en strong-element zijn bedoeld om nadruk te geven aan één of enkele woorden, niet voor hele zinnen. Los dit hier op door alleen het woord “Belangrijk” op te maken met het em- OF het strong-element. Ook op pagina e-loket-sdd.drechtsteden.nl/eformer/ zijn bij de stap “Controle” koppen en een volledige alinea opgemaakt met het em-element. Controleer dit voor alle pagina’s.

Bevinding 17: Op pagina www.socialedienstdrechtsteden.nl/nieuws/dordrecht-hendrik-ido-ambacht-en-papendrecht-besluiten-tot-… staan twee tabellen bijvoorbeeld de tabel onder de kop “Overzicht per gemeente (120% van het wettelijk sociaal minimum)”. De tabelkoppen hiervan zijn opgemaakt met zowel een strong- als het em-element. Dat is niet correct. Het strong- en em-element zijn daar niet voor bedoeld. Tevens is hierdoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element. Bij beide tabellen gaat dit fout. Ook de laatste kolom met bedragen is met het strong- en em-element opgemaakt om deze meer nadruk te geven. Gebruik hiervoor in de plaats CSS. Dit doet zich voor op meerdere pagina’s, waaronder op www.socialedienstdrechtsteden.nl/cookie-verklaring waar de tabelkoppen opgemaakt zijn met het strong-element. Controleer dit voor alle pagina’s.

Bevinding 18: Op pagina www.socialedienstdrechtsteden.nl/cookie-verklaring staat onder de kop “Welke cookies zijn er?” een lijst, waarbij elk lijst-item bestaat uit een koptekst met het type cookie en een beschrijving daarvan. Het type cookie, bijvoorbeeld “Functionele cookies” is nu opgenomen in een strong-element om deze visueel meer nadruk te geven. Daar is het strong-element niet voor bedoeld. Een goede oplossing hier zou zijn, om deze lijst-elementen op te maken als een definitielijst of de vetgedrukte woorden als een kop (h4) op te maken.

Bevinding 19: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ zijn bij de stap “Inleiding” alle kopteksten, waaronder “Inleiding” en “Let op” opgemaakt met het strong-element. Het strong-element mag niet worden gebruikt om kopteksten visueel op te maken als kop. Het strong-element heeft namelijk niet dezelfde betekenis als een kop (bijvoorbeeld h2 of h3). Los dit op door de koptekst boven het p-element, waar ze in staan, te plaatsen en maak ze op als ‘echte’ koppen. Ook bij de stap “Controle” is de kop “Privacy” opgemaakt met het strong element. Controleer dit voor alle stappen in het formulier.

Bevinding 20: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat boven het formulier bij de stap “Persoonsgegevens” de koptekst “Persoonsgegevens aanvrager”. Deze is opgemaakt met een div-element maar dient opgemaakt te worden als een kop (bijvoorbeeld h2 of h3). Dit doet zich ook voor bij de stap “Recht van betrekkenen” met de koptekst “Recht van betrokkenen”. Controleer dit voor alle stappen in dit formulier.

Bevinding 21: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier met daarbinnen een groep selectievakjes (checkboxes). Boven deze groep staat de tekst “Wat wilt u opvragen?”. Deze tekst is nu niet gekoppeld aan de groep selectievakjes. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 22: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Controle” een formulier met daarbinnen een groep keuzerondjes (radiobuttons). Boven deze groep staat de tekst “Zijn de gegevens juist?”. Deze tekst is nu niet gekoppeld aan de groep keuzerondjes. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 23: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ is een formulier waar 3 bijlagen toegevoegd kunnen worden. Deze heten nu allemaal Bijlage. Geef deze velden unieke namen, Bijlage 1, Bijlage 2 en Bijlage 3.

Bevinding 24: Bovenaan in het PDF-bestand “Aanmelding_bewindvoering_Checklist_per_1-4-2018.pdf” staat de koptekst “Checklist in te leveren stukken Schuldhulpverlening”. Deze is opgemaakt met een P-tag en dat is niet correct. Dit is een echte kop en dient opgemaakt te worden met een H-tag, bij voorkeur de H1-tag, omdat dit tevens de titel van het document is.
Verderop staan in de tabellen een aantal kopteksten, waaronder “Omschrijving”, “Formulier” en “Persoonlijke gegevens”. Visueel is het duidelijk dat dit koppen zijn, omdat ze als dikgedrukte tekst worden weergegeven, maar voor hulpsoftware is dat niet het geval. Omdat dit, semantisch gezien, echte koppen zijn dienen ze ook als echte koppen opgemaakt te worden. In dit geval is de tabel gebruikt om het formulier vorm te geven, en daarom is een TH-tag hier niet toegestaan. Gebruik in plaats daarvan een H-tag, bij voorkeur een H2-tag.

Bevinding 25: Bovenaan in het PDF-bestand “Checklist_Volledig_Budgetbeheer.pdf” staat de koptekst “Checklist aanvraag Budgetbeheer”. Deze is opgemaakt met een P-tag en dat is niet correct. Dit is een echte kop en dient opgemaakt te worden met een H-tag, bij voorkeur de H1-tag, omdat dit tevens de titel van het document is. Ook de overige koppen in het document, waaronder “Algemeen”, “Inkomsten” en “Uitgaven” zijn met een P-tag opgemaakt. Vervang deze door een H-tag, bij voorkeur een H2-tag.

Bevinding 26: In het PDF-bestand “Checklist_Volledig_Budgetbeheer.pdf” staat direct onder de titel de tekst “Van alle betalingen uit het budgetplan, moet een bewijsstuk in het dossier zitten voor de overdracht naar budgetbeheer.”. Deze tekst is wordt dikgedrukt weergegeven, om aan te geven dat dit belangrijke informatie is. Deze informatie is echter niet voor hulpsoftware beschikbaar. Dit zou bijvoorbeeld opgelost kunnen worden door de tekst vooraf te laten gaan door “Let op:”.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 27: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Persoonsgegevens” een formulier waar de bezoeker onder andere het eigen e-mailadres en het eigen telefoonnummer kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email" en voor telefoonnummer autocomplete=”tel-national”.
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: www.w3.org/tr/wcag21/.

Bevinding 28: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat onderaan de pagina een chatbox met daarbinnen een formulier waar de bezoeker de eigen naam dient in te vullen. Plaats hier het autocomplete-attribuut autocomplete=”name” op het input-element.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 29: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ verandert bij toetsenbordfocus de lichtblauwe rand van de link “Accepteren” van lichtblauw naar een donkerder blauw. Het contrastverschil tussen deze twee is met 2,1:1 te laag. Dit moet minimaal 3,0:1 zijn. Let op: deze link komt ook voor op pagina www.socialedienstdrechtsteden.nl/cookie-verklaring, direct onder de koptekst “Cookie verklaring”.

Bevinding 30: Op elke pagina is een zoekknop aanwezig waarmee je het zoekformulier kunt oproepen. Dit zoekformulier heeft een rode achtergrond met grijze tekst. Het contrastverschil tussen deze twee kleuren is met 1,1:1 te laag. Dit moet minimaal 4,5:1 zijn.

Bevinding 31: Bij verschillende stappen in het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ staan onderaan de pagina de knoppen “Vorige” en “Volgende”. Wanneer deze focus krijgen verandert de achtergrondkleur van paars naar rood. Het contrastverschil tussen deze kleuren is met 2,3:1 te laag. Dit moet minimaal 3,0:1 zijn, maar beter nog is om bij focus er een rand omheen te tonen. Hetzelfde geldt voor het input-element “+ Bestand toevoegen” bij de stap Bijlage(n) en voor de knop “Verzenden” bij de stap “Afsluiten”. Controleer dit voor alle knoppen in dit formulier.

Bevinding 32: In het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ bij stap “Controle” staat onderaan de pagina een lichtgeel blok met de kop “Privacy”. De blauwe linktekst www.socialedienstdrechtsteden.nl/privacy contrasteert onvoldoende met de omringende tekst nl. 2,8:1. Dit moet minimaal 3,0:1 zijn, maar beter is om linktekst in lopende teksten te onderstrepen.

Bevinding 33: In het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ staan bij de stap “Inleiding” in de lopende tekst een aantal links, waaronder “contactformulier” waarvan de lichtblauwe kleur onvoldoende contrasteert met de donkergrijze kleur van de omliggende tekst. Het contrastverschil is 2,8:1, maar moet minimaal 3,0:1 zijn, maar beter is om linktekst in lopende tekst te onderstrepen.

Bevinding 34: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier met een aantal selectievakjes (checkboxes) met daarachter steeds een link met een icoon van een vraagtekentje. Wanneer deze link geactiveerd wordt opent er een dialoogvenster. Wanneer de knop “OK” daarbinnen focus krijgt verandert de achtergrondkleur van paars naar rood. Het contrastverschil tussen deze kleuren is met 2,0:1 te laag. Dit moet minimaal 3,0:1 zijn, maar beter nog is om bij focus er een rand omheen te tonen.
Deze link met vraagteken staat ook achter de tekst “Zijn de gegevens juist?” bij de stap “Controle”.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 35: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ is in het cookie-instellingenvenster het contrast van de witte linktekst “Accepteren” ten opzichte van de lichtblauwe achtergrond van de link met 2,2:1 te laag. Dit moet minimaal 4,5:1 zijn. Let op: deze link komt ook voor op pagina www.socialedienstdrechtsteden.nl/cookie-verklaring, direct onder de koptekst “Cookie verklaring”.

Bevinding 36: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ is in het cookie-instellingenvenster het contrast van de witte linktekst “Accepteren” ten opzichte van de lichtblauwe achtergrond van de link met 2,2:1 te laag. Ook het contrastverschil tussen de donkergrijze linktekst “Weigeren” en de lichtgrijze achtergrond van de link is met 3,9:1 te laag. Dit moet voor beiden minimaal 4,5:1 zijn. Let op: deze link komt ook voor op pagina www.socialedienstdrechtsteden.nl/cookie-verklaring, direct onder de koptekst “Cookie verklaring”.

Bevinding 37: Op pagina www.socialedienstdrechtsteden.nl/ staat een groen blok met de kop “Werk”. Het contrast van de witte teksten ten opzichte van de groene achtergrond is hier met 2,3:1 te laag. Dit moet voor de kop “Werk” minimaal 3,0:1 zijn en voor de linktekst eronder minimaal 4,5:1. Hetzelfde probleem doet zich voor bij de witte teksten in het gele blok met de kop “Schulden” en het lichtblauwe blok met de kop “Wmo”. Ook daar is het contrastverschil te laag.

Bevinding 38: Op pagina www.socialedienstdrechtsteden.nl/werk/ik-wil-werken-en-meedoen/ik-wil-voor-mezelf-beginnen staan in het kruimelpad witte (link)teksten op een groene achtergrond. De contrastratio is 2,3:1, maar moet minimaal 4,5:1 zijn. Ook op pagina’s www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/… en www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/…, is het contrast van de witte tekst tegen een geel-oranje achtergrond van het kruimelpad te laag. Controleer dit voor alle pagina’s, waarop dit kruimelpad voorkomt.

Bevinding 39: Op pagina www.socialedienstdrechtsteden.nl/werk/ik-wil-werken-en-meedoen/ik-wil-voor-mezelf-beginnen is het contrastverschil tussen de witte koptekst “Is de informatiebijeenkomst 'Startende ondernemers' iets voor mij?” tegen de groene achtergrond met 2,3:1 te laag. Dit moet minimaal 4,5:1 zijn.

Bevinding 40: Op pagina www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/… is het contrastverschil tussen de witte koptekst “Hoe verloopt de aanmeldprocedure?” met de geel-oranje achtergrond met 2,3:1 te laag. Dit moet minimaal 4,5:1 zijn.

Bevinding 41: Als in de chatbox het veld “Naam” niet is ingevuld en het formulier is verzonden en er vervolgens wel tekst wordt ingevuld in dit veld dan is de tekst donkergroen tegen een lichtgroene achtergrond van het invoerveld. Het contrast ervan is 3,6:1 maar moet minimaal 4,5:1 zijn.

Bevinding 42: Op pagina www.socialedienstdrechtsteden.nl/cookie-verklaring staat bovenin de knop “Alle cookies weigeren”. Het contrastverschil tussen de grijze achtergrond van de knop en de donkergrijze tekst is 3,9:1. Dat is onvoldoende en moet minimaal 4,5:1 zijn.

Bevinding 43: Nadat het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ verzonden is kom je op de pagina met bovenin de tekst “Uw gegevens zijn verzonden”. Op deze pagina staat de link “Ingevuld e-Formulier.pdf”. Het contrastverschil van de blauwe tekst op de lichtgroene achtergrond is met 3,5:1 onvoldoende. Dit moet minimaal 4,5:1 zijn.

Bevinding 44: In het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ bij stap “Controle” staat onderaan de pagina een lichtgeel blok met de kop “Privacy”. De blauwe linktekst www.socialedienstdrechtsteden.nl/privacy contrasteert onvoldoende met de lichtgele achtergrond. Contrastverschil is 4,3:1, maar moet minimaal 4,5:1 zijn.

Bevinding 45: Wanneer men op pagina e-loket-sdd.drechtsteden.nl/eformer/ meer dan 15 minuten niet actief is, dan verschijnt een pagina met de tekst “Uw sessie is verlopen”. Hier staat een knop met de tekst “Terug naar website Sociale Dienst Drechtsteden”. Bij hover contrasteert de zwarte kleur van de tekst onvoldoende met de donkergrijze achtergrond. Het contrastverschil is dan 2,2:1, maar moet minimaal 4,5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 46: Wanneer bij een schermgrootte van 1280x768px ingezoomd wordt tot 200% dan is de skiplink op elke pagina de niet meer zichtbaar bij focus. Zorg ervoor dat ook bij een lage resolutie de skiplink blijft werken.

Bevinding 47: Wanneer bij een schermgrootte van 1280x768px ingezoomd wordt tot 200% dan is bij sommige resoluties de footer niet meer volledig zichtbaar. Witte teksten verdwijnen dan in een witte achtergrond.

Bevinding 48: Wanneer bij een schermgrootte van 1280x768px ingezoomd wordt tot 200% en je maakt gebruik van de voorleesfunctie is bij sommige resoluties deze functionaliteit deels of niet zichtbaar en onbruikbaar.

Bevinding 49: Op pagina www.socialedienstdrechtsteden.nl/nieuws/dordrecht-hendrik-ido-ambacht-en-papendrecht-besluiten-tot-… staan onder de koppen “Overzicht per gemeente (120% van het wettelijk sociaal minimum)” en “Overzicht per gemeente (120% - 130% van het wettelijk sociaal minimum)” een tabel. De laatste kolom van deze tabellen is niet volledig leesbaar doordat deze deels rechts uit beeld verdwijnt. Los dit bijvoorbeeld op door de kolomkoppen over meerdere regels te verdelen, of voorzie de tabel van een horizontale scrollbalk.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 50: Wanneer bij een schermgrootte van 1280x768px ingezoomd wordt tot 400% en de cookiemelding staat in beeld dan verdwijnt een deel van de knoppen buiten beeld. Er is geen mogelijkheid om de knop volledig in beeld te krijgen.

Bevinding 51: Wanneer bij een schermgrootte van 1280x768px ingezoomd wordt tot 400% en staat de chatfunctie in beeld. Er blijft weinig ruimte over om de content te kunnen lezen. Ook de werking van de chatfunctie is onmogelijk bij een lage resolutie.

Bevinding 52: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan kan op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ kan horizontaal gescrolld worden, maar dat is niet de bedoeling.

Bevinding 53: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staan op pagina www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… staan uitvouwbare blokken, waarin tabellen voorkomen, zoals bij het blok met de kop “Wanneer is mijn inkomen onder 110% van het sociaal minimum?”. Wanneer deze tabellen uit meer dan twee kolommen bestaan dan verdwijnt de derde kolom volledig buiten beeld. Een tabel moet volledig zichtbaar zijn. Dit kan bijvoorbeeld door de tabel te voorzien een horizontale scrollbalk.

Bevinding 54: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staat op pagina www.socialedienstdrechtsteden.nl/op-deze-website/toegankelijkheidsverklaring in het kruimelpad de tekst “Toegankelijkheidsverklaring”. Deze tekst verdwijnt aan de rechterkant uit beeld. Dit gebeurt ook bij de h1-kop “Toegankelijkheidsverklaring” en bij de link “Bekijk de toegankelijkheidsverklaring”. Dit kan zich op meerdere pagina’s voordoen. Controleer dit voor alle pagina’s.

Bevinding 55: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staat op pagina www.socialedienstdrechtsteden.nl/op-deze-website/toegankelijkheidsverklaring de afbeelding “Status toegankelijkheid [...]”. Wanneer bij een schermbreedte van 1280p ingezoomd wordt tot 400% dan verdwijnt een groot gedeelte van de tekst in de afbeelding rechts buiten beeld.

Bevinding 56: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staat op pagina www.socialedienstdrechtsteden.nl/op-deze-website/toegankelijkheidsverklaring staat de link “Bekijk de toegankelijkheidsverklaring”. Hier valt een gedeelte van de linktekst buiten de achtergrond van de link die omkaderd is door een rode rand. Wanneer deze link hover ontvangt, dan valt de witte tekst “toegankelijkheidsverklaring” weg tegen de witte achtergrond. Zorg ervoor dat de achtergrond van de link meegroeit met de tekst door geen vaste hoogtes te gebruiken.

Bevinding 57: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staan op pagina www.socialedienstdrechtsteden.nl/nieuws/dordrecht-hendrik-ido-ambacht-en-papendrecht-besluiten-tot-… staan onder de koppen “Overzicht per gemeente (120% van het wettelijk sociaal minimum)” en “Overzicht per gemeente (120% - 130% van het wettelijk sociaal minimum)” een tabel. Een groot gedeelte van deze tabellen verdwijnt rechts uit beeld. Los dit bijvoorbeeld door de tabel te voorzien van een horizontale scrollbalk.

Bevinding 58: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staat op pagina www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/… en www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/… staan tussen de links in het kruimelpad een icoontje met een wit pijltje rechts. Dit valt deels weg tussen de witte achtergrond. Let op controleer dit voor alle pagina’s waarop dit kruimelpad voorkomt.

Bevinding 59: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan staat op pagina www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/… in de h1-kop het woord “schuldhulpverlening”. Dit wordt niet afgebroken en verdwijnt deel buiten beeld.

Bevinding 60: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina www.socialedienstdrechtsteden.nl/overons/werken-bij-de-sociale-dienst een gedeelte van de link “www.werkenbijdrechtsteden.nl__ rechts uit beeld.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 61: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier. Wanneer één van de checkboxen aangevinkt wordt verschijnt de keuzelijst “Op welke voorziening is uw verzoek van toepassing?”. De randen van deze keuzelijst hebben hier een te laag contrast van 1,5:1 met de witte achtergrond. Dit moet minimaal 3,01 zijn.

Bevinding 62: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier. Wanneer één van de keuzelijsten “Op welke voorziening is uw verzoek van toepassing?” focus krijgt, verandert de kleur van de rand naar een iets donkerder grijs en verschijnt er een schaduwrand om de keuzelijst. De randen van deze keuzelijst hebben hier een te laag contrast van 1,6:1 met de witte binnenkant en 1,3:1 met de lichtgrijze buitenkant. Zorg ervoor dat één van deze contrasten minimaal 3,0:1 is.

Bevinding 63: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat onderaan de pagina een chatbox met daarbinnen een formulier. De randen van de invoervelden “Naam” en “Klantnummer” hebben een te laag contrast van 1,6:1 met de witte achtergrond. Dit moet minimaal 3,01 zijn.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 64: Wanneer op pagina e-loket-sdd.drechtsteden.nl/eformer/ bij de stap “Bijlag(en)” de focus op het formulierveld “Bestand toevoegen” komt, dan verschijnt er aanvullende content. Dit blokje met de tekst “Toegestane bestanden: Microsoft Office [...]” staat gedeeltelijk over de eronder staande tekst “U heeft hier de mogelijkheid om stukken te uploaden.” heen. Ook wanneer het formulierveld geen focus heeft en eroverheen gehovered wordt verschijnt deze content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een oplossing kan zijn om dit mogelijk te maken met de Escape toets. Ook kan bij hover niet over de aanvullende content heen bewogen worden met de muis zonder dat de content verdwijnt. De content moet dan beschikbaar blijven en dat is nu niet het geval.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 65: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat een formulier met daarnaast een navigatiemenu waarmee door de stappen binnen het formulier genavigeerd kan worden. Elke keer dat een stap is afgerond is, wordt er een extra knop actief. Deze ‘actieve’ knoppen zijn nu alleen met de muis te bedienen, maar dienen ook voor toetsenbord toegankelijk gemaakt te worden. Dat is nu niet het geval. Zie ook succescriterium 4.1.2.

Bevinding 66: Op pagina www.socialedienstdrechtsteden.nl/contactmogelijkheden wordt gebruik gemaakt van uitvouwbare blokken (accordeons), bijvoorbeeld de blokken met de koppen “Langskomen” en “Telefoon”. Wanneer op één van de links waarin deze koppen zich bevinden geklikt wordt, komt er extra content beschikbaar. Omdat deze links niet met het toetsenbord te bedienen zijn, zijn ook de links binnen deze content niet beschikbaar, zoals bijvoorbeeld de link “het vragenformulier” in het blok “Vragenformulier”. Deze blokken komen op meerdere pagina’s voor, waaronder op pagina’s www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… en www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/…. Controleer dit voor alle pagina’s. Bekijk succescriterium 4.1.2 hoe dit opgelost kan worden.

Bevinding 67: Wanneer men op pagina e-loket-sdd.drechtsteden.nl/eformer/ meer dan 15 minuten niet actief is, dan verschijnt een pagina met de tekst “Uw sessie is verlopen”. Hier staat een knop met de tekst “Terug naar website Sociale Dienst Drechtsteden”. Deze knop is alleen met de muis te bedienen, maar dient ook voor toetsenbord toegankelijk gemaakt te worden.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 68: Op de pagina www.socialedienstdrechtsteden.nl/overons/ons-verhaal wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 69: Wanneer op pagina www.socialedienstdrechtsteden.nl/ de skiplink “Spring naar inhoud” wordt geactiveerd, slaat deze het blok met de kop “Veel bezocht” met de eronder staande links over. Dat is niet correct, deze skiplink mag alleen herhalende content overslaan. Dit doet zich ook voor op pagina www.socialedienstdrechtsteden.nl/bestaatniet.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 70: Pagina e-loket-sdd.drechtsteden.nl/eformer/ heeft als paginatitel “Recht van betrokkenen”. Het is hier niet duidelijk dat het gaat om een formulier waarin de ‘betrokkene’ aan kan geven van welke rechten hij gebruik wil maken . Een mogelijke oplossing is om dit aan te vullen met de tekst “(aanvraag)formulier”. Niet verplicht, maar wel beter is om deze titel vooraf te laten gaan door de naam van de stap waarin men zich bevindt, dus bijvoorbeeld “Inleiding” of “Controle”.

Bevinding 71: Het PDF-bestand “Aanmelding_bewindvoering_Checklist_per_1-4-2018.pdf” heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Bevinding 72: Het PDF-bestand “Checklist_Volledig_Budgetbeheer.pdf” heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 73: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier met een aantal selectievakjes (checkboxes) met daarachter steeds een link met een icoon van een vraagtekentje. Wanneer deze link geactiveerd wordt opent er een dialoogvenster. Als voorbij de knop “OK” getabd wordt gaat de focus eerst naar de div met de id-waarde “fieldinfo5195039f-9ff4-49d7-811e-c8f9645bda7f” waarna vervolgens de focus weer in het dialoogvenster komt. Dat is niet correct. De focus dient direct naar de knop “Sluiten” te gaan. Zie ook succescriterium 2.4.7.
Deze link met vraagteken staat ook achter de tekst “Zijn de gegevens juist?” bij de stap “Controle”.

Bevinding 74: De eerste keer dat een bezoeker de website www.socialedienstdrechtsteden.nl/ bezoekt, verschijnt er een cookiemelding over de pagina heen. Als er nu met de tabtoets verder wordt genavigeerd kan het venster worden verlaten. Dat is niet de bedoeling. De focus moet binnen het cookie-instellingenvenster blijven totdat de gebruiker een keuze heeft gemaakt. Dit levert ook een probleem op voor succescriterium 2.4.7.

Bevinding 75: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat onderaan de pagina een chatbox. Wanneer deze wordt geopend en er met de tabtoets doorheen wordt genavigeerd kan het dialoogvenster worden verlaten. Dat is niet de bedoeling. De focus moet binnen de chatbox blijven totdat de gebruiker deze sluit OF de chatbox moet automatisch gesloten worden wanneer de focus erbuiten komt. Zie ook succescriterium 4.1.2.

Bevinding 76: Op de website www.socialedienstdrechtsteden.nl/ verschijnt er bij een lage resolutie een menuknop waarmee het hele menu geopend kan worden. Als het menu geopend is en er met de tabtoets doorheen wordt genavigeerd kan het menu worden verlaten. Dat is niet de bedoeling. De focus moet binnen het menu blijven totdat de gebruiker dit sluit OF het menu moet automatisch gesloten worden wanneer de focus erbuiten komt. Zie ook succescriterium 2.4.7.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 77: Wanneer op pagina www.socialedienstdrechtsteden.nl/zoek= gezocht wordt op het woord “bijstand” dan verschijnt onderaan de pagina een navigatie om tussen de pagina's te kunnen navigeren. De namen van deze links luiden nu “1”, “2”, “3”, etc. Voor ziende bezoekers is het duidelijk dat het hier gaat om paginanummers, maar bezoekers die het scherm niet kunnen zien, weten niet dat deze links naar volgende of vorige pagina's verwijzen. Vul de toegankelijke naam van deze links daarom aan met het woord “pagina” zodat het linkdoel voor screenreadergebruikers duidelijk is. Doe dit ook voor de links “Vorige” en “Volgende”.

Bevinding 78: Op pagina www.socialedienstdrechtsteden.nl/nieuws staat bij elk nieuwsbericht een decoratieve afbeelding. De tekstalternatieven bij de afbeeldingen dienen tevens als linkstekst, maar zij beschrijven niet het doel van de link. Zie succescriterium 1.1.1 voor een oplossing.

Bevinding 79: Op pagina www.socialedienstdrechtsteden.nl/nieuws staat bij elk nieuwsbericht de linktekst “Lees meer”. Ondanks dat deze links in dezelfde alinea staan als het erbij behorende nieuwsbericht hebben deze links geen context met de omringende tekst. Vermijd linkteksten als “Lees meer” en “Klik hier”, zulke teksten beschrijven het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 80: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier met een aantal selectievakjes (checkboxes) met daarachter steeds een link met een icoon van een vraagtekentje. Wanneer deze link geactiveerd wordt opent er een dialoogvenster. Als voorbij de knop “OK” getabd wordt gaat de focus eerst naar het div-element met de id-waarde “fieldinfo5195039f-9ff4-49d7-811e-c8f9645bda7f”. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.
Deze link staat ook achter de tekst “Zijn de gegevens juist?” bij de stap “Controle”.

Bevinding 81: De eerste keer dat een bezoeker de website www.socialedienstdrechtsteden.nl/ bezoekt, verschijnt er een cookiemelding over de pagina heen. Als er nu met de tabtoets verder wordt genavigeerd kan het venster worden verlaten. Dat is niet de bedoeling. Daardoor is niet goed te zien waar de focus zich bevindt. Zorg dat het cookie-instellingenvenster pas kan worden verlaten als er een keuze is gemaakt.

Bevinding 82: Op de website www.socialedienstdrechtsteden.nl/ verschijnt er bij een lage resolutie een navigatiemenuknop waarmee het hele navigatiemenu geopend kan worden. Als het navigatiemenu geopend is en er met de tabtoets doorheen wordt genavigeerd kan de navigatie worden verlaten zonder dat die zich sluit. Dat is niet de bedoeling. Daardoor is niet altijd te zien waar de focus zich bevindt in het achterliggende scherm.

Bevinding 83: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ doet zich het volgende voor. Wanneer bij een schermgrootte van 1280px breed wordt ingezoomd tot 200% en er wordt door de pagina heen getabd, dan is het in de meeste gevallen niet zichtbaar waar de focus zich bevindt, doordat de chatbox en de menubalk aan de onderkant vast gepositioneerd staan en een groot gedeelte van het scherm in beslag nemen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 84: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat bovenaan de pagina een knop met de zichtbare tekst “AAA”. De toegankelijk naam van deze knop is echter “Tekst groter”. Doordat het zichtbare label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

Bevinding 85: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat bovenaan de pagina een knop met de zichtbare tekst “Lees voor”. De toegankelijk naam van deze knop is echter “Luister met de ReachDeck-werkbalk”. De linktekst “Lees voor” wordt namelijk ‘overruled’ door de waarde van het aria-label. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan. Dit kan worden opgelost door de waarde van het aria-label aan te passen, of de waarde in het aria-label te verwijderen.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 86: Op de pagina www.socialedienstdrechtsteden.nl/nieuws/financiele-ondersteuning-vluchtelingen-uit-oekraine is alle tekst in het contentgedeelte, behalve een deel van de h1-kop, in de Oekraïense taal. Deze tekst is in een andere taal dan de taal van de pagina. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door op de omliggende html-code een lang="uk" toe te voegen.

Bevinding 87: Op pagina www.socialedienstdrechtsteden.nl/nieuws staat een link met de tekst “Financial support for refugees from Ukraine”. Deze tekst is in een andere taal dan de taal van de pagina. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door op de omliggende html-code een lang="en" toe te voegen.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 88: Als op pagina e-loket-sdd.drechtsteden.nl/eformer/ bij de stap “Persoonsgegevens” verplichte velden, zoals “Achternaam” worden leeg gelaten dan verschijnt bij de betreffende velden de melding "Dit is een verplicht veld.". En bij foutieve invoer, bijvoorbeeld bij het veld “E-mailadres” verschijnt de melding “Vul hier een geldig e-mailadres in.”. Dit zijn geen foutmeldingen, maar instructies. Een goede foutidentificatie vermeldt welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld “Het veld Achternaam is niet ingevuld” en “Het veld e-mailadres is niet goed ingevuld.”. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3. Zie ook succescriterium 3.3.2 voor de velden “Geboortedatum” en “Telefoonnummer”. Hetzelfde doet zich voor bij de stap “Recht van betrokkenen” wanneer het veld “Omschrijving periode” niet wordt ingevuld.

Bevinding 89: Als in het formulier in de chatbox het veld “Naam” niet wordt ingevuld en het formulier wordt verzonden, dan verschijnt de melding “Dit veld is verplicht”. Dit is geen foutmelding, maar een instructie. Een goede foutidentificatie vermeldt welke fout is gemaakt, en waar de fout is gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 90: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Recht van betrokkenen” een formulier. Wanneer één van de checkboxen aangevinkt wordt verschijnt er een keuzelijst. Wanneer vervolgens één van de keuze-opties geselecteerd wordt verschijnt het tekstvak ”Toelichting verzoek”. Hierbinnen staat de placeholdertekst “U bent niet verplicht om hier toelichting te geven over de reden van uw verzoek of waarom het verzoek wordt ingediend.”. Dit is belangrijke informatie en daarom voldoet een placeholder-tekst hier niet. Deze verdwijnt namelijk zodra het veld wordt ingevuld. Een oplossing is om deze instructie in het label-element toe te voegen, of om bij het invoerveld een div-element toe te voegen dat aan het invoerveld gekoppeld is met bijvoorbeeld het aria-attribuut aria-describedby.

Bevinding 91: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Persoonsgegevens” een formulier, waar bij de verplichte velden een sterretje (*) wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat deze velden verplicht zijn. Plaats een melding bovenaan, binnen het formulier waarmee uitgelegd wordt dat de velden met een asterisk of sterretje verplicht zijn.

Bevinding 92: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Persoonsgegevens” een formulier waarin voor de velden “Geboortedatum” en “Telefoonnummer” een bepaald format vereist is. Als een bepaald format nodig is voor de invoer, dan moet dit als instructie vermeld worden. Bij het datumveld moet vermeld worden dat het format “ddmmjjjj” is en bij het telefoonnummer moet vermeld worden dat het nummer uit 10 cijfers moet bestaan, met een 0 moet beginnen en het tweede cijfer geen 0 mag zijn.

Bevinding 93: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Persoonsgegevens” het formulierveld “Geboortedatum”. Deze bevat een placeholdertekst die het format van de datum toont. De placeholder-tekst is niet voldoende, want die verdwijnt zodra de bezoeker begint met typen. Voor sommige mensen kan het moeilijk zijn om te onthouden wat ze moeten invullen als dat er niet duidelijk bij staat. Zorg dat de instructie ook na het invullen in beeld verschijnt.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 94: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat bij de stap “Persoonsgegevens” een formulier waarin de “Geboortedatum” ingevuld moet worden. Als iemand hier per ongeluk een foutieve datum invult, bijvoorbeeld 31-02-1961 dan wordt dit niet gemeld. Als je op de knop Volgende klikt verschijnt alleen de foutmelding "Dit is een verplicht veld".

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 95: Advies: Op elke pagina is een zoekknop waarmee een zoekformulier opgeroepen kan worden. Deze is gemarkeerd als link in de HTML. Omdat de knop niet perse naar andere pagina gaat of een ander deel van de pagina gaat, maar een actie uitvoert, namelijk een extra stuk content tonen is het beter om hiervoor het button-element te gebruiken in plaats van het a-element. Door op de button het aria-expanded-attribuut te gebruiken kan het openen en sluiten ook een stuk duidelijker wordt gemaakt via hulpsoftware aan blinden en slechtzienden.

Bevinding 96: Bij een lage resolutie verandert het navigatiemenu op elke pagina in een knop. Voor ziende gebruikers is het duidelijk dat de knop het menu opent of sluit. Voor screenreadergebruikers die blind of slechtziend zijn is dat niet zo. Geef in de code de status van het navigatiemenu aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen.

Bevinding 97: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat bovenaan de pagina een knop met de zichtbare tekst “Lees voor”. Als je deze opent wordt via hulpsoftware de tekst "Zweven om te spreken" voorgelezen. Deze wat ongebruikelijke tekst maakt niet duidelijk wat de bedoeling is van de knop. Ook de "stoppen met lezen-knop heeft een ongebruikelijke naam "hou op". Deze balk van ReachDeck heeft meer toegankelijkheidsproblemen. Advies is om enkel de leesvoorfunctie op correcte wijze te gebruiken en niet alle andere functionaliteit.

Bevinding 98: Op pagina www.socialedienstdrechtsteden.nl/overons/ons-verhaal staat de video “Het verhaal van de Sociale Dienst Drechtsteden: de visie in beeld”. Het title-attribuut op het iframe-element van de video bevat de waarde “YouTube video player”. Dit beschrijft niet de inhoud van de video. Hier zou dezelfde tekst gebruikt kunnen worden die in het html-element staat waarin de video zich bevindt “Het verhaal van de Sociale Dienst Drechtsteden: de visie in beeld - YouTube”.

Bevinding 99: Op pagina e-loket-sdd.drechtsteden.nl/eformer/ staat een formulier met daarnaast een navigatiemenu waarmee door de stappen binnen het formulier genavigeerd kan worden. Het navigatiemenu bestaat uit div-elementen met daarop het attribuut role=”button”. Deze knoppen zijn echter niet met het toetsenbord te bedienen. Zorg ervoor dat deze ‘knoppen’ als echte knoppen gaan functioneren. Dat betekent dat zij met de spatiebalk en met de Enter-toets geactiveerd moeten kunnen worden. Als aria-rollen gebruikt worden, moet deze namelijk ook voldoen aan de eisen van WAI-ARIA.

Bevinding 100: Op pagina www.socialedienstdrechtsteden.nl/contactmogelijkheden wordt gebruik gemaakt van uitvouwbare blokken (accordeons), bijvoorbeeld de blokken met de koppen “Langskomen” en “Telefoon”. Wanneer op één van de links waarin deze koppen zich bevinden geklikt wordt, komt er extra content beschikbaar. Dit is een interactief element, maar heeft geen rol. Ook de status (in- of uitgevouwen) van deze blokken kan niet door hulpsoftware bepaald worden. Bovendien zijn deze blokken nu alleen met de muis te bedienen en niet met het toetsenbord. Zorg dat er een mechanisme is waarmee deze blokken in- en uitgevouwen kunnen. Dit kan door gebruik te maken van een combinatie van het summary-element en het details-element OF door gebruik te maken van het Disclosure Pattern van WAI-ARIA. Deze blokken komen op meerdere pagina’s voor, waaronder www.socialedienstdrechtsteden.nl/bijstand/op-welke-financiele-ondersteuning-heb-ik-recht/wat-is-een-… en www.socialedienstdrechtsteden.nl/schulden/ik-regel-financien-voor-iemand-anders/ik-ben-bewindvoerder/…. Controleer dit voor alle pagina’s.

Bevinding 101: Op alle pagina’s van de website www.socialedienstdrechtsteden.nl/ staat onderaan de pagina een chatbox binnen een dialoogvenster. De status (in- of uitgevouwen) van deze chatbox kan niet door hulpsoftware bepaald worden. Dit komt doordat het aria-attribuut op een niet-interactief element staat, waar het niet toegestaan is. Los dit op door dit attribuut te verplaatsen naar het omvattende div-element met role=”dialog”. Ook mist de chatbox een toegankelijke naam, het attribuut “aria-description” voldoet niet om te voorzien in een toegankelijke naam. Gebruik in plaats daarvan “aria-label” of “aria-describedby”.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 102: Wanneer in het formulier op pagina e-loket-sdd.drechtsteden.nl/eformer/ bij de stappen “XXXX” en “XXXX” velden niet of niet correct worden ingevuld en het formulier wordt verzonden, dan verschijnt er bij de velden bijvoorbeeld de melding “Dit is een verplicht veld.”. De foutmeldingen die bij de individuele invoervelden komen te staan hebben wel een role=”alert" gekregen, maar deze meldingen zijn niet duidelijk genoeg. Als deze teksten voorgelezen worden na het versturen van het formulier krijgt iemand een aantal keer dezelfde tekst " Dit is een verplicht veld." te horen, maar weet dan nog niet om welke velden het gaat.
Daarom is het belangrijk om in de foutmelding ook altijd de naam van het invoerveld te noemen. Bovendien is role=”alert” hier niet de juiste keuze, omdat dan de kans bestaat dat de meldingen niet allemaal worden voorgelezen, of juist allemaal tegelijkertijd worden voorgelezen. In dit geval is de keuze voor aria-live=”polite” een betere keuze. Role=”alert” kan wel gebruikt worden als er slechts één melding is. Zie ook succescriterium 3.1.1 voor meer uitleg hierover.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-03-29 01:48:00 v2.4-011