Rapport:
Audit digitale toegankelijkheid website ondernemeninregiozwolle.nl

Uitkomst: Onvoldoende

Bevindingen: In de header van de website opent de knop met het label "zoek assistent" in de header een dialoogvenster. In dit dialoogvenster staat naast het invoerveld met de placeholdertekst “Stel je vraag over advies of initiatieven...” een knop met een papieren vliegtuig-icoon. Dit icoon heeft geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Voeg de beschrijving toe via een title-element bij het svg-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven komt hetzelfde probleem voor bij weergave op een klein scherm. De knop “Filters weergeven” opent een paneel met filters. In dit paneel ontbreekt bij het “X”-icoon, dat dient als knop om het paneel te sluiten, een tekstalternatief.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven bevatten de zoekresultaten afbeeldingen die functioneren als links, maar die een tekstalternatief missen. Het gaat bijvoorbeeld om het telefoon-, envelop- en pijltje-icoon. Daardoor hebben de links geen inhoud (zie ook succescriteria 2.4.4 en 4.1.2). Om deze links toegankelijk te maken, moeten de afbeeldingen een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio komt hetzelfde probleem voor in de sectie onder “Gerelateerde adviseurs & initiatieven”. De links die bestaan uit alleen een afbeelding hebben geen tekstalternatief.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen komt hetzelfde probleem voor in de sectie onder “Gerelateerde adviseurs & initiatieven”. De links die alleen bestaan uit een afbeelding zijn daardoor niet toegankelijk.
Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg komt hetzelfde probleem voor onder de kop “Adviseurs”. Ook hier functioneren de iconen als links, maar ontbreekt een tekstalternatief. Zie ook andere pagina's.

Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat onder de kop “Gemeente Elburg” een link met een LinkedIn-icoon en de tekst "Gemeente Elburg", en een andere link met een “X”-icoon en dezelfde tekst "Gemeente Elburg". Deze iconen hebben geen tekstalternatief, waardoor het onduidelijk is wat het doel van de links is. Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat aangeeft om welke sociale media het gaat. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink komt hetzelfde probleem voor onder de kop “Bart Jeurnink”. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizanne-schipper komt hetzelfde probleem voor onder de kop “Lizanne Schipper”. Ook op deze pagina’s hebben de afbeeldingen in de links geen tekstalternatief, waardoor het doel van de link onduidelijk is voor hulpsoftware. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bram-horst komt hetzelfde probleem voor onder de kop “Bram Horst”. Zie ook andere pagina's.

Op pagina https://www.ondernemeninregiozwolle.nl/ staan onder de kop "Hi ondernemer, waar kunnen we jou mee helpen?" twee afbeeldingen met de alternatieve teksten "Zwolle regio" en “Ondernemen-in-Regio-Zwolle-Lianne-Schippers_9c”. Deze teksten beschrijven de afbeelding niet op een betekenisvolle manier. Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven. Als deze afbeeldingen decoratief zijn en geen extra informatie geven, dan moeten ze verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor decoratieve afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Op pagina https://www.ondernemeninregiozwolle.nl/ staan in de sectie “Wat is Ondernemen in Regio Zwolle?” meerdere afbeeldingen. Deze afbeeldingen zijn niet zichtbaar, maar zijn wel toegankelijk voor schermlezers, omdat ze een alternatieve tekst hebben, zoals "Ondernemen-in-Regio-Zwolle-Adviseur-Macha-achtergrond", “Ondernemen-in-Regio-Zwolle-Orange-Gradient-Blok”, “Ondernemen-in-Regio-Zwolle-Icon-Geel-Gradient-Blok” en andere. Deze afbeeldingen geven geen extra informatie en moeten daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Op pagina https://www.ondernemeninregiozwolle.nl/over-ons staan in de secties "Wat is ondernemen in Regio Zwolle?", “Ondernemen doen we samen” en “Hoe werkt het?” decoratieve afbeeldingen die een alternatieve tekst hebben. De afbeelding in de sectie "Wat is ondernemen in Regio Zwolle?" heeft bijvoorbeeld de alternatieve tekst “Ondernemen-in-Regio-Zwolle-I-Icon-GeelPaars-Gradient-Blok”. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/kop-van-de-veluwe wordt in het logo de volledige tekst "Kop van de Veluwe Bedrijven" weergegeven, maar de alt-tekst is alleen "Ondernemen-in-Regio-Zwolle-Kop-van-de-Veluwe". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Bovendien is het tekstalternatief nu niet goed leesbaar, doordat er streepjes tussen alle woorden staan. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Kop van de Veluwe Bedrijven”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op pagina https://www.ondernemeninregiozwolle.nl staat boven de sectie “Wat is Ondernemen in Regio Zwolle?” een logo met de volledige tekst “Ondernemen in Regio Zwolle”. De alternatieve tekst is "Ondernemen-in-Regio-Zwolle-Logo-Full-color". Deze alternatieve tekst bevat niet-leesbare karakters, zoals streepjes. Alternatieve teksten mogen geen symbolen bevatten zoals streepjes en underscores. Deze karakters maken de alternatieve tekst onduidelijk. Verwijder de niet-leesbare karakters en herschrijf de tekst. Een goed tekstalternatief zou bijvoorbeeld zijn “Ondernemen in Regio Zwolle”, eventueel aangevuld met “Logo”. De tekst “Full color” is niet nodig om in het tekstalternatief op te nemen, tenzij het informatie geeft dat er hier specifiek kleur gebruikt is. Het lijkt hier meer een aanduiding van de versie van het logo dat gebruikt is. Op dezelfde pagina komt dit probleem ook voor bij andere afbeeldingen. Ook daar bevatten de alternatieve teksten symbolen die de begrijpelijkheid verminderen.
Hetzelfde probleem doet zich bijvoorbeeld ook voor op andere pagina's van de website, https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven, https://www.ondernemeninregiozwolle.nl/over-ons, https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio, en anderen.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's is bovenaan, bij weergave op een klein scherm, een knop met drie horizontale lijnen te zien die het navigatiemenu opent. Ook wanneer het menu gesloten is, blijven de links en de knop in het menu toegankelijk voor schermlezers, omdat ze niet verborgen zijn in de HTML-code. Bezoekers die hulpsoftware gebruiken kunnen daardoor navigeren naar onderdelen die niet zichtbaar zijn, wat verwarrend is. Wanneer het menu gesloten is, moet de inhoud ervan programmatisch verborgen worden. Dit kan bijvoorbeeld met display: none of visibility: hidden in CSS, of door aria-hidden="true" toe te passen. Andere oplossingen zijn ook mogelijk.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven doet zich hetzelfde probleem voor bij weergave op een klein scherm. De knop “Filters weergeven” opent een paneel met filters. Ook hier kunnen bezoekers met een schermlezer nog steeds navigeren naar filters die visueel verborgen zijn.

