Rapport:
Audit digitale toegankelijkheid website CompetentNL

Uitkomst: Onvoldoende

Bevindingen: In de header van https://competentnl.nl/ staat een logo. Het alt-attribuut van dit logo is leeg (alt=""). Hierdoor negeren schermlezers de afbeelding. Een lege alt-tekst betekent: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moeten informatieve afbeeldingen altijd een alt-tekst krijgen. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Als een bezoeker inzoomt, verschijnt een menuknop die een mobiel menu opent. In het menu staat een knop met een pictogram van een vergrootglas. Deze afbeelding heeft geen alternatieve tekst die de functie van de knop beschrijft. Als een knop alleen uit een afbeelding bestaat, moet de alt-tekst van die afbeelding op een andere manier dan normaal worden ingevuld. Bij gewone informatieve afbeeldingen komt hier een beschrijving van wat op de afbeelding te zien is. Bij een afbeelding die dienst doet als knop, moet juist beschreven worden wat de bezoeker met de knop kan doen. Als dit niet zo is, kan de schermlezer niet doorgeven wat de functie is van de knop. Dit kan op meerdere manieren worden gedaan: door een titel element toe te voegen aan het svg-element, een aria-label of een visueel verborgen tekst.

Als een bezoeker inzoomt, verschijnt een menuknop die een mobiel menu opent. In het menu staat een knop met een pictogram van een vergrootglas. Dit pictogram is verborgen voor schermlezers. Schermlezers negeren inhoud met het attribuut aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder dit attribuut zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.

Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". In de video staat linksboven een afbeelding met de alternatieve tekst "Link to video owner's profile". Deze tekst beschrijft de afbeelding niet correct. Afbeeldingen die informatie overdragen moeten een betekenisvolle alt-tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven.

Op pagina https://competentnl.nl/news/view/5a6be91c-5863-4312-915b-04632beb3e82/de-kracht-van-competentnl-is-dat-we-straks-een-skillstaal-hebben staat een informatieve afbeelding met een bijschrift. Het alt-attribuut is leeg. Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alt-tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Op pagina https://competentnl.nl/page/view/63d99ec2-9304-4b1b-891f-2cec30d0debe/veelgestelde-vragen staat een afbeelding van mensen die aan tafel zitten. Het tekstalternatief is "Banner".
Als dit een decoratieve afbeelding is, moet deze worden verborgen voor schermlezers omdat een decoratieve afbeelding geen informatie toevoegt. Voor afbeeldingen in een img-element moet een leeg alt-attribuut (<code>alt=""</code>) gebruikt worden.
Als deze afbeelding informatief is, moet deze een betekenisvolle alt-tekst krijgen die de belangrijke informatie in de afbeelding beschrijft. De alternatieve tekst "Banner" is niet betekenisvol en beschrijft de afbeelding niet.
Hetzelfde probleem komt voor op pagina https://competentnl.nl/page/view/5e412cdb-149c-4962-9dc3-99a3849d2249/nieuwsbrief-11-ontwikkeling-competentnl-goed-op-weg. Hier staan drie afbeeldingen met de alternatieve tekst "Banner". Zie de afbeelding boven de kop "Nieuwsbrief #10 - Hoe gaat het met onze nationale skillstaal?" en de afbeeldingen onder de kopjes: "Voorjaarsbijeenkomst 13 maart a.s." en "Datawensen voor CompetentNL?".

Op pagina https://competentnl.nl/search staan zoekresultaten met informatieve pictogrammen. Deze pictogrammen geven informatie over het type locatie. Ze zijn echter verborgen voor de schermlezer. Schermlezers negeren inhoud met het attribuut role="presentation" of aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder deze attributen zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.
Hoewel de afbeelding verborgen is, is geprobeerd een tekstalternatief te bieden met behulp van het attribuut aria-label="Type: entity-file.type-folder-filled". Dit tekstalternatief beschrijft echter niet duidelijk het doel of de betekenis van de afbeelding. Zorg ervoor dat deze informatieve pictogrammen zinvolle en beschrijvende tekstalternatieven hebben.
Zie ook pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae. Als een bezoeker op het pictogram "i" boven de tabel klikt, verschijnt het pictogram van een map voor de tekst "Presentaties Conferentie 'CompetentNL: basis voor skills' 18092024".

Op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae staat een informatieve afbeelding die met aria-hidden="true" wordt verborgen voor schermlezers. Naast het kopje "Beheer" staat een "i"-icoon waarmee een dialoogvenster wordt geopend. Zie ook de afbeelding van een slot.

