Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paragraph - Community Amsterdam - A11y getest #205

Closed
6 tasks done
rianrietveld opened this issue Nov 20, 2024 · 0 comments
Closed
6 tasks done

Paragraph - Community Amsterdam - A11y getest #205

rianrietveld opened this issue Nov 20, 2024 · 0 comments
Assignees
Labels
accessibility Ook wel bekend als "a11y"
Milestone

Comments

@rianrietveld
Copy link
Contributor

rianrietveld commented Nov 20, 2024

Review toegankelijkheid voor de Paragraph component in Community bij Amsterdam

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 Amsterdam

HTML basisvorbeeld:

<p>
    We richten de rotonde bij de Bouhuijstunnel opnieuw in en maken het veiliger. We passen ook het fiets- en voetpad aan. De rotonde bij de Bouhuijstunnel verbindt de Korte Muiderweg, de Stationsweg en de Leeuwenveldseweg met elkaar.
</p>

Acceptatiecriteria

Samenvatting: de Paragraph component in Community bij Amsterdan 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
    Kleurcontrast inverse: 8.99 voor #ffffff / #004699
    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.

Opmerkingen

Er staan relevante WCAG Rules bij de Paragraph Docs van Amsterdam die afwijken van de NLDS acceptatiecriteria.
Inhoud bij Amsterdam gelijktrekken of linken naar https://nldesignsystem.nl/paragraph/.

Er is een verschil tussen de wijze aanpak voor de verschillende weergaves van de paragraph 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.

Amsterdam gebruikt de UK spelling voor Colour, in het NLDS gebruiken we de Amerikaanse speling Color.
Hebben we hier beleid in?

@rianrietveld rianrietveld added the accessibility Ook wel bekend als "a11y" label Nov 20, 2024
@rianrietveld rianrietveld moved this to In Progress in Candidate component taken Nov 20, 2024
@rianrietveld rianrietveld added this to the Paragraph milestone Nov 20, 2024
@rianrietveld rianrietveld changed the title Paragraph - Amsterdam - A11y getest Paragraph - Community Amsterdam - A11y getest Nov 20, 2024
@rianrietveld rianrietveld self-assigned this Nov 20, 2024
@rianrietveld rianrietveld moved this from In Progress to Review needed in Candidate component taken Nov 25, 2024
@MarjonBakker MarjonBakker moved this from Review needed to Done in Candidate component taken Nov 25, 2024
@MarjonBakker MarjonBakker closed this as completed by moving to Done in Candidate component taken Nov 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Ook wel bekend als "a11y"
Projects
Status: Done
Development

No branches or pull requests

2 participants