Toevoegen referenties naar gerelateerde WCAG-pagina's bij de componenten in Community-status

[rianrietveld]

Bij de documentatie van een component staan onder andere de Acceptatiecriteria.
Hierbij staan de WCAG 2.2 succescriteria die op een component van toepassing zijn.
Bij alle componenten met de status community moeten de regelateerde WCAG-succescriteria worden toegevoegd onder het kopje Acceptatiecriteria.

Bijvoorbeeld voor een "Button", zie https://documentatie-git-docs-component-wcag-criteria-nl-design-system.vercel.app/button/#acceptatiecriteria
ZIe PR: #1209

Gerelateerd:
https://github.com/nl-design-system/documentatie/blob/main/docs/componenten/paragraph/_guidelines.md

De referentie bestaat uit de titel (h3-kopje) dat tevens een link is naar de WCAG-pagina op nldesignsystem.nl/wcag plus een korte samenvatting.

De tekst van de samenvatting kan worden gehaald uit de summaries (.md bestanden) van de WCAG-pagina's, zie
https://github.com/nl-design-system/documentatie/tree/main/docs/wcag/summaries

In de storybooks van Utrecht en Amsterdam is ook al een en ander te vinden:

• https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button--docs#relevante-wcag-succescriteria
• https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs#relevant-wcag-requirements

Plek om de documentatie neer te zetten:

Bij de componenten, bijvoorbeeld voor Accordion:
https://nldesignsystem.nl/accordion/

Deze staan in de webste-code onder docs/componenten:
https://github.com/nl-design-system/documentatie/tree/main/docs/componenten

Componenten nu de community-status hebben:

• Project: https://github.com/orgs/nl-design-system/projects/29/views/1?filterQuery=status%3ACommunity
• Issues: https://github.com/nl-design-system/backlog/issues?q=is%3Aissue+is%3Aopen+label%3ACommunity. Hier staan ook de links naar de discussies over de betreffende component.

Als je start met een component, maak een bijbehorende PR en refereer in de omschrijving naar dit issue.

Tracking: Vink af wat klaar is, met het bijbehorende issue erbij vermeldt.

• Accordion
• Blockquote
• Breadcrumb navigation
• Button Succescriteria bij component Button #1392
• Form field error message
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Link
• Number badge
• Ordered List
• Paragraph
• Skip link
• Unordered List Succescriteria bij component Unordered List #1473

[rianrietveld]

@MarjonBakker en @Robbert

Even een brain fart: voor de acceptatiecriteria testen we nu alleen tegen WCAG. Maar ook de code moet kloppen, zeker net zo belangrijk.

Ik ben nu bezig met de Unordered List. Waar ik het vaak fout zie gaan is dat, voor de layout, er allemaal divs/spans of zelfs kopjes tussen de li's worden gezet, en dat mag niet van de HTML-specs.

Zou onderstaande als eerste item bij de acceptatiecriteria passen?

Zorg dat de geïmplementeerde component in de frontend valideert voor correcte HTML en CSS.
Test bijvoorbeeld bij het W3C via de Markup Validation Service en de CSS Validation Service. Of zorg ervoor dat je deze testen geautomatisserd kunt uitvoeren.