Heading

Candidate

Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.

Anatomie

Candidate component gebruiken

Design tokens

name	type
`nl.heading.level-1.color`	color
`nl.heading.level-1.font-family`	fontFamilies
`nl.heading.level-1.font-size`	fontSizes
`nl.heading.level-1.font-weight`	fontWeights
`nl.heading.level-1.line-height`	lineHeights
`nl.heading.level-1.margin-block-end`	dimension
`nl.heading.level-1.margin-block-start`	dimension
`nl.heading.level-2.color`	color
`nl.heading.level-2.font-family`	fontFamilies
`nl.heading.level-2.font-size`	fontSizes
`nl.heading.level-2.font-weight`	fontWeights
`nl.heading.level-2.line-height`	lineHeights
`nl.heading.level-2.margin-block-end`	dimension
`nl.heading.level-2.margin-block-start`	dimension
`nl.heading.level-3.color`	color
`nl.heading.level-3.font-family`	fontFamilies
`nl.heading.level-3.font-size`	fontSizes
`nl.heading.level-3.font-weight`	fontWeights
`nl.heading.level-3.line-height`	lineHeights
`nl.heading.level-3.margin-block-end`	dimension
`nl.heading.level-3.margin-block-start`	dimension
`nl.heading.level-4.color`	color
`nl.heading.level-4.font-family`	fontFamilies
`nl.heading.level-4.font-size`	fontSizes
`nl.heading.level-4.font-weight`	fontWeights
`nl.heading.level-4.line-height`	lineHeights
`nl.heading.level-4.margin-block-end`	dimension
`nl.heading.level-4.margin-block-start`	dimension
`nl.heading.level-5.color`	color
`nl.heading.level-5.font-family`	fontFamilies
`nl.heading.level-5.font-size`	fontSizes
`nl.heading.level-5.font-weight`	fontWeights
`nl.heading.level-5.line-height`	lineHeights
`nl.heading.level-5.margin-block-end`	dimension
`nl.heading.level-5.margin-block-start`	dimension
`nl.heading.level-6.color`	color
`nl.heading.level-6.font-family`	fontFamilies
`nl.heading.level-6.font-size`	fontSizes
`nl.heading.level-6.font-weight`	fontWeights
`nl.heading.level-6.line-height`	lineHeights
`nl.heading.level-6.margin-block-end`	dimension
`nl.heading.level-6.margin-block-start`	dimension

CSS

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

@nl-design-system-candidate/heading-css versie 1.

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/heading-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/heading-css@1/dist/heading.css" />

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

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

Als je CSS imports gebruikt vanuit JavaScript:

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

Heading level 1

Gebruik voor een hoofdkop van een pagina de nl-heading en nl-heading--level-1 class name op een h1, element:

<h1 class="nl-heading nl-heading--level-1">Hoofdkop van de pagina</h1>

Heading level 2

Gebruik voor een koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat de nl-heading en nl-heading--level-2 class name op een h2, element:

<h2 class="nl-heading nl-heading--level-2">
  Een koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat
</h2>

Heading level 3

Gebruik voor een koptekst die in de koppenstructuur op het derde niveau staat de nl-heading en nl-heading--level-3 class name op een h3, element:

<h3 class="nl-heading nl-heading--level-3">Een koptekst die in de koppenstructuur op het derde niveau staat</h3>

Heading level 4

Gebruik voor een koptekst die in de koppenstructuur op het vierde niveau staat de nl-heading en nl-heading--level-4 class name op een h4, element:

<h4 class="nl-heading nl-heading--level-4">Een koptekst die in de koppenstructuur op het vierde niveau staat</h4>

Heading level 5

Gebruik voor een koptekst die in de koppenstructuur op het vijfde niveau staat de nl-heading en nl-heading--level-5 class name op een h5, element:

<h5 class="nl-heading nl-heading--level-5">Een koptekst die in de koppenstructuur op het vijfde niveau staat</h5>

Heading level 6

Gebruik voor een koptekst die in de koppenstructuur op het zesde niveau staat de nl-heading en nl-heading--level-5 class name op een h6, element:

<h6 class="nl-heading nl-heading--level-6">Een koptekst die in de koppenstructuur op het zesde niveau staat</h6>

Kop gebruiken met het uiterlijk van een ander level

Gebruik voor een koptekst die semantisch op het ene level staat, maar visueel de uitstraling heeft van een ander level de nl-heading en nl-heading--level-{het visuele level} op het semantische heading component naar keuze:

<h2 class="nl-heading nl-heading--level-4">
  Een koptekst die in de koppenstructuur op het tweede level staat en eruit ziet als het vierde level.
</h2>

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/heading-react versie 1.

Je kunt de npm package zo installeren:

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

Je kunt de React component zo gebruiken:

import { Heading } from "@nl-design-system-candidate/heading-react";


export const MyComponent = () => {
  return (
    <div>
      <Heading level={2} appearance="level-4"></Heading>
    </div>
  );
};

Of inclusief CSS:

import { Heading } from "@nl-design-system-candidate/heading-react/css";


export const MyComponent = () => {
  return (
    <div>
      <Heading level={2} appearance="level-4"></Heading>
    </div>
  );
};

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Heading.

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.

