Link - Community Utrecht - A11y getest

rianrietveld commented 1 week ago

Review toegankelijkheid voor de Link component in Community bij Utrecht

Te reviewen: Link in StoryBook Utrecht
Acceptatiecriteria: NL Design System Acceptatiecriteria voor Link

Hoe te testen

Ga naar de te reviewen component in StoryBook

Bij de component, kies in de zijbalk de view Default
Klik op het open nieuwe tab icon rechtsboven in de taakbalk.
Je ziet nu alleen de component met de bijbehorende CSS.

Review toegankelijkheid door Marjon op 21 november 2024

Gereviewd:

HTML basisvoorbeeld:

<a href="https://www.example.com" class="utrecht-link utrecht-link--html-a">Read more</a>

Acceptatiecriteria

Samenvatting: de Link component in Community bij Utrecht voldoet niet aan de acceptatiecriteria voor toegankelijkheid van het NL Design System.

Toegankelijkheid algemeen

[x] Het label van de Link bestaat uit gewone tekst, niet uit een afbeelding van tekst WCAG 1.4.5 Afbeeldingen van tekst Oordeel: Voldoet.
[x] De linktekst van de Link vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel). WCAG 2.4.4 Linkdoel (in context) Oordeel: Niet van toepassing, contextafhankelijk.
[x] De zichtbare naam van de Link komt voor in de toegankelijke naam WCAG 2.5.3 Label in naam Oordeel: Voldoet.
[x] Als de tekst van de Link in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode WCAG 3.1.2 Taal van onderdelen Oordeel: Niet van toepassing, contextafhankelijk.

Toegankelijkheid visueel ontwerp

[x] De contrastverhouding van de tekstkleur van de Link met de achtergrondkleur is hoog genoeg WCAG 1.4.3 Contrast (minimum) Oordeel: Voldoet.
[x] Als het zichtbare label van de Link alleen een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1 WCAG 1.4.11 Contrast van niet-tekstuele content Oordeel: Niet van toepassing.
[ ] De Link heeft een goed zichtbare focusindicator WCAG 2.4.13 Focusweergave Oordeel: Voldoet niet. De focus outline is een 2px dotted outline. Het succescriterium zegt "Het is minstens zo groot als het gebied van een 2 CSS pixel dikke omtrek". Omtrek is daarbij gedefinieerd als een "doorlopende lijn".
[ ] De Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels WCAG 2.5.5 Grootte van het aanwijsgebied (uitgebreid) Oordeel: Voldoet niet. De hoogte van de link is 18 px. Zie comment: https://github.com/nl-design-system/candidate/issues/199#issuecomment-2493042388
[x] Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label WCAG 3.2.4 Consistente identificatie Oordeel: Niet van toepassing, contextafhankelijk.

Toegankelijkheid zoom en herschalen

[x] Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar WCAG 1.4.4 Herschalen van tekst Oordeel: Voldoet.
[x] Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar WCAG 1.4.12 Tekstafstand Oordeel: Voldoet.

Toegankelijkheid toetsenbord

[x] Je kunt de Link focussen met de tabtoets en activeren met de entertoets WCAG 2.1.1 Toetsenbord Niet van toepassing voor Placeholder Link in StoryBook Utrecht Oordeel: Voldoet.
[x] De functionaliteit van de Link veroorzaakt geen toetsenbordval WCAG 2.1.2 Geen toetsenbordval Oordeel: Voldoet.
[x] Wanneer de Link de toetsenbordfocus krijgt is de focus zichtbaar WCAG 2.4.7 Focus zichtbaar Oordeel: Voldoet.
[x] Als de gebruiker de Link indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken WCAG 2.5.2 Aanwijzerannulering Oordeel: Voldoet.

Toegankelijkheid screenreader

[x] Als het label van de Link uit een icoon bestaat, dan heeft deze een goed tekstalternatief WCAG 1.1.1 Niet-tekstuele content Oordeel: Niet van toepassing.
[x] De Link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de Link voor dient WCAG 4.1.2 Naam, rol, waarde Oordeel: Voldoet.

MarjonBakker commented 1 week ago

De Link component faalt misschien 2.5.5 Grootte van het aanwijsgebied.

Als de link in een paragraaf met tekst zou staan, zou er een uitzondering gelden voor dit criterium. En er is ook een uitzondering voor als de author de hoogte van de link niet heeft gedefinieerd.

Het is dus niet met zekerheid te zeggen of dit component voldoet aan de acceptatiecriteria.

Zoals @rianrietveld en ik het nu zien zouden er twee componenten/css-classes moeten komen:

link in tekst
link stand-alone

Want om een target groot genoeg te maken moet je de margin/padding aanpassen en dat kan alleen op een block of line-block element.

MarjonBakker commented 1 week ago

@jeffreylauwers @matijs Ik wil deze graag aan jullie doorgeven. Hij is niet volledig a11y goedgekeurd, daarvoor moet denk ik iets verzonnen worden om aan 2.5.5 Grootte van het aanwijsgebied te voldoen.

nl-design-system / candidate