Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Suppord

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Suppord
Datum 19 februari 2024
Scope van de website Alle pagina's op suppord.nl
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 41

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Bovenaan de pagina's is een grote afbeelding, in de code gemarkeerd met "parallax-slider". Deze afbeelding heeft geen tekstalternatief. Aangezien deze afbeelding decoratief is, volstaat een leeg alt-attribuut: alt=""

Bevinding 2: Onderaan de pagina's is een afbeelding van een plattegrond met de locatie van Suppord daarop aangegeven. Deze afbeelding is een link naar het adres op Google Maps. Deze afbeelding heeft geen tekstalternatief. De alternatieve tekst moet communiceren waar de link heen gaat. Denk aan een tekst als "De locatie van Suppord op Google Maps".

Bevinding 3: Op https://suppord.nl/ is een grote afbeelding, daaronder is een knop met een pijl naar beneden. Deze pijl is een afbeelding zonder tekstalternatief. De alternatieve tekst moet communiceren wat de knop doet. Denk aan een tekst als "scroll verder", "ga verder" of "ga naar beneden".

Bevinding 4: Op https://suppord.nl/ staan verschillende links die bestaan uit een hele grote foto met tekst zoals "Jongeren" en "Kids" (in de code genoemd: "photo-links"). Deze afbeeldingen zijn decoratief, en de bestaande tekst alternatieven zijn al op de pagina aanwezig, waardoor voorleessoftware nu 3x "Jongeren" voorleest waar 1x voldoende is. Een leeg alt-attribuut (alt="") op de afbeeldingen volstaat hier.
Op https://suppord.nl/jongeren, https://suppord.nl/jeugd en elke andere pagina waar dit soort links aanwezig zijn gebeurt hetzelfde.

Bevinding 5: Op https://suppord.nl/over-suppord staan kleine afbeeldingen bij de contactgegevens van de verschillende medewerkers zoals een envelop voor e-mail en een instagram-icoon voor het instagram-account van die persoon. Deze communiceren visueel wat voor contactgegevens het zijn. Dit zou ook niet-visueel gecommuniceerd moeten worden met een alternatieve tekst. Bijvoorbeeld door bij het envelopje de tekst "e-mail" toe te voegen en die visueel te verbergen.

Dit komt ook voor bij de contactgegevens van de persoon op:

Bevinding 6: Op https://suppord.nl/activiteiten heeft elke activiteit een afbeelding. Deze hebben geen alt-attribuut. Daardoor lezen schermlezers bij deze afbeeldingen geen alternatief maar de bestandsnaam van de afbeelding (bijvoorbeeld "5f127a8f830b2066c09d9d920f0634cf.jpg"). Een leeg alt-attribuut (alt="") lost dit op, en markeert de afbeelding als decoratief.
Op https://suppord.nl/nieuws gebeurt hetzelfde met de verschillende berichten.

Bevinding 7: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x staat een grote afbeelding bovenaan de pagina. Deze heeft geen alt-attribuut. Daardoor lezen schermlezers bij deze afbeelding geen alternatief maar de bestandsnaam van de afbeelding (bijvoorbeeld "7c2bf0324fbe1ce355a661f2f28421f0.jpg"). Een leeg alt-attribuut (alt="") lost dit op, en markeert de afbeelding als decoratief. Hetzelfde geldt voor de pagina https://suppord.nl/activiteiten/inloop-%40-de-1m en https://suppord.nl/activiteiten/suppord-academy-1u.

Bevinding 8: Op https://suppord.nl/infographic staat een afbeelding met een leeg alt-attribuut terwijl deze niet decoratief is. Zorg ervoor dat de informatie op de plaat ook in leesbare tekst beschikbaar is. Zie ook SC 1.4.5.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 9: Op https://suppord.nl/over-suppord staat een grote dikke tekst "JONGERENWERK" en "JEUGDWERK". Deze teksten hebben alle karakteristieken van een kop-tekst, behalve dat deze niet opgemaakt zijn als koptekst in de code. Een <H2> zou in deze context gepast zijn.

