Alleen de bevindingen:
Quickscan digitale toegankelijkheid website Leeroverzicht

Uitkomst: Onvoldoende

Bevinding 1: Op elke pagina in de footer staan logo's met de alternatieve tekst die allemaal beginnen met "Hier staat het logo". Deze tekst maakt de beschrijving onnodig lang en maakt de klikbare afbeelding lastig bedienbaar met spraak. Laat dit deel van de tekst weg. Plaats bij voorkeur de naam dat op het logo staat achteraan of laat deze weg. Dit geldt ook voor logo van de Rijkoverheid, waar een deel van de tekst zelfs dubbel voorkomt: "Hier staat het logo van Logo van de Rijksoverheid".

Bevinding 2: Op elke pagina in de footer staan links met een icoon dat aan visueel aangeeft dat de link een nieuw venster opent. Deze informatie wordt niet doorgegeven aan bezoekers met schermleessoftware omdat het icoon geen alternatieve tekst heeft. Zorg ervoor dat deze bezoekers over dezelfde informatie beschikken als ziende bezoekers door het icoon een alternatieve tekst te geven. Dit kan bijvoorbeeld door een title-element te plaatsen binnen het svg-element van het icoon. Gebruik hierbij geen aria-hidden attribuut op het svg-element. Dit komt ook voor in lopende tekst op bijvoorbeeld https://www.leeroverzicht.nl/kwetsbaarheid-melden Advies:

• open links in het algemeen niet in nieuwe vensters: https://www.nngroup.com/articles/new-browser-windows-and-tabs/
• gebruik geen icoontjes voor externe links of nieuwe vensters: https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

Uitkomst: Onvoldoende

Bevinding 3: Op elke pagina is in de footer een overzicht van klikbare logo's aanwezig. Dit is een opsomming van organisaties. Deze is nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven. Visueel hoeft er niets aangepast te worden.

Bevinding 4: Op de pagina https://www.leeroverzicht.nl/ staan onder "Ontdek jouw mogelijkheden binnen:" een opsomming van links. In deze links zit een knop (<button>) en een kopmarkering (<h3>) waardoor deze links voor bezoekers met hulpsoftware lastig zijn te bedienen en deze link/knop 2x focus krijgt. Verwijder fde knop en de kopmarkering. Zie ook SC 2.4.3. En plaats deze opsomming van linkjes op correcte wijze (gebruik ul/li-element).

Bevinding 5: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=Rotterdam is er de mogelijkheid om te filteren ("pas een filter toe"). Onder de kop "Niveau" kunnen de onderwijstypes uitgevouwen worden waarna weer een overzicht getoond wordt, bijvoorbeeld "Primair onderwijs" onder "Basis t/m voortgezet onderwijs". Hier wordt gebruikgemaakt van een opsomming door middel van het ul-element. Binnen deze opsomming ontbreekt de markering van elk opsommingsitem (li-element). Gebruik in opsommingen li-elementen.

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://www.leeroverzicht.nl/leren/zoeken kan je op verschillende wijze tot een eindresultaat komen, bijvoorbeeld zoeken op 'Rotterdam'. Elk resultaat heeft een knop 'Meer over deze opleiding' waarmee je meer content kan tonen. Als je deze opent en je laat de schermleessoftware verder lezen kom je bij het volgende resultaat uit. Je moet dan achteruit navigeren om de nieuwe content te lezen. Op schermen met lage resolutie of voor mensen die het scherm niet kunnen zien is het onduidelijk dat er nieuwe content is verschenen. Op pagina https://www.leeroverzicht.nl/geld kan je bovenin bij het figuurtje met het gezichtje vragen beantwoorden. Bij elke beantwoording verschijnt er nieuwe content. Voor mensen die het scherm niet kunnen zien is het onduidelijk wat er gebeurt op het scherm en waar ze op het scherm zijn gebleven. Ook bij foutmeldingen als er bijvoorbeeld niets wordt gevonden is het belangrijk dat de bezoeker op de correcte wordt geïnformeerd met schermleesssoftware.

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://www.leeroverzicht.nl/leren/zoeken wordt bij focus op de filtervelden de blauwe achtergrond lichter. De een witte tekst op de lichtblauwe achtergrond heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn. Ook als je bij 'Ik zoek liever zelf' de focus of hover op zet, is het contrast te laag; evenals 'Ik weet dit even niet'.

