Paragraph - Candidate NLDS - A11y getest

[rianrietveld]

Review toegankelijkheid voor de NLDS Candidate component Paragraph

• Te reviewen: nader te bepalen (oppakken in overleg met Matijs en Robbert)
• 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 19-12-2024 door Marjon

Er is nog een hertest nodig met "Page Titled" en "Language of the Page" in scope, zie PR #382

Gereviewd:

• Paragraph: een korte zin
• Lead Paragraph: een korte zin
• Paragraph: een lange alinea
• Paragraph: woorden die niet op 1 regel passen
• Lead Paragraph met daar na een Paragraph
• Paragraph بالنص العربي
• Paragraph met Arabisch schrift in een Nederlandstalige pagina
• Lead Paragraph met Arabisch schrift in een Nederlandstalige pagina
• Paragraph met een lange alinea in een kleine viewport
• Paragraph met een lange alinea in een grote viewport
• Paragraph met grote line-height
• Paragraph met grote letter-spacing en grote word-spacing

Review ten opzichte van de acceptatiecriteria:

Gebruik het p-element voor paragraaftekst

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

De contrastverhouding van de tekstkleur van de paragraaf met de achtergrondkleur is hoog genoeg

Als je de paragraaftekst vergroot tot 200% blijft deze in zijn geheel zichtbaar

Als je de hele webpagina inzoomt tot 400% blijft de paragraaftekst leesbaar

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar

Review toegankelijkheid 12-12-2024 door Marjon

Zie issues: #373

Zie uikomst: https://github.com/nl-design-system/candidate/blob/main/packages/storybook-test/stories/paragraph/paragraph.stories.tsx

[Robbert]

Zouden jullie deze PR willen testen?
https://candidate-storybook-test-git-docs-parag-f71482-nl-design-system.vercel.app/?path=/docs/componenten-paragraph--documentatie

[MarjonBakker]

Getest. Zie #373 voor issues. PR: #372