Onderzoek digitale toegankelijkheid van website https://www.probedrijven.nl/

Skiplinks

Op de website ontbreken skiplinks. Er moet een manier zijn om herhalende content die op elke pagina staat over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Voldoet niet aan SC 2.4.1 - Bypass Blocks

Het logo

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

Voldoet niet aan SC 1.1.1 - Non-text content

Het logo is een link, maar er is geen tekst beschikbaar voor de schermlezer die het doel van de link beschrijft. Hierdoor weten gebruikers van hulpsoftware niet naar welke pagina of inhoud de link leidt. Je lost dit op door een alt-tekst aan de afbeelding van het logo toe te voegen, of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label.

Voldoet niet aan SC 2.4.4 - Link purpose

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

Voldoet niet aan SC 2.5.3 - Label in Name

Het logo werkt als een link. Deze link heeft geen toegankelijke naam. De link heeft geen toegankelijke naam. Daardoor is de bestemming van de link onbekend voor bezoekers die een schermlezer gebruiken. Geef de link een toegankelijke naam die het doel of de functie van de link beschrijft. Voldoet niet aan SC 4.1.2 - Name, role, value

Hoe test je of een element een toegankelijkheidsnaam of rol heeft? Dat zie je in het Accessibility tab in Chrome.

Hamburger menu

In de rechterbovenhoek staat de zogenaamde hamburgerknop die een mobiel menu opent. Deze knop met de zichtbare tekst “menu” heeft op dit moment geen juiste toegankelijkheidsrol en heeft daarom ook geen toegankelijkheidsnaam. In essentie definieert de rol wat het element is. Schermlezers en andere ondersteunende technologieën moeten de rol van elk element op de webpagina kennen om er op een intelligente manier mee te kunnen interageren en deze informatie aan de gebruiker te communiceren. Zorg ervoor dat de knop een geschikte rol krijgt, door gebruik te maken van het button-element of role="button".

Voldoet niet aan SC 4.1.2 - Name, role, value

Wanneer het hamburgermenu wordt geopend, verschijnt de knop om het menu te sluiten met de tekst "sluiten". Dit element heeft geen toegankelijke rol en ook geen toegankelijke naam. Elk HTML-element heeft een rol, dat wil zeggen een verzameling kenmerken, eigenschappen en methoden om informatie van en/of naar de gebruiker over te brengen. In wezen definieert de rol wat het element is. Schermlezers en andere ondersteunende technologieën moeten de rol van elk element op de webpagina kennen om er op een intelligente manier mee te kunnen interageren, en ze moeten de rol aan de gebruiker kunnen communiceren.

Voldoet niet aan SC 4.1.2 - Name, role, value

Het hamburger menu opent een mobiel menu. De status van deze inhoud kan niet worden bepaald door de schermlezer. Wanneer een knop extra content kan tonen of verbergen, moet de status, of het getoond of verborgen is, door hulpsoftware kunnen worden bepaald. Dit kan worden gedaan door een aria-expanded attribuut toe te voegen aan de menuknop. Aria-expanded werkt alleen op knoppen wanneer de focus op deze knop blijft. Als de focus verplaatst wordt, moet er een verborgen tekst gebruikt worden.

Voldoet niet aan SC 4.1.2 - Name, role, value

In het hamburgermenu zijn, de teksten “Onze bedrijven” en “Menu” niet als kop gemarkeerd. Deze tekst doet dienst als koptekst, maar is in de HTML-code niet gemarkeerd als kop. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die 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. Zijn je koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopregelniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopregelniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet aan SC 1.3.1 - Info and Relationships

In het hamburgermenu staan menulinks onder "Onze bedrijven" en "Menu" die visueel bij elkaar horen. Deze relatie ontbreekt in de HTML. 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.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Wanneer het hamburgermenu wordt geopend, krijgen de linkteksten "Werken bij", "Over ons", enzovoort onvoldoende tekstcontrast wanneer er met de muis overheen wordt gegaan, met een contrastverhouding van 2,1:1, wat onder de minimumvereiste van 3,0:1 voor grote tekst valt.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Wanneer het hamburgermenu wordt geopend, krijgt de tekst van de knop "Sluiten" onvoldoende tekstcontrast wanneer de muisaanwijzer erover wordt bewogen, met een contrastverhouding van 2,6:1, wat onder de minimumvereiste van 4,5:1 voor kleine tekst valt.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

De volgende elementen kunnen niet met het toetsenbord worden bediend: hamburgerknop "menu"en de sluitknop om het menu te sluiten. Bezoekers die de website zonder een computermuis met alleen het toetsenbord navigeren moeten alle interactieve elementen kunnen bedienen. Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.

Voldoet niet aan SC 2.1.1 - Keyboard

Het hamburger menu opent het mobiele menu. De focus wordt niet naar dit mobile menu verplaatst. Dit menu vereist specifieke handelingen voor toetsenbordfocus. De focus moet in dit menu landen. Terwijl het menu geopend is, moet de toetsenbordfocus beperkt blijven tot het menu en mag deze niet verschuiven naar elementen op de onderliggende pagina. Momenteel is focusbeheer niet correct geïmplementeerd. Dit kan worden opgelost door de focus tot het menu te beperken totdat de bezoeker het menu heeft afgesloten door het klikken op de sluitknop of ESC-toets. Een andere oplossing is het automatisch laten sluiten van het menu wanneer de focus het menu verlaat.

Voldoet niet aan SC 2.4.3 - Focus Order

