Skip to content

Accessibility

A divider separates groups of content with a line. It takes no keyboard focus and follows no APG interaction pattern, so an accessible divider is about meaning, not operation, and meets WCAG 2.1 AA. The one decision that matters is whether the line carries meaning: a divider that marks a genuine thematic break should expose that boundary to assistive technology as a separator (a native <hr>, or role="separator"), while a purely decorative divider — one whose separation is already implied by the surrounding structure or spacing — should stay a plain element with no role, so screen readers skip it instead of announcing an empty separator on every line.

For designers

Section titled “For designers”
  • When a divider marks a meaningful boundary, its line must reach a 3:1 contrast ratio against the surface it sits on, so the separation it conveys is actually perceivable. Source: WCAG 1.4.11 Non-text Contrast.
  • A purely decorative divider is exempt from that minimum — but keep it perceivable enough to do its visual job; don’t lean on a hairline so faint it reads as a rendering artefact rather than a deliberate separation.
  • Use the semantic divider fills (muted, primary, on-contrast) rather than fixed values, so the line adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

Render a divider decoratively by default: a bare <div class="tng-divider"> (or the CSS borders drawn by .tng-has-dividers between children) carries no role and stays out of the accessibility tree — which is correct when the separation only reinforces structure the markup already conveys, such as the boundaries between list items. Promote the divider to a real separator only when the line itself marks a boundary assistive technology would otherwise miss: render it as <hr> (the React component’s as="hr") or add role="separator", and screen readers announce it as a separator. Source: WCAG 1.3.1 Info and Relationships.

A separator is horizontal by default; for a vertical divider that separates groups — for example between navigation links — add aria-orientation="vertical" so its direction is exposed correctly. A divider never takes focus and needs no keyboard handling.