Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website Open source Pleio

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Open source Pleio
Datum 19 juli 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De content op alle pagina's van het domein opensource.pleio.nl.
  • Alle PDF's op het domein opensource.pleio.nl.
Buiten de scope van het onderzoek valt:
  • De techniek op het domein opensource.pleio.nl. Dit is onderzocht bij het onderzoek toegankelijkheidsrapport.swink.nl/pleio/.
  • 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: 28

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 onder andere pagina https://opensource.pleio.nl/ staat het logo van Open source in de header. Het img-element heeft via het alt-attribuut de alternatieve tekst 'Home' gekregen. Dit omschrijft wel het linkdoel, want de afbeelding is ook opgemaakt als link, maar omschrijft niet wat er op de afbeelding te zien is. Geef het img-element de alternatieve tekst 'Open source logo, ga naar home' of iets soortgelijks. Zorg er voor dat ministens de organisatienaam en het woord 'logo' in de alternatieve tekst voorkomen.

Bevinding 2: In de tekstbewerker op pagina https://opensource.pleio.nl/groups/view/75fc54b2-f4bf-4e67-a931-1d5b5b4c038a/open-source-community kunnen bezoekers een venster openen via de knop 'Sneltoetsen'. In dit venster wordt aangegeven met welke sneltoetsen de tekstbewerker kan worden bediend. Deze toetsenbordcombinaties worden aangegeven met zowel uitgeschreven tekst als iconen. De iconen worden niet correct voorgelezen door screenreaders omdat deze geen alternatieve tekst hebben. Zorg ervoor dat deze iconen een alternatieve tekst krijgen, of schrijf de naam van de knoppen uit in plaats van een icoon te gebruiken.

Bevinding 3: Op pagina https://opensource.pleio.nl/page/view/a8934d37-c73c-4436-84f9-928e3628b9b9/open-source-strategie staat een afbeelding van tekst (zie ook succescriterium 1.4.5). Deze afbeelding heeft geen alternatieve tekst, hierdoor weten bezoekers die het scherm niet kunnen zien niet wat op de afbeelding staat. Zorg ervoor dat de afbeelding een alternatieve tekst krijgt, of plaats de tekst op de afbeelding als gewone tekst op de pagina.

Bevinding 4: In de PDF op pagina https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf staan verschillende decoratieve afbeeldingen en figuren in de codelaag. Deze afbeeldingen hebben geen alternatieve tekst. Als een afbeelding in de codelaag wordt gezet met behulp van een Figure-tag wordt deze aangegeven door hulpsoftware en heeft het een alternatieve tekst nodig. Decoratieve afbeeldingen (zoals de microfoon op pagina 2) mogen verborgen worden voor hulpsoftware door hiervan een artefact te maken. Verwijder de decoratieve afbeeldingen uit de codelaag en maak hier artefacten van.

Bevinding 5: In de PDF op pagina https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf staat op pagina 1 het logo van Berenschot en op pagina 17 een grafiek. Dit zijn informatieve afbeeldingen die geen alternatieve tekst hebben. Het logo van Berenschot is zelfs opgemaakt als artefact en verborgen voor hulpsoftware. Zorg ervoor dat deze informatieve afbeeldingen met een Figure-tag in de codelaag komen te staan en een alternatieve tekst krijgen.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit staat de video '#1: Jouw waarden en open source'. In deze video wordt visuele informatie getoond die niet terugkomt in het audiospoor, zoals de naam van de presenator (rond 0:15) en de waarden van de overheid (rond 0:30). Deze informatie is nu niet beschikbaar voor bezoekers met slecht zicht. Zorg er daarom dat er een media-alternatief voor de video is, zoals een transcript, of zorg ervoor dat alle visuele informatie voorkomt in het audiospoor van de video (om ook gelijk te voldoen aan succescriterium 1.2.5).
Een soortgelijk probleem komt ook voor bij de andere video's op deze pagina.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit staat de video '#1: Jouw waarden en open source'. In deze video worden teksten in beeld getoond. Sommige van deze teksten komen terug in het audiospoor, zoals namen van mensen die geïnterviewd worden, maar andere teksten worden niet voorgelezen, zoals de naam van de presentator, teksten rond 0:30 of de teksten en logo's aan het eind van de video. Hierdoor is deze informatie niet beschikbaar voor mensen met slecht zicht. Om deze informatie voor iedereen beschikbaar te maken moet het ook voorkomen in het audiospoor. Dat kan bijvoorbeeld door audiodescriptie toe te voegen aan de video, of door de teksten door een voice-over (of de presentator) uit te laten spreken.
Een soortgelijk probleem komt ook voor bij de andere video's op deze pagina.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit is het strong-element gebruikt om de introductietekst dikgedrukt mee te maken. Het strong-element is niet geschikt voor de visuele opmaak van tekst. Het heeft namelijk een semantische waarde; het strong-element geeft aan hulpsoftware aan dat tekst belangrijk is. Hierdoor wordt deze tekst bijvoorbeeld anders uitgesproken door voorleessoftware. Verwijder het strong-element van de introductietekst en maak deze tekst op een andere manier visueel op, bijvoorbeeld door CSS te gebruiken.
Dit komt ook voor op andere pagina's, zoals https://opensource.pleio.nl/page/view/7cd69754-e97a-459f-9d53-eea1174da327/blog-open-source-strategie en https://opensource.pleio.nl/page/view/9382df76-2825-4bce-83b0-bef9ed86e5fc/betrokken-organisaties.

Bevinding 9: Op pagina https://opensource.pleio.nl/page/view/9382df76-2825-4bce-83b0-bef9ed86e5fc/betrokken-organisaties zijn sommige koppen opgemaakt met een kop-element én een strong-element, bijvoorbeeld de kop 'Europese partners'. Dit klopt semantisch niet omdat een kop-element al aangeeft dat een tekst belangrijker is dan omliggende tekst, hierdoor is het strong-element overbodig. Verwijder het strong-element van de koppen.
Dit gebeurt ook bij koppen op pagina https://opensource.pleio.nl/page/view/4c799d1f-ff95-464d-acb9-04b50d5a4e15/toegankelijkheidsverklaring-open-source, https://opensource.pleio.nl/page/view/397ebb00-fef0-4dc4-b32f-124d82b169d7/kabinetsbeleid-open-tenzij en https://opensource.pleio.nl/page/view/295885ab-4d20-40fd-ad88-10d68f057271/inkoop.

Bevinding 10: Op pagina https://opensource.pleio.nl/page/view/a8934d37-c73c-4436-84f9-928e3628b9b9/open-source-strategie staat onder de kop 'Implementatieplan' een opsomming die in de code alleen is opgemaakt met p-elementen. Hierdoor kan hulpsoftware niet aangeven dat hier een opsomming staat. Zorg ervoor dat deze lijst in de code met een ol- en li-elementen wordt opgemaakt.

Bevinding 11: Op pagina https://opensource.pleio.nl/page/view/4c799d1f-ff95-464d-acb9-04b50d5a4e15/toegankelijkheidsverklaring-open-source is de link 'https://opensource.pleio.nl' opgemaakt als een lijst met maar één item. Lijsten zijn altijd een opsomming van meerdere items en kunnen daarom niet maar één item bevatten. Dit kan namelijk verwarrend zijn voor sommige bezoekers die gebruikmaken van hulpsoftware. Lost dit probleem op door deze link niet op te maken als een lijst.

Bevinding 12: Op pagina https://opensource.pleio.nl/page/view/397ebb00-fef0-4dc4-b32f-124d82b169d7/kabinetsbeleid-open-tenzij is de blockquote ook opgemaakt met het em-element, waarschijnlijk om de tekst visueel schuingedrukt mee te maken. Het em-element heeft een eigen semantische waarde; het geeft aan hulpsoftware aan dat de tekst belangrijker is dan omliggende tekst en met nadruk moet worden uitgesproken. Daarom mag het alleen worden gebruikt om aan te geven dat tekst belangrijk is en niet om deze tekst visueel schuingedrukt te maken. Verwijder daarom het em-element van deze tekst en maak het op een andere manier schuingedrukt, bijvoorbeeld door CSS te gebruiken.

Bevinding 13: In de PDF https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf staat op pagina 6 een tabel. Deze tabel is (mogelijk) niet correct opgemaakt. De eerste cel van de tabel lijkt een kop voor de eerste rij en eerste kolom te bevatten, maar is opgemaakt in de codelaag als één cel. Maak de tabel anders op zodat duidelijk is wat een kop voor een rij is en wat een kolomkop is. Eén cel kan geen twee koppen bevatten.
In deze tabel is het bereik van de kopcellen ook niet aangegeven. Zorg ervoor dat het bereik van de kopcellen wordt aangeven in de tabeleigenschappen.

Bevinding 14: Advies: Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit wordt een h1 kop opgevolgd door een h4 kop en een h3 kop wordt opgevolgd door een h5. Dit is geen logisch lopende koppenstructuur. Een goede koppenstructuur is beter voor de toegankelijkheid van een pagina. Sommige bezoekers die gebruikmaken van voorleessoftware kunnen namelijk navigeren over een pagina aan de hand van de koppen, dan is het handig als de koppenstructuur logisch afloopt. Een goede koppenstructuur begint bij een h1 voor de titel van de pagina, h2 koppen voor de koppen, h3 koppen voor de tussenkoppen, ect.
Er zijn ook andere pagina's met een niet logisch lopende koppenstructuur, zoals pagina https://opensource.pleio.nl/blog/view/43b9ce17-9ea5-44d6-8fba-755d26e0c2c6/groot-actueel-en-oude-code-doen-zegt-woo-verzoeker-van-digid en https://opensource.pleio.nl/page/view/9382df76-2825-4bce-83b0-bef9ed86e5fc/betrokken-organisaties.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 15: De PDF op pagina https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf heeft een codelaag. Niet overal komt de volgorde van tags in deze codelaag overeen met de leesvolgorde van het document. Hierdoor wordt het document niet correct aangegeven door hulpsoftware. Zo wordt bijvoorbeeld op pagina 11 het doel pas na de lijst aangegeven. Zorg ervoor dat de volgorde van tags in de codelaag overeenkomt met de leesvolgorde.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://opensource.pleio.nl/page/view/397ebb00-fef0-4dc4-b32f-124d82b169d7/kabinetsbeleid-open-tenzij is als menu-item ‘Algemene informatie’ wordt opengevouwen aan de paarse (HEX #42145F) tekstkleur te zien welk submenu-item de huidige pagina betreft. De contrastverhouding met de zwarte tekst van de niet-actieve submenu-items is 1,5:1. Zorg ervoor dat er naast kleur een andere manier is waarop bezoekers de huidige pagina kunnen herkennen, bijvoorbeeld door de link te onderstrepen. Kleur mag wel gebruikt worden als het voldoende contrast heeft met de andere links in het menu. De contratsverhouding moet dan 3:1 zijn.
Hetzelfde op pagina https://opensource.pleio.nl/groups/view/75fc54b2-f4bf-4e67-a931-1d5b5b4c038a/open-source-community/discussion bij tabblad ‘Discussies’ in uitvouwbare lijst ‘Sortering’.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 17: In de video's op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit komen witte teksten voor op een gele achtergrond (HEX #FCB115). Deze kleurencombinatie heeft onvoldoende contrast. De contratsverhouding is hier 1,8:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 18: In de PDF op pagina https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf staat op pagina 1 oranje tekst (HEX #D18B5A) op een blauwe achtergrond (HEX #37506D). Deze kleurencombinatie heeft onvoldoende contrast, hierdoor is de tekst mogelijk niet goed leesbaar voor iedereen. De contrastverhouding hier is 2,9:1, waar dat minimaal 4,5:1 moet zijn.
Ook heeft deze oranje tekst onvoldoende contrast op een witte achtergrond. Dan is de contrastverhouding 2,7:1, waar dat ook minimaal 4,5:1 moet zijn.