Bevinding 10: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x staan label-elementen zoals "Deelnemer" en "Contactpersoon" die geen relatie hebben met een ander element. Hierdoor vervullen ze hun rol van label niet. Visueel zijn deze teksten bedoeld om onderscheid te maken tussen een deelnemer en diens contactpersoon. Maak gebruik van <fieldset> met een <legend> om de velden bij deze teksten te groeperen.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 11: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x zijn verplichte formuliervelden. Als dit formulier verzonden wordt met deze velden niet ingevuld, dan krijgen ze een rode rand. Dit is de enige manier waarop gecommuniceerd wordt dat deze velden ingevuld hadden moeten zijn. Zie ook SC 3.3.3.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 12: Op https://suppord.nl/ staan verschillende links die bestaan uit een hele grote foto met tekst zoals "Jongeren" en "Kids" (in de code genoemd: "photo-links"). Als je met de muis over deze afbeeldingen gaat verschijnt de tekst; bij een hoge resolutie is dit zwarte tekst op een wat gelige achtergrond. Bij een lage resolutie, bijvoorbeeld als je bij een breedte van 1280 pixels inzoomt tot 200% dan zijn de teksten geel op een achtergrond van zwart-witte foto's. In de witte delen van deze foto hebben de teksten een te laag contrast.Dit gebeurt bijvoorbeeld bij "Stichting leergeld" waar de achtergrond deels wit is, en te weinig contrasteert met de gele tekst. Dit komt ook voor op:

Bevinding 13: Op https://suppord.nl/404 is een link met de tekst "Klik hier". Deze is wit op een gele achtergrond. De contrastverhoudingvan deze link is 1.37:1. Dit is minder dan de vereiste 4.5:1 voor tekst op dit formaat.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 14: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scalable=no". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 15: Op pagina https://suppord.nl/infographic staat een grote afbeelding met veel tekst. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. Blinden kunnen deze tekst niet voor laten lezen door een screenreader. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 16: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan
kan op https://suppord.nl/sitemap het "contact blok" over de content van de pagina komen. Hierdoor ligt er zwarte tekst over zwarte tekst en wordt de pagina onleesbaar en onbruikbaar.

Bevinding 17: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan
zijn op https://suppord.nl/ de foto's van verschillende medewerkers verdwenen. Zorg dat bij elke schermresolutie alle informatie bereikbaar blijft.

Bevinding 18: Op https://suppord.nl/nieuws staat een uitgelicht nieuwsbericht met uitgebreide introductietekst. Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% verdwijnt deze informatie. Zorg dat bij elke schermresolutie alle informatie beschikbaar blijft.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 19: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x staat een formulier met 3 "checkboxes". Als deze actief zijn, dan is er een wit vinkje op een gele achtergrond. Deze heeft een contrast van 1.4:1. Dat is minder dan de vereiste 3.0:1.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bij een lage resolutie bij een schermbreedte van 1280% ingezoomd tot 200% de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium, is op pagina https://suppord.nl/over-suppord de tekst 'JONGERENWERK.' niet meer (goed) leesbaar omdat de letters uit het scherm lopen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 21: Op https://suppord.nl/ zijn verschillende knoppen niet bedienbaar met het toetsenbord. Dit gaat om de knop "menu", de knop om verder te scrollen en de portretten van medewerkers. Zorg dat alles wat met een muis is te bedienen ook met toetsenbord bereikbaar en bedienbaar is, door bijvoorbeeld de HTML-elementen te gebruiken die daarvoor bedoeld zijn, zoals het button-element.

Bevinding 22: Op https://suppord.nl/activiteiten wordt bij een lage resolutie de agenda niet direct getoond. De agenda is dan een uitklapbaar stuk content met de knop: "Bekijk de agenda". In de huidige implementatie is deze (en alle content die er in zit) niet met toetsenbord te bedienen. Zorg dat alles wat met een muis is te bedienen ook met toetsenbord bereikbaar en bedienbaar is, door bijvoorbeeld de hiervoor bedachte de HTML-elementen te gebruiken.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 23: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden 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.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 24: Op https://suppord.nl/activiteiten/inloop-%40-de-1m is het woord "spil" weggevallen in de titel; de titel luidt nu 'Activiteiten : Inloop @ de | Suppord'.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 25: De social-media-links bovenaan elke pagina hebben geen tekst-alternatief. Hierdoor hebben de links geen naam. Zorg dat elke link een duidelijk naam heeft. Zie ook SC 4.1.2.

