From 783cd07bb4f149ad500ea2d9a063ff1d20096a50 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Fri, 13 Dec 2024 18:09:07 +0100 Subject: [PATCH 1/6] style: fix font size of Code component --- src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index e0e8f0f7f2c..785a53b61c3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -960,3 +960,7 @@ pre { .docs-doc-page ul { margin: auto 0; } + +.utrecht-code { + font-size-adjust: 0.5; +} From a8ce44e6e34bcd95719733a9cf0ceb9662f8c540 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Fri, 13 Dec 2024 18:11:51 +0100 Subject: [PATCH 2/6] docs: add info about accessibility of the Candidate Paragraph component --- docs/componenten/paragraph/index.mdx | 50 ++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/docs/componenten/paragraph/index.mdx b/docs/componenten/paragraph/index.mdx index 1e5f5993936..6d498fa65d7 100644 --- a/docs/componenten/paragraph/index.mdx +++ b/docs/componenten/paragraph/index.mdx @@ -207,6 +207,56 @@ De Figma component staat in [NL Design System Voorbeeld Bibliotheek — Paragrap ]} /> +## Toegankelijkheid + +Wij letten op de volgende WCAG 2.2 succescriteria, als wij de toegankelijkheid van de Candidate Paragraph component testen: + +- [WCAG-successcriterium 1.3.1 Info en relaties](/wcag/1.3.1) +- [WCAG-successcriterium 1.4.3 Contrast (minimum)](/wcag/1.4.3) +- [WCAG-successcriterium 1.4.4 Herschalen van tekst](https://nldesignsystem.nl/wcag/1.4.4) +- [WCAG-successcriterium 1.4.10 Reflow](/wcag/1.4.10) +- [WCAG-successcriterium 1.4.12 Tekstafstand](/wcag/1.4.12) +- [WCAG-successcriterium 3.1.2 Taal van onderdelen](/wcag/3.1.2) + +De Candidate Paragraph component is onderdeel van een verzameling test-webpagina's, die is getoetst op deze successcriteria. Onze test-webpagina's voldoen aan deze succescriteria. + +Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jouw webpagina's, doe dan het volgende: + +- Stel het contrast van de design tokens in op [voldoende contrast](/contrast/) tussen `nl.paragraph.color` en de achtergrondkleur van de webpagina. +- Pas de lettergrootte aan naar een groot lettertype, wanneer je een kleur wilt gebruiken met een lager contrast dan 4,5 ÷ 1. +- Gebruik de Paragraph component alleen in combinatie met CSS voor woordafbreking. Bijvoorbeeld: + + ```css + :root { + hyphens: auto; + word-break: break-word; + } + ``` + +- Verminder niet het contrast door de gebruikersvoorkeuren voor anti-aliasing aan te passen in CSS, of maak de wijzigingen ongedaan met: + + ```css + * { + -webkit-font-smoothing: auto !important; + -moz-osx-font-smoothing: auto !important; + } + ``` + +- Maak een overzicht van alle achtergrondkleuren waarop de Paragraph component voorkomt. Stel voor elke situatie de volgende design token in op een kleur met voldoende contrast: `nl.paragraph.color`. +- Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van de component in te stellen. Dit kan bijvoorbeeld in een CMS. + + Maak het ook makkelijk om te herkennen bij welke Paragraph component een alternatieve taal is ingesteld, zodat het opvallend is waar de taal nog niet is ingesteld. + +- Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van delen van de tekst in te stellen. Dit kan bijvoorbeeld in de Rich Text Editor van een CMS. +- Geef de redactie van de webpagina's de instructie om de taal van alinea's in te stellen, wanneer die anders is dan de taal van de webpagina. +- Geef de redactie van de webpagina's de instructie om de taal van delen van de tekst in te stellen, wanneer die anders is dan de taal van de webpagina. +- Stel de `font-size` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur `rem`, of eventueel `em`, `%`. Gebruik geen `px` of `pt`. +- Stel de `line-height` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur een unitless line-height (bijvoorbeeld: `1.5`), of eventueel `%`, `rem`, of `em`. Gebruik geen `px` of `pt`. + +De Paragraph component is in de volgende webpagina's gebruikt die op deze successcriteria voldoen aan WCAG 2.2 Niveau AA: + +- [Laat het weten](project/kernteam) als jouw site hier vermeld kan worden, en stuur ons de link van je toegankelijkheidsverklaring! + ## Help component verbeteren From 33f22ff251afa85b5c92ec0bee90f4f654679160 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Fri, 13 Dec 2024 18:16:36 +0100 Subject: [PATCH 3/6] docs: tweak large font contrast suggestion --- docs/componenten/paragraph/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/componenten/paragraph/index.mdx b/docs/componenten/paragraph/index.mdx index 6d498fa65d7..76223db2a4e 100644 --- a/docs/componenten/paragraph/index.mdx +++ b/docs/componenten/paragraph/index.mdx @@ -223,7 +223,7 @@ De Candidate Paragraph component is onderdeel van een verzameling test-webpagina Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jouw webpagina's, doe dan het volgende: - Stel het contrast van de design tokens in op [voldoende contrast](/contrast/) tussen `nl.paragraph.color` en de achtergrondkleur van de webpagina. -- Pas de lettergrootte aan naar een groot lettertype, wanneer je een kleur wilt gebruiken met een lager contrast dan 4,5 ÷ 1. +- Pas de lettergrootte aan naar een groot lettertype, wanneer je een kleur wilt gebruiken met een contrast tussen de 3 ÷ 1 en 4,5 ÷ 1. - Gebruik de Paragraph component alleen in combinatie met CSS voor woordafbreking. Bijvoorbeeld: ```css From 7f2d03b41e3d1244adf4c273b358b4ab02bc3df1 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Fri, 13 Dec 2024 18:18:15 +0100 Subject: [PATCH 4/6] docs: add suggestion to check existing content --- docs/componenten/paragraph/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/componenten/paragraph/index.mdx b/docs/componenten/paragraph/index.mdx index 76223db2a4e..94d227ffbd5 100644 --- a/docs/componenten/paragraph/index.mdx +++ b/docs/componenten/paragraph/index.mdx @@ -250,6 +250,7 @@ Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jo - Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van delen van de tekst in te stellen. Dit kan bijvoorbeeld in de Rich Text Editor van een CMS. - Geef de redactie van de webpagina's de instructie om de taal van alinea's in te stellen, wanneer die anders is dan de taal van de webpagina. - Geef de redactie van de webpagina's de instructie om de taal van delen van de tekst in te stellen, wanneer die anders is dan de taal van de webpagina. +- Maak een overzicht van webpagina's waarin de taal van onderdelen een alternatieve taal is, en controleer of de de taal goed is ingesteld. - Stel de `font-size` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur `rem`, of eventueel `em`, `%`. Gebruik geen `px` of `pt`. - Stel de `line-height` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur een unitless line-height (bijvoorbeeld: `1.5`), of eventueel `%`, `rem`, of `em`. Gebruik geen `px` of `pt`. From 5b5a79b7db1edb704ff275fb062fa5da2d236bda Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Fri, 13 Dec 2024 18:26:14 +0100 Subject: [PATCH 5/6] docs: tweak text --- docs/componenten/paragraph/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/componenten/paragraph/index.mdx b/docs/componenten/paragraph/index.mdx index 94d227ffbd5..dfc42c11aa9 100644 --- a/docs/componenten/paragraph/index.mdx +++ b/docs/componenten/paragraph/index.mdx @@ -249,7 +249,7 @@ Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jo - Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van delen van de tekst in te stellen. Dit kan bijvoorbeeld in de Rich Text Editor van een CMS. - Geef de redactie van de webpagina's de instructie om de taal van alinea's in te stellen, wanneer die anders is dan de taal van de webpagina. -- Geef de redactie van de webpagina's de instructie om de taal van delen van de tekst in te stellen, wanneer die anders is dan de taal van de webpagina. +- Geef de redactie van de webpagina's de instructie om de taal van delen van de tekst in te stellen, wanneer die anders is dan de taal van de Paragraph. - Maak een overzicht van webpagina's waarin de taal van onderdelen een alternatieve taal is, en controleer of de de taal goed is ingesteld. - Stel de `font-size` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur `rem`, of eventueel `em`, `%`. Gebruik geen `px` of `pt`. - Stel de `line-height` van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur een unitless line-height (bijvoorbeeld: `1.5`), of eventueel `%`, `rem`, of `em`. Gebruik geen `px` of `pt`. From 391bb3eb2a919d97200593be5dd57ce49253155e Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Mon, 16 Dec 2024 10:31:52 +0100 Subject: [PATCH 6/6] docs: laat de uitleg over testaanpak over aan de Candidate storybook --- docs/componenten/paragraph/index.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/componenten/paragraph/index.mdx b/docs/componenten/paragraph/index.mdx index dfc42c11aa9..0ec524ae8f3 100644 --- a/docs/componenten/paragraph/index.mdx +++ b/docs/componenten/paragraph/index.mdx @@ -218,9 +218,7 @@ Wij letten op de volgende WCAG 2.2 succescriteria, als wij de toegankelijkheid v - [WCAG-successcriterium 1.4.12 Tekstafstand](/wcag/1.4.12) - [WCAG-successcriterium 3.1.2 Taal van onderdelen](/wcag/3.1.2) -De Candidate Paragraph component is onderdeel van een verzameling test-webpagina's, die is getoetst op deze successcriteria. Onze test-webpagina's voldoen aan deze succescriteria. - -Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jouw webpagina's, doe dan het volgende: +Wanneer je de Candidate Paragraph component toegankelijk wil toepassen in jouw webpagina's, doe dan het volgende: - Stel het contrast van de design tokens in op [voldoende contrast](/contrast/) tussen `nl.paragraph.color` en de achtergrondkleur van de webpagina. - Pas de lettergrootte aan naar een groot lettertype, wanneer je een kleur wilt gebruiken met een contrast tussen de 3 ÷ 1 en 4,5 ÷ 1. @@ -256,6 +254,7 @@ Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jo De Paragraph component is in de volgende webpagina's gebruikt die op deze successcriteria voldoen aan WCAG 2.2 Niveau AA: +- [Voorbeeld-webpagina's van de Candidate Paragraph component - NL Design System](https://candidate-storybook-test.vercel.app/?path=/docs/componenten-paragraph--documentatie) - [Laat het weten](project/kernteam) als jouw site hier vermeld kan worden, en stuur ons de link van je toegankelijkheidsverklaring! ## Help component verbeteren