Mark - Community Utrecht - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Mark component in Community bij Utrecht

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

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 op 26 november 2024

Gereviewd Mark component in StoryBook Utrecht

• Default
• Alternate Markup: Alleen de voorbeelden die <mark> gebruiken vallen binnen deze review, andere opties zoals het gebruik van enkel een <span> valideren sowieso niet.
• Appearance in print
• Windows High Contrast Mode, Windows High Contrast Mode valt niet binnen onze acceptatiecriteria, is buiten de review gelaten. Maar mooi als je er rekening mee houdt.

HTML basisvoorbeeld:
<mark class="utrecht-mark">The Quick Brown Fox Jumps Over The Lazy Dog</mark>

Acceptatiecriteria

Samenvatting: de Mark component in Community bij Amsterdan voldoet niet aan de acceptatiecriteria voor toegankelijkheid van het NL Design System.
Fail voor Default.

• WCAG 1.4.11 Contrast van niet-tekstuele content.
• WCAG 1.4.1 Gebruik van kleur

Toegankelijkheid algemeen

• Tekst in een andere taal heeft het juiste lang-attribuut
  WCAG 3.1.2 Taal van onderdelen
  Oordeel: Niet van toepassing, contextafhankelijk.

Toegankelijkheid visueel ontwerp

• De gemarkeerde tekst is niet alleen herkenbaar aan de achtergrondkleur
  WCAG 1.4.1 Gebruik van kleur
  Oordeel: Voldoet alleen voor de optie "Appearce in Print", waar een outline is toegevoegd.

• De gemarkeerde tekst heeft voldoende contrast met de achtergrondkleur
  WCAG 1.4.3 Contrast (minimum)
  Contrast Default en Appearance in print: #00000 tov #ffd633 = 14.90
  Oordeel: Voldoet.

• Wanneer de achtergrondkleur van de Mark component anders is dan de default browserkleur, dan heeft deze een kleurcontrast van minimaal 3:1 met de achtergrondkleur van de pagina
  WCAG 1.4.11 Contrast van niet-tekstuele content
  Contrast Default: #FFFFFF tov #ffd633 = 1.40: voldoet niet
  Contrast Appearance in print: #FFFFFF tov #00000 (outline) = 21: voldoet
  Oordeel: Voldoet niet voor Default.

Toegankelijkheid zoom en herschalen

• Als je inzoomt naar 200% blijft alle tekst leesbaar
  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 screenreader

• Gebruik het juiste HTML-element voor de Mark component
  WCAG 1.3.1 Info en relaties
  Oordeel: Voldoet.

Opmerkingen

• Voeg een extra visueel aspect toe om de gemarkeerde tekst heen, bijvoorbeeld een outline, naast alleen een achtegrondkleur, zoals bij de Apprearance in Print optie.
• De screenreader support van <mark> is wisselend. Adrian Roselli geeft wat oplossingen in: Tweaking Text Level Styles.