Op pagina https://competentnl.nl/page/view/5e412cdb-149c-4962-9dc3-99a3849d2249/nieuwsbrief-11-ontwikkeling-competentnl-goed-op-weg onder het kopje "Agenda" staat een afbeelding met de alternatieve tekst "Infographic Engels". Deze tekst beschrijft niet duidelijk wat er op de afbeelding staat. Afbeeldingen die informatie overdragen moeten een betekenisvolle alt-tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven. Met alle informatie uit de afbeelding wordt de alt-tekst echter te lang. Voor complexe afbeeldingen als dit wordt aangeraden de tekst uit te schrijven onder afbeelding en deze paragraaf te linken aan de afbeelding met aria-describedby en in de alt-tekst te vermelden dat de beschrijving onder de afbeelding volgt.

In het PDF-document https://competentnl.nl/attachment/entity/33d721c1-a0df-43c5-a410-66e6e735b2bc staan afbeeldingen zonder tekstalternatief. Zie pagina 1, 2, 3, enz.
Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.
Als de afbeeldingen decoratief zijn, moeten ze worden gemarkeerd als een artefact om ze te verbergen voor schermlezers.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staan op pagina 1 afbeeldingen met een tekstalternatief dat niet betekenisvol is: “Artistieke close-up van de paardenbloemen met pluisjes” en “Afbeelding met kleding, persoon, Menselijk gezicht, person Automatisch gegenereerde beschrijving”. Zorg ervoor dat de alternatieve tekst beschrijft wat er op de afbeelding staat. Een andere optie is om de afbeelding te verbergen door deze te markeren als een artefact als de afbeelding decoratief is en geen belangrijke informatie overbrengt.

Het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf bevat afbeeldingen die zijn toegevoegd als artefact. Zie het logo op pagina 1 en de afbeelding op pagina 39 met logo's.
Zie ook pagina 39. 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).

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staan op pagina 8 afbeeldingen zonder tekstalternatief. Zie afbeeldingen met zichtbare tekst "skilld" en "passport for work". Zie ook pagina's 10, 27, 33, enz.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staat op pagina 9 een decoratieve afbeelding die is toegevoegd via een figuurlabel en geen beschrijving heeft. Zie ook pagina 12, 13, 14, enz. De figuur-tag is bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact om hem te verbergen voor schermlezers.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://competentnl.nl/news wordt een dialoogvenster met een video geopend wanneer de bezoeker op de afspeelknop klikt in het nieuwsartikel met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Deze video bevat ondertitels, wat correct is. Echter, op ongeveer 41:35 ontbreken de ondertitels voor de gesproken tekst. Alle gesproken inhoud in de video moet volledig en nauwkeurig worden ondertiteld om gelijke toegang te bieden aan bezoekers die de audio niet kunnen horen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Tekst en logo's verschijnen op verschillende momenten in de video, aan het begin en aan het einde van de video. Er is geen media-alternatief of audiobeschrijving. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Daarom kan het beste een audiobeschrijving toegevoegd worden die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet sowieso een audiobeschrijving worden toegevoegd.
Zie ook de video op de pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv. Er is geen media-alternatief of audiobeschrijving voor de tekst en logo's aan het begin en het einde van de video.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een kopje "Neem contact op met CompetentNL". In deze kop wordt naast het heading-element ook het strong-element gebruikt. Het strong-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Om deze reden mag het element niet worden gebruikt voor puur visuele effecten, zoals vetgedrukte tekst. Gebruik hiervoor CSS. Dit probleem doet zich ook voor op andere pagina's. De volgende opsomming van voorbeelden is niet volledig. Op pagina https://competentnl.nl/news/view/5a6be91c-5863-4312-915b-04632beb3e82/de-kracht-van-competentnl-is-dat-we-straks-een-skillstaal-hebben staan bijvoorbeeld de kopjes: "Hoe is Leeroverzicht betrokken bij het ontwikkelen van CompetentNL?", "Wat waren jullie bevindingen uit de pilot met CompetentNL?", "CompetentNL gaat nu de volgende fase in. Hoe ziet die eruit voor Leeroverzicht?", enz. Op pagina https://competentnl.nl/page/view/b62b55d3-23ea-40c3-bfbb-89b445d65517/flyer-competentnl-in-english staan de koppen: "Flyer CompetentNL (in English)" en "Download in Engels: 'Flyer CompetentNL (in English)'". Op pagina https://competentnl.nl/page/view/5e412cdb-149c-4962-9dc3-99a3849d2249/nieuwsbrief-11-ontwikkeling-competentnl-goed-op-weg zijn koppen aanwezig zoals: "Nieuwsbrief #10 - Hoe gaat het met onze nationale skillstaal?", "Voorjaarsbijeenkomst 13 maart a.s.", "Pilots starten derde iteratie", enz.
Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staan twee alinea’s tekst onder het kopje “Neem contact op met CompetentNL”. In de code zijn deze alinea's gemarkeerd als één p-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimte 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://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier. De invoervelden in dit formulier hebben het attribuut aria-invalid="true", ook al zijn er nog geen fouten gemaakt. Het aria-invalid-attribuut is bedoeld om gebruikers van hulpsoftware te informeren dat een formulierveld ongeldige gegevens bevat. Het moet daarom pas na validatie op true worden gezet. Als dit al gebeurt voordat er een fout is gemaakt kan dit verwarrend zijn, met name voor bezoekers die een schermlezer gebruiken.

