Onderzoek toegankelijkheid website.nl (voorbeeldrapport)

Hele sample

Uitkomst: Onvoldoende

Nieuwsartikel

Uitkomst: Onvoldoende

PDF Aanmeldformulier

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De alt-tekst van het logo bovenaan de site luidt ‘Logo’. De zichtbare tekst is echter ‘X’. Logo’s zijn informatieve afbeeldingen. Hiervan moet altijd de zichtbare tekst terugkomen in de alternatieve tekst zodat screenreadergebruikers dezelfde informatie krijgen. Dit geldt ook voor het logo in de footer. De alt-tekst is ook de enige content van de link die om het logo in de header heen staat. Het linkdoel is hierdoor niet duidelijk. Met een goede alt-tekst en eventueel een toevoeging ‘naar homepage’ wordt dit duidelijker. Zie ook 2.4.4.

Nieuwsartikel

Binnen dit artikel staan foto’s zonder correcte alt-teksten. Deze horen bij de content en hebben daarom goede beschrijvingen nodig. De eerste foto heeft bijvoorbeeld als alt-tekst ‘x’, maar op de foto zijn 'x' te zien. Benoem kort wat er gebeurt op de foto’s.

PDF Aanmeldformulier

Onderaan pagina 2 staat het logo van X. Deze staat niet in de codelaag en is hierdoor niet beschikbaar voor screenreadergebruikers. Voeg deze toe als figure element met een goede alt-tekst.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

De video’s van de verhalen missen een goede ondertiteling. Er is een automatisch gegenereerde ondertiteling, maar deze bevat veel fouten. Doven en slechthorenden krijgen hierdoor het verhaal niet goed mee.

Hele sample

Uitkomst: Onvoldoende

Over ons

Uitkomst: Onvoldoende

Over ons

Er komt informatie in beeld die niet wordt uitgesproken, zoals de functie van de spreker. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

FAQs

Uitkomst: Onvoldoende

Privacyverklaring

Uitkomst: Onvoldoende

PDF Aanmeldformulier

Uitkomst: Onvoldoende

PDF Factsheet

Uitkomst: Onvoldoende

Homepage

De koppenstructuur is niet helemaal correct. Zo is er een h2-kop ‘Nieuws’, waarop nieuwskoppen volgen die ook op h2-niveau staan. Deze horen een niveau lager te staan, dus hier h3-niveau.

FAQs

De koppenstructuur is niet helemaal correct. Zo is er een h3-kop ‘X’, waarop koppen volgen op h2-niveau. Dit moet worden omgedraaid. Zie screenshot 3.

Privacyverklaring

De kopcellen in de tabellen zijn enkel aangegeven met het strong-element, niet met ‘th’. Hierdoor kan een screenreader de tabel niet op correcte wijze voorlezen. Maak van de kopcellen th-elementen.

PDF Aanmeldformulier

De invoervelden hebben geen labels. Een screenreadergebruiker weet hierdoor niet wat waar ingevuld moet worden (alle velden hebben in NVDA de naam ‘unknown’).

Koppen zijn niet als heading opgemaakt, maar als paragraaf, bijvoorbeeld de titel en stappen op pagina 2.

PDF Factsheet

De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

Bij de nieuwsberichten staat de datum in de broncode voor de kop waar die bij hoort. Hierdoor verandert de betekenis van de volgorde, en valt de zichtbare datum (in de layout) onder de vorige kop. Dit kan erg verwarrend zijn voor screenreadergebruikers. Zorg dat de datum in de code na de kop staat. Dit komt op meerdere pagina’s voor.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes. Dit komt ook voor op de pagina Feedback website.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

PDF Aanmeldformulier

Uitkomst: Onvoldoende

PDF Factsheet

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Homepage

• De tekst bij de video’s om cookies te accepteren (wit op grijs, 1.5:1).
• De link om te accepteren op hover
  (rood op grijs, 3.5:1). Zie screenshot 1.
• De namen in de slider boven de foto’s van de personen hebben niet overal voldoende contrast. Zie screenshot 5.

PDF Aanmeldformulier

De teksten in groen/witte combinatie.

PDF Factsheet

De teksten (paragrafen, lijstnummers, links) in groen/witte en groen/lichtgroene combinaties.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Vanaf 125% ingezoomd verdwijnt de inloggen link in de header. Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

English page

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400%
(vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)

Op landschapsweergave op mobiel en ingezoomd boven de 200% is het uitklapmenu niet goed te gebruiken. De onderste items vallen onder de balk en je kunt er niet onderdoor scrollen naar de onderste menu-items, die buiten beeld vallen. Zie screenshot 4.

De balk ‘X’ valt na inzoomen over veel onderdelen heen, waardoor deze onderdelen moeilijker of niet bruikbaar zijn. Zie screenshot 6
(400% ingezoomd).

