Onderzoek toegankelijkheid 123subsidie.nl

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Adviseurs

Uitkomst: Onvoldoende

Adviseur Katoele

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De alt-tekst bij het logo in de header en de footer is niet voledig: ‘powered by SNN’ ontbreekt. Hierdoor hebben bezoekers die de afbeelding niet kunnen zien niet dezelfde informatie.

Homepage

De foto’s bij de nieuwsberichten hebben een alt-tekst die de kop eronder herhaalt. Wanneer deze foto’s decoratief zijn, kunnen de alt-teksten beter leeg worden gelaten.

Onder de berichten staat een icoon van een oog. Dit icoon heeft geen alternatieve tekst.

Adviseurs

Niet alle logo’s van adviseurs hebben een correcte alt-tekst, bijvoorbeeld die van ‘Legal consultants’.

Adviseur Katoele

De foto’s van de adviseurs hebben geen alt-teksten. Voeg alt-teksten toe waarin de personen worden beschreven.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Over 123subsidie.nl

Uitkomst: Onvoldoende

Over 123subsidie.nl

De video op deze pagina heeft geen ondertiteling. Onder de video staat ook tekst, maar dit is niet hetzelfde als er de video wordt gezegd.

Hele sample

Uitkomst: Onvoldoende

Over 123subsidie.nl

Uitkomst: Onvoldoende

Over 123subsidie.nl

Aan het eind van de video komen logo’s en een tekst in beeld die niet worden uitgesproken. Bezoekers die dit niet kunnen zien missen deze informatie. Voeg deze informatie toe aan de audio (voiceover of audiodescriptie), of zet deze onder de video. Omdat deze tekst niet tijdgevoelig is, mag deze ook onder de video worden gezet.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het zoekveld in de header heeft geen label. Een placeholdertekst is niet voldoende, o.a. omdat die verdwijnt wanneer je iets invoert. Voeg een label toe zodat hulpsoftware het veld kan identificeren.

Homepage

In de footer staan de h3-kopjes ‘Contact’ en ‘Snel naar’. Deze vallen in de koppenstructuur onder de h2-kop ‘Partners’. Dit klopt niet, omdat het algemene kopjes zijn. Voeg een (eventueel met CSS verborgen) h2-kop toe aan de footer, zodat de structuur klopt, of maak hier h2-kopjes van. Dit komt op veel pagina’s voor.

Subsidies

Wanneer er filters zijn gebruikt, komen deze bovenaan in een blokje te staan met een kruisje ernaast. Dit kruisje moet visueel aangeven dat je dit filter weer kunt verwijderen. In tekst staat er (via CSS content) echter een ‘+’. Voor gebruikers van hulpsoftware is dit verwarrend. Zorg dat er in toegankelijke naam ook een tekst ‘verwijderen’ voorkomt.

Bij de filters zijn groepen met checkboxes. Deze checkboxes zijn in de code echter niet gegroepeerd. Dit kan worden aangepast door gebruik te maken van fieldsets waarbij het onderwerp in de legend staat. Dit geldt ook voor de pagina met adviseurs.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Registreren

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.

Contact

De invoervelden voor persoonlijke informatie zoals naam en emailadres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De focus van veel elementen is alleen zichtbaar door verschil in kleur. Hierdoor kunnen sommige bezoekers deze actieve status missen. Gebruik nog een andere manier om focus aan te geven zoals een rand. Zie ook 2.4.7.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Subsidie biologische landbouw

Uitkomst: Onvoldoende

Zoekresultaten beperking

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Adviseur Katoele

Uitkomst: Onvoldoende

Contact

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 zit qua contrast onder deze waarden. Hieronder een aantal voorbeelden. Deze komen op meerdere pagina’s voor.

Homepage

De grijze tekst met plaatsingsdatum en leestijd onder de nieuwsitems (3.67).