Op pagina https://competentnl.nl/news/view/5a6be91c-5863-4312-915b-04632beb3e82/de-kracht-van-competentnl-is-dat-we-straks-een-skillstaal-hebben zijn het strong-element en het em-element gebruikt voor de teksten die beginnen met “We zijn een van de afnemers …” en “Het is goed om te starten …”. De volledige zinnen zijn met deze elementen gemarkeerd. Dat is niet de bedoeling.
De elementen strong en em hebben namelijk 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 (vetgedrukt of cursief). Gebruik hiervoor CSS.
Hetzelfde probleem bestaat op pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv . Zie de tekst die begint met “Een verbindende en publiek beschikbare …”.

Op pagina https://competentnl.nl/page/view/953f367d-fe48-4221-be15-e751d7c22f49/kopie-contact staan teksten die wel als kop zijn gemarkeerd, maar dit niet zijn. Het gaat om de teksten “Documenten”, “Communicatie toolbox” en “Marktverkenning”. Het h3-element is hier alleen gebruikt om deze teksten een groter lettertype te geven.
Het kop-element (h3) is hier dus niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h3-element en gebruik een ander element, zoals een p-element.
Hetzelfde probleem komt voor op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae. Boven de tabel met bestanden staat een pictogram met een "i". Als een bezoeker op het pictogram klikt, wordt er extra informatie zichtbaar onder de tabel. De tekst “Presentaties Conferentie 'CompetentNL: basis voor skills' 18092024” is gemarkeerd als h5, terwijl dit geen kop is.

Op dezelfde pagina https://competentnl.nl/page/view/953f367d-fe48-4221-be15-e751d7c22f49/kopie-contact wordt de volgende koptekst juist gemarkeerd met een strong-element: "Over CompetentNL".
Het strong-element 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.

Op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae staat een kruimelpad. De links in dit kruimelpad horen visueel bij elkaar. Deze relatie ontbreekt in de code.
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 ol-element.
Hetzelfde probleem komt voor op pagina https://competentnl.nl/files/view/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf.

