Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Pleio

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Pleio
Datum 26 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op pleio.nl
  • Alle PDF's op pleio.nl
Buiten de scope van het onderzoek valt:
  • Nieuwsbrieven op het domein stichting-pleio.email-provider.eu, dit vergt 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: 26

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: Het logo van Pleio in het navigatiemenu, bijvoorbeeld op https://pleio.nl/page/view/11886439-de59-4190-b52e-528786a0ee53/toepassingen-23, heeft de alternatieve tekst 'Terug naar de homepagina'. Het logo dient tenminste de naam van de organisatie en de tekst 'Logo' te bevatten. Pas de tekst in het alt attribuut aan naar 'Logo Pleio, terug naar de hoofdpagina' of iets dergelijks.

Bevinding 2: Op pagina https://pleio.nl/page/view/11886439-de59-4190-b52e-528786a0ee53/toepassingen-23 staan organisatielogo's onder de kop 'Enkele deelnemers aan Pleio'. Visueel kan men zien welke specifieke organisaties dit zijn. De afbeelding heeft in het alt attribuut als alternatieve tekst 'logo's van de gemeenten ter illustratie' dit omschrijft niet wat er te zien is. Het is tevens een incorrecte omschrijving, daar niet alle organisaties gemeentes betreffen. Zorg dat de er een correcte alt tekst aanwezig is. Overweeg de afbeelding op te splitsen per individueel logo, of plaats een bijschrijft gekoppeld aan de afbeelding middels het fig-caption element.

Bevinding 3: Op pagina https://pleio.nl/news/view/f133fd31-fd28-450c-8e4b-a66ef0573aff/maak-kennis-met-onze-organisatie-in-onze-nieuwe-video staat een video in de banner bovenaan. De video heeft geen naam. Indien men met het toetsenbord navigeert wordt door schermleessoftware slechts 'Speel video af' voorgelezen, een tekst dat middels een aria-label op de betreffende button staat. Geef de video een toegankelijke naam.

Bevinding 4: Op nieuwspagina’s en blogpagina’s, bijvoorbeeld https://pleio.nl/news/view/f1a191e2-7876-431e-9cb9-1764fdabd9a6/pilotdeelnemers-gezocht-pleio-buurtplein wordt middels een oog en een getal visueel medegedeeld hoe vaak een pagina bezocht is. Omdat het icoon voor hulpsoftware is verborgen (aria-hidden=”true”), is deze informatie niet beschikbaar voor bezoekers die niet kunnen zien. Er is een aria-label met de tekst ‘126 keer bekeken’ toegevoegd aan het div-element waarin het icoon staat, maar dit kan niet worden voorgelezen omdat een aria-label niet functioneert op een div-element zonder rol. Los dit bijvoorbeeld op door het aria-hidden attribuut te verwijderen van de svg-afbeelding, en hier een alternatieve tekst aan toe te voegen in een title-attribuut als eerste child-element.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://pleio.nl/page/view/11886439-de59-4190-b52e-528786a0ee53/toepassingen-23 staan een visueel genummerde lijsten die niet als zodanig (ol) in HTML zijn opgemaakt, bijvoorbeeld onder de kop 'Sociaal intranet'. De gehele opsomming is ondergebracht in een enkele paragraph tag (p). Op deze wijze kan schermleessoftware de structuur van de lijst niet op de juiste manier interpreteren. Maak de lijst op met het ol- en li- element.

Bevinding 6: Op pagina https://pleio.nl/page/view/d2a3edca-d564-459d-b7bf-35fd18784c18/vraag-een-site-aan is er een onzichtbare kop op niveau 1 aanwezig ('vraag een site aan') alsmede de kop 'Aanmeldformulier op eigen site' op hetzelfde kopniveau. Een pagina dient slechts een enkele H1 kop te bevatten. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, etc.

Bevinding 7: Op pagina https://pleio.nl/blog/view/5091cb5c-7408-4230-98f7-bcd597937d9c/7-favoriete-nieuwe-functionaliteiten-die-pleio-ontwikkelde-in-2023 worden de eerste alinea en de subkoppen opgemaakt middels het strong element. Strong is bedoeld om nadruk te leggen op enkele woorden, en dient niet ter opmaak gebruikt te worden. Ook zijn hierdoor de subkoppen niet als zodanig herkenbaar voor bezoekers die schermleessoftware gebruiken. Gebruik voor de opmaak van de intro-tekst CSS, en maak de subkoppen op als koppen op het juiste kopniveau (bijvoorbeeld h2).