In de header van de website opent de knop met het label “zoek assistent” een dialoogvenster met een chatfunctie met een AI-assistent. In deze chat kan een bezoeker berichten toevoegen en antwoorden ontvangen van de AI-assistent. De berichten zijn echter niet gemarkeerd om aan te geven wie de afzender is. Visueel is dit wel duidelijk door de plaatsing en kleur van de tekst, maar bezoekers die bijvoorbeeld voorleessoftware gebruiken, kunnen nu niet horen of een bericht afkomstig is van de bezoeker zelf of van de assistent. Hierdoor is het gesprek moeilijk te volgen.

In de header van de website opent de knop met het label "zoek assistent" een dialoogvenster met een chatfunctie met een AI-assistent. In deze chat verschijnen opsommingen met meerdere items, maar deze zijn niet correct gemarkeerd in de code. Om deze opsommingen te tonen, moet een bezoeker op een knop in de dialoog klikken, zoals “Ik wil mijn bedrijf verduurzamen”, en daarna in de toegevoegde sectie op een andere knop klikken, bijvoorbeeld “Dalfsen”. De lijst die verschijnt in het bericht van de AI-assistent is visueel een opsomming, maar mist de juiste opmaak. Hierdoor kan hulpsoftware de relatie niet goed bepalen. Omdat hier steeds sprake is van een soort koptekst met daaronder een uitleg, kunnen deze kopteksten opgemaakt worden als koppen. Zo is het duidelijk dat deze tekst iets zegt over de tekst eronder. Deze tekst kan hier ook opgemaakt worden als lijst om de relaties goed aan te geven. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. De relatie tussen de ‘koptekst’ en de uitleg erbij moet dan alsnog ook nog worden aangegeven. Dit zou bijvoorbeeld ook met een dl-lijst kunnen.

Op de website staan in het cookiedialoogvenster, in het tabblad “Toestemming”, twee schakelknoppen. De schakelknop “Essentieel” is verborgen voor de schermlezer door het gebruik van het attribuut aria-hidden="true". Hierdoor kunnen bezoekers die hulpsoftware gebruiken deze schakelknop niet waarnemen en worden zij niet geïnformeerd over het bestaan of de toestand van “essentiële” cookies in dit tabblad. Dit zorgt voor een onvolledige en misleidende ervaring in vergelijking met wat er visueel zichtbaar is. Het attribuut aria-hidden="true" zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.

Op de website staan in het cookiedialoogvenster, in het tabblad “Details”, secties met verborgen inhoud. In elke sectie staan knoppen met i-iconen die een dialoogvenster openen. In deze dialoogvensters staan teksten die visueel zijn vormgegeven als kop, maar in de code niet zijn gemarkeerd als kop. Dit is bijvoorbeeld het geval in het dialoogvenster van “Google Tag Manager”, bij teksten zoals “Google Tag Manager”, "Beschrijving van service", "Verwerkingsbedrijf”, "Functionaris voor gegevensbescherming van verwerkingsbedrijf" en andere. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven, bijvoorbeeld vetgedrukt, ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Op de website staan in het cookiedialoogvenster, in het tabblad “Details”, secties met verborgen inhoud. De elementen waarmee deze verborgen inhoud kan worden geopend en gesloten, zijn niet gemarkeerd als koppen in de code. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop.

Op pagina https://www.ondernemeninregiozwolle.nl/ staat een groep links die visueel als één geheel wordt gepresenteerd, maar deze groepering is niet terug te vinden in de HTML-structuur. Het gaat om de links onder de tekst "Of misschien heb je hulp nodig op een van de volgende gebieden?", zoals “vergunningen”, “groei financiëren”, “oplossingen arbeidsmarktkrapte” en andere. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in bijvoorbeeld een ul-element.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” groepen links die visueel als één geheel worden gepresenteerd. Deze groepering is echter niet terug te vinden in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element. Dit komt nog vaker voor op de website.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” zoekvelden. Deze zoekvelden geven een lijst met suggesties weer die visueel gegroepeerd worden. Deze groepering is echter niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of paginering bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.

Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen staat onder de sectie "Slim gebruik van subsidies en netwerk" een groep elementen die visueel bij elkaar hoort: “Digitalisering en robotisering”, “Bedrijfsprocessen digitaliseren”, “Innovatie”. Deze onderlinge relatie is echter niet vastgelegd in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element of voeg een kop boven deze tekst toe.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/familiebedrijf-nijland-cycling-versnelt-met-hulp-van-kennispoort doet zich hetzelfde probleem voor bij de teksten onder de sectie “Een toekomst vol energie”. Ook hier wordt de samenhang tussen de elementen visueel duidelijk gemaakt, maar ontbreekt de semantische structuur in de code.