Wanneer de bezoeker door de pagina navigeert met behulp van het toetsenbord en wanneer dit menu wordt gesloten, komt de focus terecht op interactieve elementen binnen dit menu die op dat moment onzichtbaar zijn. De focusvolgorde van elementen moet logisch en intuïtief zijn. De focus mag niet terechtkomen op interactieve elementen (links, knoppen, formuliervelden) die niet zichtbaar zijn. Dit kan leiden tot onbedoelde activering van deze elementen. Alleen zichtbare elementen mogen focus krijgen.

Voldoet niet aan 2.4.3 Focus Order

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

Voldoet niet aan SC 2.4.11 - Focus Not Obscured

Main menu

Als bezoekers tekstafstand toepassen zoals beschreven in in succescriterium 1.4.12, valt de linktekst "Gemeenschappelijke Regeling Gesubsidieerde Arbeid" in het submenu van het menu-item "Over ons" buiten de container. De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. Zorg ervoor dat de tekst leesbaar blijft.

Voldoet niet aan SC 1.4.12 - Text Spacing

In het hoofdmenu is de focus niet zichtbaar op de volgende elementen: "Werken bij", "Over ons" en "Onze bedrijven" menu-items en hun submenu-items. Op alle pagina's van de website is de focusstijl verwijderd van de links en invoervelden (outline:0). Er worden geen op maat gemaakte alternatieven aangeboden. De focus moet altijd zichtbaar zijn op de interactieve elementen die toetsenbord focus krijgen. Wanneer de focus onzichtbaar is, is het niet duidelijk wanneer de bezoeker op Enter moet drukken om de knop of de link te activeren.

Voldoet niet aan SC 2.4.7 - Focus Visible

In elk submenu van het hoofdmenu horen links visueel bij elkaar. Deze relatie ontbreekt in de HTML. 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.

Voldoet niet aan SC 1.3.1 - Info and Relationships