Bevinding 8: De PDF op pagina https://pleio.nl/file/download/8d3c42ea-8e97-41d0-a2a0-23110e118382/pleio-buurtplein.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Software kan daardoor bijvoorbeeld niet bepalen wat koppen zijn, de alternatieve tekst bij afbeeldingen bepalen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF codelaag zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 9: Advies: Op pagina https://pleio.nl/page/view/d2a3edca-d564-459d-b7bf-35fd18784c18/vraag-een-site-aan bevatten de verplichte formuliervelden zowel het attribuut required="required" als aria-required="false". Hier wordt alsnog door schermleessoftware aangekondigd dat het een verplicht veld betreft, daarom wordt dit niet op toegankelijkheid afgekeurd. Omdat het input-element een native HTML element is, volstaat het 'required' attribuut. Het aria-required attribuut kan daarom verwijderd worden.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://pleio.nl/ staan onder ‘Blijf op de hoogte’ formuliervelden. Het doel van velden zoals naam en e-mailadres moeten programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".

Bevinding 11: Op pagina https://pleio.nl/blog/view/c2ff24e5-51aa-49dc-9a5c-8387809cac82/nauwkeurig-en-betrouwbaar-samenwerken-met-workflow staat onderaan de knop ‘Gebruik e-mail’ dat een formulier uitklapt. Het doel van velden zoals naam en e-mailadres moeten programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 12: In de footer, bijvoorbeeld op pagina https://pleio.nl/page/view/aae1e0e7-6d70-41b5-aeb6-40d19577e4db/contact, is er sprake van lichtblauwe linkteksten (HEX #2279EE) op een khaki (HEX #FCEFDA) achtergrond. Dit levert een contrast van 3,6:1 op waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan.

Bevinding 13: Op pagina https://pleio.nl/page/view/4ef703cb-612a-45e0-a654-98cef117e56c/nieuwsbrieven staat onder de kop 'Meld je aan voor onze maandelijkse nieuwsbrief' tekst over een uitvergroot Pleio logo heen. De op plekken lichtblauwe achtergrond (HEX #4B8FF5) heeft met de witte tekst een contrast van 3,2:1 waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan.

Bevinding 14: Op pagina https://pleio.nl/page/view/b7d41c42-8720-4055-8e12-33bb1ea7202d/nieuw-over-ons staan blauwe linkteksten (HEX #0671F2) op een lichtgrijze achtergrond (HEX #F5F5F5). Hier is sprake van 4,1:1 kleurcontrast waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan. Soortgelijke problemen komen veelvuldig op de website voor, bijvoorbeeld op pagina https://pleio.nl/page/view/11886439-de59-4190-b52e-528786a0ee53/toepassingen-23.

