Paragraph - Community Utrecht - A11y getest

[rianrietveld]

Review toegankelijkheid voor de Paragraph component in Community bij Utrecht

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

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

Gereviewd Paragraph in StoryBook Utrecht

• Default.
• Lead
• Small print

HTML basisvoorbeeld:

<p class="utrecht-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lead:

<p class="utrecht-paragraph utrecht-paragraph--lead"><b class="utrecht-paragraph__b">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b></p>

Small print:

<p class="utrecht-paragraph utrecht-paragraph--small"><small class="utrecht-paragraph__small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</small></p>

Acceptatiecriteria

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

Toegankelijkheid algemeen

• Gebruik het p-element voor paragraaftekst.
  WCAG 1.3.1 Info en relaties
  Oordeel: Voldoet.
• Als een paragraaftekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode
  WCAG 3.1.2 Taal van onderdelen
  Oordeel: Niet van toepassing, contextafhankelijk.

Toegankelijkheid visueel ontwerp

• De contrastverhouding van de tekstkleur van de paragraaf met de achtergrondkleur is hoog genoeg.
  WCAG 1.4.3 Contrast (minimum)
  Kleurcontrast normaal: 21 voor #000000 / #ffffff
  Oordeel: Voldoet.

Toegankelijkheid zoom en herschalen

• Als je de paragraaftekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.
  WCAG 1.4.4 Herschalen van tekst
  Oordeel: Voldoet.
• Als je de hele webpagina inzoomt tot 400% blijft de paragraaftekst leesbaar
  WCAG 1.4.10 Reflow
  Oordeel: Niet van toepassing, contextafhankelijk.
• Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar
  WCAG 1.4.12 Tekstafstand
  Oordeel: Voldoet.

Opmerking

Er is een verschil tussen de wijze aanpak voor de verschillende weergaves van de paragrapgh tussen Utrecht en Amsterdam.
Amsterdam past de weergave van Large Text, Small text en Inverse Colour aan via CSS, Utrecht voegt voor Lead en Small Print ook de elementen <b> of <small> toe.