Pre-heading

[Rozerinay]

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

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Pre-heading

Doel

Een ondersteunende tekst die boven een kop staat.

Gerelateerde componenten

Rich Text Content, Subheading, Heading Group

Onderzoek

Contactformulier voor WMEBV - Gebruikersonderzoeken.nl
Gebruikersonderzoek waarin onder andere de stapaanduiding in een formulier werd getest. Deze stond boven de Heading-2. Uit dit onderzoek bleek dat participanten, die niet bewust op zoek gingen naar de stappen, deze uiteindelijk wel vonden. Ze gaven echter aan dat het prettiger zou zijn als de stapaanduiding groter en duidelijker op de pagina stond.

Heading Group - Storybook gemeente Utrecht
In de docs staat aangegeven dat om aan WCAG eis 1.3.2 te voldoen, je de HTML van Heading plaatst vóór de HTML van de Pre-heading. De volgorde kan daarna met CSS aangepast worden.

[Rozerinay]

RVO

• Storybook

---

Screenshots / Varianten

---

Notities

• Geen component gevonden.
• In de voorbeelden hierboven is rvo-text--subtle gebruikt boven een Heading 2.
• Bestaat uit 1 woord.

[Rozerinay]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

---

Notities

Wordt gemarkeerd met het HTML-element <p>, zodat het binnen een <hgroup> kan worden gebruikt.

[Rozerinay]

Frameless

Publieke website

---

Screenshots / Varianten

Het gaat hier om de regel 'Succescriterium 1.1.1 Niveau A'

---

Notities

• Pre-heading bestaat uit de componenten Link en Data Badge.
• Staat boven een Heading 3.
• Er wordt gebruik gemaakt van utrecht-pre-heading.

[rianrietveld]

Twee opmerkingen voor de waarborging van de toegankelijkheid.

1: Alle info die bij een kopje hoort, moet in de code onder het kopje staan.
Anders missen screenreadergebruikers, die rechtstreeks naar een kopje springen, de info die erboven staat.
Dit is op te lossen door in de code de pre-heading onder het kopje te zetten en deze visueel, met CSS naar boven te verplaatsen.
Lees het WCAG-succescriterium: 1.3.2 Betekenisvolle volgorde.

2: Gebruik liever geen ALL CAPS voor de pre-heading.
Dit is lastiger te lezen omdat het woordbeeld verandert in een rechthoek. Dit is speciaal lastig voor mensen met dyslexie.
Dit is geen WCAG-succescriterium maar wel een NL Design System Stijl richtlijn.

[Rozerinay]

Den Haag

Publieke website

---

Screenshots / Varianten

---

Notities

• Geen component gevonden.
• Heeft de class denhaag-post-info.
• Wordt gebruikt in nieuwsartikelen om de publicatiedatum aan te geven.
• Staat boven een Heading-1.

[Rozerinay]

Rotterdam

---

Screenshots / Varianten

Pagina: Regelhulp Geldzorgen

Pagina: Bestrijding mediterraan draaigatje in Ommoord

---

Notities

• Geen component gevonden.
• Wordt gebruikt om het aantal stappen en de huidige stap weer te geven.
• Wordt ook gebruikt bij nieuwsartikelen om de datum, het onderwerp en de leestijd weer te geven.
• Staat boven een Heading-1 en Heading-3.

[Rozerinay]

KVK

---

Screenshots / Varianten

Pagina: Moet je organisatie UBO-opgave doen?

Pagina: Wie zijn de UBO's van je organisatie?

---

Notities

• Geen component gevonden.
• Wordt 'Chapeau' genoemd.
• Wordt gebruikt om het aantal stappen en de huidige stap weer te geven.
• Staat boven een Heading-1.

[AlineNap]

Logius | Product: Mijn Aansluitingen

• Designs
• Component a la NLDS

---

Notities

• Wordt gebruikt om het aantal stappen en de huidige stap weer te geven.
• Staat boven een H2
• Gebruikt Utrecht component op aanraden van NLDS

[AlineNap]

Zelfde opmerking als bij de subheading:

Ik vraag mij af of de subheading en pre heading een apart component zijn. Hergebruik je deze onderdelen en haar stijling op andere plekken dan de heading-group? Zo niet zou ik deze componenten onderdeel maken van de heading-group a la:

prefix.heading-group.preheading.*
prefix.heading-group.subheading.*

Net als een label in een button of accordion.
Of de content en attribution in de blockqoute

[Rozerinay]

Rian's aanvulling in het draadje van het hiep hoi bericht.

Ja, mits WCAG 1.3.2 Betekenisvolle volgorde gerespecteerd wordt.

[Rozerinay]

We sluiten de Discussion voor deze component, omdat deze niet langer een zelfstandige component is maar onderdeel uitmaakt van de Heading Group.