Bevinding 26: Onderaan elke pagina bevindt zich een klikbare kaart. De link op deze kaart heeft geen naam. Het is daardoor niet duidelijk waar de link naartoe gaat. Zorg dat de link een duidelijke naam heeft. Zie ook SC 4.1.2.

Bevinding 27: Op https://suppord.nl/ betreft staan de portretten van de medewerkers; deze zijn met de muis klikbaar maar hebben geen naam. Maak gebruik van het HTML-element om hiervan een link te maken en geef de link een duidelijke naam. Zie ook SC 4.1.2.

Bevinding 28: Op https://suppord.nl/infographic heeft de grote afbeelding een leeg alt-attribuut in een link. Hierdoor heeft de link (in de code) geen duidelijk linkdoel. Geef de link een naam zodat elke bezoeker begrijpt waar de link naartoe gaat. Zie ook SC 4.1.2.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 29: Sub-pagina's zoals activiteiten en nieuwsberichten zijn niet te vinden via de sitemap. Hierdoor zijn ze niet op meerdere manieren te benaderen. Zorg dat er naast de sitemap nog een manier is om elke pagina te bereiken.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 30: Wanneer de social-media-knoppen op elke pagina focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.

Bevinding 31: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x is geen focus zichtbaar bij het formulier. Zowel de 3 checkboxes als de verstuur-knop hebben geen zichtbare focus. Zorg dat duidelijk is wanneer deze formulierelementen de focus hebben.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 32: Op elke pagina is de taalaanduiding van de hele pagina Engels ('en'). De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 33: Op pagina https://suppord.nl/activiteiten/oliebollen-toernooi-1x is een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een * zijn verplicht'. Bij sommige verplichte velden zoals het vinkje bij 'Ik ga akkoord' ontbreekt het sterretje.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 34: Op https://suppord.nl/activiteiten/oliebollen-toernooi-1x kan het formulier foutief ingevuld worden. Bij verzenden wordt dit gecontroleerd. Er wordt alleen een kleur gebruikt, maar nergens staat wat de bezoeker bij welk veld moet doen om het formulier goed te kunnen versturen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 35: De social-media-links bovenaan elke pagina hebben geen tekst-alternatief. Hierdoor hebben de links geen naam. Zorg dat elke link een duidelijk naam heeft. Zie ook SC 2.4.4.

Bevinding 36: Onderaan elke pagina bevindt zich een klikbare kaart. De link op deze kaart heeft geen naam. Het is daardoor niet duidelijk waar de link naartoe gaat. Zorg dat de link een duidelijke naam heeft. Zie ook SC 2.4.4.

Bevinding 37: Op https://suppord.nl/ betreft staan de portretten van de medewerkers; deze zijn met de muis klikbaar maar hebben geen naam. Maak gebruik van het HTML-element om hiervan een link te maken en geef de link een duidelijke naam. Zie ook SC 2.4.4.

Bevinding 38: Op elke pagina bevindt zich een knop 'Menu'. Voor hulpsoftware is het niet mogelijk om te bepalen dat dit een knop betreft. Hierdoor is de knop bijvoorbeeld niet met de stem te bedienen. Zorg dat de knop een juiste rol krijgt door het HTML-element te gebruiken die hiervoor bedoeld is.

Bevinding 39: Op https://suppord.nl/infographic heeft de grote afbeelding een leeg alt-attribuut in een link. Hierdoor heeft de link (in de code) geen duidelijk linkdoel. Geef de link een naam zodat elke bezoeker begrijpt waar de link naartoe gaat. Zie ook SC 2.4.4.

Bevinding 40: Bovenaan de pagina's is een "knop" met een pijl die naar beneden gericht is. Deze afbeelding heeft geen alternatieve tekst, en daarmee heeft de "knop" ook geen naam. Zorg dat de link in de alternatieve tekst vermeld staat zodat voor elke bezoeker duidelijk is wat de link doet.

Bevinding 41: Op https://suppord.nl/activiteiten is er bij de ingezoomde versie van de pagina een uitklapbaar stuk content: "Bekijk de agenda". Door de huidige implementatie heeft deze geen correcte rol (het communiceert een heading, maar is interactief) en wordt de status niet gemeld als de content is in- of uitgevouwen..

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-11-23 13:04:46 v2.4-011