Code - Community Utrecht - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Code component in Community bij Utrecht

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

Note: Amsterdam heeft geen Community component voor code.

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 20 november 2024

Gereviewed: Code in StoryBook Utrecht
Visueel en via de "Show code"-optie bij de voorbeelden.

HTML basisvoorbeeld:

<code class="utrecht-code">
  &lt;input type=&quot;url&quot; value=&quot;https://example.fi/&quot;&gt;
</code>;

Bij de voorbeelden in dit Storybook is de CSS voor code niet gebruikt.

.utrecht-code {
  background-color: var(--utrecht-code-background-color);
  color: var(--utrecht-code-color);
  font-family: var(--utrecht-code-font-family, monospace),monospace;
  font-size: var(--utrecht-code-font-size, inherit);
  font-variant-ligatures: none;
  line-height: var(--utrecht-code-line-height);
}

De fallback voor font-family is dus monospace.
Ik ben van de review uitgegaan van deze CSS-loze component.

Er is de mogelijkheid om ook <span> te gebruiken bij de keuze van het element. Deze review geldt alleen wanneer het element <code> wordt gekozen.

Acceptatiecriteria

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

Toegankelijkheid visueel ontwerp

• De tekst, gemarkeerd als code, is niet alleen herkenbaar aan een andere achtergrondkleur.
  WCAG 1.4.1 Gebruik van kleur
  Oordeel: Voldoet. De tekst is te onderscheiden door het mono-space lettertype.
• De tekst, gemarkeerd als code, heeft voldoende contrast met de achtergrondkleur.
  WCAG 1.4.3 Contrast (minimum)
  Oordeel: Voldoet.
• Wanneer de achtergrondkleur van de Code 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
  Oordeel: Voldoet.

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

• Het juiste HTML-element voor de Code component is toegepast.
  WCAG 1.3.1 Info en relaties
  Oordeel: Voldoet.

[MarjonBakker]

@rianrietveld je hebt deze er dubbel in staan: "Wanneer de achtergrondkleur van de Code component anders is dan de default browserkleur, dan heeft deze een kleurcontrast van minimaal 3:1 met de achtergrondkleur van de pagina."

Een keer als 'voldoet' en een keer als 'niet van toepassing'.

[rianrietveld]

@MarjonBakker Dank!
Het is aangepast en ik heb er ook de links naar de WCAG-succescriteria bijgezet.

[rianrietveld]

@matijs @jeffreylauwers
Code component van Utrecht is a11y approved, we geven um aan jullie door.