Bevinding 15: De PDF op pagina https://pleio.nl/file/download/8d3c42ea-8e97-41d0-a2a0-23110e118382/pleio-buurtplein.pdf bevat contrastproblemen. Op de voorpagina is er bijvoorbeeld de lichtblauwe tekst ‘een pilot van stichting Pleio’ (HEX #55B4F4) op een crèmekleurige achtergrond (HEX #FEFBF6). Er is hier sprake van 2,2:1 contrast waar dit minimaal 3:1 behoort te zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://pleio.nl/ staat bij bij kop ‘Certificering van ISO 27001 en ISO 27701’ een afbeelding van ISO-keurmerken. De afbeelding is tevens een link naar de website van BrandCompliance. Doordat het element de attributen tabindex=”-1” en aria-hidden=”true” bevat, is deze link niet middels het toetsenbord bereikbaar. Maak dit tevens toegankelijk.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 17: Op de pagina https://pleio.nl/ wordt gebruikgemaakt van de videospeler van Vimeo onder de kop 'Dit is Pleio - een opensource platform voor jouw organisatie'. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de Vimeo video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'keyboard: false'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 18: Op pagina https://pleio.nl/page/view/4ef703cb-612a-45e0-a654-98cef117e56c/nieuwsbrieven#start-of-content kan men inschrijven voor de nieuwsbrief. Indien de focus staat op de 'Inschrijven' knop, is in sommige browsers (zoals Chrome) geen focusrand te zien. Hierdoor kunnen bezoekers niet zien waar de focus zich bevindt. Los dit op door een focusrand toe te voegen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 19: Op blogpagina’s, bijvoorbeeld op https://pleio.nl/blog/view/5091cb5c-7408-4230-98f7-bcd597937d9c/7-favoriete-nieuwe-functionaliteiten-die-pleio-ontwikkelde-in-2023 staat onderaan de knop ‘Gebruik e-mail’ dat een formulier uitklapt. De knop heeft de toegankelijke naam ‘Schrijf een reactie voor item '7 favoriete nieuwe functionaliteiten die Pleio ontwikkelde in 2023', toegevoegd middels een aria-label. De visuele tekst en de toegankelijke tekst komen niet overeen. Hierdoor kunnen gebruikers van spraaksoftware de knop niet inschakelen. Zorg dat tenminste de visuele tekst terugkomt in de toegankelijke tekst, het liefst vooraan.

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 20: De PDF op pagina https://pleio.nl/file/download/8d3c42ea-8e97-41d0-a2a0-23110e118382/pleio-buurtplein.pdf bevat de foutieve taalinstelling. Deze staat op Engels in plaats van Nederlands. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF, zodat schermleessoftware het correct kan voorlezen.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 21: Op pagina https://pleio.nl/ staat een video van Vimeo onder de kop ‘Dit is Pleio – een opensource platform voor jouw organisatie’. Het iframe heeft de Engelstalige titel ‘vimeo-player’ en de knoppen hebben tevens Engelstalige toegankelijke namen. Zorg dat alle functionaliteiten in het Nederlands zijn opgemaakt, gezien het een Nederlandstalige pagina betreft.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://pleio.nl/page/view/d2a3edca-d564-459d-b7bf-35fd18784c18/vraag-een-site-aan wordt medegedeeld dat een veld verplicht is, indien de bezoeker geen invoer heeft gedaan. Dat een veld verplicht is is een foutsuggestie zoals beschreven bij succescriterium 3.3.3, maar het maakt onvoldoende duidelijk wat er mis is gegaan (dat het veld niet of onjuist is ingevuld). Ook komt bij sommige velden de identificatie niet overeen met het visuele label. Bijvoorbeeld bij '5. Naam van de site*', waar de melding 'Het veld sitename is verplicht' leest. Los dit op door de tekst van de foutmeldingen aan te passen.

Bevinding 23: Op pagina https://pleio.nl/ staan onder ‘Blijf op de hoogte’ formuliervelden. Indien een veld, bijvoorbeeld ‘E-mailadres*’, niet wordt ingevuld, verschijnt er geen toegankelijke foutmelding. Indien het veld foutief wordt ingevuld verschijnt slechts een HTML5 foutmelding. Zorg voor een goed toegankelijk mechanisme dat door schermleessoftware herkend kan worden. Zie tevens SC 3.3.3.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 24: Op pagina https://pleio.nl/ staan onder ‘Blijf op de hoogte’ formuliervelden. Het formulierveld bevat een asterisk, echter wordt bij het formulier nergens uitgelegd dat dit betekent dat het veld verplicht is. Dit probleem doet zich meermalig op de website voor, bijvoorbeeld op https://pleio.nl/page/view/aae1e0e7-6d70-41b5-aeb6-40d19577e4db/contact en https://pleio.nl/page/view/4ef703cb-612a-45e0-a654-98cef117e56c/nieuwsbrieven.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://pleio.nl/ staan onder ‘Blijf op de hoogte’ formuliervelden. Indien een veld, bijvoorbeeld ‘E-mailadres*’, niet wordt ingevuld, verschijnt er geen toegankelijke foutmelding. Indien het veld foutief wordt ingevuld verschijnt slechts een HTML5 foutmelding. Zorg voor een goed toegankelijk mechanisme dat door schermleessoftware herkend kan worden. Zie tevens SC 3.3.1.

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 26: Indien men de website ingezoomd bekijkt, bijvoorbeeld pagina https://pleio.nl/, verschijnt er een hamburgermenu. Het is voor gebruikers van schermleessoftware niet duidelijk wanneer het menu ingevouwen of uitgevouwen is. Gebruik hier bijvoorbeeld aria-expanded om dit aan te geven.

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-01-30 07:57:57 v2.4-011