De grijze tekst ‘Onderstaande organisaties werken samen aan een krachtig en innovatief Noord-Nederland’ onder de Partners kop (3.67).

Subsidies

U bent hier (2.34:1) en daarna in het kruimelpad ‘subsidies’ (4.38:1).

De lichtblauwe teksten bij de filters (aantallen en alle … opties)(2.5:1).

De bedragen onder de slider (2.44:1).

De blauwe tekstjes met vinkjes boven de footer (2.34:1).

De teksten ‘geopend’ (1.7:1) en ‘subsidie’ (3.7:1) onderaan de subsidieblokjes.

Zie ook screenshot 1.

Subsidie biologische landbouw

De lichtblauwe tekst met laatst gewijzigd (2.5:1) en de lichtgrijze tekst met extra informatie (3.67:1).

Zoekresultaten beperking

De actieve link (focus en hover) ‘Sla deze zoekopdracht op’ (2,5:1) en vervolgens nog een keer in de popup in inactieve modus (3.1:1).

Registreren

De foutmeldingen -roze tekst op rood- (1.7:1), zie screenshot 4.

Adviseur Katoele

De grijze hoofdtekst (3.67:1).

Alle lichtblauwe teksten op deze pagina (2.44:1) zoals tags, rating en data.

Contact

De asteriks (oranje op wit, 2.5:1) en de foutmeldingen - roze op wit (1.8:1).

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het inzoomen op mobiele apparaten wordt belemmerd via het meta element (maximum-scale=1.0, user-scalable=no").

Op de desktop heeft deze website een zoekbalk en knoppen om in te loggen en te registreren. Als de website bekeken wordt op kleiner scherm verdwijnen deze mogelijkheden. Wanneer je bent ingelogd verdwijnt ook de link met je favorieten. Zorg dat alle functionaliteit ook beschikbaar is voor bezoekers die inzoomen of op mobiel de website bezoeken.

Opmerking: als je op mobiel probeert in te loggen via de adresbalk, kom je op een 404 pagina en krijg je een verwijzing naar de zoekfunctie -die er niet is-, en een link ‘keer terug naar de homepage’, maar die gaat naar het domein 123subsidie.dbldev.nl (Plesk server).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Adviseur Katoele

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.

De zoekknop met icoon (2.7:1).

Subsidies

Het zoeken invoerveld en de checkboxes (1.4:1).

Registreren

De invoervelden hebben een achtergrondkleur en een rand (aan de onderkant of om de checkbox). De donkerste rand heeft een contrast van 1.4:1.

Adviseur Katoele

De Twitter links (icoontjes) (2.5:1).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onbekend

Homepage

De link om naar beneden te scrollen werkt niet met het toetsenbord. Het is nu een link element, beter is om hier een button van te maken. Dan werkt het standaard ook met het toetsenbord. Links zijn bedoeld om naar een andere pagina te gaan, wat hier niet het geval is.

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 geen mechanisme om terugkerende blokken met links over te slaan. Toetsenbordgebruikers moeten hierdoor op elke pagina door alle menu-links heen om bij de hoofdcontent te komen. Plaats hiervoor bijvoorbeeld een ‘skiplink’ als eerste link op de pagina waarmee het hoofdmenu overgeslagen kan worden.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Zoekresultaten beperking

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je het (mobiele) menu opent, gaat de focus verder op de pagina eronder. Pas na de footer komt de focus in het menu. Zorg dat je direct na het openen van het menu in het menu komt, en pas op de pagina verder kunt wanneer dit menu weer gesloten is.

Zoekresultaten beperking

Wanneer je een zoekopdracht wilt opslaan, opent er een popup. De focus komt hier in, maar gaat ook verder op de pagina wanneer de popup nog open staat. Zorg dat bij een geopende popup de focus alleen daarin kan komen totdat de popup weer gesloten is.

Dit komt ook voor bij het invoeren van een beoordeling via een popup.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Adviseurs

Uitkomst: Onvoldoende

Profiel

Uitkomst: Onvoldoende

Adviseur Katoele

Uitkomst: Onvoldoende

Homepage

De link om naar beneden te scrollen heeft geen tekst. Hierdoor is het voor screenreadergebruikers niet duidelijk waar deze link voor dient. Aangeraden wordt om hier een button van te maken met een duidelijke tekst. Dan werkt het namelijk ook met het toetsenbord. Zie ook 2.1.1

De links naar de subisidies hebben geen tekst. Een title attribuut is niet voldoende, omdat deze slecht wordt ondersteund door hulpsoftware. Dit kan worden opgelost door de link om de h3-kop te zetten.

Boven de blokjes met subsidies staat een link met een hartje. Deze links hebben geen tekst. Voeg een (eventueel met CSS verborgen) linktekst toe.

Opmerking: het markeren van een subsidie als favoriet voegt deze niet toe aan de pagina met favorieten (in Chrome op MacOS). Dit komt voor op alle pagina’s met subsidieblokjes.

Opmerking: de links van de nieuwsberichten bevatten 3 x dezelfde tekst. Dit zorgt voor veel ruis voor screenreadergebruikers. Zie screenshot 2. Alleen de h3-kop zou voldoende zijn.

Onder Partners staat een logo van de Europese Commissie. Als alt-tekst heeft deze afbeelding ‘EU’. Dit komt niet overeen. Zorg dat alt-teksten van logo’s altijd exact dezelfde tekst bevatten als er te zien is op de afbeelding.

Adviseurs

De links naar de adviseurspagina’s hebben geen tekst. In het title attribuut staat een emailadres. Voor wie dit kan zien is dat verwarrend, want de link opent geen email-programma. Zorg voor een duidelijke linktekst die verwijst naar de pagina van de organisatie.

Profiel

Wanneer je bent ingezoomd vanaf 150% bevatten de links naar Account en Account verwijderen enkel een icoontje en geen tekst.

Adviseur Katoele

De links naar de sociale netwerken hebben geen tekst. Zorg voor unieke namen per link, bijvoorbeeld ‘LinkedIn Uilke Bosma’. In een linklijst zijn de diverse links dan van elkaar te onderscheiden. Zie screenshot 3. De vraagtekens zijn icoontjes.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Over 123subsidie.nl

Uitkomst: Onvoldoende

Adviseur Katoele

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op een aantal elementen op deze website is de focus niet of slecht zichtbaar door bijvoorbeeld alleen een (licht) kleurverschil of schaduw. Dit maakt het lastig voor ziende toetsenbordgebruikers om op de site te navigeren. Aangeraden wordt om een consistente, duidelijke focusstijl te hanteren, bijvoorbeeld een donkerblauwe rand of de standaard focus indicator (het weghalen van outline: 0!important; )

Voorbeelden worden hieronder genoemd.

Homepage

De link met het logo linksboven op de site in in de footer

De zoekknop en de Registreren knop in de header

De knoppen met Subsidies en Adviseur onder Ik zoek…

De links achter de subsidieblokjes onder Recent toegevoegd

De links naar de Partners (logo’s)

De knop naar het (mobiele) menu

Subsidies

De checkboxes bij de filters

De links naar de subsidies

De link om subsidies favoriet te maken

Over 123subsidie.nl

De link naar Home in het kruimelpad

De buttons in de videospeler

Adviseur Katoele

De klikbare tags

De emailadressen

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Homepage

Onderaan bij de Partners staat een logo van de Europese Commissie, waarbij de waarbij de toegankelijke naam (‘EU’) anders is dan de zichtbare naam. Hierdoor kan de link moeilijk bediend worden via spraakinvoer.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Subsidies

Wanneer je een filter activeert, ververst de gehele pagina. Voor toetsenbordgebruikers wordt de focus dan weer helemaal naar het begin van de pagina verplaatst. Dit is een ‘change of context’ en kan verwarrend en lastig zijn. Zorg dat de focus weer terug gaat naar de plek van de activatie, of geef een waarschuwing dat de pagina opnieuw geladen wordt na activatie.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Registreren

Er wordt niet aangegeven welke velden verplicht zijn. Dit kan onnodige foutmeldingen geven. Voor bezoekers die meer tijd nodig hebben voor het invullen van formulieren kan dit nog een extra belasting zijn. Nu wordt pas na versturen duidelijk welke velden verplicht zijn. (Dit is dan geen foutmelding, maar een algemene instructie die er dus al van tevoren moet staan.)

Ook wordt aangeraden om bij specifieke eisen, zoals bij het wachtwoord, dit van tevoren duidelijk aan te geven. Het wachtwoord kan nu meerdere keren fout worden ingevuld, waardoor het formulier meerdere keren verstuurd moet worden voordat de eisen duidelijk worden.

Contact

Er staan asterisks (sterretjes) bij de verplichte velden, maar dit wordt niet in de tekst toegelicht. Dit is mogelijk niet voor iedereen duidelijk. Bovendien zijn de asterisks erg laag in contrast, waardoor gebruikers deze gemakkelijk kunnen missen.

Hele sample

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Registreren

Wanneer de Captcha niet is ingevuld, komt er de foutmelding ‘The response parameter is invalid or malformed’. Dit is is geen duidelijke omschrijving. Maak hier een Nederlandse suggestie van.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Profiel

Uitkomst: Onvoldoende

Profiel

Er zijn meerdere elementen gevonden met het id ‘um_account_submit’. Wanneer id’s meerdere keren op een pagina voorkomen kan hulpsoftware de code niet goed interpreteren. Pas de id’s aan.

Hele sample

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Zoekresultaten beperking

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In de header en footer zijn ARIA-rollen gebruikt die niet voorkomen in de specificatie: ‘mast-head’ en ‘site-footer’. Deze zijn hier ook overbodig, omdat er al impliciete rollen zijn door de elementen header en footer.

De knop om te zoeken in de header heeft geen naam. Hierdoor is het voor hulpsoftware niet duidelijk waar deze knop voor dient. Geef deze bijvoorbeeld een naam via een verborgen screenreader-tekst of een aria-label.

De link van het (mobiele) menu geeft geen status aan of het open of gesloten is. Dit kan worden aangegeven via het aria-expanded attribuut.

De knop om het menu te sluiten heeft als naam ‘+’. Geef deze knop een goede naam, zoals ‘Sluiten’.

Subsidies

Bij de filters staan links die groepen checkboxes kunnen inklappen en uitklappen. De status hiervan wordt in de code niet aangegeven. Dit kan worden gedaan met behulp van het aria-expanded attribuut op de link/button.

Dit geldt ook voor de pagina met adviseurs.

Op deze pagina staat een slider. Deze elementen hebben wel een rol, maar geen naam. Voeg bijvoorbeeld een aria-label toe met ‘subsidiebedrag minimum’ en ‘subsidiebedrag maximum’.

Rechtsbovenaan staat een select list zonder naam. Geef deze bijvoorbeeld een label of aria-label attribuut.

Zoekresultaten beperking

Wanneer je een zoekopdracht wilt opslaan, opent er een popup. De button om te sluiten heeft als naam ‘+’ . Dit is verwarrend. Maak hier bijvoorbeeld ‘Sluiten’ van. Dit komt bij meerdere popups voor.

Hele sample

Uitkomst: Onvoldoende

Subsidies

Uitkomst: Onvoldoende

Subsidies

Wanneer je een subsidie als favoriet markeert, verandert het getal bovenin de header. Dit is een verandering van status, maar deze wordt niet doorgegeven aan hulpsoftware. Dit kan worden gedaan via een role=“status” of het gebruik van live regions. Zie voor meer info

https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques