Toegankelijkheidsonderzoek

Issues:
Deelonderzoek content NL Design System

(Alleen de bevindingen)

Scope van de evaluatie

Naam website NL Design System
Scope van de website
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 27

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: De afbeelding van de formulierenreis op pagina designsystem.gebruikercentraal.nl/terugkoppeling-werksessie-… (klein) heeft als alternatieve tekst 'Formulierenreis NLDS'. Deze tekst beschrijft de afbeelding niet (goed), omdat het op deze specifieke afbeelding gaat om stap 1 van de formulierenreis. Op onder andere pagina designsystem.gebruikercentraal.nl/meetups/ staat deze afbeelding ook en heeft de afbeelding wel een beschrijvende naam: 'Formulierenreis met als eerste stap: vormgeving en structuur'.

Bevinding 2: Op pagina designsystem.gebruikercentraal.nl/terugkoppeling-werksessie-… staan twee links, één naar een vorig blog en één naar een volgend blog. De pijliconen geven aan of het om de vorige of de volgende blog gaan. De iconen hebben geen alternatieve tekst, dus deze informatie wordt niet doorgegeven aan screenreadergebruikers.

Bevinding 3: De fotoheader van de oude brievenbus op pagina designsystem.gebruikercentraal.nl/nieuwsbrieven/ is decoratief, de alt-tag moet hier dan ook leeggelaten worden.

Bevinding 4: Op pagina designsystem.gebruikercentraal.nl/jouw-project-inrichten-op-… staan meerdere afbeeldingen met tekst, namelijk enkele code-regels die in de tekst behandeld wordt. De alt-tekst is onvolledig, want niet de volledige code wordt beschreven. Daarnaast is dit een afbeelding van tekst. Lees verder bij SC 1.4.5.

Bevinding 5: De afbeeldingen in de pdf designsystem.gebruikercentraal.nl/wp-content/uploads/sites/… hebben geen tekstalternatief tekst en zijn ook niet aangemerkt als decoratief door er een artefact van te maken. Zie ook 1.3.1 over gecodeerde pdf's.

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: Niet aanwezig

Bevinding 6: Niet aanwezig

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 7: Niet aanwezig

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

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

Uitkomst: Niet aanwezig

Bevinding 8: Niet aanwezig

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig

Bevinding 9: Niet aanwezig

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 10: Niet aanwezig

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 11: Op pagina designsystem.gebruikercentraal.nl/meetups/ is onder andere de tekst 'refinement-sessies met de gemeente Den Haag' zowel met het em-element en het strong-element opgemaakt. Deze elementen hebben een semantische waarde en zijn bedoeld om extra nadruk te geven aan een woord of korte zinnen. Gebruik ze daarom niet puur voor opmaak. Gebruik bijvoorbeeld het i-element om strong-tekst schuin te drukken, of het b-element om em-tekst vet te maken, of laat de semantische elementen helemaal weg.

Bevinding 12: Op pagina designsystem.gebruikercentraal.nl/jouw-project-inrichten-op-… staat onder de kop een stuk introtekst schuin afgedrukt. Hier is het em-element gebruikt om een heel stuk tekst nadruk te geven, dat is niet de bedoeling. Het em- en strong-element is bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een introtekst in een vet lettertype te tonen.

Bevinding 13: In de link 'Jessica Straetemans' op pagina designsystem.gebruikercentraal.nl/terugkoppeling-werksessie-… is met het title-attribuut de tekst 'Alle berichten' toegevoegd. Het title-attribuut wordt niet door alle browsers en hulpsoftware ondersteund. Voeg deze informatie op een andere manier toe, bijvoorbeeld met een aria-beschrijving of tekst dat alleen door hulpsoftware wordt gezien, en verwijder het title-attribuut.

Bevinding 14: Op pagina designsystem.gebruikercentraal.nl/terugkoppeling-werksessie-… iconen die naar de social media acounts van Jessica Straetemans linken. Naast de linktekst, is ook het title-attribuut gebruikt om precies dezelfde tekst te communiceren. Het title-attribuut wordt niet door alle browsers en hulpsoftware ondersteund, maar voor screenreadergebruikers van wie de screenreader het title-attribuut wél voorleest geldt nu dat de tekst dubbel voorgelezen wordt. Verwijder het title-attribuut om dit probleem op te lossen.

Bevinding 15: De pdf op pagina designsystem.gebruikercentraal.nl/wp-content/uploads/sites/… is niet gecodeerd en daardoor is er voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

1.4 Onderscheidbaar

