Heading - Community Amsterdam - A11y getest

[Robbert]

Review toegankelijkheid voor de Heading component in Community bij Amsterdam

• Te reviewen: Heading in StoryBook Amsterdam
• 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 21 november 2024

Gereviewd:

• Default/Level 1 in StoryBook Amsterdam
• Heading Level 2 in StoryBook Amsterdam
• Heading Level 3 in StoryBook Amsterdam
• Heading Level 4 in StoryBook Amsterdam

HTML basisvoorbeeld:

<h1 class="ams-heading ams-heading--level-1">Van bokking tot ‘quawah’: dit waren typisch Amsterdamse koopmansgoederen</h1>

Acceptatiecriteria

Samenvatting: de Heading component in Community bij Amsterdam 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.