Bevinding 8: Op pagina https://www.leeroverzicht.nl/leren/zoeken kan je kiezen voor 'Ik zoek liever zelf'. Als je dat doet krijg je een invoerveld met een lichtgrijze placeholder op witte achtergrond waarvan het contrast veel te laag is. De contrastverhouding is 2,2:1 waar dit 4,5:1 is.

Bevinding 9: Op pagina https://www.leeroverzicht.nl/over-ons is een witte tekst 'Meer informatie nodig?' op een lichtblauwe achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 1,5:1 waar dit minimaal 3:1 moet zijn.

Bevinding 10: nieuw: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=Rotterdam is er de mogelijkheid om te filteren ("pas een filter toe"). Als je een van de hoofdcriteria opent, bijvoorbeeld "Niveau" verschijnen er mogelijkheden die je aan en uit kunt zetten. Elk onderwerp wordt gevolgd door een getal in het grijs tussen haakjes. Het contrast

Bevinding 11: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=Rotterdam is een overzicht met resultaten van de zoekopdracht. Als je met de muis over de knop "Vergelijken" gaat wordt de knop en de tekst lichtblauw. Deze tekst heeft een te laag contrast. De contrastverhouding is 1,5:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 12: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=Rotterdam is een overzicht met resultaten van de zoekopdracht. Als je met de muis over de link "Ga naar opleiding" gaat wordt de knop lichtblauw. De tekst heeft dan een te laag contrast. De contrastverhouding is ongeveer 2,9:1 waar dit minimaal 4,5:1 moet zijn. Dit geldt ook voor gelijkvormige knoppen op bijvoorbeeld:

• https://www.leeroverzicht.nl/leren/opleiding/2hay4p-Assistent+logistiek
• https://www.leeroverzicht.nl/geld/financiering/1q4jsp7-Beleidsregel+Reiskostenvergoeding+re-integratie+en+verwervingskosten+-+WerkSaam+Westfriesland+-
• https://www.leeroverzicht.nl/about-us

Bevinding 13: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=Rotterdam is een overzicht met resultaten van de zoekopdracht. Als je de knop "Vergelijken" aanklikt verschijnt er bij de eerste selectie een grijze linkknop met grijze tekst "Ga naar vergelijken (1)". De tekst heeft een te laag contrast. De contrastverhouding is 3:1 waar dit minimaal 4,5:1 moet zijn. Als er meer dan 1 item is geselecteerd wordt de knop groen en is het contrast wel voldoende.

Bevinding 14: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je een filter toepassen op locatie. Dit is een select-box. Als je met het toetsenbord door de keuzes gaat krijgt het geselecteerde item een lichtere blauwe achtergrond en boven en onder lichtblauwe lijnen. De tekst heeft bij focus op de lichtere blauwe achtergrond een te laag contrast. De contrastverhouding moet minimaal 4,5:1 zijn. Zie ook 2.4.7.

Bevinding 15: Op pagina https://www.leeroverzicht.nl/geld/zoeken?page=1 kun je een filter toepassen op leeftijd. Dit is een select-box. De lichtpaarse tekst ("Kies een leeftijd tussen de 16 en 80") die initieel in beeld is op de paarse achtergrond in het selectievak heeft een te laag contrast. De contrastverhouding is 2,9:1 waar dit minimaal 4,5:1 moet zijn.

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://www.leeroverzicht.nl/over-ons is een schematisch afbeelding onder "Waar komt de informatie over opleidingen vandaan". Deze zijn voor mensen die blind of slechtziend zijn niet te lezen en ook is het lettertype en grootte niet aanpasbaar. Een deel wordt al boven de afbeelding uitgelegd. Zorg dat alle informatie uit de afbeelding eerst in tekst uitgelegd wordt. Zo staan er 4 pijlen met de informatiestromen in de afbeelding maar deze worden niet expliciet in de tekst beschreven. Dit probleem komt ook voor op: https://www.leeroverzicht.nl/about-us

Uitkomst: Onvoldoende

