Ga naar hoofdinhoud

Componenten

Paragraph

Dit component heeft de "Community" status: Heb je hem succesvol ingezet voor jouw project met jouw huisstijl? Laat ons dit weten, misschien kan dit component dan opgenomen worden in NL Design System.

Voorbeeld

https://nl-design-system.github.io/themes/

UX en toegankelijkheid

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

HTML

Gebruik hiervoor altijd het <p> HTML-element, die heeft automatisch de goede paragraph role in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Voor een lead paragraph gebruik je <p><b>…</b></p>. Voor small print gebruik je <p><small>…</small></p>.

Zelfs als geen CSS geladen kan worden, blijft de tekst duidelijk. Door het <p> element is er tussen alinea's duidelijke witruimte (WCAG 1.4.12). Door het <b> element is de lead paragraph visueel herkenbaar. Door <small> is small print visueel herkenbaar.

Lead Paragraph

De lead paragraph is een extra opvallende variant van de paragraph. Gebruik de lead paragraph onder de heading van een article voor een introductietekst.

Schrijf in de eerste alinea kort en bondig waar de pagina over gaat, zodat de lezer kan besluiten om verder te lezen. Gebruik hiervoor de lead paragraph variant zodat de tekst extra opvallend is.

Wanneer je meer dan circa 30 woorden of 200 tekens nodig hebt, gebruik dan niet de lead paragraph variant zodat de tekst een leesbare lettergrootte heeft voor langere teksten.

Gebruik de lead paragraph niet wanneer je een paragraph voor een ander doel extra opvallend wil maken, ontwikkel dan een eigen variant.

Inhoud

Groepeer zinnen die bij elkaar horen in een alinea. Begin een nieuwe alinea wanneer de tekst over een andere onderwerp gaat of een eigen doel heeft. Teksten met alinea's die niet bovengemiddeld lang zijn makkelijker te begrijpen als je pauze neemt, en door het grouperen is informatie sneller terug te vinden.

Overweeg of een alinea met meer dan 7 zinnen of 140 woorden duidelijker is als je tekst indeelt in twee alinea's.

Layout

Lettergrootte

Kies de lettergrootte niet te klein, bijvoorbeeld 16px of groter. Gebruik rem in CSS in plaats van px, zodat de font-size van de paragraph ook verdubbelt wanneer gebruikers via hun besturingssysteem of user stylesheet de standaard lettergroote 200% groter maken. (WCAG eis 1.4.4) Gebruikers moeten de lettergrootte vier keer groter kunnen maken met browser zoom. (WCAG eis 1.4.10) Maak zoom niet kapot door gebruik van de vw of vh eenheden in CSS die niet altijd goed werken met zoom.

Gebruik de design token nl.paragraph.font-size als je niet de standaard-grootte wilt van nl.document.font-size.

Voor de lead paragraph variant is het gebruikelijk de lettergrootte 10% á 20% groter te kiezen (nl.paragraph.lead.font-size).

Regelhoogte

Stel de regelhoogte met nl.paragraph.line-height in voor voldoende afstand tussen tekstregels, dit verbetert de leesbaarheid. Standaard gebruiken browsers circa 1.2, maar 1.5 is voor veel gebruikers beter leesbaar. Voor WCAG 1.4.8 is het ook belangrijk om 1.5 of groter aan te bieden.

Afstand tussen paragrafen

Kies voldoende afstand tussen alinea's, in elk geval 50% groter dan afstand tussen tekstregels. (WCAG 1.4.8). Gebruik hiervoor de design tokens nl.paragraph.margin-block-start en nl.paragraph.margin-block-end.

Kleurgebruik

nl.paragraph.color: kies voldoende contrast ten opzichte van de achtergrondkleur, van bijvoorbeeld nl.document.background-color of nl.page.background-color. Kies in plaats van zwart voor zeer donkergrijs, dat is beter leesbaar op beeldschermen. Een contrastverhouding van 7:1 is ideaal. (WCAG 1.4.3 en WCAG 1.4.6)

Regellengte

