Onderzoek toegankelijkheid 20072020.europaomdehoek.nl

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

projecten

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

homepage

Achter ‘Word geinformeerd’ en ‘Raak geinspireerd’ staan afbeeldingen met als alt-tekst respectievelijk ‘links alt’ en ‘rechts alt’. Dit voegt niks toe. Het is beter om deze alt-teksten leeg te laten, zodat de screenreader ze negeert.

Onder ‘Nieuws’ staan afbeeldingen naast berichten, met als alt-tekst de titel van het nieuwsbericht. Dit voegt niks toe. Beter is het om deze alt-teksten leeg te laten.

projecten

Op deze pagina, in de linker zijkolom, staat ‘Kijkdagen’ met een icoon van een oog. Deze icoon is decoratief en dient verborgen te worden voor de screenreader. Nu luidt de alternatieve tekst ‘Kijkdagen, wij doen mee’. Laat de alt-tekst hier leeg.

De afbeeldingen bij de projecten hebben als alt-tekst de projecttitel. Dit voegt niks toe. Het is beter om deze alt-teksten leeg te laten, zodat de screenreader ze negeert.

project waviater

Onderaan de pagina staat een afbeelding van een duiker. Deze heeft als alt-tekst ‘Europa om de hoek’. Maak hier een correcte beschrijving van of laat de alt-tekst leeg wanneer deze afbeelding decoratief is.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Random pagina 1

Uitkomst: Onvoldoende

Random pagina 1

De video van ‘StartT Startup Accelerator fpr Refugees in Twente’ heeft automatisch gegeneerde ondertiteling, waar veel fouten in zitten. Hierdoor is het erg lastig om het verhaal te volgen. Voeg een correcte ondertiteling toe.

Hele sample

Uitkomst: Onvoldoende

Random pagina 1

Uitkomst: Onvoldoende

Random pagina 1

In de video van ‘StartT Startup Accelerator fpr Refugees in Twente’ komt informatie in beeld die niet wordt uitgesproken, zoals namen en functies. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie (onder dit niveau A criterium) ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Random pagina 1

Uitkomst: Onvoldoende

Random pagina 1

In de video van ‘StartT Startup Accelerator fpr Refugees in Twente’ komt informatie in beeld die niet wordt uitgesproken. Onder dit niveau AA kan niet worden volstaan met een alternatief, maar is audiodescriptie vereist.

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

projecten

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

nieuwsbericht partnerovereenkomst 2021-2027

Uitkomst: Onvoldoende

privacy

Uitkomst: Onvoldoende

PDF Health Tech Yard

Uitkomst: Onvoldoende

PDF Grenzeloos veen

Uitkomst: Onvoldoende

Random pagina 1

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het invoerveld om te zoeken in de header heeft geen label. Een placeholder is niet voldoende aangezien die niet altijd beschikbaar is. Voeg een label toe.

In de popup met de cookievoorkeuren staan koppen die niet als kop staan opgemaakt maar enkel als div-element. Hierdoor zijn deze niet als kop te herkennen door hulpsoftware. Maak hier bijvoorbeeld h1, h2- en h3-elementen van.

Binnen de popup met de cookievoorkeuren staan toggle buttons. Dit zijn checkbox invoervelden zonder label. Er staan wel label elementen in de code, maar deze bevatten geen tekst. Hierdoor is het voor gebruikers van hulpsoftware onduidelijk waar deze checkboxes voor zijn.

Opmerking: De knop naar het mobiele menu is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de knop geen tekst heeft en ook geen afbeelding, alleen CSS streepjes. Windows herkent dit niet als content. Dit kan worden opgelost door de afbeelding in svg te plaatsen en er een (transparante) outline omheen te zetten.

homepage

De kophiërarchie klopt niet helemaal. De kop ‘Raak geinspireerd’ is op h3-niveau, en de koppen daarna zoals ‘Populair op EODH’ op h2-niveau. Deze koppen vallen daardoor qua betekenis alle onder ‘Raak geinspireerd’, terwijl het volgens de layout aparte onderdelen zijn. Zet deze onderdelen daarom ook op hoger niveau (h2).

projecten

De titels van de projecten op deze pagina zijn geen koppen. Deze titels vertellen iets over de content die er onder volgt. Daarom zijn het koppen en dienen als koppen gemarkeerd te worden. 

In de paginatie is via een andere achtergrondkleur te zien op welke pagina je je bevindt. Dit is voor hulpsoftware niet af te leiden uit de code. Dit is eenvoudig op te lossen door aria-current=“page” toe te voegen aan het actieve item. Dit komt ook voor op de pagina Nieuws.

project waviater

In de rechter zijkolom staan teksten ‘Subsidieontvanger’, ‘Bezoekadres’, ‘Gegevens Subsidie’, ‘Fonds’ en ‘Op de kaart’. Deze teksten zijn koppen omdat ze iets vertellen over de inhoud die er onder volgt. Echter, zijn deze koppen niet met heading-elementen opgemaakt maar enkel als span-element.

nieuwsbericht partnerovereenkomst 2021-2027

