Heading

[jeffreylauwers]

We willen graag meer leren over het Heading component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Heading

Doel

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

Gerelateerde componenten

Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, Heading Group, Rich Text Content

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Heading

Onderzoek

How Users Read on the Web - Nielsen Norman Group
Uit onderzoek blijkt dat mensen veelal scannen in plaats van lezen. Headings kunnen hier bij helpen.

Headings Are Pick-Up Lines - Nielsen Norman Group
Artikel over het schrijven van een goede Heading. Niet vanuit onderzoek, eerder tips.

Passive Voice Is Redeemed For Web Headings - Nielsen Norman Group
Artikel, op basis van onderzoek, over het schrijven van Headings (en andere teksten).

Teskt en taalgebruik richtlijnen - NL Design System
Richtlijnen rondom tekst en taalgebruik.

Accessible heading structure - The A11Y Project
Artikel over het gebruik van Headings en hoe ze onder andere bijdragen aan toegankelijkheid.

Richtlijnen

https://nldesignsystem.nl/wcag/2.4.6/

Notities

• Zie Slack bericht voor input documentatie. Aantal H1's en semantiek ten opzichte van styling.
• Zie Github Issue bij WCAG Audit Discussion voor de vraag over het gebruik van headings in een meerstappenformulier.

[sanderdegoose]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Figma
We gebruiken de H1 (32px) altijd voor pagina titels, maar we kunnen ook, mocht dat nodig zijn, de H1 overschrijven met een grotere letter (bijv. een 48px).

Storybook

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Notities

• In Figma 9 sizes beschikbaar. 5 levels beschreven.
• In Figma opties voor Bold en Light font-weight inclusief richtlijnen over gebruik.
• In Storybook 6 sizes en levels.

[jeffreylauwers]

Amsterdam

• Storybook - Heading
• Storybook - Page Heading
• Figma
• Github

---

Screenshots / Varianten

Storybook

Page Heading

Heading 1

Heading 2

Heading 3

Heading 4

Inverse colour

Figma
Spacious

Compact

---

Notities

• Responsive gedrag van fontsize obv clamp en calc in CSS. Hierover heeft Vincent ook verteld tijdens een Heartbeat.
• Storybook component biedt opties om 'level' (1 tot 4) en 'size' (1 tot 6) apart van elkaar in te stellen.
• Storybook component biedt de mogelijkheid om de kleur om te keren bij een donkere achtergrond.
• Apart Storybook component voor Page Heading. Dit is een variant van een Heading level 1 met een eigen stijl.
• Figma component biedt de mogelijkheid voor spacious en compact weergave.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

---

Notities

• Zowel in Figma (Huidig) als Storybook combinaties van Heading met Paragraph.
• 5 sizes en levels beschreven.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

---

Notities

• 5 sizes en levels beschikbaar.
• Ook documentatie over hoe van een tekst een heading te maken en hoe een heading voorbij level 6 te creëren.

[jeffreylauwers]

Open Gemeenten

• Documentatie website
• Patternlab

---

Screenshots / Varianten

Patternlab

Sketch

---

Notities

• 4 sizes en levels beschikbaar.
• Headings ook als link beschikbaar.
• Headings binnen Sketch lijken om het niveau een andere kleur te hebben.

[jeffreylauwers]

RVO

• Storybook - Demo content pagina
• Storybook - Heading
• Figma
• Github

---

Screenshots / Varianten

Storybook
Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Notities

• 6 sizes en levels beschikbaar.
• In Storybook mogelijkheid om Headings als link toe te passen.
• In Storybook mogelijkheid om een Icon (before en after) toe te passen.
• Documentatie over beschikbaar om de heading zowel dikgedrukte als normale tekst mee te geven.

[jeffreylauwers]

Utrecht

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Notities

• Documentatie website bevat richtlijnen.
• 6 sizes en levels beschikbaar.
• Verschil tussen Figma en Storybook (Font size en Font weight vanaf H3 en lager)

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Heading op het Community bord

[rianrietveld]

Op verzoek van @Robbert heb ik een klein experimentje gedaan hoe headings en aria-level wordt voorgelezen bij VO, NVDA en JAWS. Uitslag komt nog steeds overeen met wat Adrian Roselli zegt: JAWS cannot handle any level above 6.

Zie: https://codepen.io/rianrietveld/pen/oNKPXJj?editors=1000

Resultaat:
H7 en hoger worden door geen van de drie screen readers als heading herkend en dat is logisch, want geen HTML.
VO en NVDA lezen aria-level 7 en hoger goed voor. Het dondert niet wat het niveau is, het wordt voorgelezen.
JAWS leest alles wat hoger is dan 6 voor als heading level 2.

Dus, conclusie: aria-level groter dan 6 kan nu nog niet worden toegepast. Helaas.

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Heading op het Candidate bord