Rapport:
Audit digitale toegankelijkheid website stroomopwaarts.nl

Uitkomst: Onvoldoende

Bevindingen: Bij het eerste bezoek aan de website, verschijnt een cookie-banner. Er staat een logo in de banner met een leeg alt-attribuut. Logo’s zijn informatief, ze hebben alternatieve tekst nodig.
Zie bijvoorbeeld www.stroomopwaarts.nl.

Op pagina www.stroomopwaarts.nl/zakelijk/contact staat een logo in de kop- en voettekst. Maar een deel van de zichtbare tekst van dit logo ontbreekt in de alternatieve tekst. De zichtbare tekst van het logo is "Stroomopwaarts MVS Partner van WSP RIJNMOND", de alternatieve tekst is "Logo Stroomopwaarts MVS - Naar de zakelijke homepage". Hetzelfde probleem doet zich voor op de www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk. Zie ook het logo op www.stroomopwaarts.nl/zakelijk/.

Op
www.stroomopwaarts.nl/cookies staat boven de tabel de link "Cookiebot". Daarnaast staat een icoon dat aangeeft dat de link een externe website betreft. Het icoon is informatief en heeft een alternatieve tekst nodig zodat mensen die het icoon niet zien weten wat er gaat gebeuren. Dit icoon is ook op andere pagina’s te zien. Bijvoorbeeld op pagina www.stroomopwaarts.nl/inwoners/inkomen/uitbetaling-en-hoogte-bijstandsuitkering in de eerste uitvouwbare tekst en op www.stroomopwaarts.nl/formulierenbrigade in de uitvouwbare tekst "Schiedamse Formulierenbrigade (openingstijden)". Overigens werkt de het icoon ongemakkelijk omdat in sommige gevallen naast een externe website de link ook nog eens een nieuw venster of tabblad opent en soms niet, zoals op pagina www.stroomopwaarts.nl/over-ons/bestuur wordt bij de link “Wethouder gemeente Schiedam” de afbeelding gebruikt. Echter, in dit geval opent de link niet in de nieuwe browsertab.

Op pagina www.stroomopwaarts.nl/formulierenbrigade, onder het kopje "Maak een afspraak", staat een formulier dat uit meerdere stappen bestaat. Na het succesvol afronden van elke stap staat er aan de rechterkant een afbeelding van een groen vinkje. De alternatieve tekst van deze afbeelding "Vinkje" geeft niet genoeg informatie. Het is beter om een andere tekst te gebruiken, bijvoorbeeld "Stap succesvol afgerond".
Ook in stap 3 bij de invoervelden, als deze zijn ingevuld, verschijnen er groene vinkjes. Ze betekenen dat de velden correct zijn ingevuld. Deze afbeeldingen hebben alternatieve tekst nodig.

Op pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk staan boven en onder de zoekresultaten twee iconen om naar de vorige en volgende pagina te gaan. Deze iconen hebben geen tekstalternatief. Zie ook succescriteria 2.4.4 en 4.1.2.

Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Wijzigingsformulier/… bevat op de eerste pagina, in de rechterbovenhoek, een afbeelding van een logo. Dit is een informatieve afbeelding en heeft een tekstalternatief nodig. Dit probleem kan worden opgelost door een tekstalternatief toe te voegen aan het bronbestand (zoals een Word- of InDesign-document) en dat bestand vervolgens te exporteren naar PDF.

Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf op pagina's: 1, 111-115, bovenaan, staat een logo. Dit is een informatieve afbeelding en heeft daarom een tekstalternatief nodig.

Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf op pagina 32, 38, 43, 65, 66, in tabellen, staan afbeeldingen van groene smiley die bedoeld zijn voor evaluatie. Dit zijn informatieve afbeeldingen die een tekstalternatief nodig hebben.

Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf bevat informatieve afbeeldingen die niet altijd een voldoende tekstalternatief hebben. Bijvoorbeeld op pagina 8. Hier heeft de afbeelding van de grafiek het tekstalternatief “Grafiek indexcijfer ontwikkeling uitkeringen in 2021”. Hoewel dit wel aangeeft wat op de afbeelding te zien is, biedt dit nog niet dezelfde informatie die visueel wel te zien is. Namelijk de daadwerkelijke cijfers en ontwikkeling. Dit kan eventueel ook in de omringende tekst of in een tabel staan. Dit lijkt hier niet het geval te zijn. Daarnaast geeft het huidige tekstalternatief verkeerde informatie, want het gaat om 2022 en niet 2021. Dit kan vaker voorkomen.