Op deze pagina is de inleidende paragraaf opgemaakt met een strong-element. Het strong-element is bedoeld voor nadruk en niet voor visuele opmaak. Gebruik CSS om de eerste alinea te stylen.

privacy

Er zijn niet correct opgemaakte lijsten gevonden binnen de privacy informatie, namelijk ol-elementen met daar direct onder weer ol-elementen. Deze sublijsten moeten in een li-element staan. Wanneer lijsten niet volgens de specificatie zijn opgemaakt, kan hulpsoftware deze mogelijk niet goed interpreteren.

PDF Health Tech Yard

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.

PDF Grenzeloos veen

De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren.

Random pagina 1

Binnen de hoofdtekst van het project staan kopjes opgemaakt met het strong-element in plaats van met een heading. Hierdoor zijn deze niet als kop te herkennen door hulpsoftware.

Onder ‘Waarom verdient jouw project de ESF award 2018?’ staat een lijst. Deze is in de code niet als lijst opgemaakt, maar met br-elementen, punten en ‘0’s. Hierdoor kan hulpsoftware dit niet goed interpreteren en voorlezen als lijst. Maar hier een ul-element van.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

contact

Op deze pagina staat een formulier. In dit formulier moeten persoonlijke gegevens ingevuld worden, waaronder een naam, e- mailadres en telefoonnummer. Bij deze invoervelden ontbreekt een autocomplete-attribuut. Nu kunnen browsers en hulpsoftware geen ondersteuning geven bij het invullen van deze invoervelden door de invoervelden al automatisch in te vullen. 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/TR/WCAG21/#input-purposes .

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

PDF Health Tech Yard

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. Een aantal elementen op de website zitten qua contrast onder deze waarden.

contact

De melding dat de tijd verlopen is van de CAPTCHA (rood op grijs, 3.8:1). Zie screenshot 1.

project waviater

Onder de kop ‘Europa om de hoek’ staat een rode link op een blauwe achtergrond (1.5:1). Zie screenshot 2. Deze kleurcombinatie komt ook voor bij hover en focus op de deel-links onderaan in de footer.

PDF Health Tech Yard

De groene en bruine kopjes op pagina 2 (3.5:1 en 2.4:1).

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