In het PDF-document https://competentnl.nl/attachment/entity/33d721c1-a0df-43c5-a410-66e6e735b2bc staan meerdere koppen die niet opgemaakt zijn als kop. Zie bijvoorbeeld "CompetentNL: a common skills language for the Netherlands", “Skills as the foundation for career choice and development”, “What is CompetentNL?”, etc. Hierdoor verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tags door h-tags, zodat de structuur van het document in de tags overeenkomt met wat te zien is in het document.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staan meerdere koppen die niet opgemaakt zijn als kop. Zie bijvoorbeeld "Welkom", “Najaarsconferentie 18 september 2024”, “Samenwerking pilotpartijen CompetentNL”, etc. Hierdoor verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tags door h-tags, zodat de structuur van het document in de tags overeenkomt met wat te zien is in het document.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staat op pagina 4 een tabel. In de tags is deze tabel opgesplitst in twee afzonderlijke tabel-tags. Dat is niet de bedoeling.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier waarin bezoekers hun persoonlijke gegevens in kunnen vullen. Bij dit formulier ontbreekt het attribuut autocomplete.
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt.
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 footer van de website staan groene links (kleur #39870C) op een lichtgroene achtergrond (kleur #D0E395). Deze combinatie heeft te weinig contrast. De contrastverhouding is namelijk 3,3:1. Omdat de tekst kleiner is dan 19 pixels moet het contrast minimaal 4,5:1 zijn.
https://competentnl.nl/

Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier. Als een bezoeker fouten maakt in het formulier, verschijnt er een foutmelding. De rode tekst van de foutmelding (HEX #F05252) op de witte achtergrond (HEX #FFFFFF) heeft een te laag kleurcontrast: 3,5:1. Dit moet minstens 4,5:1 zijn.

Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Binnen deze videospeler staat onder de link "Themabijeenkomst CompetentNL 21 november 2024" een witte tekst (HEX #FFFFFF): "Vimeo Competentnl.nl". Het kleurcontrast van deze tekst is te laag tegen een witte of een andere lichte achtergrond. Zie bijvoorbeeld op ongeveer 8:15. Daar staat deze tekst op een blauwe achtergrond en is het contrast maar 1,7:1. Dit moet minstens 4,5:1 zijn.

In het PDF-document https://competentnl.nl/attachment/entity/33d721c1-a0df-43c5-a410-66e6e735b2bc staat op pagina 5 een blauwe tekst "CompetentNL Timeline" op een lichtblauwe achtergrond. Het contrast tussen de tekstkleur en de achtergrond is te laag: 2,7:1. Er staat daarnaast ook witte tekst op een lichtblauwe achtergrond, bijvoorbeeld "Phase 1". Ook hier is het contrast te laag: 2,5:1. In beide gevallen moet het contrast minstens 3,0:1 zijn.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staat op pagina 6 een witte tekst "Onderwijs en arbeidsmarkt samen één taal" op een groene achtergrond. Het kleurcontrast is 2,0:1. Dit moet minstens 3,0:1 zijn. Zie ook pagina 22 de tekst "Plenair vervolg".

Op pagina 11 staat de blauwe tekst "Brigitte Barendse (SBB)" op een donkerblauwe achtergrond. Het kleurcontrast is 2,9:1. Dit moet minstens 3,0:1 zijn. Zie ook de tekst "Lisa Hummel (TNO)" op pagina 26.

Op pagina 21 staat de groene tekst "Zaalindeling - Workshops Ronde 1 en 2" op een witte achtergrond. Het kleurcontrast is 1,8:1. Dit moet minstens 3,0:1 zijn.

Op pagina 27 staat witte tekst op een lichtblauwe achtergrond, bijvoorbeeld "fase 1". Het contrast tussen de tekst en de achtergrond is te laag: 2,5:1. Dit moet minstens 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Als een bezoeker pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae bekijkt met een scherm van 1280 bij 1024 pixels en inzoomt tot 200%, is de tekst "Presentaties Conferentie 'CompetentNL: basis voor skills' 18092024" niet meer volledig zichtbaar. Dat is niet de bedoeling. In deze situatie moet alles nog gewoon zichtbaar zijn en werken.

Op dezelfde pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae staat een knop met het pictogram "i" boven de tabel waarmee een dialoogvenster geopend kan worden. In dit dialoogvenster overlapt de knop "X" de tekst "Presentaties Conferentie 'CompetentNL: basis voor vaardigheden' 18092024".

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als een bezoeker pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae bekijkt met een scherm van 1280 bij 1024 pixels en inzoomt tot 400%, worden de link "Documenten" en de tekst "Presentaties Conferentie 'CompetentNL: basis voor vaardigheden' 18092024" in het kruimelpad afgesneden. Dat is niet de bedoeling. In deze situatie moet alles nog gewoon leesbaar zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier met invoervelden. Het contrast tussen de grijze randkleur (kleur #D2D6DC) en de witte achtergrond (kleur #FFFFFF) van de pagina is 1,5:1. Dit is te laag. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op https://competentnl.nl/news komt in elk nieuwsblok <span tabindex="0"> voor, waarin de publicatiedatum wordt vermeld. Elementen die niet interactief zijn in de tabindex zetten, is niet toegestaan. Verwijder het attribuut.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Binnen deze videospeler is het mogelijk om sneltoetsen met één teken te gebruiken. Dit geeft problemen.
Vimeo-video’s gebruiken sneltoetsen, zoals de ‘s' om een video te delen en de 'd’ om technische details te bekijken. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).
Zie ook de video op de pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document https://competentnl.nl/attachment/entity/33d721c1-a0df-43c5-a410-66e6e735b2bc heeft als titel “RWS Brochure A5 Drieluik”. Deze titel beschrijft de inhoud van het document niet.

In het PDF-document https://competentnl.nl/file/download/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf luidt de titel “Titel van deze presentatie over twee regels”. Deze tekst beschrijft de inhoud niet.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier. Als het formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnen er foutmeldingen zonder dat de pagina opnieuw wordt geladen. De toetsenbordfocus gaat alleen niet naar de eerste foutmelding. Bezoekers die met het toetsenbord navigeren, moeten daardoor terug navigeren met Shift Tab om bij de velden met foutmeldingen te komen.
Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen.

Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Als het dialoogvenster wordt geopend, gaat de toetsenbordfocus naar een onzichtbare knop met de toegankelijke naam "Schakel video toetsenbordbediening uit".
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Alleen elementen die zichtbaar zijn mogen dus toetsenbordfocus krijgen.
Dit probleem wordt ook vermeld onder SC 2.4.7 Focus Zichtbaar als de toetsenbordfocus niet zichtbaar is.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website staat een logo dat als link fungeert. De toegankelijke naam van de link is "Home". Het doel van de link is dus onduidelijk.
Dit kan opgelost worden 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.
https://competentnl.nl/

Op de homepage staan links onder het kopje "Bekijk hier de praktijkvoorbeelden uit de pilots". De toegankelijke naam van elke link bevat een karakter dat niet leesbaar is voor mensen: ">". De linktekst mag geen symbolen bevatten zoals streepjes en underscores.
Deze karakters maken het doel van de link onduidelijk. Verwijder ze en herschrijf de tekst.
https://competentnl.nl/

Op de homepage https://competentnl.nl/ staat in de footer een link met de tekst "Toegankelijkheid" die naar de bijbehorende pagina leidt, met de titel "Toegankelijkheid". Op de pagina in de footer https://competentnl.nl/page/view/63d99ec2-9304-4b1b-891f-2cec30d0debe/veelgestelde-vragen staat een link met dezelfde tekst "Toegankelijkheid" die bezoekers naar een andere pagina leidt, met de titel "Feedbackgroep". Als dezelfde linktekst naar verschillende pagina's leidt, kan dit bezoekers in verwarring brengen, met name als zij hulpsoftware gebruiken zoals een schermlezer. Zij verwachten dat een link met dezelfde tekst ook telkens naar dezelfde pagina zal leiden. De linktekst biedt hier niet voldoende context om onderscheid te maken tussen de twee verschillende bestemmingen. Zorg dat links met een identieke linktekst altijd naar dezelfde bestemming verwijzen. Als verschillende bestemmingen nodig zijn, pas dan de linktekst aan om het doel van elke link duidelijk te maken, bijvoorbeeld "Feedbackgroep - Toegankelijkheid".
Zie ook andere pagina's in het voorbeeld die de link met de tekst "Toegankelijkheid" in de footer hebben staan. De bestemming van de links verschilt: of hij gaat naar de pagina met de titel "Toegankelijkheid" of naar de pagina met de titel "Feedbackgroep".

Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten.
Op de homepage staan blokken met links onder het kopje "Bekijk hier de praktijkvoorbeelden uit de pilots". Elk blok bevat dubbele links: de eerste link is een afbeelding en de tweede link staat onder de afbeelding als tekst, bijvoorbeeld "Video Jobdigger". Dit zorgt voor onnodige herhaling, vooral voor bezoekers die een schermlezer gebruiken. Schermlezers zullen beide links namelijk apart voorlezen, ook al gaan ze naar dezelfde bestemming, wat verwarrend en frustrerend kan zijn voor bezoekers.
https://competentnl.nl/

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage staat een kop die niet duidelijk het doel beschrijft van de inhoud die volgt.
De kop met de tekst “Snel naar” geeft geen duidelijke beschrijving van de inhoud die erop volgt. Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina. Door deze kop weet een bezoeker dus eigenlijk nog steeds niks. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.
https://competentnl.nl/

Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten.
Op pagina https://competentnl.nl/page/view/63d99ec2-9304-4b1b-891f-2cec30d0debe/veelgestelde-vragen staan twee kopteksten met dezelfde tekst: "Veelgestelde vragen". Een van deze koppen is een h1-element, dat niet zichtbaar is voor ziende bezoekers. Maar schermlezers zien deze kop wel. Dit kan verwarrend zijn.
Op onder andere de volgende pagina's komt met hetzelfde probleem voor:
https://competentnl.nl/page/view/953f367d-fe48-4221-be15-e751d7c22f49/kopie-contact de kopjes “Sitemap”
https://competentnl.nl/page/view/b62b55d3-23ea-40c3-bfbb-89b445d65517/flyer-competentnl-in-english de kopjes “Flyer CompetentNL (In English)”
https://competentnl.nl/page/view/5e412cdb-149c-4962-9dc3-99a3849d2249/nieuwsbrief-11-ontwikkeling-competentnl-goed-op-weg de kopjes “Nieuwsbrief #10 - Hoe gaat het met onze nationale skillstaal?”

Op pagina https://competentnl.nl/files/view/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staat een knop met een pijl naar links. De toegankelijke naam van deze knop is "Ga terug". Deze tekst beschrijft niet duidelijk naar welke pagina de knop verwijst.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". Als het dialoogvenster wordt geopend, gaat de toetsenbordfocus naar een onzichtbare knop met de toegankelijke naam "Schakel video toetsenbordbediening uit". De toetsenbordfocus is niet zichtbaar op deze knop.
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 namelijk goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van https://competentnl.nl/ staat een logo. Deze afbeelding werkt als een link. De zichtbare tekst is "competentnl". De toegankelijke naam is "Home".
De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de metadata van het PDF-document https://competentnl.nl/attachment/entity/33d721c1-a0df-43c5-a410-66e6e735b2bc is de taal ingesteld op “nl”. Dit is een verkeerde code aangezien de taal van het document Engels is. De schermlezer leest dit document nu voor met de uitspraakregels van het Nederlands. Dit is geen toegankelijke ervaring voor een blinde bezoeker. Verander de code in “en”.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage staat een link met tekst in een andere taal onder het kopje "Bekijk hier de praktijkvoorbeelden uit de pilots". Het gaat om de tekst "Passport for Work". Er is geen taalcode toegepast op deze inhoud.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Staan er op de pagina teksten in een andere taal? Dan moet de schermlezer op die taal overschakelen. Geef hiervoor deze anderstalige inhoud een lokaal lang-attribuut met de juiste waarde. Voeg lang="en" toe aan de container (een overkoepelend HTML-element) waarin deze content staat.
https://competentnl.nl/
Hetzelfde probleem komt voor op de pagina https://competentnl.nl/page/view/5e412cdb-149c-4962-9dc3-99a3849d2249/nieuwsbrief-11-ontwikkeling-competentnl-goed-op-weg . Onder de kop “Agenda” staan links die tekst in het Engels bevatten, hoewel de taal van de pagina Nederlands is: “Skills Summit” en “The European Year of Skills – What Comes Next?”.

Op pagina https://competentnl.nl/page/view/b62b55d3-23ea-40c3-bfbb-89b445d65517/flyer-competentnl-in-english staat een tekst in een andere taal (Engels). Er is geen taalcode toegepast op deze inhoud.

Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". In de videospeler staan ARIA-labels met Engelse teksten. Deze labels worden door schermlezers voorgelezen volgens de uitspraakregels van een andere taal. Wijzig de waarde van deze labels in Nederlands. Het gaat om de knoppen in de rechterbovenhoek van de videospeler die toegankelijke namen hebben: "Like” en "Add to Watch Later". Zie ook de mute-knop en de volumeknop.
De knop voor de beeld-in-beeldmodus heeft ook een toegankelijke naam in het Engels: "Picture-in-Picture". Hetzelfde probleem komt voor bij de afbeelding in de linkerbovenhoek van de video. De alt-tekst van de afbeelding is in het Engels: "Link to video owner's profile”.
Als de pagina wordt bekeken op kleine schermen of als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, verschijnen in de videospeler knoppen die submenu's openen. Dit is de knop met drie stippen en de knop met een pijltje. De toegankelijke namen van de knoppen zijn in het Engels. Ook de koptekst "More options”, die te zien is als de knop met drie puntjes is geactiveerd, is in het Engels.
Zie ook de videospeler op pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/01b46a89-606e-4899-9349-5a6f65b2e19c/toegankelijkheid ontbreekt de link “Sitemap” in de footer. De links in de footer, inclusief de link "Sitemap", zijn overal aanwezig op pagina's met een footer. Het ontbreken van deze link op deze pagina zorgt voor een inconsistentie in de herhaalde navigatiestructuur. Dat kan verwarrend zijn voor bezoekers die vertrouwen op voorspelbare navigatiepatronen.
Terugkerende navigatie-elementen zoals een navigatiemenu, zoekfunctie of inhoudsopgave, moeten telkens in dezelfde volgorde ten opzichte van de andere pagina-onderdelen staan. Ze mogen niet van volgorde veranderen bij het navigeren door de site. Voor sommige mensen kan het namelijk lastig zijn om deze informatie of functionaliteit te vinden. Dit heeft vooral invloed op blinde en slechtziende mensen en mensen met cognitieve beperkingen. Zorg dus dat deze navigatie-elementen telkens op dezelfde volgorde terugkomen. Dan kunnen gebruikers beter voorspellen waar ze de onderdelen op elke pagina kunnen vinden. Ze kunnen dan sneller navigeren of herhalende navigatie-elementen overslaan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier. Als dit formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnt er een foutmelding, bijvoorbeeld "Het veld organisatie is verplicht". Dit is een instructie, geen foutmelding.
Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/search staan onder het kopje "Datum" invoervelden waar een datum in kan worden ingevuld. Deze velden moeten volgens een specifiek formaat worden ingevuld: dd-mm-jjjj. De uitleg over het formaat staat alleen als placeholdertekst in het veld. Zodra een bezoeker begint te typen, verdwijnt de placeholdertekst. Er is dan geen instructie meer zichtbaar.
Hierdoor moet een bezoeker allerlei schrijfwijzen uitproberen om te ontdekken op welke manier de datum moet worden ingevuld. Dit is ontoegankelijk voor veel bezoekers. Zorg dat de instructie over de schrijfwijze van de datum altijd zichtbaar is op de pagina.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als de website wordt bekeken op kleine schermen, of als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, staat in de header een knop met drie horizontale lijnen die een menu opent. In dit menu staat een knop met een icoon van een vergrootglas. Deze knop heeft geen toegankelijke naam. Dit kan verwarrend zijn voor bezoekers met een schermlezer.
https://competentnl.nl/

Op pagina https://competentnl.nl/news staan verschillende nieuwsblokken. In het blok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars" staat een afspeelknop waarmee een dialoogvenster wordt geopend. Dit dialoogvenster heeft geen toegankelijke naam, waardoor het voor bezoekers met een schermlezer moeilijk kan zijn om het doel van het dialoogvenster te begrijpen.
Er is geprobeerd om een toegankelijke naam te geven door het attribuut aria-labelledby op het dialoog-element te gebruiken. Het aria-labelledby attribuut verwijst echter naar een id die ontbreekt of niet aanwezig is in de code. Als gevolg daarvan blijft het dialoogvenster naamloos en kan de schermlezer het doel van het dialoogvenster niet aankondigen.
Zorg dat het aria-labelledby-attribuut verwijst naar een geldige id die bestaat in de code. En zorg dat dit element betekenisvolle tekst bevat die het doel van het dialoogvenster beschrijft. Als alternatief kun je overwegen om het aria-label attribuut te gebruiken om direct een beschrijvende naam aan het dialoogvenster te geven.
Hetzelfde probleem komt voor op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae . Naast het kopje "Beheer" staat een "i" waarmee een dialoogvenster wordt geopend.
Het komt ook voor op dezelfde pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae als deze wordt bekeken op kleine schermen, of als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Er is een knop met het pictogram "i" boven de tabel waarmee een dialoogvenster wordt geopend.

Op pagina https://competentnl.nl/news opent een dialoogvenster met een video als de bezoeker op de afspeelknop klikt in het nieuwsblok met de titel "Video online bijeenkomst voor toolbouwers en ontwikkelaars". In dit dialoogvenster staat een iframe. Het title-attribuut ontbreekt.
Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
Hetzelfde probleem komt voor op pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv. Hier heeft het iframe-element onder de kop "Pilot Jobdigger" ook geen toegankelijke naam.

Op pagina https://competentnl.nl/search staat een selectieknop met de tekst "Sorteer op" waarmee bezoekers de zoekresultaten kunnen sorteren. Als een bezoeker op de knop klikt, wordt een lijst met sorteeropties weergegeven. Deze lijst heeft de rol ‘listbox’ (role="listbox"). Dit listbox-element heeft geen toegankelijke naam.

Als een bezoeker pagina https://competentnl.nl/search bekijkt op een klein scherm of inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, bestaat de mogelijkheid om zoekresultaten te filteren op categorieën, zoals "Alle", "Afbeeldingen", "Pagina's". Deze functionaliteit is geïmplementeerd met behulp van een tablist-patroon. De huidige implementatie heeft echter verschillende toegankelijkheidsproblemen die moeten worden aangepakt om te voldoen aan de ARIA-richtlijnen.
Het tablist-element heeft bijvoorbeeld geen beschrijvende, toegankelijke naam die bezoekers informeert over het doel van het element. Om dit probleem op te lossen, moet een aria-label attribuut worden toegevoegd aan het tablist-element met een betekenisvolle beschrijving.
De inhoud die bij elk tabblad hoort, mist de role="tabpanel". Elke inhoudscontainer van een tabblad moet expliciet worden gemarkeerd met role="tabpanel" om de relatie met het bijbehorende tabblad aan te geven. Zonder deze rol herkent hulpsoftware, zoals een schermlezer, de inhoud mogelijk niet als onderdeel van de tabstructuur.
De tab-elementen hebben geen aria-controls-attribuut. Elk element met role="tab" moet een aria-controls-attribuut hebben dat verwijst naar het id van het bijbehorende tabpaneel. Deze relatie is essentieel voor schermlezers om de tabbladen en hun bijbehorende inhoud voor te lezen en ertussen te navigeren.
Bekijk voor meer informatie over het correct implementeren van het tabblad-patroon de officiële richtlijnen van de W3C ARIA Authoring Practices Guide:
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Hetzelfde probleem komt voor op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae als deze wordt bekeken op een klein scherm of als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Het tablist-patroon wordt hier ook toegepast. Dit tabblad doet echter dienst als een link die bezoekers doorverwijst naar een andere pagina met bestanden. Dit is niet hoe het normaal werkt, en daar kunnen bezoekers van in de war raken, vooral als zij een schermlezer gebruiken. Je kunt overwegen om dit element de rol van link te geven. Je kunt ook een aria-label-attribuut gebruiken om duidelijk te maken dat het selecteren van het element naar een nieuwe pagina leidt. Een andere aanpak kan ook werken, afhankelijk van hoe de ontwerper het heeft bedoeld.

Op pagina https://competentnl.nl/page/view/cd34ecdc-4757-43f5-95ad-d3e7b2319431/jobdigger-bv staat een videospeler. Als de video start, wordt de afspeel-/pauzeknop in de speler weergegeven met een voortgangsbalk. Deze voortgangsbalk heeft geen juiste rol en geen toegankelijke naam.

Op pagina https://competentnl.nl/files/view/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf staat na de knop met het pictogram ‘Kopiëren’ een invoerelement in de HTML-code dat geen toegankelijke naam heeft. Bovendien heeft het een waarde-attribuut: "https://competentnl.nl/files/view/288ab139-2db7-4a5f-ace8-53e9570db940/plenaire-sessies-competentnl-basis-voor-skills.pdf". Deze informatie wordt voorgelezen door de schermlezer. Dit kan verwarring veroorzaken omdat het doel van het invoerveld onduidelijk is. Zonder een toegankelijke naam kunnen bezoekers niet eenvoudig bepalen waar de invoer voor dient.

Op https://competentnl.nl/search is er sprake van geneste interactieve elementen bij de zoekresultaten die ook een afbeelding bevatten. De afbeelding staat in een div-element met de role img. Hierin is een link genest, die verborgen wordt met aria-hidden en uit de de tabindex wordt gehaald met tabindex="-1". Volgens de ARIA-standaard is het niet toegestaan om interactieve elementen binnen role img te gebruiken, ook al wordt het uit de tabindex gehaald en verborgen voor hulpsoftware. Want hulpsoftware kan mogelijk toch op de link focussen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier staat een formulier. Als een bezoeker de velden leeg laat, verschijnen er foutmeldingen onder de velden. Schermlezers lezen deze berichten nu alleen niet voor.
Hoewel de aria-attributen zoals "aria-errormessage" en "aria-live", aanwezig zijn om live updates toegankelijk te maken, werkt het niet.
Dit komt mogelijk doordat het element met de foutmelding in eerste instantie het attribuut aria-live="off" heeft, wat betekent dat schermlezers het element niet controleren op updates. Pas als er een fout is gemaakt, verandert de waarde in "assertive". Schermlezers reageren echter niet op veranderingen in het aria-live-attribuut zelf. Ze kondigen alleen wijzigingen aan in de tekstinhoud van een live gedeelte dat al wordt gecontroleerd.
Om dit probleem op te lossen, moet het aria-live="assertive" attribuut dus vanaf het begin op het element met de foutmelding staan, al voordat er een fout wordt gemaakt. Op deze manier zullen schermlezers het element de hele tijd controleren en eventuele foutmeldingen aankondigen op het moment dat de tekst dynamisch wordt bijgewerkt.

Een soortgelijk probleem komt voor op pagina https://competentnl.nl/search. Hier zijn filters met invoervelden voor een datum. Als een bezoeker fouten maakt in deze velden, verschijnen er foutmeldingen zodra de bezoeker het veld verlaat. Schermlezers lezen deze foutmeldingen nu niet voor.
Het probleem lijkt te maken te hebben met de manier waarop het role="alert"-attribuut is toegepast. De foutmelding is verpakt in een div-element met role="alert" in de code, maar dit element wordt dynamisch toegevoegd op het moment dat de fout wordt gedetecteerd. Omdat het element pas op dat moment wordt toegevoegd, herkennen schermlezers het niet als een live update en kondigen ze de melding niet aan.
Om ervoor te zorgen dat schermlezers de foutmeldingen correct aankondigen, moet het element role="alert" al aanwezig zijn in de code voordat er updates zijn. De inhoud van het alert-element moet dynamisch worden bijgewerkt als een fout wordt gedetecteerd. Hierdoor kan hulpsoftware het gebied van de foutmelding in de gaten houden en eventuele foutmeldingen aankondigen op het moment dat de tekst dynamisch wordt bijgewerkt.

Op pagina https://competentnl.nl/search staan zoekresultaten. Onder de resultaten staat een knop "Toon meer items". Als een bezoeker op deze knop klikt, verschijnt er een wacht-animatie. Dit statusbericht is niet toegankelijk voor blinde bezoekers. De container met de role="status" en de tekst "Laden" komt namelijk pas in de code te staan nadat het statusbericht op het scherm is verschenen. Om het statusbericht te kunnen aankondigen, moet de container met de role="status" al aanwezig zijn in de code voordat het bericht dynamisch wordt bijgewerkt.
Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

Op pagina https://competentnl.nl/page/view/f08ab9de-b575-4e98-9e65-8a1ae3f206e4/contactformulier wordt bij het verzenden van het formulier een bericht weergegeven zonder dat de pagina opnieuw laadt: "Bedankt voor het invullen van het formulier”. Dit is een statusbericht.
De pagina laadt 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 aria-live="polite" of role="status" toe aan de melding. Meer informatie overrole="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22 .

Op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae staat een "i"-pictogram boven de tabel met bestanden. Als een bezoeker op het pictogram klikt, wordt aanvullende informatie zichtbaar op het scherm: de tekst "Presentaties Conferentie 'CompetentNL: basis voor skills' 18092024" met een map-icoon. Deze nieuw weergegeven inhoud wordt nu niet voorgelezen door schermlezers.
Een mogelijke oplossing is om aria-live te gebruiken voor dit soort dynamische inhoud, zodat schermlezers de nieuwe informatie automatisch aankondigen op het moment dat deze verschijnt.

Op pagina https://competentnl.nl/groups/view/8dc00ad8-f345-494e-9cc0-6f64c36784a0/beheer/files/fc3ee280-9bc8-4b36-9390-ca00496d7dae staat een knop waarmee bezoekers kunnen schakelen tussen een tabelweergave en een lijstweergave van de pdf-bestanden. Als een bezoeker op de knop klikt, veranderen zowel het pictogram als de toegankelijke naam van de knop om de geselecteerde weergavemodus weer te geven. Deze bijgewerkte informatie wordt echter niet aangekondigd door schermlezers. Hierdoor zijn bezoekers die hulpsoftware gebruiken niet op de hoogte van de toegepaste wijzigingen.