Paragraph

Candidate

De paragraph gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.

Figma

Storybook

npm

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

De contrastverhouding van de tekstkleur van de paragraaf met de achtergrondkleur is hoog genoeg.
De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

NL Design System richtlijnen:
designercontentmakerWCAG 1.4.3Niveau AA
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.
Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

NL Design System richtlijnen:
- De juiste taal instellen
developercontentmakerWCAG 3.1.2Niveau AA
Als je de hele webpagina inzoomt tot 400% blijft de paragraaftekst leesbaar.

De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

Alle functies, zoals het menu, moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video’s en landkaarten.

Definieer in de CSS een wijze om lange woorden af te breken en door te laten lopen op de volgende regel. Voorkom zo een horizontale scrollbar en onleesbare tekst.
developerWCAG 1.4.10Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Gebruik het p-element voor paragraaftekst.

Zorg dat een alinea in een paragraaf-element staat. Gebruik geen <div> of <span> voor op zichzelf staande teksten. Zelfs als geen CSS geladen kan worden, blijft de tekst dan duidelijk weergegeven.
developerWCAG 1.3.1Niveau A
Als je de paragraaftekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.
Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

NL Design System richtlijnen:
- Let op voorkeursinstellingen voor typografie
- Zorg ervoor dat letters groot genoeg zijn
developerWCAG 1.4.4Niveau AA
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar.
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea’s, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

Je moet de afstand kunnen vergroten naar deze waardes:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
- Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte.
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
```
<style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>
```
NL Design System richtlijnen:
developerWCAG 1.4.12Niveau AA

Gebruik Paragraph

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/paragraph-css

Gebruik de nl-paragraph class name op een p element:

<p class="nl-paragraph">Op brute wĳze ving de schooljuf de quasi-kalme lynx.</p>

Voor de Lead Paragraph gebruik je de extra class name nl-paragraph--lead:

<p class="nl-paragraph nl-paragraph--lead">
  Op brute wĳze ving de schooljuf de quasi-kalme lynx. Je gelooft nooit wat er toen gebeurde!
</p>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/paragraph-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/paragraph-css@2/dist/paragraph.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/paragraph-css/dist/paragraph.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/paragraph-css/paragraph.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/paragraph-react

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/paragraph-react

Je kunt de React component zo gebruiken:

import { Paragraph } from "@nl-design-system-candidate/paragraph-react";

export const MyPage = () => {
  return (
    <html>
      <body>
        <Paragraph>Op brute wĳze ving de schooljuf de quasi-kalme lynx.</Paragraph>
      </body>
    </html>
  );
};

De Lead Paragraph werkt zo:

Je kunt de React component zo gebruiken:

<Paragraph purpose="lead">Op brute wĳze ving de schooljuf de quasi-kalme lynx.</Paragraph>

Design tokens

name	type
`nl.paragraph.color`	color
`nl.paragraph.font-family`	fontFamilies
`nl.paragraph.font-size`	fontSizes
`nl.paragraph.font-weight`	fontWeights
`nl.paragraph.line-height`	lineHeights
`nl.paragraph.margin-block-end`	dimension
`nl.paragraph.margin-block-start`	dimension
`nl.paragraph.lead.font-size`	fontSizes
`nl.paragraph.lead.font-weight`	fontWeights
`nl.paragraph.lead.line-height`	lineHeights
`nl.paragraph.lead.margin-block-end`	dimension
`nl.paragraph.lead.margin-block-start`	dimension

Definition of Done

Help om deze component te verbeteren

We vinden het belangrijk dat de component Paragraph goed te gebruiken is door iedereen. Help je mee?

Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortgang van Paragraph door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.

Kruimelpad

Paragraph

Figma

Storybook

npm

Checklist voor toegankelijkheid

Acceptatiecriteria bij gebruik

Filter acceptatiecriteria voor:

Acceptatiecriteria van de component

Filter acceptatiecriteria voor:

Gebruik Paragraph

CSS

React

Design tokens

Definition of Done

Help Wanted - 11 van 11

Community - 15 van 15

Candidate - 15 van 15

Hall of Fame - 6 van 20

Help om deze component te verbeteren

Community implementaties

Amsterdam

Snel aan de slag

ams-paragraph in CSS

ams-paragraph in React

Utrecht

Snel aan de slag

utrecht-paragraph in CSS

utrecht-paragraph in HTML

utrecht-paragraph in React

utrecht-paragraph in Vue

utrecht-paragraph in Angular

Den Haag

Snel aan de slag

denhaag-paragraph in CSS