fonds EFRO

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het inzoomen op een mobiel wordt belemmerd door de viewport instellingen (meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"). Haal de maximum-scale weg of zet deze op minimaal 2.

homepage

Vanaf 200% ingezoomd zijn niet meer alle items onder ‘Populair op EODH’ zichtbaar.

fonds EFRO

Vanaf 175% ingezoomd zijn de titels van de projecten niet meer zichtbaar. Zie screenshot 5.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

nieuws

Uitkomst: Onvoldoende

privacy

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op 400% (bij 1280px breed) worden sommige teksten afgebroken, zoals de skiplink. Zie screenshot 6.

De content in de cookievoorkeuren popup is op 400% niet te lezen/bedienen. Er is maar een klein deel van de tekst zichtbaar en er kan niet gescrold worden.

Zorg dat minimaal tot 400% ingezoomd alle content en functionaliteit bereikbaar is, zonder in 2 richtingen te hoeven scrollen.

project waviater

Vanaf 200% ingezoomd loopt in de layout de footer door de content heen. Zie screenshot 4. Dit komt op meerdere pagina’s voor.

nieuws

Op 400% ingezoomd valt een deel van de content (titels en paragrafen) buiten beeld. Dit komt op meerdere pagina’s voor, bijvoorbeeld ook op random pagina 1.

privacy

Op 400% moeten voor de content binnen de iframe meerdere scrollbalken worden gebruikt, verticaal en horizontaal. Dit maakt het erg lastig om te lezen. Zorg via responsive bouwen dat normale tekst maximaal 1 scrollbalk nodig heeft en dus in 1 kolom leesbaar is.

Hele sample

Uitkomst: Onvoldoende

projecten

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. Een aantal elementen op de website zitten qua contrast onder deze waarden.

projecten

De randen van het invoerveld om te zoeken op kijkdagen, en de scollbalken bij de categorieën Provincie, Fondsen, Gestart in (#ccc op wit, 1,6:1).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Binnen de popup met de cookievoorkeuren zijn de buttons ‘alle cookies toestaan’ voor de verschillende secties niet met het toetsenbord te bedienen.

Ingezoomd vanaf 175% komt er in de header een link voor de zoekfunctie. Deze is niet met het toetsenbord te bedienen.

contact

De visuele CAPTCHA is niet met het toetsenbord te bedienen. (De audio CAPTCHA wel, maar voor bezoekers die deze niet kunnen horen en geen muis kunnen gebruiken, is er nu geen alternatief.)

project waviater

Wanneer je met de muis over het diagram gaat, zie je het bedrag en het percentage. Dit werkt niet met het toetsenbord. De bedragen staan ook in de tabel eronder, maar het percentage niet.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Er is een skiplink naar de hoofdinhoud, maar ingezoomd vanaf 175% komt deze link na de link naar het menu. Zorg dat het altijd de eerste link met focus is op de pagina.

Hele sample

Uitkomst: Onvoldoende

PDF Health Tech Yard

Uitkomst: Onvoldoende

PDF Health Tech Yard

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.

Hele sample

Uitkomst: Onvoldoende

projecten

Uitkomst: Niet getoetst

project waviater

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De focus komt pas op de cookiemelding na het einde van de content op de pagina. Wanneer je bent ingezoomd, betekent dit dat een groot deel van de content (en de actieve focus) niet zichtbaar is. Dit maakt het nogal lastig om te pagina te lezen. Zorg dat de cookiemelding eerder weg te klikken is. Zie screenshot 3.

projecten

Opmerking: Bij de filters komt de focus behalve op de checkboxes ook op de labels, maar dit heeft geen functie. Aangezien dit verwarrend is, kan de focus hierop beter verwijderd worden.

project waviater

Na de hoofdcontent gaat de focus naar links van andere projecten, maar deze zijn niet zichtbaar op de pagina. Zorg dat interactieve elementen die visueel verborgen zijn, ook geen focus kunnen ontvangen. Dat is verwarrend voor ziende toetsenbordgebruikers. Dit komt op meerdere (project)pagina’s voor.

Hele sample

Uitkomst: Onvoldoende

nieuws

Uitkomst: Onvoldoende

zoekresultaten

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Ingezoomd vanaf 175% komt er in de header een menuknop. Dit is een link zonder tekst. Er staat een div-element in met de tekst ‘menu’, maar deze is verborgen voor hulpsoftware via display:none.

nieuws

Bij elk nieuwsbericht staat de link achter de titel (h2), achter de afbeelding en achter ‘lees verder’. Sommige afbeeldingen hebben echter een lege alt-tekst, waardoor deze link ook geen tekst heeft. Een title attribuut is niet voldoende aangezien deze slecht wordt ondersteund door hulpsoftware. Geef alle afbeeldingen daarom een duidelijke alt-tekst of haal de link achter de afbeelding weg. (Dan hoeven toetsenbordgebruikers ook niet drie keer te ‘tabben’ per nieuwsitem’.)

zoekresultaten

Er zijn meerdere links op de pagina met de tekst ‘Lees verder’. 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. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

projecten

Uitkomst: Onvoldoende

projecten

Onder ‘Kijkdagen’ staat een zoekveld met daarin een placeholdertekst met een postcode. Het label is ‘kijkdagen in de buurt’. Dat er een postcode ingevuld moet worden, staat niet in het label of een andere zichtbare tekst. Voor wie de placeholder niet kan zien, vanwege dat deze onbeschikbaar is, weet niet dat hier een postcode gevraagd wordt.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Binnen de popup met de cookievoorkeuren is de focus op de opties (toggle-buttons) niet zichtbaar. Hierdoor lijkt het met het toetsenbord niet aan te passen.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

PDF Grenzeloos veen

Uitkomst: Onvoldoende

PDF Grenzeloos veen

Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.

Hele sample

Uitkomst: Onvoldoende

about europa om de hoek (video)

Uitkomst: Onvoldoende

about europa om de hoek (video)

Op deze pagina is de hoofdtaal Nederlands, omdat de herhalende content, zoals het menu en de logo's, in het Nederlands zijn. Maar voor de Engelse teksten op de pagina moet een taalwisseling worden gegeven. Deze taalwisselingen zijn nu niet aanwezig. Zonder taalwisseling leest de screenreader Engelse teksten voor met de Nederlandse uitspraakregels. Dit kan worden opgelost door een lang-attribuut toe te voegen aan het omringende html-elementen.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

homepage

Er zijn dubbele id’s gevonden bij de social media, bijvoorbeeld ‘gtm-share-whatsapp’. De deelfunctie komt 2 keer voor op de pagina, onder de content in in de footer. Zord dat id’s maar 1 keer per pagina voorkomen, zodat hulpsoftware deze goed kan interpreteren. Dit issue komt op meerdere pagina’s voor.

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Niet getoetst

about europa om de hoek (video)

Uitkomst: Onvoldoende

project waviater

Uitkomst: Onvoldoende

privacy

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Ingezoomd vanaf 175% komt er een link met een zoek-icoon. Deze heeft wel een naam, maar geen status of deze in-of uitgeklapt is. Dit kan worden toegevoegd via een ‘screenreadertekst’ of via het aria-expanded attribuut.

Binnen de popup met de cookievoorkeuren staan buttons met ‘alle cookies toestaan’ voor de verschillende secties. Deze buttons zijn div-elementen zonder correcte naam en rol. Maak hier een button element van, zodat deze ook met het toetsenbord werken.

contact

Opmerking: De deelfunctie wordt niet goed geladen en ziet er daarom nogal onduidelijk uit wat betreft knoppen (‘site.share.close’).

about europa om de hoek (video)

De iframe met de video heeft geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title attribuut met beschrijving toe of een aria-label. Dit komt op meerder pagina’s met video voor.

project waviater

De iframe met de kaart heeft geen toegankelijke naam. Dit komt op meerdere (project)pagina’s voor.

privacy

De iframe met de privacy informatie heeft geen toegankelijke naam.

Hele sample

Uitkomst: Niet van toepassing