Op 400% is de popup zelf ook niet meer geheel leesbaar, de bovenkant valt buiten beeld. Hierdoor is de sluitknop ook niet meer te gebruiken en moet je de pagina afsluiten om verder te kunnen gaan op de site.

Opmerking: door de sticky header in combinatie met de sticky balk blijft er ingezoomd erg weinig ruimte over voor de content. Zie screenshot 7. Overweeg om de sticky elementen kleiner te maken of dat ze kunnen worden gesloten.

English page

De extra uitgeklapte tekst valt aan de randen net buiten beeld boven de 200% ingezoomd. Zie screenshot 8.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Homepage

De knoppen van de slides (lichtgrijs op wit, 1.3:1) en van de ‘volgende’ en ‘vorige’ pijlen op een witte achtergrond. Zie screenshot 5.

Aanmelden cursus (formulier)

De randen van de invoervelden (1.3:1). Dit komt op meerdere pagina’s voor, en ook bij het zoeken invoerveld wanneer hier geen tekst in staat.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

English page

Uitkomst: Onvoldoende

Homepage

Wanneer je de play-knop van de video activeert, komt de focus niet in de popup met de player, maar blijft op de onderliggende pagina staan. De video’s zijn hierdoor niet met het toetsenbord te bedienen. Dit komt op veel pagina’s voor.

Als je inzoomt vanaf 125% komt er een knop/balk onderaan de pagina te staan met ‘X’ waarmee extra content geopend kan worden met de muis. Deze content is niet te openen met het toetsenbord. Zie ook 4.1.2.

English page

Onderaan de content staat een h2-kop ‘Read more about X’. Deze kop fungeert als een link met de muis om meer content uit te klappen. Met het toetsenbord kan dit niet geopend worden.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

Bovenaan de pagina staan 2 knoppen boven een foto met een play-icoon. Na het activeren van deze knoppen start een video automatisch
(in Safari). Omdat de focus niet naar de player gaat, maar op de onderliggende pagina blijft, kan de video echter niet gestopt worden. Het is niet mogelijk om met het toetsenbord uit deze popup te komen. Met name voor screenreadergebruikers (die ook geen video verwachten achter deze knop, zie 2.4.6) is dit lastig omdat het geluid van de video interfereert met de screenreader. Zorg dat video’s niet automatisch afspelen, en dat alle functionaliteit altijd met het toetsenbord bereikbaar is. Dit probleem komt ook voor bij andere video’s op de site.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op deze website worden veel video’s vertoond, vanuit Vimeo en vanuit YouTube. Binnen deze videospelers is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening
(bijvoorbeeld ‘K’ of ‘C’). 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. Een oplossing is om de embedcodes van de video’s aan te passen zodat de bediening met tekentoetsen uit staat.

De eigenschap die toegevoegd moet worden aan de embedcode van YouTube is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb

Bij de Vimeo-videospeler kan dit opgelost worden door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. De bediening met deze toetsen wordt dan uitgeschakeld, maar het is dan nog wel mogelijk om de video te bedienen met het toetsenbord. Zie ook de Engelstalige pagina https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Bevindingen:

Opmerking: Er zijn koppen op elke pagina welke gebruikt kunnen worden om te navigeren, maar er is geen skiplink of main landmark. Ziende toetsenbordgebruikers (die geen screenreader gebruiken) zijn gebaat bij een skiplink om meteen naar de inhoud te gaan (en de hoofdnavigatie over te slaan). Screenreadergebruikers kunnen naast koppen ook landmarks gebruiken om te navigeren en meteen naar de main landmark te springen. Er zijn landmarks op de pagina’s, maar de main landmark ontbreekt. Ook is het goed om wanneer je meerdere zelfde landmarks gebruikt (zoals hier meerdere navigation landmarks), deze te labelen via aria-label.

Hele sample

Uitkomst: Onvoldoende

PDF Aanmeldformulier

Uitkomst: Onvoldoende

PDF Factsheet

Uitkomst: Onvoldoende

PDF Aanmeldformulier

Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.

PDF Factsheet

Het PDF-bestand heeft geen titel.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

In de slider staan links om cookies te accepteren. Tussen deze links krijgen onzichtbare elementen focus. Dit is verwarrend. Ook krijgen links in de slider focus die nog verborgen zijn. Dit zorgt voor veel extra ‘tabstops’. Zorg dat alleen zichtbare elementen focus kunnen ontvangen. Ook kan het hier handig zijn de focus eerst naar de cookiemelding te brengen voordat de rest van de pagina doorlopen wordt.

