Rapport:
Audit digitale toegankelijkheid website Sociale Dienst Drechtsteden

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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?”.

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

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.

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.

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.

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.

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'.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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/.

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.

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

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.

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.

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”.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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”.

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”.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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”.

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.

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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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".

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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”.

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.

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.

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”.

Uitkomst: Onvoldoende

Bevindingen: 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.