Accessibility
The Separator component has been designed with accessibility in mind, providing semantic separation using a semantic element.
Accessibility Props
| Name | Type | Description |
|---|---|---|
| ariaHidden | boolean | If true, hides the separator from screen readers |
Automatic Accessibility Features
- The component automatically renders as a semantic
<hr>element - When a
labelis provided, the label text is announced by screen readers
Best Practices
- Set
ariaHidden={true}when the separator is purely decorative and doesn’t provide meaningful content structure - When using a
label, ensure the text is descriptive and helpful for understanding content structure
Examples
Semantic separator for content organization
<Separator />
Screen reader announces: “Separator”.
Decorative separator
<Separator ariaHidden />
Screen reader announces: Nothing.
Separator with descriptive label
<Separator label="Contact Information" />
Screen reader announces: “Separator. Contact Information.”