Het niveau van de kop klopt binnen de koppenstructuur van de pagina.
In HTML zijn de juiste elementen voor koppen h1 tot en met h6.

Voor screenreadergebruikers is een goede koppenstructuur een belangrijk navigatiemiddel. Gebruik daarom een heading-element van het juiste niveau met een tekst die de content van de sectie eronder beschrijft. Op die manier ontstaat een duidelijke inhoudsopgave wanneer een gebruiker met hulpsoftware een koppenlijst opvraagt.

Wil je tekst alleen maar vormgeven, bijvoorbeeld groter maken? Gebruik dan CSS in combinatie met bijvoorbeeld een span- of een p-element, geen heading-element.

Sla geen kopniveaus over, dus bijvoorbeeld een h3 na een h1. Gebruikers van screenreaders kunnen dan het idee krijgen dat ze informatie missen.

Let erop dat je per pagina 1 h1 gebruikt en dat deze aan het begin van de main-content staat. Door niet meer dan 1 h1 te gebruiken, kan een screenreadergebruiker makkelijk naar het begin van de unieke content springen.

NL Design System richtlijnen:
- Richtlijnen voor koppen
- Gebruik ruimte om relaties te creëren tussen elementen, Relaties binnen typografie
contentmakerWCAG 1.3.1Niveau A
De contrastverhouding van de tekstkleur 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:
- Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
- Geef tekst voldoende kleurcontrast
designercontentmakerWCAG 1.4.3Niveau AA
De koptekst maakt duidelijk waar de sectie over gaat.

De tekst van de kop beschrijft kort en bondig waar de tekst eronder over gaat, als een soort samenvatting.

designercontentmakerWCAG 2.4.6Niveau AA
Als de kop in een andere taal is dan de rest van de pagina, dan heeft het lang-attribuut 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.

contentmakerdeveloperWCAG 3.1.2Niveau 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.

Als tekst er uitziet als een kop, moet dit ook in de HTML een kop zijn.
In HTML zijn de juiste elementen voor koppen h1 tot en met h6.

NL Design System richtlijnen:
- Richtlijnen voor koppen
- Gebruik ruimte om relaties te creëren tussen elementen, Relaties binnen typografie
developerWCAG 1.3.1Niveau A
Als je de tekst 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 het 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:
codevoorbeeld
```
<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

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-heading in CSS

ams-heading in React

Definition of Done

Afgevinkt.

Naam
Naam bepaald op basis van NL Design System naamgeving.
Afgevinkt.

Beschrijving
Doel van component is in één zin beschreven.
Afgevinkt.

Afbeelding
Afbeelding gemaakt om de component visueel duidelijk te maken.
Afgevinkt.

Discussion URL
Afgevinkt.

Backlog
Staat in de publieke backlog van NL Design System.
Afgevinkt.

Bruikbaar
Bewijs verzameld dat de component algemeen bruikbaar is.
Afgevinkt.

Link
Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
Afgevinkt.

Varianten
Naam en doel van benodigde varianten beschreven.
Afgevinkt.

Onderzoek
Nut van component is onderbouwd door gebruikersonderzoek.
Afgevinkt.

Kernteam
Kernteam verwacht dat dit component tot Hall of Fame kan komen.
Afgevinkt.

nldesignsystem.nl
Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Afgevinkt.

≥2 Thema's
Afgevinkt.

Versimpeld of gesplitst
Afgevinkt.

API gemeenschappelijk
Afgevinkt.

API conventie
Afgevinkt.

Design tokens conventie
Afgevinkt.

Start thema
Afgevinkt.

Design tokens nuttig
Afgevinkt.

Storybook NLDS
Afgevinkt.

Figma in lijn
Afgevinkt.

Figma NLDS
Afgevinkt.

Coverage features
Afgevinkt.

Semantiek goedgekeurd
Afgevinkt.

A11y getest
Afgevinkt.

i18n getest
Afgevinkt.

Content flexibel
Afgevinkt.

NPM (candidate)
Afgevinkt.

Changelog
Afgevinkt.

Documentatie aliassen
Afgevinkt.

Documentatie anatomie
Afgevinkt.

Documentatie op website
Afgevinkt.

Documentatie a11y
Afgevinkt.

Documentatie getest

Candidate projectbord op GitHub

Niet afgevinkt.

Do and don't voorbeelden
Niet afgevinkt.

HTML/CSS
Niet afgevinkt.

Gebruikersonderzoek
Niet afgevinkt.

Webcomponent
Niet afgevinkt.

React
Niet afgevinkt.

API unit tests
Niet afgevinkt.

A11y audit
Niet afgevinkt.

NPM
Niet afgevinkt.

Semver
Niet afgevinkt.

Figma geversioneerd
Niet afgevinkt.

Figma changelog
Niet afgevinkt.

Code changelog
Niet afgevinkt.

Richtlijnen design tokens
Niet afgevinkt.

Richtlijnen redacteuren
Niet afgevinkt.

Beveiliging
Niet afgevinkt.

Privacy
Niet afgevinkt.

Getest met designers
Niet afgevinkt.

Getest met developers
Niet afgevinkt.

Getest met redacteuren
Niet afgevinkt.

≥2 organisaties geswitcht

Hall of Fame projectbord op GitHub

Help component verbeteren

We vinden het belangrijk dat de component Heading 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 Heading 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.