Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website eerstehulpbenjij.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website eerstehulpbenjij.nl
Datum 8 april 2025
Scope van de website Binnen de scope van het onderzoek valt:
  • De content van alle pagina's op eerstehulpbenjij.nl
  • De content van het formulier op eerstehulpbenjij.nl
  • Alle PDF's op eerstehulpbenjij.nl
Buiten de scope van het onderzoek valt:
  • De techniek van alle pagina's op eerstehulpbenjij.nl. Dit vereist een apart onderzoek.
  • Pagina's achter login. Dit vereist een apart onderzoek.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
    		•
    Conformiteitsdoel WCAG 2.1 niveau AA

    Uitgebreide toetsresultaten

    Aantal bevindingen: 21

    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: Op pagina https://eerstehulpbenjij.nl/ staan onder de kop 'Wees voorbereid' verschillende links met daarbij illustraties. Bijvoorbeeld 'Studentenhuis'. De illustratie heeft als alternatieve tekst 'EHBJ Bereid je studentenhuis voor'. Dit beschrijft niet wat op de afbeelding te zien is. Bij een decoratieve afbeelding is het niet nodig dat de afbeelding een alternatieve tekst heeft, maar als deze er is moet deze wel de afbeelding goed beschrijven. Een betere optie is om voor alle afbeeldingen die bij de links staan op dezelfde manier om te gaan met de alternatieve tekst. Omdat het gaat om decoratieve illustraties, zou de afbeelding bij de link 'Thuis' hierin het beste (meest toegankelijke) voorbeeld zijn, deze is voor hulpsoftware verborgen doormiddel van een leeg alt-attribuut.

    Bevinding 2: Op pagina https://eerstehulpbenjij.nl/verhalen/ staan blokken van links met daarin een afbeelding, koptekst en een label. Bijvoorbeeld 'Terugblik buurtbijeenkomst Den Ham'. Als linktekst wordt alleen de koptekst voorgelezen, maar de tekst van het label die op de afbeelding te zien is, is niet beschikbaar voor bezoekers die niet kunnen zien. Zorg dat deze ook kan worden voorgelezen door hulpsoftware zoals een screenreader. Ditzelfde komt voor op pagina's waar onderaan wordt verwezen naar 'Voorbeeldverhalen', zoals op pagina https://eerstehulpbenjij.nl/ en https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/.

    Bevinding 3: Op pagina https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/zorg-voor-een-noodpakket/ staat onder de kop 'Dit is ook handig' een afbeelding van de flyer 'Noodpakket'. Deze afbeelding heeft geen alternatieve tekst, maar is ook niet voor hulpsoftware verborgen. Daardoor kunnen bezoekers die niet kunnen zien en gebruik maken van hulpsoftware wel afleiden dat zich hier een afbeelding bevindt, maar niet wat hierop staat. De informatie die op de afbeelding staat is ook als flyer down te loaden in een PDF. Daarom kan de afbeelding die op de pagina staat een korte beschrijving als alternatieve tekst (bij het alt-attribuut bij het img-element), waarin beschreven wordt waar de toegankelijke versie van de informatie te vinden is.

    Bevinding 4: Op pagina https://eerstehulpbenjij.nl/wees-voorbereid/medisch-id-instellen/ staat onder de kop 'Medisch ID instellen op een iPhone' een afbeelding. Deze heeft geen alternatieve tekst. Daardoor is voor bezoekers die niet kunnen zien niet bekend welke informatie de afbeelding overbrengt. De afbeelding bevat meer tekst dan via alleen een alternatieve tekst te kunnen overbrengen. Daarom is het belangrijk de tekst op andere wijze op de pagina te plaatsen, en in de alternatieve tekst van de afbeelding een korte beschrijving toe te voegen en aan te geven waar de uitgeschreven tekst zich bevindt. Zie ook succescriterium 1.4.5.

    Bevinding 5: Op sommige pagina's (zoals bijvoorbeeld https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/zorg-voor-een-noodpakket/) kan in het menu de taal worden ingesteld. Visueel is hier af te leiden wat de huidige taalinstelling is, doordat een icoon met een vlag te zien is. Voor bezoekers die niet kunnen zien is deze informatie niet beschikbaar. De afbeelding (img) van de vlag heeft wel een alternatieve tekst, maar deze wordt overschreven door het aria-labelledby attribuut dat op de button staat, deze verwijst naar de tekst binnen het span-element; 'Taal'. Zorg dat ook de alternatieve tekst van de afbeelding wordt voorgelezen.

    Bevinding 6: Op pagina https://eerstehulpbenjij.nl/noodsituaties/extreem-weer/ staat onder de kop 'Onweer' een infographic. Deze heeft een goede alternatieve tekst, waarin wordt verwezen naar de uitgeschreven tekst. Onder de infographic staat de tekst ook daadwerkelijk uitgeschreven, wat een goede oplossing is. Echter ontbreekt hierbij informatie, waardoor niet alles wat op de afbeelding te zien is beschikbaar is voor bezoekers die de afbeelding niet kunnen aflezen. Bij het eerste punt mist bijvoorbeeld de tekst 'Check de weersverwachting' en bij het tweede 'Hoe ver weg is het onweer?'. Vul de uitgeschreven tekst aan om dit op te lossen. Een soortgelijk probleem komt voor bij de infographic onder de kop 'Mist', waarbij op de afbeelding meer tekst is te zien dan terug komt in de uitgeschreven tekst. Bij de andere infographics op deze pagina komt hetzelfde voor.

    Bevinding 7: Advies: Op pagina https://eerstehulpbenjij.nl/noodsituaties/aardbeving/ staat een afbeelding met als alternatieve tekst 'Foto: brandweerlieden verlenen hulp na aardbeving'. Dit wordt niet op toegankelijkheid afgekeurd, omdat dit voldoende beschrijft wat op de afbeelding te zien is. Toch kan de tekst iets worden ingekort, het is namelijk niet nodig om het woord 'Foto' hierin te laten staan. Het element wordt door hulpsoftware al herkend en voorgelezen als afbeelding. Dit komt bij meerdere afbeeldingen voor op de website.

    1.2 Op tijd gebaseerde media

    1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

    Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

    Uitkomst: Onvoldoende

    Bevinding 8: Op pagina https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/zorg-voor-een-noodpakket/ staat onder de kop 'Bekijk ook de video over het noodpakket' een video. Hierin komt geen gesproken woord voor, maar komt alleen informatie met voorwerpen en tekst in beeld. Hierdoor is de inhoud van de video niet beschikbaar voor bezoekers die bijvoorbeeld blind zijn. Zorg ervoor dat er een alternatief beschikbaar is. Als alle informatie die in de video voorkomt al elders op de pagina beschreven wordt, noteer dit dan bij de video.

    1.3 Aanpasbaar

    1.3.1 Info en relaties (Niveau A)

    Informatie over succescriterium 1.3.1 Info en relaties

    Uitkomst: Onvoldoende

    Bevinding 9: Pagina https://eerstehulpbenjij.nl/?s=noodpakket bevat geen koppenstructuur. Dit komt doordat de in de HTML aanwezige header elementen niet ingevuld zijn of onzichtbaar gemaakt zijn voor hulpsoftware. Voor bezoekers die niet kunnen zien en gebruik maken van hulpsoftware zoals een screenreader, is het handig om via de koppenstructuur overzicht te krijgen over de pagina. Ook kunnen zij deze gebruiken om snel over de pagina te navigeren. Zorg voor een goede koppenstructuur, die begint met een kop op kopniveau h1 en geen kopniveau's overslaat. Als er kopniveaus worden overgeslagen wordt dit niet op toegankelijkheid afgekeurd (zoals bij het geheel ontbreken van koppen wel gebeurt), maar het advies om te zorgen dat de koppenstructuur goed loopt. Er zijn een aantal pagina's waarop dit verbeterd kan worden. Op onder andere pagina https://eerstehulpbenjij.nl/ en https://eerstehulpbenjij.nl/doe-mee/activiteit/ wordt bijvoorbeeld een h3-kop overgeslagen, en op pagina https://eerstehulpbenjij.nl/verhalen/ zowel een h2- als een h3-kop.

    Bevinding 10: De PDF https://iklaadaccuraat.nl/wp-content/uploads/2023/05/10-tips-veilig-laden.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen door hulpsoftware. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, wat de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Ditzelfde geldt voor de PDF https://eerstehulpbenjij.nl/app/uploads/2023/04/EHBJ019_Checklist_A5.pdf.

    1.4 Onderscheidbaar

    1.4.3 Contrast (minimum) (Niveau AA)

    Informatie over succescriterium 1.4.3 Contrast (minimum)

    Uitkomst: Onvoldoende

    Bevinding 11: Op pagina https://eerstehulpbenjij.nl/doe-mee/activiteit/ staan onder 'Voorbeeldverhalen' blokken met daarin een afbeelding met een witte tekst hierop. Bijvoorbeeld 'Als je weet wat je kunt doen bescherm je jezelf én anderen'. Omdat de witte tekst op een afbeelding met hierin verschillende kleuren staat, ontstaat op verschillende punten een contrastprobleem. Bijvoorbeeld waar de witte tekst op een lichtgrijze (HEX #DADADA) achtergrond valt is de contrastverhouding 1,4:1. Zorg dat de tekst en achtergrond overal een contrastverhouding hebben van minimaal 3:1. Een soortgelijk probeem komt voor bij de verhalen op pagina https://eerstehulpbenjij.nl/verhalen/ en onder andere https://eerstehulpbenjij.nl/noodsituaties/uitval-stroom-en-gas/.

    1.4.5 Afbeeldingen van tekst (Niveau AA)

    Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

    Uitkomst: Onvoldoende

    Bevinding 12: Op pagina https://eerstehulpbenjij.nl/wees-voorbereid/medisch-id-instellen/ staat onder de kop 'Medisch ID instellen op een iPhone' een afbeelding. De tekst die op deze afbeelding te zien is, is niet op andere wijze beschikbaar op de pagina. Daarom is de informatie niet beschikbaar voor bezoekers die blind zijn of slechtziend (waarbij het nodig is de styling van de tekst zelf in te kunnen stellen). Plaats de tekst als gewone tekst op de pagina, en geef de afbeelding een alternatieve tekst met een korte beschrijving en geef hierin aan waar de uitgeschreven tekst zich bevindt. Zie ook succescriterium 1.1.1.

    1.4.11 Contrast van niet-tekstuele content (Niveau AA)

    Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

    Uitkomst: Voldoende

    Bevinding 13: Advies: Op pagina https://eerstehulpbenjij.nl/ staat onder de kop 'Eerste hulp ben jij' een link naar YouTube. Er staat een witgekleurde afspeel-icoon op een gele (HEX #FFB600) achtergrond, hierbij is het contrast te laag. De contrastverhouding is 1,7:1 waar deze minimaal 3:0 moet zijn. Dit wordt niet op toegankelijkheid afgekeurd, omdat de bijbehorende tekst ook voldoende duidelijk maakt dat het gaat om een link naar YouTube, het icoon zou hiermee als decoratief kunnen worden gezien. Mogelijk zou het duidelijker zijn om voor een andere kleur te kiezen, of bijvoorbeeld het icoon een zwarte rand te geven.

    2. Bedienbaar

    2.1 Toetsenbordtoegankelijk

    2.1.4 Enkel teken sneltoets (Niveau A)

    Informatie over succescriterium 2.1.4 Enkel teken sneltoets

    Uitkomst: Onvoldoende

    Bevinding 14: Op pagina https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/zorg-voor-een-noodpakket/ wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van hulpsoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met hulpsoftware hun computer te bedienen. Op dit moment werkt de oplossing die we normaalgesproken zouden adviseren ('disablekb=1' toevoegen aan de URL) niet goed. De normale bediening gaat bij deze oplossing goed, maar zodra je instellingen wil aanpassen (zoals afspeelsnelheid) werkt dit niet via het toetsenbord. Daarom is een YouTube-videospeler (momenteel) niet goed toetsenbordtoegankelijk. Daarom adviseren we, tot dit probleem is opgelost, om andere videospeler te gebruiken.

    2.4.2 Paginatitel (Niveau A)

    Informatie over succescriterium 2.4.2 Paginatitel

    Uitkomst: Onvoldoende

    Bevinding 15: De PDF https://iklaadaccuraat.nl/wp-content/uploads/2023/05/10-tips-veilig-laden.pdf is niet gecodeerd (van tags voorzien) heeft geen titel. Voeg deze toe in de bestandseigenschappen, en zorg ervoor dat bij het openen niet de bestandsnaam maar de documenttitel wordt getoond. Ditzelfde geldt voor de PDF https://eerstehulpbenjij.nl/app/uploads/2023/04/EHBJ019_Checklist_A5.pdf.

    Informatie over succescriterium 2.4.4 Linkdoel (in context)

    Uitkomst: Onvoldoende

    Bevinding 16: Op pagina https://eerstehulpbenjij.nl/verhalen/ staan blokken met links naar verhalen. Hieronder staat de link 'Laad meer'. Omdat deze link visueel onder de verhalen staat, is af te leiden dat hiermee meer verhalen geladen kunnen worden. Voor bezoekers die niet kunnen zien of via hulpsoftware navigeren via een lijst met links, valt deze context weg. Dan is het linkdoel onvoldoende beschreven. Los dit bijvoorbeeld op door de tekst aan te vullen, bijvoorbeeld 'Laad meer verhalen'. Dit hoeft niet op de pagina zichtbaar te zijn.

    Bevinding 17: Op meerdere pagina's, bijvoorbeeld https://eerstehulpbenjij.nl/noodsituaties/uitval-stroom-en-gas/, is onderaan de kop 'Voorbeeldverhalen' te vinden. Hieronder staan een aantal blokken met links, en daaronder de link 'Bekijk alles'. Voor bezoekers die via hulpsoftware een lijst van links opvragen om op die manier te navigeren, geeft deze tekst onvoldoende informatie over het linkdoel. Los dit bijvoorbeeld op door de tekst aan te passen naar 'Bekijk alle Voorbeeldverhalen'.

    Bevinding 18: Advies: Op pagina https://eerstehulpbenjij.nl/?s=noodpakket zijn de zoekresultaten te zien. Deze bevatten een koptekst, een URL en de tekst 'Lees Voor'. Dit wordt niet afgekeurd op toegankelijkheid, omdat dit het linkdoel goed duidelijk maakt. Toch kan dit een erg lange linktekst opleveren. De navigatie over de pagina verloopt efficiënter als linkteksten niet te lang zijn. Daarom zou het beter zijn om deze in te korten. Bijvoorbeeld door deze alleen uit de koptekst te laten bestaan, en het klikbare gebied van de link via CSS of JavaScript groter te maken. Een soortgelijk probleem komt voor op pagina https://eerstehulpbenjij.nl/wees-voorbereid/bereid-je-thuis-voor/, bij de links onder de kop 'Bereid je voor met deze checklist'.

    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 19: In de PDF https://iklaadaccuraat.nl/wp-content/uploads/2023/05/10-tips-veilig-laden.pdf is geen taal ingesteld in de bestandseigenschappen. Hierdoor kan hulpsoftware zoals een screenreader de content niet met de juiste uitspraak voorlezen. De taal in het document is Nederlands, zorg er daarom voor dat de taal wordt ingesteld op Nederlands.

    3.3 Assistentie bij invoer

    3.3.1 Foutidentificatie (Niveau A)

    Informatie over succescriterium 3.3.1 Foutidentificatie

    Uitkomst: Onvoldoende

    Bevinding 20: Op pagina https://eerstehulpbenjij.nl/contact/ staat een formulier met daarin twee verplichte velden (Naam en E-mailadres). Als deze niet worden ingevuld en het formulier wordt verzonden, verschijnen foutmeldingen met de tekst 'Het veld is verplicht'. Deze tekst levert een foutsuggestie zoals beschreven bij succescriterium 3.3.3, maar het levert geen goede foutidentificatie. Een goede foutidentificatie beschrijft welke fout is gemaakt en in welk veld dit is gebeurd. Pas de tekst aan om dit op te lossen. Een soortgelijk probleem komt voor op pagina https://eerstehulpbenjij.nl/formulier-buurtbijeenkomst/.

    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 21: Mogelijk vereist deze bevinding een technische oplossing: Op pagina https://eerstehulpbenjij.nl/verhalen/ kunnen onder de kop 'Verhalen' filters worden ingesteld. Dit gaat via de lijst-items zoals 'Begeleiding'. Deze elementen zijn niet op correcte wijze opgemaakt, waardoor hulpsoftware de rol en functionaliteit niet goed kan interpreteren. Dit komt doordat dit is opgemaakt als list-items waaraan aria-role="button" en aria-pressed="false" is toegevoegd. Een oplossing zou zijn om dit de elementen op te maken als knoppen met het button-element.

    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: 2025-05-12 13:58:28 v2.4-011