Op pagina https://www.ondernemeninregiozwolle.nl staat onder de kop “Gratis adviesgesprek” een formulier waarin foutmeldingen worden weergegeven, zoals “Naam is verplicht”. De relatie tussen de foutmeldingen en de invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
Op pagina https://www.ondernemeninregiozwolle.nl/over-ons komt hetzelfde probleem voor. Ook hier zijn de foutmeldingen niet programmatisch gekoppeld aan de invoervelden.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de kop "Ik zoek hulp met" meerdere teksten, zoals "Oplossingen arbeidsmarktkrapte", "Bedrijfsprocessen", "Circulariteit" en andere. Deze teksten zijn visueel vormgegeven als koppen, maar zijn in de code niet gemarkeerd als kop.
Hetzelfde probleem doet zich voor onder de kop “Gemeente”. Zorg dat deze teksten worden gemarkeerd met het juiste heading-element (h2 tot h6) dat past bij hun functie en plaats in de hiërarchie van de inhoud.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” links waarmee zoekresultaten worden gefilterd. De momenteel geselecteerde link heeft een afwijkend visueel uiterlijk, maar deze visuele aanduiding is niet aanwezig in de code. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de actieve link. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen worden de strong- en em-elementen onjuist gebruikt voor stijldoeleinden, om teksten vet of cursief weer te geven. De elementen strong en em hebben een semantische waarde: ze geven een bepaalde betekenis aan de tekst die ze bevatten. Beide elementen geven aan dat de tekst extra nadruk moet krijgen. Om die reden mogen deze elementen niet gebruikt worden om alleen een visueel effect te bereiken. Gebruik hiervoor CSS.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/familiebedrijf-nijland-cycling-versnelt-met-hulp-van-kennispoort komt hetzelfde probleem voor. De strong- en em-elementen worden ook hier toegepast zonder inhoudelijke reden, enkel voor de opmaak. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink worden deze elementen ook gebruikt voor visuele stijl zonder semantische functie.

Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat een kop van niveau 2 direct onder een andere kop van hetzelfde niveau. Het gaat om de koppen “Samenwerken in de regio” en “De sleutel tot nieuwe groei voor Lisa Rietveld.”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Zorg ervoor dat koppen juist genest zijn en de structuur van de inhoud weerspiegelen. Een h2 moet bijvoorbeeld gevolgd worden door een h3 of door inhoud, en niet direct door een andere h2 of een h1.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink komt hetzelfde probleem voor. Koppen van niveau 2 staan direct onder elkaar zonder tussenliggende inhoud, zoals “CodeGlass helpt developers sneller en slimmer werken” en “Innovatieve analysetool transformeert de wereld van softwareontwikkeling met steun van Kennispoort Regio Zwolle”, “Familiebedrijf Nijland Cycling versnelt met hulp van Kennispoort” en “Een succesverhaal over strategische groei, digitalisering en internationale ambities”. Ook hier moet de koppenstructuur worden aangepast om een correcte en toegankelijke hiërarchie te waarborgen.

Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat de kop “Expertises” zonder dat daar inhoud op volgt. Hierdoor wordt deze kop direct gevolgd door een andere kop van hetzelfde niveau: “Adviseurs”. Voeg direct onder de kop “Expertises” visueel verborgen tekst toe die duidelijk aangeeft dat er geen inhoud beschikbaar is onder deze kop. Zo begrijpen bezoekers die hulpsoftware gebruiken dat deze sectie bewust leeg is. Andere oplossingen zijn ook mogelijk.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizelot-gerritzen komt hetzelfde probleem voor bij de kop “Bio”. Ook hier ontbreekt de bijbehorende inhoud, en wordt de kop direct gevolgd door een andere kop. Voeg ook hier visueel verborgen tekst toe om dit voor schermlezers duidelijk te maken.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink staat onder de kop “Bio” een tekstblok dat visueel uit twee alinea’s bestaat, maar in de code is dit als één p-element opgemaakt. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizanne-schipper komt hetzelfde probleem voor. De visuele alinea’s onder de kop “Bio” zijn niet correct gescheiden in de HTML-structuur. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bram-horst en https://www.ondernemeninregiozwolle.nl/initiatief/kop-van-de-veluwe doet zich hetzelfde probleem voor.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink staan de secties “CodeGlass helpt developers sneller en slimmer werken” en “Familiebedrijf Nijland Cycling versnelt met hulp van Kennispoort”. Deze secties tonen alleen een preview van de artikeltekst. Om het volledige artikel te lezen, wordt de bezoeker doorverwezen naar de link “lees meer” onder de previewtekst. In de HTML is echter de volledige artikeltekst aanwezig, in plaats van een ingekorte versie. Hierdoor krijgen bezoekers die hulpsoftware gebruiken de volledige inhoud van het artikel te lezen, ook al is die visueel verborgen.
Dit probleem komt ook voor op andere pagina’s, zoals https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg en https://www.ondernemeninregiozwolle.nl/verhalen. Ook daar is de volledige inhoud in de HTML opgenomen terwijl visueel alleen een samenvatting zichtbaar is.

