Data Badge - Community Amsterdam - A11y getest

[rianrietveld]

Review toegankelijkheid Data Badge component in Community bij Amsterdam

• Te reviewen: Data Badge in StoryBook Amsterdam
• Acceptatiecriteria: NL Design System Acceptatiecriteria voor Data 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 Rian Rietveld op 2 december 2024

Gereviewd: Data Badge component in StoryBook Amsterdam.

• Default

HTML default
<span class="ams-badge ams-badge--black">Tip</span>

Berekening kleurcontrasten
Font size: 22.0341px
Font weight: 800 = bold
Contrast ratio moet 3 of groter zijn voor tekst/achtergrond badge.

Naam / background / tekst / contrast ratio tekst tegen badge

Voldoet:

• black / #000000 / #ffffff / 21
• blue / #004699 / #ffffff / 8.99
• dark-green / #00A03C / #ffffff / 3.45
• grey-3 / #767676 / #ffffff / 4.54
• light-blue #009DE6 / #000000 / 6.97
• magenta / #E50082 / #ffffff / 4.51
• purple / #A00078 / #ffffff / 7.59
• red / #EC0000 / #ffffff / 4.60
• green / #BED200 / #000000 / 12.41
• grey-1 / #E8E8E8 / #000000 / 17.14
• grey-2 / #BEBEBE / #000000 / 11.3
• orange / #FF9100 / #000000 / 9.3
• white / #ffffff / #000000 / 21
• yellow / #FFE600 / #000000 / 16.57

Acceptatiecriteria

Of de Data Badge voldoet aan de acceptatiecriteria voor toegankelijkheid van het NL Design System, is sterk afhankelijk van de gebruikte context en content. Alleen een nummerje is soms niet voldoende voor schermlezergebruikers. Aanvullende documentatie over hoe de verschillende toepassingen in te zetten in te zetten is van groot belang.

Samenvatting:
De code en de weergave van de voorbeelden voldoet aan de accepatiecriteria.

Toegankelijkheid algemeen

• Gebruik geen afbeeldingen van tekst voor de Data Badge
  WCAG 1.4.5 Afbeeldingen van tekst
  Oordeel: Niet van toepassing, contextafhankelijk.

• Als een tekst in de Data Badge in een andere taal is dan de taal van de pagina, dan heeft de Data Badge een lang-attribuut met de juiste taalcode
  WCAG 3.1.2 Taal van onderdelen
  Oordeel: Niet van toepassing, contextafhankelijk.

Toegankelijkheid visueel ontwerp

• Gebruik niet alleen kleur om de betekenis van de Data Badge duidelijk te maken
  WCAG 1.4.1 Gebruik van kleur
  Oordeel: Niet van toepassing, contextafhankelijk.

• De tekst van de Data Badge heeft voldoende contrast tegen de achtergrond
  WCAG 1.4.3 Contrast (minimum)
  Oordeel: voldoet.

Toegankelijkheid zoom en herschalen

• Als je de tekst van de Data Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar
  WCAG 1.4.4 Herschalen van tekst
  Oordeel: voldoet.

• Als je de tekstafstand van de Data Badge vergroot blijft de tekst in zijn geheel zichtbaar
  WCAG 1.4.12 Tekstafstand
  Oordeel: voldoet.

Toegankelijkheid screenreader

• Als er in de Data Badge een informatief icoon staat, is er een goed tekstalternatief
  WCAG 1.1.1 Niet-tekstuele content
  Oordeel: Niet van toepassing, contextafhankelijk.

• Gebruik zoveel mogelijk semantische HTML voor de Data Badge
  WCAG 1.3.1 Info en relaties
  Oordeel: Voldoet, is ook contextafhankelijk om de volledige betekenis over te brengen.