import{Paragraph}from"@nl-design-system-candidate/paragraph-react";exportconstMyPage=()=>{return(<html><body><Paragraph>Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph></body></html>);};
De Lead Paragraph werkt zo:
Je kunt de React component zo gebruiken:
codevoorbeeld
<Paragraphpurpose="lead">Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph>
Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.
Als je implementatie voldoet aan de acceptatiecriteria voor dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).
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.
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.
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.
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 CSS).
Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals bijvoorbeeld: tabellen, grafieken, video's en landkaarten.
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.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
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 bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
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 voortang 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.
@nl-design-system-candidate/paragraph-css versie 2.
@nl-design-system-candidate/paragraph-react versie 2.