Number Badge - Community Utrecht - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Number Badge component in Community bij Utrecht

• Te reviewen: Number Badge in StoryBook Utrecht
• Acceptatiecriteria: NL Design System Acceptatiecriteria voor Number Badge

Note: Amsterdam heeft geen Community component voor Number Badge.

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 2 december 2024

Gereviewd:

• Default Number Badge in Storybook Utrecht
• Double Digits Number Badge in Storybook Utrecht
• Triple Digits Number Badge in Storybook Utrecht
• Quadruple Digits Number Badge in Storybook Utrecht
• Arabic Number Badge in Storybook Utrecht
• Dutch Number Badge in Storybook Utrecht
• Switzerland Number Badge in Storybook Utrecht
• English Number Badge in Storybook Utrecht
• EU Languages Number Badge in Storybook Utrecht
• Farsi Number Badge in Storybook Utrecht
• Empty Number Badge in Storybook Utrecht

HTML basisvoorbeeld:

<data class="utrecht-number-badge" value="4">4</data>

Acceptatiecriteria

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

Toegankelijkheid algemeen

• Gebruik geen afbeeldingen van tekst voor de Number Badge
  WCAG 1.4.5 Afbeeldingen van tekst
  Oordeel: Voldoet.
• Als een tekst en/of het aria-label in de Number Badge in een andere taal is dan de taal van de pagina, dan heeft de Number Badge een lang-attribuut met de juiste taalcode
  WCAG 3.1.2 Taal van onderdelen
  Uitzondering: Empty Number Badge in Storybook Utrecht, deze heeft geen tekst
  Oordeel: Voldoet niet. Het lang-attribuut staat op een div-element om de component heen, niet op de Data Badge zelf.

Toegankelijkheid visueel ontwerp

• De tekst van de Number Badge heeft voldoende contrast tegen de achtergrond
  WCAG 1.4.3 Contrast (minimum)
  Uitzondering: Empty Number Badge in Storybook Utrecht, deze heeft geen tekst
  Oordeel: Voldoet: De witte letters tegen de rode achtergrond (rgb(204, 0, 0)) hebben een contrastverhouding van 5,9:1.

Toegankelijkheid zoom en herschalen

• Als je de tekst van de Number Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar
  WCAG 1.4.4 Herschalen van tekst
  Uitzondering: Empty Number Badge in Storybook Utrecht, deze heeft geen tekst
  Oordeel: Voldoet.
• Als je de tekstafstand van de Number Badge vergroot blijft de tekst in zijn geheel zichtbaar
  WCAG 1.4.12 Tekstafstand
  Uitzondering: Empty Number Badge in Storybook Utrecht, deze heeft geen tekst
  Oordeel: Voldoet.

Toegankelijkheid screenreader

• Geef de informatie uit de Number Badge ook door aan screenreaders
  WCAG 1.3.1 Info en relaties
  Oordeel: Niet te beoordelen, contextafhankelijk.