Separator

[jeffreylauwers]

We willen graag meer leren over het Separator 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

Separator

Doel

Markering van de plek waar tekst op een nieuwe manier verder gaat, zoals een nieuwe scene of een ander onderwerp.

Ook bekend als

Divider, Horizonal rule, Thematic break.

Onderzoek

<hr>: The Thematic Break (Horizontal Rule) element - MDN
Documentatie van Mozilla Developers Network over het <hr> HTML element.

Not Your Typical Horizontal Rules
In dit artikel beschrijft Sara Soueidan de Horizontal Rule aan de hand van semantiek, toegankelijkheid en stijling.

[MariekeBrouwer]

wij gebruiken het bijvoorbeeld op pagina's als deze om verschillende 'typen' content van elkaar te scheiden.

Belangrijk om te noemen is dat bij website pagina's er wel wordt gekeken naar de content opzet als geheel. Bij maar 1 blok content is het bijvoorbeeld niet per se logisch om de divider te gebruiken.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• GitHub

---

Screenshots / Varianten

Storybook

Default

Vertical

Vertical Images

Figma - huidig

Inset

Full-bleed

Figma - WIP

---

Notities

• In Storybook 'Divider' genoemd.
• Richtlijnen beschikbaar.
• Lijkt op basis van 'Figma - huidig' eerder als border ingezet te worden?

[jeffreylauwers]

RVO

• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

---

Notities

Onder de naam 'Horizontal rule'

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Default
Markup with the <hr> element, styling via utrecht-separator class name. For horizontal separators, <hr> is the preferred markup.

Separator Div Support
Markup with a <div> element, with additional attributes to give the correct ARIA role. Styling via utrecht-separator class name.

Figma

---

Notities

Richtlijnen beschikbaar (Storybook).

[rianrietveld]

Persoonlijk vind ik dit geen component. In alle gevallen die ik in de praktijk tegenkom wordt hiervooreen border gestyled met CSS gebruikt.
Een hr wordt voorgelezen door een screenreader, maar in veel van de bovenstaande voorbeelden is het meer een visuele aanduiding, een kader, een lijn onder een kopje etc.

ik ben hier erg bang voor de verwarring tussen het gebruik van visuele elementen en echte betekenisvolle info.

Wat is echt een goede use case om een hr te gebruiken in plaast van een CSS-border?
Als dit toch als component wordt geaccepteerd en het betekenis heeft voor het begrijpen van de inhoud moet het in ieder geval voldoen aan de kleurcontast eisen van niet-tekstuele content (WCAG 1.4.11) en echt zin hebben en ook logisch zijn in de leesvolgorde (WCAG1.3.2).

[rianrietveld]

Na overleg met @jeffreylauwers
Ik ben het ermee eens om de <hr /> naar de Hall of Fame te brengen mits goed gedocumenteerd is:

• wanneer je hem wel maar ook juist niet moet gebruiken (gerelateerd aan (WCAG1.3.2))
• dat als je hem toepast hij moet voldoen aan WCAG non-text contrast richtlijn (WCAG 1.4.11).

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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

[jeffreylauwers]

✨ Dit component is nu Community ✨

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