Op pagina https://www.ondernemeninregiozwolle.nl/algemene-voorwaarden zijn teksten zoals “Disclaimer”, “1. Algemeen”, “A. Toepassingsgebied” en andere onjuist gemarkeerd met het strong-element in plaats van met een kop-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ is de volgorde van HTML-elementen binnen secties niet logisch opgebouwd. Afbeeldingen zijn in de code boven de koppen geplaatst. De huidige volgorde is: afbeelding, kop, tekst. Dit is bijvoorbeeld te zien in de sectie “Samenwerken in de regio”. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen komt hetzelfde probleem voor. Ook daar staan de afbeeldingen in de code boven de koppen waar ze bij horen. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink is de opbouw van de HTML-structuur eveneens niet logisch. Ook hier gaat het om afbeeldingen die in de code boven bijbehorende koppen staan.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven is de volgorde van HTML-elementen binnen de artikelen in de zoekresultaten niet logisch opgebouwd. Afbeeldingen of teksten staan boven de koppen in de code. De huidige volgorde is: afbeelding of tekst, kop, tekst. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio komt hetzelfde probleem voor in de sectie onder “Gerelateerde adviseurs & initiatieven”. Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen doet zich hetzelfde probleem voor in de sectie onder “Gerelateerde adviseurs & initiatieven”. Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg komt het probleem voor onder de kop “Adviseurs”. Zie ook andere pagina's.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ bevat een formulier invoervelden voor persoonlijke informatie, zoals “Naam” en “Email”. Deze velden missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals naam en e-mailadres, moeten het autocomplete-attribuut hebben met de juiste waarde. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut met de juiste waarde voor alle velden waar persoonlijke informatie in moet worden gevuld. Bijvoorbeeld autocomplete="name". Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website staat een knop met witte tekst “zoek assistent” op een oranje achtergrond (HEX #FFB300). De contrastratio van deze combinatie is 1,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op dezelfde pagina komt hetzelfde probleem voor bij de links “bedrijfsprocessen” en “scholing van personeel”. Ook de links “lees meer” en de knop “Versturen” hebben onvoldoende contrast. De lichtgrijze tekst (HEX #F8FAFC) op de oranje achtergrond heeft een contrastratio van 1,7:1.
Op pagina https://www.ondernemeninregiozwolle.nl/verhalen komt een vergelijkbaar probleem voor. De links “Lees meer” hebben witte tekst op een oranje achtergrond, wat resulteert in een contrastratio van 1,8:1. Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat een link met de tekst “lees meer” in witte kleur op een oranje achtergrond, met een te lage contrastratio. Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink komen meerdere links met de tekst “lees meer” voor, ook in witte kleur op een oranje achtergrond, met een te laag contrast. Dit probleem komt ook op andere pagina’s voor.