In elk submenu van het hoofdmenu heeft de groene (#258C04) tekst op een witte achtergrond onvoldoende kleurcontrast van 4,3:1 als je er met de muis overheen gaat. Dit probleem is ook te zien onder het menu in links van het laatste nieuws door er met de muis overheen te gaan, in links van de lijst met suggesties (en door met de muis over de groene linktekst op een lichtgrijze (#F2F2F2) achtergrond te gaan - 3,9:1). Al deze gevallen zijn vals onder de minimumvereiste van 4,5:1.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Zoekveld

Er is een knop "Zoeken" naast het hamburgermenu. Als het zoekveld wordt uitgeklapt, verschijnt het pictogram "X". Dit icoon en het span met “Clear Search Results” maken deel uit van het a-element dat als sluitknop dient. Deze link heeft geen linkdoel. Een blinde bezoeker weet daardoor niet wat deze link doet of betekent. Om dit op te lossen moet je de link dus content geven. Dat doe je bijvoorbeeld door een tekst toe te voegen in het a-element, door afbeeldingen een alt-tekst te geven of door een aria-label toe te voegen. Het span-element binnen de link kan hiervoor dienen, maar het moet zichtbaar zijn voor de schermlezer. Momenteel is het niet het geval. Vervang display:none door de CSS clip methode.

Voldoet niet aan SC 2.4.4 - Link purpose

Voldoet niet aan SC 4.1.2 - Name, role, value

De tekst binnen dit span-element is in het Engels. Wanneer stukken tekst in een andere taal op de pagina staan, moet je dit kenbaar maken aan de schermlezer door een lokaal lang-attribuut toe te voegen (lang=”en”). De beste oplossing hier is de waarde van het span-element te vertalen naar het Nederlands.

Voldoet niet aan SC 3.1.2 - Language of Parts

In de zoekbalk wordt de "X"knop wit wanneer een bezoeker de muis over dit icoon beweegt. Op een grijze (#C0C0C0) achtergrond heeft deze kleur onvoldoende kleurcontrast van 1,8:1. Deze lage contrastverhouding maakt het voor mensen met een visuele beperking of kleurenblindheid moeilijk of onmogelijk om dit pictogram te onderscheiden. Gebruik een kleurencombinatie die voor voldoende contrast zorgt. Ook grijze (#E0E0E0) bovenrand van invoerveld op witte achtergrond heeft contrast van 1,3:1.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

Wanneer de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%, is de zoekbalk niet zichtbaar. Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, moet de pagina nog steeds functioneel zijn. Bezoekers met een visuele beperking moeten alle functionaliteit van de pagina kunnen gebruiken.

Voldoet niet aan SC 1.4.10 - Reflow

Als de zoekbalk wordt uitgeklapt, verschijnt er een invoerveld. Als een bezoeker gegevens invoert in het invoerveld, verschijnt er een lijst met suggesties. Dit is een statusbericht. Deze melding is een statusbericht omdat het voldoet aan twee hoofdcriteria: de melding geeft informatie over de resultaten van een actie en ontvangt geen focus. De rol van een statusbericht moet programmatisch kunnen worden bepaald zodat een schermlezer deze informatie kan voorlezen. Dit kan worden opgelost door role="status" aan de melding toe te voegen. Zie voor meer informatie pagina ARIA19.

Voldoet niet aan SC 4.1.3 - Status messages

Witte slogan "Waar ieder mens kan groeien." staat op de achtergrond met een kleurverloop en heeft op sommige plekken minder dan 4,5:1 contrast tussen tekst en de achtergrond. Deze tekst is minder dan 24px en niet vet, daarom moet het contrast minstens 4,5:1 zijn.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Wanneer de pagina op een klein scherm wordt bekeken, bedekt de sticky header de interactieve elementen op de onderliggende pagina. De interactieve elementen die focus krijgen mogen niet bedekt zijn door andere elementen. Wanneer de bezoeker de Tab-toets gebruikt om vooruit te navigeren of Shift en Tab gebruikt om terug te navigeren, moeten alle elementen die focus krijgen zichtbaar zijn.

Voldoet niet aan SC 2.4.11 - Focus Not Obscured

De footer

Bovenaan de linkerkolom staat een logo. Het alt-attribuut is leeg. Door het leeglaten van het alt-attribuut wordt de afbeelding verborgen voor de schermlezer. Herhaal de zichtbare tekst van het logo “Probedrijven” in het alt-attribuut.

Voldoet niet aan SC 1.1.1 - Non-text content

Boven de footer staat een groep logo's. De laatste in deze groep heeft een zichtbare tekst "Promail & print". Maar de alternatieve tekst is "Pro Verpakken & ontwikkelen". Het is belangrijk om deze zichtbare tekst op te nemen in het tekstalternatief om te zorgen voor een volledige en accurate representatie van de afbeelding voor gebruikers die vertrouwen op schermlezers. Geef dit logo alt-tekst waarin de volledige tekst van het logo in voorkomt.

Voldoet niet aan SC 1.1.1 - Non-text content

Er zijn links met logo's "Proverpakken & Ontwikkelen" en "Promail & print". Hetzelfde linkdoel via aria-label="pro-vepakken log" komt meerdere keren voor. Het doel van elke link moet begrijpelijk zijn, en te onderscheiden van andere links op dezelfde pagina. Het liefst door de linktekst zelf, en anders door de directe context van de link. Linkteksten die meerdere keren op de pagina voorkomen of nietszeggend zijn (zoals "pro-vepakken log"), zijn niet duidelijk voor blinde bezoekers. Ze helpen niet bij het begrijpen wat de bestemming van de link is.

Voldoet niet aan SC 2.4.4 - Link purpose

Alle links met logo’s hebben een onduidleijk linkdoel via aria-labels, bijvoorbeeld "pro-groen-milieu", "pro-bezorgt-logo" of "pro-vepakken log".

Voldoet niet aan SC 2.4.4 - Link Purpose

De zichtbare tekst van deze logo's maakt geen deel uit van de toegankelijke naam. De toegankelijke naam van twee logo’s is "pro-vepakken log", de zichtbare tekst is "Proverpakken & Ontwikkelen" en "Promail & print". De toegankelijke naam komt van een aria-label. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Je lost dit op door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Voldoet niet aan 2.5.3 Label in Name

In de bovenste sectie van de footer staan 4 kolommen. De teksten die bovenaan kolommen staan, bijvoorbeeld “Progroen & Milieu”, “Probezorgt” en meer zijn niet als kop gemarkeerd. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die 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. Zijn je koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopregelniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopregelniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Links in deze kolommen horen visueel bij elkaar. Deze relatie ontbreekt in de HTML. 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. Dit probleem is ook te zien bij links met logo's "Progroen & Milieu", "Probezorgt", enzovoort, in het midden van de footer, bij links onder "Social media" en "Menu" en links die begonnen met "Privacy verklaring" aan het einde van de footer.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Linkteksten onder "Progroen & Milieu" и "Probezorgt", enzovoort, krijgen onvoldoende tekstcontrast wanneer er met de muis overheen wordt gegaan, met een contrastverhouding van 3,9:1, wat onder de minimumvereiste van 4,5:1 valt. Het probleem doet zich voor bij de linkteksten onder "Contact" en "Menu", die onvoldoende tekstcontrast hebben wanneer er met de muis overheen wordt gegaan. De linktekst wordt groen (#1A6501) en heeft op een donkergrijze (#333333) achtergrond een contrastverhouding van 1,7:1.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Onder "Sociale media" staan links naar de pagina's van de sociale netwerken. De linktekst "Facebook" is niet toereikend en dient aangevuld te worden tot “Facebook pagina van Probedrijven”. Doe dit op een zelfde wijze voor de andere social-media links.

Voldoet niet aan SC 2.4.4 - Link purpose

Onder "Probedrijven N.V." staan 2 alinea's tekst. In de HTML zijn deze alinea's gemarkeerd als één p-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Dat doe je door elke alinea in een eigen p-element te plaatsen. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Koppen zijn niet als koppen gemarkeerd

Op de homepagina zijn visueel meer kopteksten te zien dan in de HTML-code van de pagina. Voorbeelden van teksten die de juiste kopmarkering missen zijn:

• de titels van de nieuwsberichten , bijvoorbeeld de tekst “Bedrijfsbezoek college van bestuur Den Helder”
• De tussenkopjes onder “PRO NIEUWS”

Deze tekst doet dienst als koptekst, maar is in de HTML-code niet gemarkeerd als kop. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die 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. Zijn je koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopregelniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopregelniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Contact in teksten “Probedrijven” en “Contactformulier”
• Nieuws in teksten “Bedrijfsbezoek college van bestuur Den Helder”, “Met trots presenteren wij ons Probedrijven jaarverslag over het jaar 2023” enzovoort
• Reiniging in koppen die beginnen met “Tuinaanleg & tuinonderhoud” enzovoort

Meer pagina’s zijn niet genoemd. Controleer andere pagina’s van de website op het voorkomen van dit issue.

Voldoet niet aan SC 1.3.1 - Info and Relationships

In deze sectie met het laatste nieuws is de volgorde van HTML-elementen momenteel: datum, kop, link. Als je de kopteksten juist makreert door het toevoegen van een h-element, moet de datum onder de kop staan: heading, datum, link. Als je deze berichten van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (datum) bij welke kop hoort. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Je lost dit op 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 blijven zoals het nu is.

Voldoet niet aan SC 1.3.2 - Meaningful Sequence

In deze sectie met het laatste nieuws heeft de grijze (#BBBBBB) datumtekst op de lichtgrijze (#F5F5F5) achtergrond een kleurcontrastverhouding van 1,8:1, wat onder de minimumvereiste van 4,5:1 valt.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

In deze sectie met het laatste nieuws krijgt de linktekst "Bedrijfsbezoek college van bestuur Den Helder" enzovoort onvoldoende tekstcontrast wanneer er met de muis overheen wordt gegaan, met een contrastverhouding van 4,3:1, wat onder de minimumvereiste van 4,5:1 valt.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

In deze sectie met het laatste nieuws komt de linktekst "Lees meer" meerdere keren voor. Het doel van elke link moet begrijpelijk zijn, en te onderscheiden van andere links op dezelfde pagina. Het liefst door de linktekst zelf, en anders door de directe context van de link. Linkteksten die meerdere keren op de pagina voorkomen of nietszeggend zijn (zoals ‘Lees meer’), zijn niet duidelijk voor blinde bezoekers. Ze helpen niet bij het begrijpen van de bestemming van de link.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Contact in link tekst “Contact opnemen”
• Documenten Jaarverslagen in link tekst “Download”

Voldoet niet aan SC 2.4.4 - Link purpose

De pagina heeft koppen, zoals "Ontdek wat Probedrijven doet voor jou of jouw bedrijf", "Inclusief en circulair", "Kansen voor iedereen" en andere, waarin naast het h-element ook het strong-element wordt gebruikt. Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS. Dit probleem doet zich ook voor op veel andere pagina's op de website.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Contact in koppen “Contact opnemen met Probedrijven” en anderen
• Vacatures in koppen “Vacatures”, “Ontdek welke vacatures bij Probedrijven beschikbaar zijn”, enzovoort

Voldoet niet aan SC 1.3.1 - Info and Relationships

Onder de kopjes "Ontdek wat Probedrijven doet voor jou of jouw bedrijf" en "Onze bedrijven:" staan links die visueel bij elkaar horen. Deze relatie ontbreekt in de HTML. 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. Dit probleem is ook te zien bij "Volg ons op sociale media" voor de links naar de sociale netwerkpagina's.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Vacatures in links onder de kop “Je ontvangt altijd een reactie van ons”
• Video in links onder de kop “Lees meer over:”

Voldoet niet aan SC 1.3.1 - Info and Relationships

Onder het kopje "Kansen voor iedereen" staat een link met de tekst "Meer informatie". Deze tekst verklaart niet waar de link naartoe leidt. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’ of ‘meer informatie’), helpen niet bij het begrijpen welke bestemming deze links hebben. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de pagina titel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

<a href=”#”>Meer informatie <span class=”visually-hidden”> over title bericht</span></a>

Voldoet niet aan SC 2.4.4 - Link purpose

Onder het kopje "Volg ons op social media" staan verschillende social media links. De linktekst "Facebook" is niet toereikend en dient bijvoorbeeld aangevuld te worden tot “Facebook pagina van Probedrijven”. Doe dit op een zelfde wijze voor de andere social-media links. Dit probleem doet zich ook voor op veel andere pagina's op de website.

Voldoet niet aan SC 2.4.4 - Link purpose

Groen (#258C04) en wit hebben een contrastverhouding van 4,3:1. Deze combinatie wordt gebruikt in links (zie bijvoorbeeld link "Facebook" onder "Volg ons op social media") en bij hover in sectie met laatste nieuws onder het hoofdmenu (zie bijvoorbeeld linktekst "Bedrijfsbezoek college van bestuur Den Helder"). Hetzelfde probleem wordt waargenomen op de volgende pagina Zoekresultaten links in zoekresultaten. Er is ook een combinatie van wit en groen (#6DB123) met contrast 2,6:1 (zie tekst "Bekijken", in dit geval moet het contrast minstens 3,0:1 zijn).

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

Wanneer de pagina wordt weergegeven met een schermresolutie van 320 CSS-pixels of 1280x1024 pixels en wordt ingezoomd tot 400%, verschijnt er een horizontale schuifbalk in de leesrichting. Er mag echter niet horizontaal gescrold hoeven te worden in de leesrichting, zelfs niet wanneer de viewport is ingesteld op 320 CSS-pixels breed. Dit is alleen toegestaan als beide scrollrichtingen essentieel zijn voor de bruikbaarheid of betekenis van de inhoud. Zorg ervoor dat de tekst altijd binnen het zichtbare scherm past. Uitzonderingen hierop zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven en het scrollen binnen deze inhoud is toegestaan.

Hetzelfde probleem wordt waargenomen op de volgende pagina Voorman.

Voldoet niet aan 1.4.10 - Reflow

Het strong-element wordt gebruikt voor styling in tekst die begint met "Peter Does heeft met bijna 25 jaar". Hele alinea's worden opgemaakt met een strong-element. Gebruik het stylesheet om deze tekst vet weer te geven.

Het em-element wordt gebruikt voor styling in de tekst "Chauffeurs Haroud en Tom Schouten en Peter Does". De hele zin wordt opgemaakt met een em-element. Gebruik het stylesheet om deze tekst 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 mag je deze elementen niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt of cursief). Gebruik hiervoor CSS.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Vacatures in de hele zin “Wil je meer weten? Bel ons, of vul je gegevens in via het contactformulier.”
• Promail print in paragrafen onder “Promail & Print is de grafische afdeling van Probezorgt.”

Voldoet niet aan SC 1.3.1 - Info and Relationships

Als je met de muis over een link in het kruimelpad beweegt, wordt de linktekst groen (#258C04). Het contrast van groene tekst tegen een lichtgrijze (#F2F2F2) achtergrond is te laag: 3,9:1. De kleurcontrastverhouding moet minstens 4,5:1 zijn voor kleine tekst.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De volgende koppen zijn gemarkeerd met een strong-element: "Adres", "Postadres" en "Contact". De elementen strong, em en b zijn niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. strong en em gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Hetzelfde probleem wordt waargenomen op de volgende pagina’s:

• Vacatures in koppen “Sollicitatieprocedure”, “Eerste sollicitatie gesprek”, enzovoort
• Video in koppen “Wil je samenwerken met Probedrijven?”

Voldoet niet aan SC 1.3.1 - Info and Relationships

Onder het kopje "Adres" staan meerdere alinea's tekst. In HTML zijn deze alinea's gemarkeerd als twee p-elementen. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Dat doe je door elke alinea in een eigen p-element te plaatsen. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Naast de kop "Probedrijven" staat een iframe met een kaart. Het title attribuut ontbreekt. Een iframe moet een toegankelijke naam hebben. Een bezoeker die een schermlezer gebruikt, moet deze naam kunnen horen om te begrijpen wat er in het iframe staat. Dit kan worden gedaan door een title-attribuut toe te voegen aan het iframe-element. Het title-attribuut moet aanwezig zijn en unieke, betekenisvolle tekst bevatten die de inhoud en het type inhoud beschrijft. Hetzelfde probleem wordt waargenomen op de pagina https://www.probedrijven.nl/pro-verpakken in iframe met video.

Voldoet niet aan SC 4.1.2 - Name, role, value

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

Voldoet niet aan SC 1.3.5 - Identify Input Purpose

reCAPTCHA

Onder het kopje "Contactformulier", in het formulier wordt de verificatiemethode reCAPTCHA gebruikt. Als het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt na enige tijd de melding "Verificatie verlopen. Controleer het selectievakje opnieuw." verschijnt na enige tijd. Deze rode (#FF0000) tekst heeft een lage contrastverhouding van 3,8:1 tegen de lichtgrijze (#F9F9F9) achtergrond. Dit moet minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Er is een selectievakje voor de reCAPTCHA-verificatiemethode. De grijze (#C1C1C1) rand heeft een lage contrastverhouding van 1,7:1 vergeleken met de lichtgrijze achtergrond van de sectie. Dit moet minimaal 3,0:1 zijn.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

In dit formulier verschijnt na enige tijd de melding "Verification expired. Vink het selectievakje opnieuw aan." verschijnt na enige tijd. Dit geeft aan dat er een tijdslimiet is ingesteld. Deze kan echter niet worden uitgeschakeld, aangepast of verlengd. Dit kan voor sommige gebruikers een probleem zijn.

Voldoet niet aan SC 2.2.1 - Timing Adjustable

Als de verificatietijd is verstreken en het selectievakje rood is gekleurd, is de focus er niet op zichtbaar.

Voldoet niet aan 2.4.7 - Focus Visible

Als de verificatietijd is verstreken, verschijnt het bericht "Verificatie is verlopen. Schakel het selectievakje opnieuw in." . Dit bericht is een statusbericht, en een schermlezer moet het als zodanig kunnen herkennen en aankondigen. De pagina wordt echter niet herladen en de focus wordt niet naar dit bericht verplaatst. Om dit probleem op te lossen, moet het statusbericht worden gemarkeerd met aria-live="polite" of role="status". Hierdoor wordt het bericht automatisch aangekondigd door de schermlezer zonder dat de focus hoeft te worden verplaatst, waardoor gebruikers op de hoogte worden gebracht van de voltooide actie zonder verwarring. Het probleem is gevonden bij het bericht "Bedankt voor uw bericht, we nemen zo spoedig mogelijk contact met u op. " dat kan verschijnen nadat het formulier onder "Contactformulier" is verzonden.

Voldoet niet aan SC 4.1.3 - Status messages

Het formulier met de verificatiemethode reCAPTCHA bevat twee links, "Privacy" en "Voorwaarden". Deze links missen context met de omringende inhoud, waardoor hun doel onduidelijk is. Blinde gebruikers kunnen een lijst met links op de pagina opvragen, maar het zal niet duidelijk zijn dat deze links naar pagina's over reCAPTCHA leiden. Dit kan worden verduidelijkt met een titelattribuut op de link, maar er zijn ook andere oplossingen mogelijk.

Voldoet niet aan SC 2.4.4 - Link purpose

Het formulier gebruikt alleen HTML5-validatie. De foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen. Onder dit succescriterium valt de tijdslimiet. Deze meldingen blijven te kort staan.

Voldoet niet aan SC 2.2.1 - Timing Adjustable Voldoet niet aan SC 3.3.1 - Error Identification

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De kleur van de tekst die begint met "Probedrijven geloven in een inclusieve en circulaire" is grijs (#C2C2C2). De kleur van de achtergrond is lichtgrijs (#F2F2F2). De kleurcontrastverhouding is te laag: 1,6:1. Het contrast moet minstens 4,5:1 zijn. Hetzelfde probleem wordt waargenomen op de pagina Jaarverslagen in teksten van paragrafen die pdf-bestanden beschrijven.

Voldoet niet aan 1.4.3 - Contrast (Minimum)

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De video's

Tekst en logo's verschijnen op verschillende momenten in de eerste video, bijvoorbeeld aan het begin van de video is er een logo en na het logo komt tekst "Hoe was 2023 voor Proverpakken & Ontwikkelen" in beeld, rond 1:20 - "Certificaat" en aan het einde - een logo en tekst "www.proverpakken.nl". Er is geen media-alternatief of audiobeschrijving voor deze informatie. Dit is een aanzienlijk obstakel voor bezoekers met een visuele beperking, zoals blindheid of slechtziendheid, omdat zij afhankelijk zijn van audio om de inhoud te kunnen begrijpen. Om dit probleem te adresseren, wordt het sterk aanbevolen om een audiobeschrijving toe te voegen die de visuele elementen in de video's beschrijft, zoals namen, functies, logo’s en teksten. Een geschreven is een van de oplossingen onder dit succescriterium, echter het voldoet niet aan het succescriterium 1.2.5 van de WCAG-richtlijnen, waarin audiobeschrijving vereist is. Hetzelfde probleem is te zien in de tweede en derde video. Ook in andere video’s ontbreekt de uitgeschreven tekst.

Voldoet niet aan SC 1.2.3 - Audio Description or Media Alternative

Bij succescriterium 1.2.3 zijn video’s beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven. Er is in deze video voldoende ruimte hiervoor aanwezig. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Voldoet niet aan SC 1.2.5 - Audio Description

De video met een beschrijving "Hoe was 2023 voor Probezorgt & ProMail en Print" heeft een voice-over. De ondertitels bevatten niet alle gesproken woorden. Sommige woorden zijn verkeerd gespeld. Een video met gesproken woord moet altijd een ondertiteling hebben om deze video toegankelijk te maken voor bezoekers met auditieve beperkingen. Deze ondertiteling moet de exacte tekst bevatten die overeenkomt met wat er gezegd wordt in de video. De automatisch gegenereerde ondertiteling voldoet niet omdat het fouten bevat.

Voldoet niet aan SC 1.2.2 - Captions

Binnen de videospelers is het mogelijk om sneltoetsen met één letter te gebruiken, bijvoorbeeld "m", "f". Binnen deze videospelers is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Bij de Youtube video’s kan de ’k’ gebruikt worden om de video te starten dan wel te stoppen en de ’m’ om het geluid uit te zetten. Deze sneltoetsen mogen alleen actief zijn als de focus op de betreffende knop staat. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Bij de YouTube videospeler kan dit eventueel opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML code. Zie ook de Engelstalige pagina.

Hetzelfde probleem wordt waargenomen op de pagina Pro Verpakken in video onder het kopje “Leren in de praktijk” (maar videospeler is een andere).

Voldoet niet aan SC 2.1.4 - Character Key Shortcuts

De video’s staan in de iframes. Het title-attribuut van elk iframe bevat tekst: “YouTube embed”. Deze tekst is niet uniek en niet betekenisvol. Het title-attribuut moet aanwezig zijn en unieke, betekenisvolle tekst bevatten die de inhoud en het type inhoud beschrijft.

Voldoet niet aan SC 2.4.6 - Headings and Labels

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

In sommige koppen en teksten, bijvoorbeeld “Het duurzame antwoord op uw mailing”, “Hoe verzorgt Promail & Print de mailing?” en anderen wordt het em-element gebruikt voor opmaak. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (schuingedrukt). Gebruik hiervoor CSS.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De afbeelding van een wit huis in de header heeft een laag contrast tegen de rode (#6DB123) achtergrond. De afbeelding wordt lichtrood (#D3878D) wanneer je eroverheen beweegt. De kleurcontrastverhouding is 2,8:1. Het contrast moet minstens 3,0:1 zijn.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

Onder de kop “Leren in de praktijk”, wordt een video getoond. In de video wordt informatie overgebracht met behulp van geluid, maar de ondertiteling ontbreekt. Zorg ervoor dat mensen met een auditieve beperking ook weten welke informatie in het audiospoor voorkomt door een ondertiteling aan de video toe te voegen.

Voldoet niet aan SC 1.2.2. - Captions

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

In de header van deze pagina staat een zoekbalk die een zoekveld opent. Dit invoerveld dankt zijn naam aan de placeholdertekst "Search..." in het Engels. Deze naam worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de tekst van de placeholder naar het Nederlands.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken

Voldoet niet aan SC 3.1.2 - Language of Parts

In de header van deze pagina staat een tweede rij menu op een groene achtergrond. In dit menu staat een witte afbeelding van een huis. Er is een informatieve afbeelding toegevoegd als achtergrondafbeelding en er is geen alternatief voor tekst. Wanneer een informatieve afbeelding als achtergrond aan de pagina wordt toegevoegd, is het ontoegankelijk voor schermlezers. Een blinde bezoeker zal de informatie uit deze afbeelding missen. Zorg ervoor dat de informatie beschikbaar is via een tekstalternatief.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken in een wit huis op een rode achtergrond.

Voldoet niet aan SC 1.1.1 - Non-text content

Een afbeelding van een wit huis in het menu fungeert als link. Deze link heeft geen inhoud en heeft dus geen linkdoel. Een lege link, zonder content, heeft geen linkdoel. Zorg dat alle links een duidelijk linkdoel hebben.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken

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

Deze link heeft geen toegankelijke naam. De link heeft geen toegankelijke naam.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken

Voldoet niet aan SC 4.1.2 - Name, Role, Value

Deze afbeelding van wit huis heeft een laag contrast tegen de groene (#6DB123) achtergrond. Het contrast is 2,6:1. De afbeelding wordt ook lichtgroen (#B6D891) wanneer je er met de muis overheen gaat. Het contrast is 1,7:1. Hetzelfde probleem wordt waargenomen op de pagina Promail Print.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

Er is ook een combinatie van wit en groen (#6DB123) met een te laag contrast: 2,6:1. Het contrast moet minstens 4,5:1 zijn voor kleine tekst (zie linktekst "home", enzovoort) en 3,0:1 voor grote tekst (zie linktekst "Advies of offerte aanvragen?"). Hetzelfde probleem wordt waargenomen op de pagina Promail Print in linktekst "home" enzovoort.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Wanneer de pagina wordt bekeken met een schermresolutie van 320 CSS pixels of 1280 bij 1024 en wordt ingezoomd tot 200% of 400%, wordt dit extra menu op een groene achtergrond geminimaliseerd tot een knop "Menu". De focusindicator is niet zichtbaar op deze knop.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken

Voldoet niet aan 2.4.7 - Focus Visible

Wanneer de pagina ingezoomd wordt bekeken en dit menu is geopend, verlaat de focus na het passeren van het menu met behulp van het toetsenbord, het menu en loopt verder op de onderliggende pagina. Het menu blijft echter open staan en bedekt de interactieve elementen op de onderliggende pagina. Deze elementen kunnen focus krijgen terwijl ze onzichtbaar zijn, wat een probleem veroorzaakt voor bezoekers die met een toetsenbord navigeren. De focus mag niet worden bedekt door andere elementen, omdat dit verwarring en navigatieproblemen oplevert voor bezoekers die afhankelijk zijn van toetsenbord- of schermlezernavigatie. Om dit probleem op te lossen, laat het menu dichtklappen als de focus buiten het menu komt.

Hetzelfde probleem wordt waargenomen op de pagina

• Promail print
• Pro Verpakken

Voldoet niet aan SC 2.4.3 - Focus Order

Voldoet niet aan SC 2.4.11 - Focus Not Obscured

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De links van kruimelpad horen visueel bij elkaar. Deze relatie ontbreekt in de HTML. 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. Hetzelfde probleem wordt waargenomen op alle pagina’s met een kruimelpad.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Focus op onzichtbare elementen in het kruimelpad. Na de laatste link "Nieuws" in het kruimelpad komt de focus op onzichtbare links terecht. De focusvolgorde van elementen moet logisch en intuïtief zijn. De focus mag niet terechtkomen op interactieve elementen (links, knoppen, formuliervelden) die niet zichtbaar zijn. Dit kan leiden tot onbedoelde activering van deze elementen. Alleen zichtbare elementen mogen focus krijgen.

Voldoet niet aan SC 2.4.3 - Focus Order

Deze links in het kruimelpad hebben geen inhoud en dus geen linkdoel. Een lege link, zonder content, heeft geen linkdoel. Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden. Om dit op te lossen moet je de link dus content geven. Zorg dat alle links een duidelijk linkdoel hebben.

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

Deze links hebben geen toegankelijke naam. De link heeft geen toegankelijke naam.

Voldoet niet aan SC 4.1.2 - Name, Role, Value

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

Er is een vacature onder de kop "Openstaande vacatures" met het logo van de inhurende organisatie in de beschrijving. Het alt-attribuut is leeg. Door het leeglaten van het alt-attribuut wordt de afbeelding verborgen voor de schermlezer. Het is belangrijk om deze informatieve afbeelding een tekstalternatief te geven om te zorgen voor een volledige en accurate representatie van de afbeelding voor gebruikers die vertrouwen op schermlezers. Herhaal de zichtbare tekst van het logo in het alt-attribuut.

Voldoet niet aan SC 1.1.1 - Non-text content

Onder "Openstaande vacatures" staat een vacature met vier icoontjes voor de locatie van de baan, het salarisniveau, het aantal werkuren en het vereiste opleidingsniveau. Dit zijn informatieve afbeeldingen met een leeg alt-attribuut. Een informatieve afbeelding vereist een tekstalternatief. Afbeeldingen die op een pagina worden geplaatst met behulp van het img-element moeten alt-attributen bevatten om een tekstalternatief te bieden. Dit stelt de schermlezer in staat om de informatie of functie van de afbeelding over te brengen aan een blinde bezoeker. Als een informatieve afbeelding wordt toegevoegd via een img-element, mag het alt-attribuut niet leeg zijn.

Hetzelfde probleem wordt waargenomen op de pagina Voorman

Voldoet niet aan SC 1.1.1 - Non-text content

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

Op deze pagina staat een zoekveld. De kleur van de placeholder-tekst "Zoeken..." is grijs (#999999) en de achtergrondkleur is wit. De kleurcontrastverhouding van de placeholder-tekst is: 2,8:1. Het contrast moet minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

De contrastverhouding tussen de lichtgrijze (#CCCCCC) rand en de witte achtergrond van de pagina is 1,6:1. De randkleur van een interactief element zoals een inputveld moet minimaal 3,0:1 contrastverhouding met de achtergrond van de sectie hebben.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

Wanneer er met de muis over groene (#258C04) zoekresultaten wordt gegaan, wordt de achtergrond lichtgrijs (#F2F2F2). Het contrast van groen tegen lichtgrijs is te laag: 3,9:1. De kleurcontrastverhouding moet minstens 4,5:1 zijn voor kleine tekst.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum)

Disclaimer Probedrijven

Dit PDF-document heeft geen titel. Elk PDF-document moet een titel bevatten die een korte beschrijving geeft van de inhoud van het bestand. Dit is vooral belangrijk voor gebruikers van schermlezers om hen te helpen beter te navigeren tussen verschillende documentesn. De titel kan worden ingesteld via de bestandseigenschappen van het PDF-bestand en moet ook zo worden geconfigureerd dat deze in de titelbalk wordt weergegeven in plaats van de bestandsnaam, wat nu het geval is.

Voldoet niet aan SC 2.4.2 - Page Titled

Dit PDF-document bevat het 'Probedrijven inclusief & circulair'-logo dat als artefact (achtergrondafbeelding) bovenaan elke pagina is toegevoegd. Aangezien het logo een informatieve afbeelding is, moet het altijd een tekstalternatief bevatten waarin de volledige tekst van het logo wordt opgenomen. Dit zorgt ervoor dat schermlezergebruikers de juiste informatie ontvangen. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor de schermlezer. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving (alt-tekst).

Voldoet niet aan SC 1.1.1 - Non-text Content

In dit PDF-document staat onderaan elke pagina een afbeelding met ingesloten tekst. Een afbeelding mag geen informatieve tekst bevatten als een gelijkwaardige visuele presentatie van de tekst kan worden weergegeven met echte tekst (tenzij de tekst essentieel is - zoals een logo - of het lettertype, de grootte, de kleur en de achtergrond aanpasbaar zijn). Het is noodzakelijk om deze tekst als tekst in de documentinhoud direct op de pagina te plaatsen in plaats van het in te sluiten in een afbeelding. Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Voldoet niet aan 1.4.5 - Images of Text

Jaarverslag 2023

Dit PDF-document heeft geen titel. Elk PDF-document moet een titel bevatten die een korte beschrijving geeft van de inhoud van het bestand. Dit is vooral belangrijk voor gebruikers van schermlezers om hen te helpen beter te navigeren tussen verschillende documenten. De titel kan worden ingesteld via de bestandseigenschappen van het PDF-bestand en moet ook zo worden geconfigureerd dat deze in de titelbalk wordt weergegeven in plaats van de bestandsnaam, wat nu het geval is.

Voldoet niet aan SC 2.4.2 - Page Titled

Dit PDF-document heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Voldoet niet aan 1.3.1 - Info and Relationships

Op pagina's van dit pdf-document staat а witte tekst op een groene (#009444) achtergrond en omgekeerd. De kleurcontrastverhouding is te laag: 3,9:1. Het contrast moet minstens 4,5:1 zijn voor kleine tekst en minstens 3,0:1 voor grote tekst. Zie bijvoorbeeld de tekst "Raad van commissarissen" op pagina 2 of de tekst "Trots" op pagina 3.

Voldoet niet aan 1.4.3 - Contrast (Minimum)

In dit PDF-document staan een aantal staafdiagrammen. Zie bijvoorbeeld op pagina’s 17 en 30. Er worden verschillende kleuren in gebruikt om de informatie over te brengen. In de legenda staat het verschil aangegeven. Deze informatie is van kleur afhankelijk. Dit komt meer voor in dit PDF. Dit kan bijvoorbeeld opgelost worden door naast kleur ook een andere visuele hint te geven of door dezelfde informatie als toegankelijke tabel aan te bieden. Zie ook succescriterium 1.4.11 over het contrast in deze staafdiagrammen.

Voldoet niet aan 1.4.1 - Use of Color

Op pagina 17 en 30 staan histogrammen. De histogrammen gebruiken oranje (#F89267) naar groen (#009444) met een contrast van 1,7:1 (zie pagina 17), blauw (#3FB1C0) naar donkerblauw (#0269C0) met een contrast van 2,2:1, oranje (#F36C21) naar geel (#FFDE59) met een contrast van 2,3:1, enzovoort (zie pagina 30). Ook deze gekleurde balken van histogrammen hebben een onvoldoende kleurcontrast op de witte achtergrond of lichtgroen van minder dan 3,0:1. Deze lage contrastverhouding maakt het voor mensen met een visuele beperking of kleurenblindheid moeilijk of onmogelijk om deze balken te onderscheiden. Gebruik een kleurencombinatie die voor voldoende contrast zorgt. Dit zou minimaal 3,0:1 moeten zijn.

Voldoet niet aan 1.4.11 - Non-text Contrast

Sommige problemen die op deze pagina voorkomen zijn al eerder beschreven. In aanvulling op deze:

De kop van het vierde niveau "Kom werken bij Progroen & Milieu als:" wordt direct gevolgd door een andere kop "Meewerkend Voorman Groenvoorziening (m/v/x)" van een hoger tweede niveau. Als twee koppen direct onder elkaar staan zonder inhoud ertussen, zorg er dan voor dat ze in de juiste volgorde staan. Het hoogste nummer moet eerst komen en het is beter als er geen niveaus worden overgeslagen. De tekst "Kom werken bij Progroen & Milieu als:" is geen kop. Verwijder het h4-element.

Voldoet niet aan SC 1.3.1 - Info and Relationships