Advies. Op alle pagina's staat in de footer een logo. Een deel van de zichtbare tekst van dit logo ontbreekt in de alternatieve tekst, de informatie wordt niet volledig verstrekt. Zichtbare tekst "Stroomopwaarts MVS", tekst alternatief "Logo Stroomopwaarts"; vul deze tekst aan met MVS.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bij het eerste bezoek aan de website, verschijnt een cookiebanner. Daarin staat de tekst "Deze website maakt gebruik van cookies", die eruitziet als een koptekst en vertelt over de inhoud eronder, maar zo niet is gecodeerd in HTML. Wanneer bezoeker op de knop "Zelf instellen" klikt, wordt nieuwe inhoud geopend. Bovenaan staat de tekst "Instellingen", die eruitziet als een koptekst, maar in HTML niet zo is gecodeerd. Gebruik heading-elementen (<h1> tot <h6>) om deze koppen op te maken. Zie www.stroomopwaarts.nl.

Bij het eerste bezoek aan de website, verschijnt een cookiebanner. Wanneer bezoeker op de knop "Zelf instellen" klikt, wordt nieuwe inhoud geopend. Daarbinnen een hele alinea tekst "Deze website maakt gebruik van cookies. Wij gebruiken cookies voor het goed kunnen tonen van onze website en het bijhouden van ons websiteverkeer.", is ten onrechte opgemaakt met <strong>. Dit element mag alleen worden gebruikt om afzonderlijke woorden of zinsdelen te benadrukken, niet voor de opmaak. Gebruik liever CSS om deze tekst opvallend te stijlen. Zie www.stroomopwaarts.nl.

Onderaan de www.stroomopwaarts.nl/nieuws pagina staat paginering. De huidige pagina wordt visueel weergegeven met een rand. Deze informatie ontbreekt in de HTML. Dit kan op verschillende manieren worden opgelost. Bijvoorbeeld door verborgen tekst of het aria-current attribuut te gebruiken.

Op pagina www.stroomopwaarts.nl/contact staat een knop om d etekst uit te vouwen "Locaties Werkleerbedrijf", binnen de volgende kop "Stroomopwaarts George Stephensonweg, Vlaardingen" is onjuist opgemaakt met <strong>. Dit element is bedoeld om inhoud als belangrijk te markeren, niet om koppen of inhoud visueel te benadrukken. Het <strong>-element kan niet worden gebruikt voor koppen.

Op pagina www.stroomopwaarts.nl/cookies staat onder het kopje "Cookiebeleid Stroomopwaarts.nl" een alinea tekst "Deze website maakt ... ons websiteverkeer." die is opgemaakt met <strong> element. Het <strong>-element kan niet worden gebruikt voor een hele alinea tekst. Hetzelfde issue is te zien op pagina www.stroomopwaarts.nl/formulierenbrigade onder de kop "Zo maakt u een afspraak", www.stroomopwaarts.nl/over-ons/bestuur.

Op pagina www.stroomopwaarts.nl/contact, onder het kopje "Adressen", staat onder de knop "Locaties Werkleerbedrijf", de volgende tekst "Stroomopwaarts Energieweg, Vlaardingen", "Stroomopwaarts Industrieweg, Maassluis", "Stroomopwaarts van Berckenrodestraat, Schiedam". Deze teksten zien eruit als koppen, maar in HTML zijn ze opgemaakt met <strong> elementen. Gebruik in plaats daarvan echte koppen (<h1> tot <h6>).

Op pagina www.stroomopwaarts.nl/contact staat onder het kopje "Adressen" onder de knop "Bezoekadressen Stroomopwaarts" de volgende tekst: boven de h4-kop "Vragen over uitkeringen:", staat een h6-kop die geen inhoud bevat. Dit kan storend werken omdat sommige gebruikers, vooral gebruikers van toetsenborden en schermlezers, via kopteksten navigeren. Een lege koptekst bevat geen informatie en kan verwarring veroorzaken. Dit kan worden gecorrigeerd door de koptekst te verwijderen of inhoud toe te voegen.

Op de pagina www.stroomopwaarts.nl/paginawijzer staan lijsten met links. Onder het kopje "Inkomen" heeft het lijst item directe kinderen die niet zijn toegestaan: <ul>. Zie bijvoorbeeld "Advies en goedkope energie". Hetzelfde probleem in de lijst onder het kopje "Inburgering".