Als je inzoomt vanaf 125% komt er een knop/balk onderaan de pagina te staan met ‘X’ waarmee extra content geopend kan worden. De focus komt in de links in deze balk terwijl deze content gesloten is. Na het laden van de pagina gaat de focus eerst naar het logo, dan in de balk
(onzichtbaar) en vervolgens weer naar het menu in de header. Zorg dat de focus alleen kan komen op zichtbare elementen en dat deze op een logische volgorde door de pagina heen gaat. Zie ook 4.1.2.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link naar de homepage achter het logo wordt niet duidelijk uit de toegankelijke naam
(‘Logo’). Zie ook 1.1.1.

Homepage

Onder Nieuws staan links met enkel de tekst ‘Lees meer’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina, zoals hier naar de h2-kop ervoor. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html. Dit komt op meerdere pagina’s voor.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

De knop op de carousel heeft als label ‘next slide’. Dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse tekst van. Dit geldt ook voor de knoppen zoals ‘Go to slide 4’.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je niet akkoord gegaan bent met cookies, valt de cookiemelding over de laatste 3 links in de footer heen. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden.  Zie ook https://www.w3.org/WAI/WCAG22/Techniques/css/C43 NB: Na inzoomen valt de banner over meer items heen, op 400% ingezoomd zelfs over de gehele pagina.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link achter het logo van X bovenaan de site heeft een andere toegankelijke naam dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat. Zie ook 1.1.1.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

De knoppen in de slider staan te dicht bij elkaar waardoor het aanwijsgebied
(grootte van het doel) te klein is. Maak het doel minimaal 24px, gerekend vanaf het middenpunt van de knop (knop inclusief tussenruimte). Zie screenshot 9. (Wanneer je bent ingezoomd is de pijlknop om naar de volgende slide te gaan niet beschikbaar als alternatief.) Bezoekers met een motorische beperking kunnen moeite hebben om links en buttons te selecteren die te klein zijn of te dicht op elkaar staan.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

English page

Uitkomst: Onvoldoende

English page

Het gedeelte met de Engelse content is niet in de code aangegeven als Engels. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Wanneer er foutmeldingen zijn gevonden bij het verzenden van het formulier, wordt er niet in tekst aangegeven wat er precies fout is gegaan. De focus gaat naar het eerste veld dat gecorrigeerd moet worden, maar er is geen foutmelding. Zorg voor een duidelijke melding die de fout identificeert, bijvoorbeeld ‘ het emailadres voldoet niet aan de vereiste format: naam@domein.nl’ of ‘de naam is niet ingevuld maar wel verplicht’. Dit issue komt ook voor op het formulier Feedback website.

Hele sample

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Er wordt niet aangegeven welke velden verplicht zijn (voor het invullen van het formulier). Dit kan onnodige foutmeldingen geven. Voor bezoekers die meer tijd nodig hebben voor het invullen van formulieren kan dit nog een extra belasting zijn. Geef daarom van tevoren aan welke velden verplicht zijn. Dit issue komt ook voor op het formulier Feedback website.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Aanmelden cursus (formulier)

Uitkomst: Onvoldoende

Over ons

Uitkomst: Onvoldoende

English page

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In de header staan menu-items die kunnen uitklappen, zoals ‘X’. Het wordt niet aan hulpsoftware doorgegeven dat dit submenu er is en of deze open of gesloten is. Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen aan de button. Dit geldt ook voor het ‘mobiele’ menu (wanneer ingezoomd). Deze naam verandert nu in ‘sluit’, maar het zou duidelijker zijn als het ‘menu openen’ en menu sluiten’ zou zijn, of enkel ‘menu’ met een aria-expanded attribuut.

Als je inzoomt vanaf 125% komt er een balk onderaan de pagina te staan welke meer content kan openen. Deze balk heeft geen duidelijke knop om de content te openen en sluiten. Zet hier bijvoorbeeld een button in met een duidelijke naam en waarde (open/gesloten). De popup zelf heeft ook geen duidelijke rol. Mogelijke opties zijn hier het gebruik van het popover attribuut (voor gedrag) en het dialog element (als rol van de popup).

Aanmelden cursus (formulier)

Het invoerveld voor het telefoonnummer heeft een gekoppeld label, maar deze is verborgen voor hulpsoftware. Aanbevolen wordt om het label X niet te verbergen en deze tekst weg te halen uit de description.

Over ons

De knop om de video te starten heeft geen naam. Het is hierdoor voor gebruikers van hulpsoftware onduidelijk waar deze knop voor dient. Dit komt op meerdere pagina’s voor.

English page

Onderaan de content staat een h2-kop ‘X’. Deze kop fungeert als een link met de muis om meer content uit te klappen. Dit element heeft geen goede rol (bijvoorbeeld button) en geeft niet aan of de extra content open of gesloten is. Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen aan de button.

Hele sample

Uitkomst: Niet van toepassing