Data Badge - Community Utrecht - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Data Badge component in Community bij Utrecht

• Te reviewen: Data Badge in StoryBook Utrecht
• 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 Utrecht.

• Default
• Machine readable value
• Machine readable date
• Machine readable date and time
• Machine readable duration

HTML default
<span class="utrecht-badge-data">Festivals</span>

HTML Machine readable value
<data class="utrecht-badge-data" value="259">≥ 250㎡</data>

HTML Machine readable date
<time class="utrecht-badge-data" datetime="2023-08-18">vrijdag 18 augustus</time>

HTML Machine readable date and time
<time class="utrecht-badge-data" datetime="2023-08-18T21:45+02:00">21:45</time>

HTML Machine readable duration
<time class="utrecht-badge-data" datetime="PT1H39M">1 uur en 39 minuten</time>

Acceptatiecriteria

Allereerst: of de Data Badge voldoet aan de acceptatiecriteria voor toegankelijkheid van het NL Design System, is sterk afhankelijk van de gebruikte context. 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.

Vooruitlopend op de accessibility supported baseline:
De inhoud voor het voorbeeld met de inhoud ≥ 250㎡ , alhoewel de ㎡ unicode tekst , wordt deze toch te slecht ondersteund door hulpmiddelen en is hierdoor ongeschikt.

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

Toegankelijkheid algemeen

• [x]Gebruik geen afbeeldingen van tekst voor de Data Badge
  WCAG 1.4.5 Afbeeldingen van tekst
  Oordeel: Voldoet.

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

[rianrietveld]

@MarjonBakker
Voor de Data Badge Utrecht staat er in het voorbeeld van HTML Machine readable value voor de inhoud: ≥ 250㎡.
De m2 staat niet in echte HTML en wordt ook niet voorgelezen door VO.
Ik heb het afgekeurd voor WCAG 1.4.5 Afbeeldingen van tekst
Heb erbij gezet:

Oordeel: Voldoet niet voor de inhoud 250㎡, waarbij ㎡ als afbeelding kan worden beschouwd omdat screenreaders deze niet voorlezen. Beter is om hier ≥ 250 m<sup>2</sup> te gebruiken.

Mee eens?

[MarjonBakker]

@rianrietveld Het Unicode-teken ㎡ (HTML-code ㎡) valt gewoon in de definitie van tekst in WCAG. Daardoor kun je het niet afkeuren op bijvoorbeeld 1.1.1 of 1.4.5.

Los daarvan wordt dit teken wel slecht ondersteund door hulpapparatuur. In de meest recente versie van NVDA wordt deze Unicode weliswaar ondersteund, en in oudere versies van NVDA kun je het aanzetten in de Spraak-instellingen onder 'Unicode-normalisering'. Maar dat geldt niet voor alle hulpapparatuur. In braille bijvoorbeeld worden tekens als ㎡ en ≥ niet goed getoond.

De slechte ondersteuning maakt dat dit niet voldoet aan WCAG, maar dan niet onder een succescriterium. Want het voldoet technisch gezien gewoon. Maar de Unicode is niet 'accessibility supported' en daarmee voldoe je niet aan WCAG.

Zie ook:

• https://www.unicode.org/charts/PDF/U3300.pdf
• https://symbolwiki.com/en/square-m-squared

[rianrietveld]

@MarjonBakker Valt het dan onder een succescriterium? Of gewoon onder WCAG algemeen?
Dan kunnen we hier wellicht een richtlijn onder Stijl aanmaken bij Typografie

[MarjonBakker]

@rianrietveld Dan valt het onder WCAG algemeen.