Heading - Community Utrecht - A11y getest

[Robbert]

Review toegankelijkheid voor de Heading component in Community bij Utrecht

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

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

Gereviewd:

• Heading Level 1 appearance undefined
• Heading Level 1 appearance utrecht-heading-2
• Heading Level 1 appearance utrecht-heading-3
• Heading Level 1 appearance utrecht-heading-4
• Heading Level 1 appearance utrecht-heading-5
• Heading Level 1 appearance utrecht-heading-6
• Heading Level 2 appearance undefined
• Heading Level 2 appearance utrecht-heading-1
• Heading Level 2 appearance utrecht-heading-3
• Heading Level 2 appearance utrecht-heading-4
• Heading Level 2 appearance utrecht-heading-5
• Heading Level 2 appearance utrecht-heading-6
• Heading Level 3 appearance undefined
• Heading Level 3 appearance utrecht-heading-1
• Heading Level 3 appearance utrecht-heading-2
• Heading Level 3 appearance utrecht-heading-4
• Heading Level 3 appearance utrecht-heading-5
• Heading Level 3 appearance utrecht-heading-6
• Heading Level 4 appearance undefined
• Heading Level 4 appearance utrecht-heading-1
• Heading Level 4 appearance utrecht-heading-2
• Heading Level 4 appearance utrecht-heading-3
• Heading Level 4 appearance utrecht-heading-5
• Heading Level 4 appearance utrecht-heading-6
• Heading Level 5 appearance undefined
• Heading Level 5 appearance utrecht-heading-1
• Heading Level 5 appearance utrecht-heading-2
• Heading Level 5 appearance utrecht-heading-3
• Heading Level 5 appearance utrecht-heading-4
• Heading Level 5 appearance utrecht-heading-6
• Heading Level 6 appearance undefined
• Heading Level 6 appearance utrecht-heading-1
• Heading Level 6 appearance utrecht-heading-2
• Heading Level 6 appearance utrecht-heading-3
• Heading Level 6 appearance utrecht-heading-4
• Heading Level 6 appearance utrecht-heading-5

Acceptatiecriteria

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

Toegankelijkheid algemeen

• De koptekst maakt duidelijk waar de sectie over gaat
  WCAG 2.4.6 Koppen en labels
  Oordeel: Niet van toepassing, dit is pas te beoordelen in context.
• Elementen moeten genest zijn volgens de HTML-specificatie
  WCAG 4.1.1
  Oordeel: Niet van toepassing, dit is pas te beoordelen in context.

Toegankelijkheid visueel ontwerp

• De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg
  WCAG 1.4.3 Contrast (minimum)
  Oordeel: Voldoet.

Toegankelijkheid zoom en herschalen

• Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar
  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

• Als tekst er uitziet als een kop, moet dit ook in de HTML een kop zijn en geen vet gemaakte tekst
  WCAG 1.3.1 Info en relaties
  Oordeel: Voldoet.
• Als de kop in een andere taal is dan de rest van de pagina, dan heeft het lang-attribuut de juiste taalcode
  WCAG 3.1.2 Taal van onderdelen
  Oordeel: Niet van toepassing, dit is pas te beoordelen in context.