diff --git a/.changeset/bal-gehakt.md b/.changeset/bal-gehakt.md new file mode 100644 index 00000000..c250a836 --- /dev/null +++ b/.changeset/bal-gehakt.md @@ -0,0 +1,20 @@ +--- +'@nl-design-system-candidate/code-block-docs': patch +'@nl-design-system-candidate/code-docs': patch +'@nl-design-system-candidate/color-sample-docs': patch +'@nl-design-system-candidate/data-badge-docs': patch +'@nl-design-system-candidate/heading-1-docs': patch +'@nl-design-system-candidate/heading-2-docs': patch +'@nl-design-system-candidate/heading-3-docs': patch +'@nl-design-system-candidate/heading-4-docs': patch +'@nl-design-system-candidate/heading-5-docs': patch +'@nl-design-system-candidate/heading-6-docs': patch +'@nl-design-system-candidate/heading-docs': patch +'@nl-design-system-candidate/link-docs': patch +'@nl-design-system-candidate/mark-docs': patch +'@nl-design-system-candidate/number-badge-docs': patch +'@nl-design-system-candidate/paragraph-docs': patch +'@nl-design-system-candidate/skip-link-docs': patch +--- + +Add text alternatives to anatomies as `title` and `desc` elements with ID's. diff --git a/.github/ISSUE_TEMPLATE/anatomie-vastleggen.md b/.github/ISSUE_TEMPLATE/anatomie-vastleggen.md index 6e671ab2..44e658ae 100644 --- a/.github/ISSUE_TEMPLATE/anatomie-vastleggen.md +++ b/.github/ISSUE_TEMPLATE/anatomie-vastleggen.md @@ -25,13 +25,32 @@ Anatomie van de component is vastgelegd - [ ] Plaats de component uit de 'NLDS Voorbeeld Bibliotheek' op het frame - [ ] Voeg annotaties toe met 'Annotation number' en 'Annotation line'. Houd 48 pixels afstand tussen de nummers en de component - [ ] Exporteer het frame als SVG-bestand met dezelfde naam als het frame -- [ ] Zorg dat er alternatieve tekst beschikbaar is. Om dit toe te voegen, open je het SVG-bestand in een text editor. Voeg op het `` element twee attributen toe: `role="img"` en `aria-label=""`. Beschrijf in het `aria-label` attribuut wat er zichtbaar is; benoem wel vormen, geen kleuren. +- [ ] Zorg dat er alternatieve tekst beschikbaar is. Om dit toe te voegen, open je het SVG-bestand in een text editor. Voeg op het `` element twee elementen toe, een `` en een ``. In de `` zet je een korte samenvatting, in de `<desc>` beschrijf je in meer detail wat er op de afbeelding staat. ` Voorbeeld: ```html -aria-label="Een zin met in de lopende tekst het woord 'code' dat is opgemaakt met een achtergrond en een ander -lettertype. Het stukje code is aangeduid met het cijfer 1." +<svg> + <title>Samenstelling “code” component + + Een zin met in de lopende tekst het woord 'code' dat is opgemaakt met een achtergrond en een ander lettertype. Het + stukje code is aangeduid met het cijfer 1. + + +``` + +Zorg ook dat er unieke ID's zitten op de `` en `<desc>`, die kunnen we later, op bv de documentatiesite, gebruiken om toegankelijkheid te verbeteren. + +Volledig voorbeeld: + +```html +<svg> + <title id="code-anatomy-title">Samenstelling “code” component + + Een zin met in de lopende tekst het woord 'code' dat is opgemaakt met een achtergrond en een ander lettertype. Het + stukje code is aangeduid met het cijfer 1. + + ``` - [ ] Maak een bestand `_anatomy.md` aan in de `docs`folder van de component. Je vindt deze folders in de [docs](https://github.com/nl-design-system/candidate/tree/main/packages/docs) folder van de Candidate repository in GitHub diff --git a/packages/docs/code-block-docs/docs/anatomy/anatomy.svg b/packages/docs/code-block-docs/docs/anatomy/anatomy.svg index b4353980..8abede9e 100644 --- a/packages/docs/code-block-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/code-block-docs/docs/anatomy/anatomy.svg @@ -1,13 +1,22 @@ - - - - - - - - - - - - + + Samenstelling van Code Block component + Een blok met daarin voorbeeld-HTML. Het cijfer 1 wijst naar het hele blok, het cijfer 2 wijst naar het stuk HTML in het blok. + + + + + + + + + + + diff --git a/packages/docs/code-docs/docs/anatomy/anatomy.svg b/packages/docs/code-docs/docs/anatomy/anatomy.svg index 6986cba2..48974fb1 100644 --- a/packages/docs/code-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/code-docs/docs/anatomy/anatomy.svg @@ -1,12 +1,24 @@ - - - - - - - - - - - + + Samenstelling van Code component + Een zin met in de lopende tekst het woord 'code' dat is opgemaakt met een achtergrond en een ander lettertype. Het stukje code is aangeduid met het cijfer 1. + + + + + + + + + + diff --git a/packages/docs/color-sample-docs/docs/anatomy/anatomy.svg b/packages/docs/color-sample-docs/docs/anatomy/anatomy.svg index ca084a20..c2cffebd 100644 --- a/packages/docs/color-sample-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/color-sample-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,14 @@ - - - - - - - - + + Samenstelling van het Color Sample component + Een gekleurd vierkantje, aangeduid met het cijfer 1. + + + + + + + diff --git a/packages/docs/data-badge-docs/docs/anatomy/anatomy.svg b/packages/docs/data-badge-docs/docs/anatomy/anatomy.svg index 9113ae8d..dfbaba5d 100644 --- a/packages/docs/data-badge-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/data-badge-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Data Badge component + Een Data Badge met de vetgedrukte tekst 'label' en een achtergrondkleur. De hele Data Badge is aangeduid met het cijfer 1. + + + + + + + diff --git a/packages/docs/heading-1-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-1-docs/docs/anatomy/anatomy.svg index 877b7d09..b7dcbcea 100644 --- a/packages/docs/heading-1-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-1-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading 1 component + Een relatief grote tekst in bold, de hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.” + + + + + + + diff --git a/packages/docs/heading-2-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-2-docs/docs/anatomy/anatomy.svg index 65f06c9d..97afcab3 100644 --- a/packages/docs/heading-2-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-2-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading 2 component + Een tekst die iets groter is dan gebruikelijk, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.” + + + + + + + diff --git a/packages/docs/heading-3-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-3-docs/docs/anatomy/anatomy.svg index b75a3712..e5bcbb7b 100644 --- a/packages/docs/heading-3-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-3-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading 3 component + Een tekst die iets groter is dan gebruikelijk, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.”. + + + + + + + diff --git a/packages/docs/heading-4-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-4-docs/docs/anatomy/anatomy.svg index 2de3b8e0..49493965 100644 --- a/packages/docs/heading-4-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-4-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading 4 component + Een tekst, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.”. + + + + + + + diff --git a/packages/docs/heading-5-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-5-docs/docs/anatomy/anatomy.svg index f316f630..9b686341 100644 --- a/packages/docs/heading-5-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-5-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samensteling van het Heading 5 component + Een tekst, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.”. + + + + + + + diff --git a/packages/docs/heading-6-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-6-docs/docs/anatomy/anatomy.svg index 6a16bc6c..9dde1d49 100644 --- a/packages/docs/heading-6-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-6-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading 6 component + Een tekst, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.”. + + + + + + + diff --git a/packages/docs/heading-docs/docs/anatomy/anatomy.svg b/packages/docs/heading-docs/docs/anatomy/anatomy.svg index e45703b5..d17fecea 100644 --- a/packages/docs/heading-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/heading-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Heading component + Een tekst die groter is dan gebruikelijk, in bold. De hele tekst is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van een heading.”. + + + + + + + diff --git a/packages/docs/link-docs/docs/anatomy/anatomy.svg b/packages/docs/link-docs/docs/anatomy/anatomy.svg index 28f9f80f..aae54e4e 100644 --- a/packages/docs/link-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/link-docs/docs/anatomy/anatomy.svg @@ -1,12 +1,24 @@ - - - - - - - - - - - + + Samenstelling van het Link component + Een stuk lopende tekst, waarvan de laatste twee woorden blauw zijn en onderstreept. Dat deel is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van de link component”. + + + + + + + + + + diff --git a/packages/docs/mark-docs/docs/anatomy/anatomy.svg b/packages/docs/mark-docs/docs/anatomy/anatomy.svg index cd2c900c..3b82c455 100644 --- a/packages/docs/mark-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/mark-docs/docs/anatomy/anatomy.svg @@ -1,12 +1,24 @@ - - - - - - - - - - - + + Samenstelling van het Mark component + Een tekst waarin het één na laatste woord is gearceerd, dat deel is aangeduid met het cijfer 1. De tekst: “Dit is een voorbeeld van de mark component.”. + + + + + + + + + + diff --git a/packages/docs/number-badge-docs/docs/anatomy/anatomy.svg b/packages/docs/number-badge-docs/docs/anatomy/anatomy.svg index e5384a83..ce07765c 100644 --- a/packages/docs/number-badge-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/number-badge-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Number Badge component + Het cijfer “9” in een bolletje. Het bolletje is aangeduid met het cijfer 1. + + + + + + + diff --git a/packages/docs/paragraph-docs/docs/anatomy/anatomy.svg b/packages/docs/paragraph-docs/docs/anatomy/anatomy.svg index d9320677..3d9e48a9 100644 --- a/packages/docs/paragraph-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/paragraph-docs/docs/anatomy/anatomy.svg @@ -1,9 +1,16 @@ - - - - - - - - + + Samenstelling van het Paragraph component + Een paragraaf tekst van 6 regels. Het geheel is aangeduid met het cijfer 1. De tekst: “In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de hele Nederlandse overheid samenwerken aan een begrijpelijke, gebruikersvriendelijke èn toegankelijke online dienstverlening”. + + + + + + + diff --git a/packages/docs/skip-link-docs/docs/anatomy/anatomy.svg b/packages/docs/skip-link-docs/docs/anatomy/anatomy.svg index 4c9c3a67..35a5735a 100644 --- a/packages/docs/skip-link-docs/docs/anatomy/anatomy.svg +++ b/packages/docs/skip-link-docs/docs/anatomy/anatomy.svg @@ -1,12 +1,20 @@ - - - - - - - - - - - + + Samenstelling van het Skip Link component + Een woord “label” met een achtergrondkleur en dikke stippellijn eromheen. Het geheel is aangeduid met het cijfer 1. + + + + + + + + + +