Skip Link - Community Amsterdam - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Skip Link component in Community bij Amsterdam

• Te reviewen: Skip Link in StoryBook Amsterdam
• Acceptatiecriteria: NL Design System Acceptatiecriteria voor Skip 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 3 december 2024

Gereviewd:

• Default
• On Focus
• Multiple Links

HTML basisvoorbeeld:

Acceptatiecriteria

Samenvatting: de Skip Link component in Community bij Amsterdam 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 te beoordelen, 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 te beoordelen, 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
  WCAG1.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 focusindicator is die van de browser.
• De Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels
  WCAG 2.5.5 Grootte van het aanwijsgebied (uitgebreid)
  Oordeel: Voldoet.
• Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label
  WCAG 3.2.4 Consistente identificatie
  Oordeel: Niet te beoordelen, 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
  Oordeel: Niet te beoordelen, er is geen URL als waarde voor het href-attribuut.
• 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 Link de toetsenbordfocus krijgt, is het element niet volledig bedekt door andere inhoud
  WCAG 2.4.11 Focus niet bedekt (minimum)
  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.