Zorg dat de lengte van de tekst niet te lang wordt, bijvoorbeeld door deze design token in te stellen: nl.article.max-inline-size. De ideale regellengte verschilt per schrift en taal, maar ergens tussen de 50 en 75 tekens voor Nederlands is prima. Je kunt in CSS bijvoorbeeld de ch eenheid gebruiken: --nl-article-max-inline-size: 60ch.

Voor WCAG 1.4.8 is het nodig dat de regellengte beperkt kan worden tot maximaal 80 tekens (80ch), bijvoorbeeld door de viewport van de browser kleiner te maken.

Tekstuitlijning

Tekst dient uitsluitend links uitgelijnd zijn, voor Nederlandse teksten. Gebruik daarvoor text-align: start.

text-align: justify moet vermeden kunnen worden volgens WCAG 1.4.8, dus gebruik deze voor het gemak helemaal niet. Rechts uitlijnen en tekst centreren moet je ook niet gebruiken voor lopende tekst.

Hoe het niet moet

Geen opmaak

Geen p gebruiken:

<section>
  <h1>Interessante pagina</h1>
  Deze eerste tekst ziet er misschien prima uit.
  <p>Maar ook de eerste paragraaf hoort in een p-element te staan.</p>
</section>

Lege paragraaf

Een lege p gebruiken, bijvoorbeeld om extra afstand te maken:

<section>
  <h1>Voorbeeld pagina</h1>
  <p>Deze pagina ziet er op het oog misschien prima uit.</p>
  <p>&nbsp;</p>
  <p>Maar sommige screen readers zeggen dat er drie paragrafen zijn, dat is verwarrend.</p>
</section>

Geen semantiek

Een div gebruiken:

<section>
    <h1>Interessante pagina</h1>
    <div>Deze eerste tekst ziet er misschien prima uit, maar de paragraph role ontbreek in de accessibility tree.</div>
    <div role="paragraph">Gebruik gewoon een p-element in plaats van ARIA om de role te verkrijgen.</p>
</section>

Wanneer je tekstfragmenten na elkaar plaatst is het belangrijk dat je een element zoals paragraaf gebruikt (en niet een inline element zoals span of label), zodat de twee tekstfragmenten los van elkaar worden voorgelezen door screen readers. Wanneer de CSS niet geladen kan worden, dan heeft p wel marge en div niet, in veel situaties zonder CSS is p daarom leesbaarder dan div.

inline in plaats van block-elementen

<label for="name">Voornaam</label><span>Voornaam is verplicht</span>

Beter:

<p><label for="name">Voornaam</label></p>
<p>Voornaam is verplicht</p>

Overdreven nadruk

Benadruk niet een hele paragraaf, maar markeer het belangrijke gedeelte.

<p>
  <strong
    >Tenzij anders vermeld is op de inhoud van deze website de Creative Commons zero verklaring (CC0) van toepassing.
    Dit houdt in dat iedere vorm van hergebruik van de inhoud van deze site is toegestaan, tenzij bij of in een bepaald
    onderdeel (bijvoorbeeld een logo of een foto) staat aangegeven dat op dat onderdeel een auteursrechtelijke
    uitzondering van toepassing is.
  </strong>
</p>

Beter:

<p>
  <em>Tenzij anders vermeld</em> is op de inhoud van deze website de Creative Commons zero verklaring (CC0) van
  toepassing. Dit houdt in dat <strong>iedere vorm van hergebruik van de inhoud van deze site is toegestaan</strong>,
  tenzij bij of in een bepaald onderdeel (bijvoorbeeld een logo of een foto) staat aangegeven dat op dat onderdeel een
  auteursrechtelijke uitzondering van toepassing is.
</p>

Relevante WCAG regels

Implementaties

CSS

Gemeente Utrecht

HTML

Gemeente Utrecht

Web Component

Gemeente Utrecht

Figma

NL Design System

Levende Backlog

De Paragraph component staat bij NL Design System in de levende backlog, heb je een concrete eisen of wensen voor dit component? Laat het ons dan daar weten!