Op pagina www.stroomopwaarts.nl/inwoners/inkomen/uitbetaling-en-hoogte-bijstandsuitkering, onder het kopje "Hoogte bijstandsuitkering / bijstandsnorm", staat een groot aantal tabellen. In sommige tabellen zijn niet alle tabelkoppen opgemaakt in HTML via <th>. Bijvoorbeeld: onder de knoppen "Ik ben tussen de 21 jaar en de pensioengerechtigde leeftijd. Hoe hoog is de uitkering ", "Ik heb de pensioengerechtigde leeftijd. Hoe hoog is de uitkering?", "Wat is 110 % van de bijstandsnorm?". De cellen in de eerste kolom zijn goed opgemaakt als tabelkop (met <th>), maar het probleem is dat de cellen in de eerste rij (zoals “bedrag zonder vt”, ”vakantietoeslag p.m.” en “bedrag met vt” ook tabelkoppen moeten worden. Zie ook pagina www.stroomopwaarts.nl/over-ons/beleidstukken.

Op pagina www.stroomopwaarts.nl/formulierenbrigade staat een formulier. In stap 3 van het proces moeten gegevens worden ingevuld. De drie radiobuttons onder “Aanhef” vormen samen een groep, maar zijn niet in de HTML gegroepeerd. Dit kan worden opgelost door bijvoorbeeld fieldset en legend te gebruiken. Het legend element zal deze groep een naam geven. Er is al een fieldset-element op het formulier geplaatst waarin alle velden zijn opgenomen. Dit is niet voldoende om subgroepen binnen deze fieldset te groeperen.

Op pagina www.stroomopwaarts.nl/over-ons/bestuur, onder het kopje "Bestuur", staan 3 citaten die onjuist zijn opgemaakt met een <em> element. Dit element is bedoeld om afzonderlijke woorden en zinnen te benadrukken, niet voor koppen of om inhoud visueel te benadrukken. Gebruik in plaats daarvan het <blockquote> element.

Op pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk staan meerdere zoekresultaten, bestaande uit een titel, een link, een beschrijving en soms labels. Visueel is de structuur duidelijk, maar dat is niet zo in de code. Hier is geen semantische betekenis aanwezig in de vorm van koppen (bijvoorbeeld <h2>) en/of lijst-items. Alle content is slechts geplaatst in algemene div-elementen zonder semantiek.

Op pagina www.stroomopwaarts.nl/cookies gelden de teksten “Noodzakelijk (8)”, “Statistieken (6)” en “Marketing (30)” als kopteksten voor de content eronder. Deze teksten zijn echter niet als koppen (bijvoorbeeld <h2>) opgemaakt.

In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Wijzigingsformulier/… staan datatabellen, maar de kolomkoprij is niet correct opgemaakt. Kolomkopcellen (“Persoonsgegevens”, “Client” en “Partner”) in de eerste rij moeten worden opgemaakt als <th>-elementen. Op deze manier kan de screen reader de relatie tussen de kolomkop cellen en de onderliggende datacellen voorlezen. Verder is er nog een probleem met het aantal kolommen: de eerste vijf rijen (inclusief kolomkoppen) bestaan uit drie kolommen en de overige uit twee. Dit kan worden opgelost door voor de cellen in de tweede kolom aan te geven dat ze twee kolommen breed zijn. Is dit niet wordt gedaan, ontstaat er een probleem wanneer de kolomkoppen daadwerkelijk koppen worden. Dan kunnen ze niet aan de juiste cellen worden gekoppeld.

In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Wijzigingsformulier/… is de eerste kop “Wijzigingsformulier (..)” opgemaakt als een paragraaf. Dit geldt ook voor tussenkopjes boven de tabellen, zoals “Persoonsgegevens zijn veranderd”. Voor “Wijzigingsformulier…” kan dit opgelost worden door het document een goede titel te geven (zie succescriterium 2.4.2). De andere koppen moeten wel opgemaakt worden als kop (<h1> of <h2>).

Op de eerste pagina van het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf, onder het kopje “Jaarstukken” staan blokjes met tekst. In sommige blokjes loopt de tekst over twee rijen. Deze teksten zijn opgemaakt als koppen (h2). Dit zijn geen koppen omdat er geen content onder staat. Daarnaast, wanneer een kop uit meerdere rijen bestaat, maar een geheel vormt, moet het ook in een tag worden opgenomen. Dit is nu niet het geval. Bijvoorbeeld “Voorwoord en leeswijzer” zijn nu met twee h2-tags opgemaakt. Verwijder de h-tags.
Op pagina 5 staat een alinea tekst “We kijken vol trots (..)” die is opgemaakt als een kop van niveau 2. Zie ook pagina 7, 30, 31 en meer.
Op pagina 6, onder “Leeswijzer” staat een opsomming met een geneste opsomming die niet correct is opgemaakt. Hier zijn de p-tags en min streepjes gebruikt. Hierdoor is de visuele structuur van informatie niet aanwezig in de tags. Zie ook pagina 7, 23 en meer.
Op pagina 12, 13 en 14 staan afbeeldingen met infographics. Deze informatieve afbeeldingen zijn niet getagd. De informatie is niet beschikbaar voor een blinde bezoeker.
Op pagina 22 en op andere pagina’s staan tussenkopjes die niet als koppen zijn opgemaakt. Zie bijvoorbeeld “Financiele positie” en “Investeringen”.
Soortgelijke problemen kunnen vaker voorkomen.

Uitkomst: Onvoldoende

Bevindingen: In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf zijn problemen gevonden met de leesvolgorde. Bijvoorbeeld op pagina 8. Hier komt eerst de grafiektitel “Indexcijfer ontwikkeling uitkeringen in 2022 (aantallen dec´16=100)” en vervolgens de tabel “Tabel ontwikkeling uitkeringen 2022”. Pas daarna komt de grafiek in de leesvolgorde. Dit kan vaker voorkomen.

In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Wijzigingsformulier/… is ook een probleem met de leesvolgorde. De afbeelding van het logo bovenaan staat namelijk tussen de teksten “Wijzigingsformulier…” en “Participatiewet/ IOAW/ IOAZ”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.stroomopwaarts.nl/zakelijk/contact, onder het kopje "Vul het contactformulier in", staat een formulier met velden waarin persoonlijke gegevens van de bezoeker worden verzameld, bijvoorbeeld de gebruikersnaam, e-mail of het telefoonnummer. Voor goede ondersteuning door browsers en hulpsoftware, is het noodzakelijk om het autocomplete-attribuut toe te voegen aan de relevante input-elementen van deze invoervelden. Bijvoorbeeld, voor het invoerveld voor een e-mailadres moet het attribuut autocomplete="email" worden toegevoegd. Dit geeft aan dat het veld bedoeld is voor het invullen van e-mailadressen en helpt browsers en hulpsoftware om relevante suggesties te bieden. Lees pagina Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) 2.1 voor alle benodigde waardes.
Dit issue is ook te zien in het formulier op pagina www.stroomopwaarts.nl/formulierenbrigade.

