Link - Community Utrecht - A11y getest

[rianrietveld]

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:

• Default Link in StoryBook Utrecht
• External Link in StoryBook Utrecht
• Placeholder Link in StoryBook Utrecht
• Email Link in StoryBook Utrecht
• Telephone Link in StoryBook Utrecht
• Alternate Language Link in StoryBook Utrecht
• Current Language Link in StoryBook Utrecht
• Hover Link in StoryBook Utrecht
• Focus Link in StoryBook Utrecht
• Focus Visible Link in StoryBook Utrecht
• Active Link in StoryBook Utrecht
• Visited Link in StoryBook Utrecht

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

• Het label van de Link bestaat uit gewone tekst, niet uit een afbeelding van tekst
  WCAG 1.4.5 Afbeeldingen van tekst
  Oordeel: Voldoet.
• 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.
• De zichtbare naam van de Link komt voor in de toegankelijke naam
  WCAG 2.5.3 Label in naam
  Oordeel: Voldoet.
• 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

• De contrastverhouding van de tekstkleur van de Link met de achtergrondkleur is hoog genoeg
  WCAG 1.4.3 Contrast (minimum)
  Oordeel: Voldoet.
• 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: Link - Community Utrecht - A11y getest #199 (comment)
• 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

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

Toegankelijkheid toetsenbord

• 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.
• De functionaliteit van de Link veroorzaakt geen toetsenbordval
  WCAG 2.1.2 Geen toetsenbordval
  Oordeel: Voldoet.
• Wanneer de Link de toetsenbordfocus krijgt is de focus zichtbaar
  WCAG 2.4.7 Focus zichtbaar
  Oordeel: Voldoet.
• 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

• 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.
• 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]

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]

@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.