Bevinding 19: In de PDF https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf staat op pagina 9 witte tekst op een blauwe achtergrond (HEX #41B6E6), wat onvoldoende contrast geeft. De contrastverhouding is hier 2,3:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt ook voor op pagina 19.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende

Bevinding 20: Advies: Op pagina https://opensource.pleio.nl/page/view/a8934d37-c73c-4436-84f9-928e3628b9b9/open-source-strategie staat een afbeelding van tekst. De tekst op de afbeelding komt verder niet voor op de pagina. Wel wordt er gelinkt naar een pagina waarop een PDF te downloaden is, in die PDF staat meer informatie over het afwegingskader. De PDF waarin deze informatie staat is toegankelijk en is op een toegankelijke manier te bereiken. Toch zou het handiger zijn voor bezoekers die het nodig hebben als de informatie op de afbeelding ook voorkomt op dezelfde pagina als waarop de afbeelding staat. Het advies is daarom om de stappen die op de afbeelding staat als tekst op de pagina te plaatsen.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 21: De PDF op pagina https://opensource.pleio.nl/file/download/d2e058cf-ca37-4771-9694-338e8921a240/presentatie-webinar-open-source-strategie.pdf heeft geen documenttitel. Een documenttitel is een belangrijk navigatiemiddel dat aangeeft waar het document over gaat. Zorg ervoor dat de PDF een beschrijvende documenttitel krijgt in de documenteigenschappen. Zorg er hierbij ook voor dat de documenttitel wordt getoond bij openen en niet de bestandsnaam (dit kan worden ingesteld onder 'Weergave bij openen' in de documenteigenschappen).

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 22: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://opensource.pleio.nl/page/view/daae6ff4-01ef-45ee-a8b1-201e4ac5f44f/toolbox-2022 staat meerdere keren de link 'Lees meer'. Uit de context van deze links kan het linkdoel niet worden bepaald. Dat is verwarrend voor bijvoorbeeld gebruikers van screenreaders. Zorg ervoor dat het linkdoel van deze link te bepalen is aan de linktekst of de context van de link. Een mogelijk oplossing is om de linktekst aan te vullen met de pagina waar de link naar verwijst. Dit kan bijvoorbeeld door de visuele linktekst aan te passen, ook mag alleen de toegankelijke naam van de links worden aangepast. Dat kan bijvoorbeeld door een aria-label te gebruiken op het a-element en hiermee de toegankelijke naam te vervangen. Let wel op dat het visuele label van een link altijd voor moet komen in de toegankelijke naam.

Bevinding 23: Advies: Op pagina https://opensource.pleio.nl/page/view/7cd69754-e97a-459f-9d53-eea1174da327/blog-open-source-strategie staan meerdere keren links met de linktekst 'het verslag' of 'verslag'. Uit de omliggende tekst van deze links kan worden afgeleid waar de links naar verwijzen. Toch zou het beter zijn als de linkteksten specifiek vermelden naar welke verslagen de links verwijzen. Dit kan bijvoorbeeld worden gedaan door de naam van het verslag toe te voegen aan de linktekst. Dit kan bijvoorbeeld ook worden gedaan bij de link 'Bekijk de presentatie'.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 24: Deze bevinding vereist mogelijk een technische oplossing:
Als bezoekers op pagina https://opensource.pleio.nl/groups/view/75fc54b2-f4bf-4e67-a931-1d5b5b4c038a/open-source-community op een update willen reageren, zien zij de knop 'Schrijf een reactie'. De toegankelijke naam van deze knop is 'Reageer op item ''"'. Omdat het visuele label van de knop niet voorkomt in de toegankelijke naam, is de knop mogelijk moeilijk te bedienen met spraakgestuurde bediening. Zorg ervoor dat het visuele label altijd voorkomt in de toegankelijke naam van een knop, het liefst vooraan. Dit kan bijvoorbeeld door het aria-label op het button-element aan te passen.
Deze knop komt op meerdere plekken voor op de website.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 25: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://opensource.pleio.nl/events/view/9b8e112c-b6fc-4fce-b0fa-88f270da2d0a/lf-energy-summit staat een Engelse tekst waarop geen taalwissel is aangegeven. De taalaanduiding van de pagina in Nederlands, wat goed is want de meeste content op de pagina is in het Nederlands, maar dit zorgt ervoor dat de Engelse tekst met een Nederlandse uitspraak wordt voorgelezen door hulpsoftware. Zorg er daarom voor dat er gebruik wordt gemaakt van een taalwissel op deze tekst, dit kan door gebruik te maken van een lang-attribuut op deze tekst. De tekst mag ook worden vertaald naar het Nederlands.

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: De bevinding vereist mogelijk een technische oplossing:
Wanneer bezoekers inzoomen op een pagina, bijvoorbeeld https://opensource.pleio.nl/, verdwijnt het navigatiemenu achter een knop. Wanneer deze knop wordt uitgeklapt zijn er twee uitklapbare menu-items zichtbaar; 'algemene informatie' en 'Actualiteit'. Er is voor hulpsoftware geen informatie beschikbaar dat deze twee knoppen uitklapbaar zijn. Wanneer de knoppen zijn uitgeklapt wordt deze informatie ook niet doorgegeven aan hulpsoftware. Maak daarom gebruik van het aria-expanded attribuut op deze knoppen.

Bevinding 27: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit staan meerdere iframe-elementen. Deze iframes hebben geen toegankelijke naam. Zorg ervoor dat deze iframes een toegankelijke naam krijgen, bijvoorbeeld de titel van de video, door gebruik te maken van het title-attribuut op het iframe-element.

Bevinding 28: Deze bevinding vereist mogelijk een technische oplossing:
Op pagina https://opensource.pleio.nl/news/view/2407ce3d-2a93-4a99-acab-1841eb0e05ef/bekijk-de-online-videoreeks-open-source-van-ambitie-naar-realiteit staan meerdere iframe-elementen. In de HTML code staan onder elke iframe-element een button-element. Deze button-elementen hebben geen toegankelijke naam, hierdoor weten gebruikers van hulpsoftware niet waar deze knoppen voor zijn. Zorg ervoor dat deze knoppen toegankelijke namen krijgen, bijvoorbeeld door gebruik te maken van een aria-label. Of verwijder de button-elementen, want zij lijken geen functie te hebben op de pagina.

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-10-27 00:29:05 v2.4-011