Bevinding 17: Als je op pagina https://www.leeroverzicht.nl/leren/opleiding/2hay4p-Assistent+logistiek met het toetsenbord lang de i-knoppen navigeert verschijnt er een wit met grijze focusrand om de knop die op een lichtblauwe achtergrond zit. Het contrast tussen de 2-kleurige focusrand en het lichtblauw is te laag. De contrastverhouding tussen grijs en lichtblauw is 1,4:1 maar moet minimaal 3:1 zijn.

Bevinding 18: Als je op pagina https://www.leeroverzicht.nl/geld/over met het toetsenborddoor de links in de tekst navigeert krijgen deze een lichtgrijze focusrand. Het contrast tussen focusrand en witte achtergrond is te laag. De contrastverhouding is 1,5:1 maar moet minimaal 3:1 zijn. Dit komt ook op andere plekken voor zoals de links in de footer.

Uitkomst: Niet getest

Bevinding 19: Advies: De bezoeker heeft geen mogelijkheid om de witruimte aan te passen. Dit wordt veroorzaakt omdat er een content security policy (CSP) zit op de website dat voorkomt dat bezoekers eigen voorkeuren kan instellen. Biedt de bezoeker de mogelijkheid om

Uitkomst: Onvoldoende

Bevinding 20: Als je op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam over de i-knopjes hovert met de muis, verschijnt er aanvullende content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen.

Uitkomst: Onvoldoende

Bevinding 21: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

Uitkomst: Voldoende

Bevinding 22: Advies: begin de titel met de naam van de pagina en eindig met de naam van de website. In de tabbladen is de titel zo sneller terug te vinden en met schermleessoftware wordt direct de naam van de pagina voorgelezen (en daarna pas de naam van de website, wat de bezoeker met schermleessoftware kan overslaan zodat sneller door de site genavigeerd kan worden).

Uitkomst: Onvoldoende

Bevinding 23: Op de pagina https://www.leeroverzicht.nl/ staan onder "Ontdek jouw mogelijkheden binnen:" een opsomming van links. In deze links zit een knop (<button>) en een kopmarkering (<h3>) waardoor deze links voor bezoekers met hulpsoftware lastig zijn te bedienen en deze link/knop 2x focus krijgt. Verwijder de knop en de kopmarkering. Zie ook SC 1.3.1 en SC 4.1.2.

Bevinding 24: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je filters toepassen. Elk item met een checkbox kan op 2 manieren worden geactiveerd waardoor zowel de checkbox als het label de focus krijgt. Voorkom dit door de checkbox en het label op correcte wijze aan elkaar te associëren. Het klikbare deel uit het label te halen en het aria-label weg te halen uit de checkbox.

Bevinding 25: Op de pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam krijgt de knop achter de tekst "6493 resultaten voor " 2x de focus. Dit zorgt voor een onnodige extra focus met het toetsenbord. de bediening van de knop kan daardoor verwarrend zijn. Zorg dat slechts eenmaal de focus op deze knop wordt gezet. Zie ook SC 4.1.2.

Uitkomst: Onvoldoende

Bevinding 26: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam is het contrast van de focus(rand) op de knop na "6493 resultaten voor" te laag. De focus bij "Sorteer op" is niet zichtbaar. zorg dat de focus op elk interactief element goed zichtbaar is.

Bevinding 27: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je een filter toepassen op locatie. Dit is een select-box. Als je met het toetsenbord door de keuzes gaat krijgt het geselecteerde item een lichtere blauwe achtergrond en boven en onder lichtblauwe lijnen. Het contrastverschil met de blauwe achtergrond is te laag. ook de tekst heeft bij focus een te laag contrast. Zie voor contrast ook 1.4.3.

Uitkomst: Onvoldoende

Bevinding 28: Pagina https://www.leeroverzicht.nl/about-us bevat Engelse content. Deze pagina is gemarkeerd met lang="en". Delen van de pagina bevatten echter ook Nederlandstalige tekst, zoals de navigatie in de header en alles onder de kop "Meer informatie nodig". Deze onderdelen hebben geen correcte taalmarkering. Deze moeten gemarkeerd worden met lang="nl".

Bevinding 29: Pagina https://www.leeroverzicht.nl/kwetsbaarheid-melden bevat naast Nederlandstalige tekst ook een deel Engelstalige tekst vanaf de kop "Report vulnerability". Hier ontbreekt de taalmarkering lang="en".

Uitkomst: Onvoldoende