In de header van de website opent de knop met het label "zoek assistent" een dialoogvenster. In dit dialoogvenster staat de oranje tekst “ondernemer” (HEX #FFB300) op een lichtgrijze achtergrond (HEX #F4F2F4). De contrastratio van deze combinatie is 1,6:1. Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.

Op pagina https://www.ondernemeninregiozwolle.nl/ staat de oranje tekst “powered by AI” op een paarse achtergrond. De contrastratio van deze combinatie is 4,4:1. Dit moet minimaal 4,5:1 zijn.

Op pagina https://www.ondernemeninregiozwolle.nl/ staan onder de tekst “Of misschien heb je hulp nodig op een van de volgende gebieden?” meerdere links met witte tekst op achtergronden in verschillende kleuren. De contrastratio is te laag. De witte tekst “vergunningen” op een rode achtergrond (HEX #FF6B6B) heeft een contrastratio van 2,8:1. De witte teksten “groei financiëren” en “cybercriminaliteit” op een groene achtergrond (HEX #4ECDC4) hebben een contrastratio van 1,9:1. De witte teksten “oplossingen arbeidsmarktkrapte” en “digitalisering en robotisering” op een blauwe achtergrond (HEX #3A86FF) hebben een contrastratio van 3,5:1. De witte tekst “netcongestie” op een roze achtergrond (HEX #FA928B) heeft een contrastratio van 2,2:1. Deze teksten zijn kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://www.ondernemeninregiozwolle.nl/ staat onder de kop “Gratis adviesgesprek” een link met blauwe tekst (HEX #3B82F6) op een witte achtergrond. De contrastratio is 3,7:1. Dit moet minimaal 4,5:1 zijn.
Op pagina https://www.ondernemeninregiozwolle.nl/over-ons komt hetzelfde probleem voor. Ook hier heeft de link een contrastratio die lager is dan de vereiste minimale waarde van 4,5:1.

Op pagina https://www.ondernemeninregiozwolle.nl/ staan onder de kop “Gratis adviesgesprek” invoervelden met placeholderteksten. De grijze tekst (HEX #ACACAC) staat op een lichtgrijze achtergrond (HEX #F8F8F8). De contrastratio is 2,1:1. Dit moet minimaal 4,5:1 zijn.
Op pagina https://www.ondernemeninregiozwolle.nl/over-ons komt hetzelfde probleem voor. Ook hier is de placeholdertekst niet goed leesbaar door een te laag contrast met de achtergrond.

Op pagina https://www.ondernemeninregiozwolle.nl/ wordt in het formulier een foutmelding weergegeven in rode tekst (HEX #EF4444) op een witte achtergrond. De contrastratio van deze combinatie is 3,8:1. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen. Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven wordt de tekst “Vind jouw adviseur of initiatief” weergegeven in witte en paarse tekst op een oranje verloopachtergrond. Het kleurcontrast tussen de tekst en de achtergrond is te laag. De witte tekst “Vind” op een oranje achtergrond (HEX #F39828) heeft een contrastratio van 2,3:1. De paarse tekst “adviseur” (HEX #5B21FC) op een oranje achtergrond (HEX #F1942E) heeft een contrastratio van 2,9:1. Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Daarnaast heeft de witte tekst die begint met “Hieronder kun je handig door middel van …” een te laag contrast tegen de achtergrond. Op de oranje achtergrond (HEX #F8A416) is de contrastratio 2,0:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Dit probleem komt ook voor op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg onder de kop “Gemeente Elburg”, op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizanne-schipper onder de kop “Lizanne Schipper” en op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bram-horst onder de kop “Bram Horst”. Dit probleem komt ook voor op andere pagina’s met vergelijkbare vormgeving.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan in de zoekresultaten teksten in verschillende kleuren op een lichtgrijze achtergrond (HEX #F8F8F8). De contrastratio van deze combinaties is te laag. De blauwe tekst “oplossingen arbeidsmarktkrapte” (HEX #3A86FF) op de lichtgrijze achtergrond heeft een contrastratio van 3,3:1. De groene tekst “circulariteit” (HEX #4ECDC4) op dezelfde achtergrond heeft een contrastratio van 1,8:1. De oranje tekst “circulaire afvalstromen” (HEX #FFB300) op de lichtgrijze achtergrond heeft een contrastratio van 1,7:1. Deze teksten zijn kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Hetzelfde probleem komt ook voor op pagina https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio in de sectie onder “Gerelateerde adviseurs & initiatieven”, op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen in de sectie onder “Gerelateerde adviseurs & initiatieven”, en op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg onder de kop “Adviseurs”. Dit probleem komt ook op andere pagina’s voor.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s is in het head-element van de HTML-code de instelling maximum-scale=1 aanwezig. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen. Verwijder deze code.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ verschijnt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% een horizontale scrollbar. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/kop-van-de-veluwe doet zich hetzelfde probleem voor.

In de header van de website opent de knop met het label “zoek assistent” een dialoogvenster met een chatfunctie met een AI-assistent. Wanneer de website wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, valt de tekst in dit dialoogvenster deels buiten beeld. Het gaat bijvoorbeeld om de placeholdertekst “Stel je vraag over advies of initiatieven...” in het invoerveld, en om teksten op knoppen zoals “Hardenberg”, “Noordoostpolder”, “Oldebroek” en andere. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op de website staan in het cookiedialoogvenster schakelknoppen. Wanneer deze schakelknoppen ingeschakeld zijn, wordt de witte schakelaar weergegeven op een lichtgrijze achtergrond (HEX #EAEAEA). De contrastratio van deze combinatie is 1,2:1. Dit is te laag. Zie bijvoorbeeld de schakelknop “Functioneel” in het tabblad “Toestemming”. De contrastratio moet minimaal 3,0:1 zijn.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven is paginering aanwezig. In deze paginering wordt de huidige pagina aangegeven met grijze randen (HEX #C9C9CF) op een witte achtergrond. De contrastratio van deze combinatie is 1,6:1. Dit is te laag. De contrastratio moet minimaal 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” zoekvelden. Deze zoekvelden tonen suggesties in een dropdownlijst. De interactieve elementen in deze dropdownlijst zijn niet toegankelijk met het toetsenbord.
Hetzelfde probleem doet zich voor bij de interactieve elementen in de dropdownlijsten die worden geopend via de knoppen met vergrootglas-iconen. Zorg dat alle interactieve elementen ook met de Enter-, Return- of spatietoetsen kunnen worden bediend.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ bevat het formulier onder de kop “Gratis adviesgesprek” een invoerveld voor “Email” dat gebruikmaakt van alleen HTML5-validatie. Wanneer het formulier wordt verzonden met een onjuist ingevuld e-mailadres, wordt alleen de standaard HTML5-foutmelding van de browser getoond. Deze foutmeldingen verdwijnen te snel. Er is dus een tijdslimiet ingesteld. Voeg daarom altijd zelf foutmeldingen toe aan het formulier.
Op pagina https://www.ondernemeninregiozwolle.nl/over-ons doet zich hetzelfde probleem voor bij het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle onderzochte pagina’s van de website ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s https://www.ondernemeninregiozwolle.nl/adviseur/lizelot-gerritzen en https://www.ondernemeninregiozwolle.nl/test staat dezelfde tekst in het title-element van de pagina: “Ondernemen in regio Zwolle”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website komt bij weergave op een klein scherm de toetsenbordfocus na de knop met drie horizontale lijnen terecht op onzichtbare interactieve elementen. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen. Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven doet zich hetzelfde probleem voor bij weergave op een klein scherm. Na het activeren van de knop “Filters weergeven” komt de toetsenbordfocus op interactieve elementen die visueel nog verborgen zijn. Zie ook succescriterium 1.3.1.

Op pagina's van de website is bij weergave op een klein scherm bovenaan de pagina een menuknop aanwezig. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren, terwijl het menu visueel open blijft. De toetsenbordfocus verschuift dan naar de onderliggende pagina, wat verwarrend is en tot foutieve interacties kan leiden. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.
Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven doet zich hetzelfde probleem voor bij weergave op een klein scherm. De knop “Filters weergeven” opent een paneel met filters. Ook hier kan de toetsenbordfocus uit het paneel navigeren terwijl het visueel open blijft.

In de header van de website opent de knop met het label “zoek assistent” een dialoogvenster met een chatfunctie met een AI-assistent. Nadat een bezoeker een bericht heeft verzonden in de chat, wordt de toetsenbordfocus automatisch verplaatst naar de bovenkant van het dialoogvenster. Voor bezoekers die een toetsenbord of schermlezer gebruiken, is deze onverwachte focusverschuiving verwarrend. Het maakt het lastig om de chatfunctie goed te gebruiken.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven bevatten de zoekresultaten links met pijltjesiconen. Binnen deze links zijn knoppen genest. Elementen die toetsenbordfocus kunnen krijgen en genest zijn binnen andere interactieve elementen, zoals button- of a-elementen, worden soms niet goed voorgelezen door schermlezers. Dit kan leiden tot een leeg focuspunt: een situatie waarin een bezoeker met de Tab-toets naar het element kan navigeren, maar de schermlezer geen naam, rol of status van het element voorleest. Dit kan verwarrend zijn en een slechte gebruikerservaring veroorzaken voor mensen die afhankelijk zijn van hulpsoftware. Om dit probleem op te lossen, moeten interactieve elementen geen interactieve, focusbare onderliggende 'child'-elementen bevatten.
Dit probleem komt ook voor op andere pagina’s die soortgelijke compontenten bevatten, bijvoorbeeld op pagina https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio onder “Gerelateerde adviseurs & initiatieven”, op pagina https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen onder “Gerelateerde adviseurs & initiatieven”, en op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg onder de kop “Adviseurs”. Dit probleem komt ook voor op andere pagina’s.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven is paginering aanwezig voor de zoekresultaten. Wanneer een bezoeker via het toetsenbord naar een andere pagina met zoekresultaten navigeert, verplaatst de toetsenbordfocus zich niet naar de nieuw geladen zoekresultaten. In plaats daarvan blijft de focus op de paginering staan of verplaatst zich naar interactieve elementen ná de paginering. Dit is geen logische focusvolgorde. De toetsenbordfocus moet direct naar de nieuw weergegeven zoekresultaten gaan, zodat bezoekers die hulpsoftware gebruiken direct toegang hebben tot de relevante inhoud.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ komen meerdere links voor met de linktekst "lees meer", terwijl de bestemmingen van deze links verschillend zijn. Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers, vooral voor gebruikers van schermlezers die vertrouwen op de linktekst om te bepalen waar een link naartoe leidt. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn. Dit kan opgelost worden door de linktekst aan te vullen met een visueel verborgen tekst.
Hetzelfde probleem doet zich voor op andere pagina’s, zoals, https://www.ondernemeninregiozwolle.nl/verhalen en https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink. Ook daar worden meerdere keren links met de tekst "lees meer" gebruikt voor verschillende bestemmingen.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven bevatten de zoekresultaten afbeeldingen die functioneren als links, maar een tekstalternatief missen (zie ook succescriterium 1.1.1). Dit geldt bijvoorbeeld voor de links met het telefoon-, envelop- en pijltje-icoon. Daardoor hebben deze links geen inhoud en is het onduidelijk naar welke bestemming de links verwijzen. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de links hebben hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een tekstalternatief aan de afbeelding toe te voegen. Andere oplossingen zijn ook mogelijk.
Hetzelfde probleem komt voor op andere pagina’s met vergelijkbare artikelen, zoals, https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio in de sectie onder “Gerelateerde adviseurs & initiatieven”, https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen in de sectie onder “Gerelateerde adviseurs & initiatieven”, https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg onder de kop “Adviseurs”. Ook op andere pagina’s met een soortgelijke opmaak komen dit soort niet-toegankelijke links voor.

Op pagina https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio verwijst de link met de tekst "Terug" naar de pagina met de titel “Verhalen”. Deze link heeft de toegankelijke naam "Terug", wat de bestemming van de link niet duidelijk beschrijft. Voor een blinde bezoeker is daardoor niet te begrijpen wat deze link precies doet. Er moet tekst worden toegevoegd die de link duidelijker omschrijft.
Op pagina’s zoals https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen, https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg en https://www.ondernemeninregiozwolle.nl/verhalen/familiebedrijf-nijland-cycling-versnelt-met-hulp-van-kennispoort komt hetzelfde probleem voor. Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat daarnaast onder de kop “Samenwerken in de regio” een link met de tekst "lees meer". Ook deze toegankelijke naam beschrijft de linkbestemming niet duidelijk.

Op pagina https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg staat onder de kop “Gemeente Elburg” een link met een LinkedIn-icoon en de tekst "Gemeente Elburg" en daarnaast een link met een X-icoon en dezelfde tekst "Gemeente Elburg". Beide links hebben daardoor dezelfde toegankelijke naam “Gemeente Elburg”, terwijl de bestemmingen verschillend zijn. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst altijd naar dezelfde bestemming leiden. Als de bestemming verschilt, moet de linktekst ook verschillend zijn. In dit geval kan dit opgelost worden door de iconen een goed tekstalternatief te geven.
Hetzelfde probleem komt voor op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink onder de kop “Bart Jeurnink”. Een vergelijkbaar probleem staat op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizanne-schipper onder de kop “Lizanne Schipper”. De link met het LinkedIn-icoon en de tekst “Lizanne Schipper” heeft de toegankelijke naam “Lizanne Schipper”, maar de bestemming van de link is niet duidelijk. Dit probleem komt ook voor op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bram-horst bij de link met het LinkedIn-icoon en de tekst “Bram Horst” onder de kop “Bram Horst”. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink staat onder de kop “Innovatieve analysetool transformeert de wereld van softwareontwikkeling met steun van Kennispoort Regio Zwolle” een link met de zichtbare tekst “Kennispoortregiozwolle.”. Visueel lijkt dit één link, maar in de HTML is dit onjuist opgesplitst in twee afzonderlijke links met de teksten “Kennispoortregiozwo” en “lle”. Bezoekers die hulpsoftware of een toetsenbord gebruiken krijgen hierdoor twee aparte links te zien, wat verwarrend en overbodig is. Daarnaast wordt de betekenisvolle linktekst hiermee doorbroken, waardoor het moeilijker is om het doel van de link te begrijpen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het cookiedialoogvenster, in het tabblad “Details”, staan secties met verborgen inhoud. In elke sectie staan knoppen met een i-icoon. Deze knoppen hebben allemaal dezelfde toegankelijke naam via het attribuut aria-label: "Servicedetails bekijken". De knoppen voeren echter verschillende functies uit. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken, omdat niet duidelijk is welke actie elke knop uitvoert. Zorg dat de knoptekst aansluit bij de daadwerkelijke actie, zodat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” knoppen met een vergrootglas-icoon. Deze knoppen hebben dezelfde toegankelijke naam via het attribuut aria-label: “Open zoeken”. De knoppen voeren echter verschillende functies uit. Zorg dat de knoptekst aansluit bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan zoekfilters. Wanneer een bezoeker opties selecteert onder de koppen "Ik zoek hulp met" en “Gemeente”, worden knoppen met de teksten van de geselecteerde opties boven de zoekresultaten weergegeven. Deze knoppen bevatten een “x”-icoon en hebben de toegankelijke naam “x”. Zo’n toegankelijke naam beschrijft de functie van de knop niet duidelijk. Bovendien hebben alle knoppen dezelfde toegankelijke naam, terwijl ze verschillende functies uitvoeren.

Op pagina https://www.ondernemeninregiozwolle.nl/test beschrijft de kop “404” de inhoud die erop volgt niet voldoende. Zo’n kop geeft geen extra informatie of context. Voor bezoekers die schermlezers gebruiken is dit een probleem, omdat zij de koppen laten voorlezen om snel de structuur van een pagina te begrijpen en de relevante inhoud te vinden. Gebruik daarom een meer specifieke kop die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bart-jeurnink is de toetsenbordfocus niet zichtbaar op de link met het logo in de sectie onder de kop “Kennispoort Regio Zwolle”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar de focus zich bevindt, zodat duidelijk is op welk moment op Enter gedrukt kan worden om een knop of link te bedienen.
Hetzelfde probleem komt voor op andere pagina’s, bijvoorbeeld op pagina https://www.ondernemeninregiozwolle.nl/adviseur/lizanne-schipper in de secties “Gemeente Hattem” en “Kop van de Veluwe”, en op pagina https://www.ondernemeninregiozwolle.nl/adviseur/bram-horst in de secties “Gemeente Oldebroek”, “Bedrijvenkring Oldebroek (BKO)”. Dit komt ook op andere pagina’s voor.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staat paginering. In deze paginering zijn links aanwezig met de zichtbare teksten “Vorige” en “Volgende”. Op deze links zijn aria-label-attributen toegepast met de teksten “Go to previous page” en “Go to next page”. Hierdoor komt de zichtbare tekst van de links niet voor in hun toegankelijke naam. Als de zichtbare tekst ontbreekt in de toegankelijke naam, kunnen de links niet met spraakbediening worden geactiveerd. Bezoekers die de zichtbare tekst van de link uitspreken, kunnen de link dan niet bedienen. Dit kan worden opgelost door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De primaire taal van de pagina’s is Nederlands, maar het lang-attribuut in het HTML-element staat onjuist ingesteld op "en". Zorg dat de primaire taal van de pagina correct wordt aangegeven met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Wanneer hier een verkeerde code staat, wordt de inhoud met onjuiste uitspraakregels voorgelezen en is de tekst moeilijk te begrijpen. Stel daarom de taalcode correct in door lang="nl" te gebruiken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ondernemeninregiozwolle.nl/ verschijnen in het formulier onder de kop “Gratis adviesgesprek” foutmeldingen zoals "Naam is verplicht" en “Je moet akkoord gaan met de algemene voorwaarden”. Dit zijn instructies en geen foutmeldingen. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zit. Vaak wordt dit aangegeven met een ontkenning. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".
Hetzelfde probleem staat op pagina https://www.ondernemeninregiozwolle.nl/over-ons.

Op pagina https://www.ondernemeninregiozwolle.nl/ wordt in het formulier onder de kop “Gratis adviesgesprek” voor het veld "Email" alleen HTML5-validatie gebruikt. Wanneer het formulier wordt verzonden met alleen het veld “Email” onjuist ingevuld, verschijnt uitsluitend de standaard HTML5-validatiemelding van de browser. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders en niet altijd op een toegankelijke manier. De melding kan kortaf en onvolledig zijn. Voeg daarom altijd eigen foutmeldingen toe aan het formulier.
Hetzelfde probleem staat op pagina https://www.ondernemeninregiozwolle.nl/over-ons. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website opent de knop met het label "zoek assistent" een dialoogvenster. In dit venster staat een invoerveld met de placeholdertekst “Stel je vraag over advies of initiatieven...”. Dit veld heeft echter geen zichtbaar label; de placeholdertekst wordt gebruikt als label. Invoervelden moeten altijd een label hebben dat zichtbaar blijft. Een placeholdertekst kan hiervoor niet worden gebruikt, omdat deze verdwijnt zodra de bezoeker begint te typen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website opent de knop met het label "zoek assistent" een dialoogvenster, maar dit is in de code niet aangegeven. Dit kan worden opgelost door het attribuut aria-haspopup="dialog" toe te voegen aan de knop. Dit attribuut maakt duidelijk dat er door het activeren van de knop een dialoogvenster wordt geopend. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het attribuut aria-expanded, dat de waarde true of false moet krijgen. Let er daarbij op dat aria-expanded alleen correct werkt als zowel het openen als het sluiten van het dialoogvenster door dezelfde knop wordt uitgevoerd.

In de header van de website opent de knop met het label "zoek assistent" een dialoogvenster. In dit venster staat naast het invoerveld met de placeholdertekst “Stel je vraag over advies of initiatieven...” een knop met een papieren vliegtuig-icoon. Deze knop heeft geen toegankelijke naam. Hierdoor is voor bezoekers die een schermlezer gebruiken niet duidelijk wat het doel of de functie van de knop is. Geef de knop daarom een toegankelijke naam die de functie duidelijk beschrijft.
Hetzelfde probleem komt voor op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven wanneer deze op een klein scherm wordt bekeken. De knop “Filters weergeven” opent daar een paneel met filters. In dit paneel ontbreekt bij de knop met het “X”-icoon eveneens een toegankelijke naam.

Op de website staat onderaan een vaste knop die het cookiedialoogvenster opent. In de HTML is deze knop echter geplaatst binnen een element met role="dialog" en aria-label="Privacy-instellingen", terwijl er op dat moment nog geen dialoogvenster geopend is. Dit zorgt voor verwarring over de pagina-opbouw, vooral voor bezoekers die hulpsoftware gebruiken, en kan het moeilijker maken om de pagina te begrijpen of te navigeren. Pas role="dialog" en de toegankelijke naam alleen toe op het daadwerkelijke dialoogvenster dat verschijnt wanneer de knop geactiveerd wordt.

In het cookiedialoogvenster, in het tabblad “Details”, staan secties met verborgen inhoud. In elke sectie bevindt zich een knop met een i-icoon die een dialoogvenster opent. Dit dialoogvenster heeft geen rol en geen toegankelijke naam. Schermlezers kunnen daardoor niet aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
Een vergelijkbaar probleem staat bij het dialoogvenster dat geopend wordt via de sticky cookie-voorkeurenknop onderaan de pagina’s. Dit dialoogvenster heeft ook geen toegankelijke naam.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” zoekvelden. Deze zoekvelden geven suggesties in een dropdownlijst en functioneren daarmee als een combobox. Het vereiste ARIA-role ontbreekt echter. Voeg role="combobox" toe aan het invoerveld. Daarnaast is het attribuut aria-expanded nodig om de toestand van de verborgen content aan te geven (zichtbaar of niet). Voor een volledig toegankelijke implementatie zijn er nog meer attributen nodig. Zie hiervoor de richtlijnen op https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” zoekvelden. Deze zoekvelden geven suggesties in een dropdownlijst, maar de interactieve elementen in deze lijst hebben niet de juiste toegankelijke rol. Hetzelfde probleem komt voor bij de interactieve elementen in de dropdownlijsten die worden geopend met de knoppen met een vergrootglas-icoon. Elk HTML-element heeft standaard een rol, waarmee schermlezers en andere hulpsoftware begrijpen welke functie het element heeft en hoe ermee omgegaan kan worden. Als de correcte rol ontbreekt, is voor bezoekers niet duidelijk wat het element doet. Zorg daarom dat de juiste rollen worden toegepast, zodat de interactieve elementen in de dropdownlijsten goed toegankelijk zijn.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven bevatten de zoekresultaten afbeeldingen die functioneren als links. Deze links hebben geen toegankelijke namen. Het gaat bijvoorbeeld om de links met de telefoon-, envelop- en pijl-iconen. Hierdoor is voor bezoekers die een schermlezer gebruiken niet duidelijk wat de bestemming of functie van de links is. Geef deze links daarom een toegankelijke naam die het doel van de links beschrijft. Daarnaast bevatten de links met pijl-iconen geneste button-elementen. Deze knoppen hebben ook geen toegankelijke namen, waardoor hun functie niet duidelijk is voor gebruikers met schermlezers.
Hetzelfde probleem komt voor op andere pagina’s met vergelijkbare artikelen, bijvoorbeeld op https://www.ondernemeninregiozwolle.nl/verhalen/samenwerken-in-de-regio in de sectie onder “Gerelateerde adviseurs & initiatieven”, op https://www.ondernemeninregiozwolle.nl/verhalen/rinos-viert-100-jaar-vakmanschap-en-blijft-vernieuwen in de sectie onder “Gerelateerde adviseurs & initiatieven”, op https://www.ondernemeninregiozwolle.nl/initiatief/gemeente-elburg onder de kop “Adviseurs”, en op andere pagina’s.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website opent de knop met het label “zoek assistent” een dialoogvenster met een chatfunctie met een AI-assistent. In deze chat kan de bezoeker berichten toevoegen en antwoorden van de assistent ontvangen. Nieuwe berichten worden echter weergegeven zonder dat ze toetsenbordfocus krijgen of als statusberichten zijn gemarkeerd. Daardoor worden nieuwe berichten niet automatisch door schermlezers aangekondigd. Dat moet wel. Voeg daarom bijvoorbeeld een aria-live-attribuut toe aan de chatberichten.

In de header van de website opent de knop met het label “zoek assistent” een dialoogvenster met een chatfunctie met een AI-assistent. In deze chat kan de bezoeker berichten toevoegen en antwoorden ontvangen van de assistent. Wanneer bijvoorbeeld op een van de knoppen in het dialoogvenster wordt geklikt, zoals “Ik wil mijn bedrijf verduurzamen”, start het laadproces en verschijnt de tekst “Aan het zoeken...”. Dit is een statusbericht, maar het wordt niet door schermlezers aangekondigd. Om dit toegankelijk te maken, moet een geschikt aria-live-attribuut (bijvoorbeeld aria-live="polite") worden toegevoegd aan het element dat het voortgangsbericht bevat. Hierdoor zullen schermlezers de updates van de voortgang wel aankondigen.
Een vergelijkbaar probleem staat op pagina’s https://www.ondernemeninregiozwolle.nl/ en https://www.ondernemeninregiozwolle.nl/over-ons in het formulier onder de kop “Gratis adviesgesprek”. Wanneer een bezoeker het formulier met correcte gegevens verstuurt, begint het proces en verschijnt de melding "Versturen, even geduld …". Ook dit is een statusbericht, maar het mist de noodzakelijke attributen om door schermlezers te worden aangekondigd.

Op pagina https://www.ondernemeninregiozwolle.nl/ verschijnt in het formulier onder de kop “Gratis adviesgesprek” na het verzenden zonder herladen van de pagina de melding "Bedankt voor je aanvraag! We nemen zo snel mogelijk contact met je op.". De pagina laadt hierbij niet opnieuw en de toetsenbordfocus wordt niet naar de melding verplaatst. Daarom is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt. Voeg hiervoor aria-live="polite" of role="status" toe aan de melding. Meer informatie over role="status" staat op https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.
Hetzelfde probleem staat op pagina https://www.ondernemeninregiozwolle.nl/over-ons.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staan onder de koppen "Ik zoek hulp met" en “Gemeente” zoekvelden. Deze zoekvelden geven suggesties in een dropdownlijst. Wanneer er geen suggesties beschikbaar zijn, verschijnt de melding “Geen resultaten gevonden”. Dit is een statusbericht, maar het wordt niet als zodanig voorgelezen door schermlezers. Dat zou wel moeten gebeuren, omdat statusberichten automatisch moeten worden aangekondigd zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan opgelost worden door role="status" aan de melding toe te voegen.

Op pagina https://www.ondernemeninregiozwolle.nl/adviseurs-en-initiatieven staat boven de zoekresultaten een knop met een link-icoon waarmee de link naar de huidige pagina kan worden gekopieerd. Wanneer een bezoeker deze knop activeert, verschijnt de melding “Link gekopieerd!”. Dit is een statusbericht, maar het wordt niet aangekondigd door schermlezers. Voeg daarom bijvoorbeeld role="status" of aria-live="polite" toe aan dit bericht, zodat schermlezers de melding automatisch voorlezen zodra deze verschijnt.