How to build an accessible Separator in React
role="separator" when meaningful so screen readers announce the division; setting decorative hides it from the accessibility tree when it is purely visual
When to use a Separator
- Dividing groups of content within a section or menu
- Adding a vertical rule between inline items (orientation="vertical")
- Marking a meaningful thematic break (decorative=false)
When not to use it
- Adding spacing only — use margin/padding, not a separator
- Bordering a container — use the container border, not a separator
Accessibility
Role separator, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Multiple separators stacked to create whitespace
Prefer: Use spacing tokens for gaps; one separator for a real break
Separators imply a content division; using them for spacing misleads assistive tech
Example
<Separator />