Bevinding 30: Op pagina https://www.leeroverzicht.nl/leren/zoeken kan je antwoord geven op de vragen te beginnen bij 'Onder welk thema moet je opleiding vallen?'. Beantwoord achtereenvolgens met 'Natuur', 'Hbo', 'Ik weet dit even niet'. Er verschijnt dan een veld 'Postcode'. De Foutmelding: Bij een postcode zonder resultaat geeft hulpsoftware de volgende melding: 'Geen resultaat gevonden' terwijl op het scherm een veel uitgebreider antwoord verschijnt: 'Ik heb hiermee geen resultaten gevonden. Klik op een gegeven antwoord om deze te veranderen of klik op Ik zoek liever zelf.' Zorg dat de ervaring in beeld hetzelfde is als voor de mensen die een schermleessoftware gebruiken.

Uitkomst: Onvoldoende

Bevinding 31: Op de pagina https://www.leeroverzicht.nl/ staan onder "Ontdek jouw mogelijkheden binnen:" een opsomming van links. In deze links zit een knop (<button>) en een kopmarkering (<h3>) waardoor deze links voor bezoekers met hulpsoftware lastig zijn te bedienen en deze link/knop 2x focus krijgt. Nest geen interactieve elementen. Verwijder de knop en de kopmarkering. Zie ook SC 1.3.1 en SC 2.4.3.

Bevinding 32: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je filteropties verwijderen door middel van de lichtblauwe knoppen met een "x" erin. Deze krijgen een dubbele focus door het gebruik van een extra tabindex. De bediening van de knop kan daardoor verwarrend zijn. Zorg dat slechts eenmaal de focus op deze knop wordt gezet. Zie ook SC 2.4.3.

Bevinding 33: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam zijn er informatieknopjes (rode knopjes met en "i" erin). Met toetsenbord verschijnt automatisch de inhoud van het ballonnetje. Echter schermleessoftware ziet deze informatie niet. Mensen die het scherm niet (goed) kunnen zien missen zo informatie. Zorg dat bij openen de informatie in de ballon ook beschikbaar is voor hulpsoftware. Dit komt ook op andere pagina's voor.

Bevinding 34: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je filteren op Skills. Als je deze functie aan zet verschijnt er een veld "Zoek een kennisgebied of vaardigheid". Dit label niet expliciet geassocieerd met het invoerveld. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van schermleessoftware direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen.

Bevinding 35: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je filteren op "Locatie". Als je deze functie opent verschijnt er een veld "Plaats of postcode". Dit label niet expliciet geassocieerd met het invoerveld. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van schermleessoftware direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen.

Bevinding 36: Op pagina https://www.leeroverzicht.nl/leren/zoeken?page=1&zoekargument=rotterdam kun je filteren op "Tijd". Als je de slider bedient wordt achtereenvolgens 1, 2, 3, 4, 5, ... doorgegeven aan schermleessoftware. Het is niet duidelijk hoeveel dagen, weken of jaren je selecteert. Zorg dat de zichtbare tijd genoemd wordt en dat duidelijk is dat je de focus op de linker of rechter blauwe cirkel hebt staan.

Bevinding 37: Op pagina https://www.leeroverzicht.nl/geld/ kun je je situatie zoeken. Als je een selectie maakt, bijvoorbeeld "Student", dan verschijnt er een tekst "Ik heb 77 resultaten gevonden. Wie vraagt...". Iemand die het scherm niet (goed) kan zien en gebruik maakt van schermleessoftware krijgt geen feedback dat er 77 resultaten zijn gevonden. De schermleessoftware gaat verder met lezen voorbij deze nieuwe tekst. De "leescursor" zou na "Student" verder moeten lezen maar staat achter de nieuwe tekst voor de knop "Persoon". screenshot03

Uitkomst: Onvoldoende

Bevinding 38: Op pagina https://leeroverzicht.nl/leren/zoeken worden 8 van de 16 thema's getoond. Door middel van een volgende- en vorige-knop kan je door de lijst bladeren. Als je de knoppen bedient krijgt hulpsoftware geen signaal dat er iets veranderd is op het scherm. Geef terug dat er 8 nieuwe thema's getoond worden. Wellicht is het goed om de knop een extra duidelijke naam te geven, bijvoorbeeld 'Volgende 8 thema's' in plaats van 'Volgende'.