1.4.2 Geluidsbediening (Niveau A)

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Niet aanwezig

Bevinding 16: Niet aanwezig

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 17: Op pagina designsystem.gebruikercentraal.nl/meetups/ staat een afbeelding met post-it's, 'Thema's', waar tekst op staat. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

Bevinding 18: Op pagina designsystem.gebruikercentraal.nl/jouw-project-inrichten-op-… staan meerdere afbeeldingen met tekst, namelijk enkele code-regels die in de tekst behandeld wordt. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. Plaats deze tekst daarom als HTML-tekst op de pagina. Zie ook SC 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: Onvoldoende

Bevinding 19: Het contrast van de rand om het invoer 'Mailadres' op iedere pagina is niet hoog genoeg als de rand focus heeft. De contrastratio is hier 2,8:1, waar dat minimaal 3:1 moet zijn. Dit komt op meerdere pagina's voor, waaronder op pagina designsystem.gebruikercentraal.nl/bestaatniet en op designsystem.gebruikercentraal.nl/nieuwsbrieven/.

Bevinding 20: Het contrast van de rand om het invoer 'Mailadres' op iedere pagina is niet hoog genoeg. De contrastratio is hier 1,4:1, waar dat minimaal 3:1 moet zijn. Dit komt op meerdere pagina's voor, waaronder op pagina designsystem.gebruikercentraal.nl/bestaatniet en op designsystem.gebruikercentraal.nl/nieuwsbrieven/.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 21: De pdf designsystem.gebruikercentraal.nl/wp-content/uploads/sites/… heeft geen titel. De bestandsnaam wordt nu voorgelezen door screenreaders. Voeg een titel toe en kies bij 'Weergave bij openen' voor 'Documenttitel'.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 22: Advies: De linkteksten van de links onder 'Nieuws & Blogs' op pagina designsystem.gebruikercentraal.nl/ bestaan uit de datum, de kop én de hele introductietekst (en in sommige gevallen de alternatieve tekst van de afbeelding). Dit is verwarrend voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader, zij krijgen álle tekst opgelezen. Daarnaast maakt het het navigeren voor bezoekers die gebruik maken van een linklijst ook ingewikkelder. Dit komt op meerdere pagina's voor, waaronder op pagina designsystem.gebruikercentraal.nl/blogs-nieuws/.

Bevinding 23: Op pagina designsystem.gebruikercentraal.nl/ staan links naar Github en Storybook. Met het title-attribuut is meer informatie over de link toegevoegd. Het title-attribuut wordt niet door alle browsers en hulpsoftware ondersteund. Voeg eventueel extra informatie op een andere manier toe, bijvoorbeeld met een aria beschrijving of tekst die alleen zichtbaar is voor hulpsoftware, of pas de gehele linktekst aan. Gebruik het title-attribuut hiervoor niet.

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 24: Er is geen taal ingesteld voor de pdf designsystem.gebruikercentraal.nl/wp-content/uploads/sites/… waardoor screenreaders niet weten in welke taal zij de pdf moeten voorlezen. Als de hoofdtaal van de screenreader anders is dan de taal in de pdf, kan dat er voor zorgen dat de tekst onverstaanbaar uitgesproken wordt.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 25: De links om naar de huidige of volgende pagina te gaan, of om naar de andere pagina's te gaan ('go to page..') op pagina designsystem.gebruikercentraal.nl/ hebben toegankelijke namen in het Engels. Zorg ervoor dat interactieve componenten toegankelijke namen hebben in de hoofdtaal van de pagina, zodat bezoekers die gebruik maken van hulpsoftware niet in de war raken tijdens het bedienen van de links en knoppen.

Bevinding 26: Op pagina designsystem.gebruikercentraal.nl/meetups/ staat de tekst 'GitHub – Gemeente-DenHaag/denhaag-component-library: Material-UI Based React Component Library adhering to the guidelines and principles of the NL Design System.' Er is geen taalwissel aangegeven in de code. Screenreaders lezen deze tekst dan mogelijk voor in de hoofdtaal van de pagina, namelijk Nederlands, waardoor de tekst niet verstaanbaar is. Geef taalwissels aan voor zinnen of paragrafen in een andere taal.

3.2 Voorspelbaar

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Onvoldoende

Bevinding 27: Op pagina designsystem.gebruikercentraal.nl/nieuwsbrieven/ gaat het bij invoerveld om 'Mailadres' maar in de de tekst erboven wordt gesproken over 'e-mailadres'.

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-05-02 17:33:51 v2.3-011