Uitkomst: Onvoldoende

Bevindingen: In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf, op pagina 8 en 14, staan diagrammen met legenda’s waarbij kleur wordt gebruikt om informatie te geven. Bezoekers die de kleur niet kunnen waarnemen, hebben geen toegang tot deze informatie.
Dit kan worden opgelost door naast kleur bijvoorbeeld een andere arcering te gebruiken.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, onder het navigatiemenu, staat een zoekvak. De grijze (HEX#737373) placeholder-tekst "Zoeken..." heeft onvoldoende contrast. Met de achtergrondkleur van HEX#E9E9E9 is de contrastverhouding 3,9:1. De contrastverhouding moet minstens 4,5:1 zijn.
In de browser Firefox is dit contrast zelfs nog lager, namelijk 1,9:1.

Op een klein scherm verschijnt in de bovenhoek een knop die een mobiel menu opent. In het menu heeft de link "Inwoners" onvoldoende contrast. De tekstkleur is wit, de achtergrondkleur is magenta (HEX#C2007A), de contrastverhouding is 4,2:1 dit moet ten minste 4,5:1 zijn.

In dit menu staan knoppen die submenu's openen, bijvoorbeeld Inkomen > Extra inkomen bij tekort > Advies. Op dat scherm staan links met witte tekst op een grijze achtergrond, ze hebben onvoldoende contrast, bijvoorbeeld: "Advies en goedkope energie", "Mijn inburgering", "Steunpunten". Tekstkleur is wit, de achtergrondkleur is grijs (HEX#E6E6E6), het contrast is momenteel 1,2:1. De contrastverhouding moet minstens 4,5:1 zijn. Wanneer een link actief is, wordt de tekst grijs met een kleurcontrastverhouding van 2,7:1. Het contrast wordt ook onvoldoende wanneer een bezoeker zijn muis over de menu-items beweegt.

Op pagina www.stroomopwaarts.nl/contact staan onder het kopje "Contact algemeen" een groot aantal knoppen waarmee je tekst kunt uitvouwen. Daarbinnen bevindt zich de link "Lees op eigen pagina" staat. Deze heeft onvoldoende contrast, tekstkleur is grijs (HEX#818181), de achtergrondkleur is wit, de contrastverhouding is momenteel 3,9:1. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem is aanwezig op pagina www.stroomopwaarts.nl/inwoners/inkomen/uitbetaling-en-hoogte-bijstandsuitkering en www.stroomopwaarts.nl/formulierenbrigade.

Op pagina www.stroomopwaarts.nl/zakelijk/contact staat onder de kaart de tekst "Via de kaart hierboven kunt u uw route bepalen" met onvoldoende contrast. Tekstkleur is grijs (HEX#818181), de achtergrondkleur is wit, de contrastverhouding is 3,9:1. Dit moet ten minste 4,5:1 zijn.

Op pagina www.stroomopwaarts.nl/zakelijk/contact, in de footer, staan links naar de sociale media kanalen. De blauwe tekst "Volg ons:" heeft onvoldoende contrast. De tekstkleur is #06838E, de achtergrondkleur is #F8F9FA, de contrastverhouding is 4,3:1. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem is te zien op pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk.

Op pagina www.stroomopwaarts.nl/cookies staat boven de tabel een grijze tekst "Cookieverklaring laatst bijgewerkt op (...) door" met onvoldoende contrast. De tekstkleur is #aaaaaa, de achtergrondkleur is wit, de contrastverhouding is 2,3:1. Het contrast moet minstens 4,5:1 zijn.

Op de pagina www.stroomopwaarts.nl/nieuws staat onder elke nieuwsrubriek, rechtsonder, grijze tekst met onvoldoende contrast, bijv: "Stroomopwaarts", "Bijstand", "Zakelijk", enz. De tekstkleur is HEX#818181, de achtergrondkleur is wit, de contrastverhouding 3,9:1. Dit moet minstens 4,5:1 zijn.

Op pagina www.stroomopwaarts.nl/over-ons/beleidstukken staan tabellen met links. De groene links (HEX#06838e) op een grijze (HEX#F2F2F2) achtergrond heeft onvoldoende contrast, namelijk een verhouding van 4,0:1. Bijvoorbeeld: onder het kopje "Jaarverslagen" links "Jaarverslag 2021", "Jaarverslag 2019", etc. De contrastverhouding van de tekst moet minimaal 4,5:1 zijn.

Op pagina www.stroomopwaarts.nl/formulierenbrigade staat onder het kopje "Onderwerp, product en aanvullende informatie" een select-element. In de keuzelijst wordt de geselecteerde optie op een blauwe achtergrond weergegeven. Witte tekst op een blauwe (HEX#5897fb) achtergrond heeft onvoldoende contrast, namelijk 2,9:1. De contrastverhouding moet minstens 4,5:1 zijn. Hetzelfde probleem bij het selecteren van "Locatie", bij stap 2 van het proces na het selecteren van het keuzerondje "Kies zelf een locatie en datum".

In het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf, op pagina 14 staat een diagram met witte tekst op een groene achtergrond met een te lage contrastverhouding van 1,8:1. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem met roze tekst op lichtgroene achtergrond, de contrastverhouding 3:1 en met roze tekst op lichtroze achtergrond, de contrastverhouding is 2,4:1. Er zijn meer kleurencombinaties die niet voldoen aan de minimale contrasteisen, bijvoorbeeld op pagina 111-113…”.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, onder het navigatiemenu, staat een knop "Hoe kunnen wij u helpen?". Deze knop verdwijnt als het scherm wordt ingezoomd tot 200% bij de schermbreedte van 1280px. Dit is verlies van content en functionaliteit. Dit geldt ook voor de navigatiemenuknop op www.stroomopwaarts.nl .

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, onder het navigatiemenu, staat een knop "Hoe kunnen wij u helpen?". Deze knop verdwijnt als het scherm wordt ingezoomd tot 200% bij de schermbreedte van 1280px. Dit is verlies van content en functionaliteit. Dit geldt ook voor de navigatiemenuknop op www.stroomopwaarts.nl .

Uitkomst: Onvoldoende

Bevindingen: Bij het eerste bezoek aan de website, verschijnt een cookiebanner. Wanneer bezoeker op de knop "Zelf instellen" klikt, wordt nieuwe inhoud geopend. Binnenin staan selectievakjes waarvan de lichtblauwe (HEX#36B7C8) rand onvoldoende contrast heeft. In combinatie met de witte achtergrond is de contrastverhouding is 2,4:1. Dit moet ten minste 3,0:1 zijn. Hetzelfde contrastprobleem is te zien met het selectievakje wanneer het selectievakje is aangevinkt op www.stroomopwaarts.nl .

Op pagina www.stroomopwaarts.nl/nieuws staat een paginanavigatie onder de nieuwsberichten. Als hier met het toetsenbord doorheen genavigeerd wordt, verschijnt een paarse rand om aan te geven waar de toetsenbordfocus is. Deze paarse rand heeft een te lage contrastverhouding van 1,6:1 op de witte achtergrond.

Op alle pagina's, onder het navigatiemenu, staat een zoekveld. De rand van het veld (HEX#E9E9E9) heeft onvoldoende contrast met de achtergrond (HEX#FFFFFF). De contrastverhouding is momenteel 1,2:1. Er staat een placeholder tekst in. Wanneer deze tekst voldoende contrast zou hebben, zou dit voldoende zijn om aan te geven waar de zoekopdracht moet worden ingevuld. Momenteel is de contrastverhouding 3,9:1. Dit is onvoldoende. Zorg voor voldoende contrast van de rand (minimaal 3,0:1) of de placeholder-tekst (minimaal 4,5:1).

Op alle pagina's, onder het navigatiemenu, is er een zoekvak. Wanneer de bezoeker begint te typen in dit veld, verschijnt een grijze (HEX#8E8E8E) knop met een "x". Deze knop heeft onvoldoende contrast met de achtergrond. De achtergrondkleur is #E9E9E9, de contrastverhouding is 2,7:1. Dit moet ten minste 3,0:1 zijn.

Op kleine schermen, verschijnt een knop om een mobiel menu te openen. In het menu hebben sommige items de knoppen met "-" en "+" die submenu's openen en sluiten. Deze zwarte iconen staan op een donker magenta achtergrond. De contrastverhouding is momenteel 2,1:1.
De standaard focusrand is vervangen door een zwarte rand. In combinatie met een magenta achtergrond van het menu, heeft deze kleur onvoldoende contrast. De contrastverhouding is namelijk 2,8:1. Dit moet minimaal 3,0:1 zijn.

Wanneer een bezoeker begint te typen in het zoekveld, verschijnt een knop met een kruisje waarmee de invoer kan worden verwijderd. Deze knop is niet toegankelijk via het toetsenbord. De contrastverhouding van deze knop is slechts 2,3:1, gemeten tussen het witte kruisje en de grijze achtergrond van de knop. Dit moet minimaal 3,0:1 zijn.

Op pagina www.stroomopwaarts.nl/zakelijk/contact staat onder het kopje "Vul het contactformulier in" een formulier. De rand van de invoervelden heeft onvoldoende contrast. De grijze rand heeft de contrastverhouding van 1,3:1. De contrastverhouding van de randen moet ten minste 3,0:1 zijn.

Op pagina www.stroomopwaarts.nl/zakelijk/contact is de standaardfocusindicator vervangen door een aangepaste. Op elementen zoals invoervelden en de link "Neem contact op" wordt deze weergegeven door een lichtpaarse rand met onvoldoende contrast van 1,7:1. Het contrast van de indicator moet ten minste 3,0:1 zijn. Hetzelfde issue is te zien op de pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk met de link "Neem contact op", www.stroomopwaarts.nl/nieuws met paginering.

Op de pagina www.stroomopwaarts.nl/formulierenbrigade staat een formulier. In stap 2 van het proces, na het selecteren van het keuzerondje "Kies zelf een locatie en datum" verschijnt er een kalender. Daarin staan twee knoppen om een maand te selecteren. Deze witte knoppen op een oranje (HEX#FF9933) achtergrond hebben onvoldoende contrast. De contrastverhouding is 2,1:1. Dit moet ten minste 3,0:1 zijn.

Op de pagina www.stroomopwaarts.nl/formulierenbrigade is de standaardfocusindicator vervangen door een aangepaste indicator. Bijvoorbeeld: in stap 2 van het proces na het selecteren van het keuzerondje "Kies zelf een locatie en datum", in de kalender, op de 2 knoppen voor het selecteren van de maand, wordt deze weergegeven door een paars kader op een oranje achtergrond een te lage contrastverhouding van 2,7:1. De contrastverhouding van de indicator moet ten minste 3,0:1 zijn.

Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Beleidstukken/Jaarverslag%202022%20Stroomopwaarts-MVS.pdf bevat informatieve informatie in afbeeldingen die op meerdere plaatsen onvoldoende contrast hebben. Bijvoorbeeld op pagina 8 de grafiek bij “Indexcijfer ontwikkeling uitkeringen…”. Hier heeft de roze lijn een te lage contrastverhouding van 1,7:1 op de witte achtergrond. Ook is de contrastverhouding van de roze lijn ten opzichte van de rode (2,7:1) en blauwe (2,4:1) lijn te laag. De contrastverhouding tussen de rode en blauwe lijn is met 1,2:1 ook te laag.
Op pagina 14 staan ook meerdere informatieve visuele elementen met een te laag contrast op de achtergrond of ten opzichte van elkaar. Hier volgen enkele voorbeelden. De lichtroze kleur heeft een te lage contrastverhouding van 1,8:1 op de witte achtergrond; de lichtgroene kleur heeft een te lage contrastverhouding van 1,6:1 op de witte achtergrond en 1,2:1 ten opzichte van de andere groene kleur; de lichtblauwe kleur heeft een te lage contrastverhouding van 2,7:1 op de witte achtergrond en 1,5:1 ten opzichte van de groene kleur.
Soortgelijke problemen kunnen vaker voorkomen.

Op alle pagina's staat onder de grote afbeelding een witte link met een pijl om naar beneden naar de hoofdinhoud te gaan. Het contrast is onvoldoende, de pijl is wit (HEX#FFFFFF), de achtergrondkleur is steeds anders omdat de afbeelding wisselt. De combinatie met bijvoorbeeld HEX#C6D9E7, de contrastverhouding is 1,4:1. Dit moet ten minste 3,0:1 zijn. Omdat dit geen noodzakelijk element is en omdat er een alternatief is in de vorm van verticaal scrollen, wordt dit niet afgekeurd. Wel kan dit beter aangepast worden.
www.stroomopwaarts.nl

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de homepagina staat een knop “Translate”. Wanneer deze knop focus krijgt, opent een extra content. De bezoeker moet in staat zijn om deze aanvullende content te sluiten zonder de toetsenbordfocus te wijzigen, bijvoorbeeld door gebruik te maken van de Escape-toets. Hierdoor kan de gebruiker gemakkelijk en efficiënt de aanvullende content verbergen en de focus behouden op de relevante delen van de pagina.

Uitkomst: Voldoende

Bevindingen: Wanneer een bezoeker begint te typen in het zoekveld, verschijnt een knop met een kruisje waarmee de invoer kan worden verwijderd. Deze knop is niet toegankelijk via het toetsenbord. Dit wordt niet afgekeurd omdat hetzelfde resultaat met een toetsenbord kan worden bereikt. Als advies kan worden gegeven om deze knop ook toegankelijk te maken.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het pdf-document www.stroomopwaarts.nl/Portals/0/Documenten/Wijzigingsformulier/… heeft als titel "E van beek". Deze tekst beschrijft het onderwerp van het document niet goed. Elk document moet een titel hebben die duidelijk het onderwerp van het document beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Bij het eerste bezoek aan de website, verschijnt een cookiebanner. De focus gaat naar deze banner en na het laatste item naar de interactieve elementen op de pagina. Deze volgorde van focus is niet logisch. Zorg ervoor dat de focus in de banner blijft totdat de gebruiker deze sluit.
www.stroomopwaarts.nl

Op pagina www.stroomopwaarts.nl/zakelijk/contact, onder de kaart, bevindt zich een onzichtbare link die de focus krijgt. Dit is geen logische focusvolgorde.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.stroomopwaarts.nl, naast het kopje "Nu belangrijk", staan 2 links met dezelfde naam "Lees artikel", die naar verschillende pagina's leiden. Hulpsoftware kan het doel van de link niet bepalen. Om dit op te lossen, kan extra informatie worden toegevoegd aan de link via een verborgen tekst. Hetzelfde issue is te zien onder het kopje "Laatste nieuws".

Op pagina www.stroomopwaarts.nl/contact staan onder het kopje "Contact algemeen" een groot aantal knoppen waarmee je tekst kunt uitvouwen. In deze teksten staan meerdere links met dezelfde tekst "Lees op eigen pagina". Ze leiden naar verschillende pagina's. Het doel is niet duidelijk. Hetzelfde probleem is aanwezig op pagina www.stroomopwaarts.nl/inwoners/inkomen/uitbetaling-en-hoogte-bijstandsuitkering en www.stroomopwaarts.nl/formulierenbrigade.

Op pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk staan onder het kopje "Zoekresultaten", naast de tekst "Pagina: 1", twee links zonder tekst. Het doel van deze links is niet duidelijk. Hetzelfde probleem is aanwezig onderaan de pagina.

Op pagina www.stroomopwaarts.nl/nieuws staat een groot aantal links met dezelfde tekst "Lees het hele bericht" die naar verschillende pagina's leiden. Het doel van de links is niet duidelijk. Zie ook www.stroomopwaarts.nl/inwoners/inkomen/uitbetaling-en-hoogte-bijstandsuitkering met links “Lees op eigen pagina”.

Op pagina www.stroomopwaarts.nl/over-ons/bestuur staan meerdere links “Wethouder gemeente …”. Deze hebben allemaal een title gekregen met de inhoud “www.stroomopwaarts.nl/over-ons/bestuur/�__. Dit is echter niet het linkdoel en niet uniek. Dit moet daarom verwijderd of aangepast worden. Lees ook succescriterium 1.1.1. Dit probleem komt vaker voor.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bij het eerste bezoek aan de website www.stroomopwaarts.nl, verschijnt een cookiebanner. Als je op de link "Zelf instellen" klikt, wordt er een nieuwe inhoud geopend. Daarbinnen zijn er selectievakjes: "Voorkeuren", "Statistieken", "Marketing", ze hebben geen zichtbare focusindicator.
Verder is bij succescriterium 2.4.3 vermeld dat de toetsenbordfocus op de pagina achter de banner terecht kan komen. Dan is de focus op een aantal plaatsen niet zichtbaar.

Op pagina www.stroomopwaarts.nl/formulierenbrigade, onder het kopje "Maak een afspraak", staat een formulier dat uit meerdere stappen bestaat. Tijdens het invullen verschijnen links of knoppen in een paars kader met witte tekst, bijvoorbeeld: in stap 1, "Selecteer locatie en datum". Al deze links hebben geen zichtbare focusindicator.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina www.stroomopwaarts.nl/test heeft de primaire taal van de pagina de verkeerde waarde in het element lang="en-US" op de HTML. Voor Nederlandstalige sites moet de waarde lang="nl" zijn.

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de homepagina staat een knop “Translate”. Wanneer deze knop focus krijgt, opent een extra content. De inhoud van deze extra venster is in het Engels. Er ontbreekt een taalwissel om de voorleessoftware te laten weten dat dit een anderstalige content is.

Op pagina www.stroomopwaarts.nl/paginawijzer staan links in Oekraïens. Deze content dient een taalswitch te krijgen zodat ze correct worden voorgelezen.

Onderaan de pagina www.stroomopwaarts.nl/nieuws<a12 staat paginering. De tekst van de links is in het Engels, hoewel de pagina zelf in het Nederlands is. Bijvoorbeeld: “First”, “Previous”, “Next”, “Last”. Het zou de toegankelijkheid van deze pagina vergroten als deze teksten in het Nederlands waren.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.stroomopwaarts.nl/formulierenbrigade, onder het kopje "Maak een afspraak", staat bij stap 3 een formulier. Wanneer in het veld ‘Telefoon’ verkeerde waarde wordt ingevuld, bijvoorbeeld met een "1", verschijnt er een foutmelding: "Fout: het veld 'Telefoon' bevat geen geldig telefoonnummer. Een geldig telefoonnummer bestaat uit 10 cijfers." Deze informatie is een instructie en moest permanent, niet als een placeholder, op de pagina worden geplaatst.

Op dezelfde pagina staat een invoerveld bij “Geboortedatum” met een instructie als placeholdertekst (“dd-mm-jjjj”). Deze instructie moet ook permanent op de pagina worden geplaatst. De kalender die verschijnt is geen toegankelijk alternatief.

Op elke pagina wordt gebruik gemaakt van Readspeaker, een voorleeshulp om teksten van de betreffende pagina voor te lezen. Op de knop staat "Lees voor". De toegankelijkheidsnaam van deze knop bevat een hele andere tekst waardoor de knop niet met spraak is te bedienen. Zorg dat de knop dezelfde naam heeft als wat in beeld getoond wordt. Zo kent Readspeaker meer problemen die we hier niet uitgebreid hebben getest en beschreven. Breng de leverancier van het product op de hoogte van de problemen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op kleine schermen verschijnt een knop om een mobiel menu te openen. In het menu zijn er knoppen in de vorm van "-" en "+" die submenu's openen en sluiten. Maar de status van deze items (open of gesloten) wordt niet doorgegeven aan de schermlezer. Dit kan worden gedaan door een aria-expanded attribuut aan de knop toe te voegen met de juiste waarde ("true" of "false") of door verborgen tekst te gebruiken. Deze iconen hebben alternatieve tekst gekregen "Dit opent en sluit het submenu onder 'Inwoners'", maar deze tekst beschrijft de status niet correct, deze zou moeten veranderen afhankelijk van of de sectie geopend of gesloten is.

Op pagina www.stroomopwaarts.nl/zakelijk/contact, onder de kop "Vul het contactformulier in", staat een select-element. Als "Iets anders" is geselecteerd, verschijnt er een nieuw invoerveld. Dit tekstinvoerveld heeft geen toegankelijkheidsnaam.

Op de www.stroomopwaarts.nl/zakelijk/contact pagina staat een kaart, het is een iframe-element dat geen toegankelijkheidsnaam heeft. Dit kan worden opgelost door een title-attribuut toe te voegen met een beschrijving van wat hier te zien is.

Op pagina www.stroomopwaarts.nl/zakelijk/zoekresultaten/search/werk, onder het kopje "Zoekresultaten", naast de tekst "Pagina: 1", staan twee links zonder toegankelijkheidsnaam. Hetzelfde probleem is te zien onderaan de pagina.

Op pagina www.stroomopwaarts.nl/formulierenbrigade, onder het kopje "Onderwerp, product en aanvullende informatie", staat een zelfgemaakte select-element. Dit element heeft geen naam. Hetzelfde probleem in stap 2 bij het selecteren van de optie "Kies zelf een locatie en datum" onder het label "Locatie".

Onder de kop "Maak een afspraak" op pagina www.stroomopwaarts.nl/formulierenbrigade staat een voortgangsbalk. Hierbinnen zijn de attributen aria-valuemin en aria-valuemax gebruikt. Deze zijn alleen van toepassing binnen bepaalde rollen. Een dergelijke rol, bijvoorbeeld progressbar, ontbreekt nu.

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.stroomopwaarts.nl/formulierenbrigade, onder het kopje "Maak een afspraak", staat een voortgangsbalk. Als een van de opties wordt geselecteerd, krijgt de balk kleur en tekst om de voortgang van het proces aan te geven. Hulpsoftware leest deze update niet voor. Een oplossing voor dit probleem is het implementeren van ARIA (Accessible Rich Internet Applications) attributen. Het toevoegen van role=”progressbar” of een vergelijkbare rol zal dit probleem waarschijnlijk verhelpen, zie ook succescriterium 4.1.2. Anders is dit mogelijk door het gebruik van aria-live="polite" of aria-live="assertive" kan de website automatisch updates van dit statusbericht doorgeven aan schermlezers zonder de gebruiker te onderbreken. De keuze tussen "polite" en "assertive" hangt af van hoe urgent de informatie is. Voor minder dringende updates is "polite" geschikt, terwijl "assertive" gebruikt kan worden voor belangrijkere updates die directe aandacht vereisen.
Een alternatieve benadering is het gebruik van role="status" of role="alert". Deze rollen informeren de gebruiker over belangrijke wijzigingen in de content van de pagina. "Status" is meestal geschikt voor algemene informatie, terwijl "alert" wordt gebruikt voor meer urgente informatie.