Separator accessibility

WCAG 2.1 AA requirements

Decorative vs semantic

• By default, decorative={true} sets aria-hidden on the separator. Screen readers skip it entirely. This is correct when the visual layout already implies the boundary.
• Set decorative={false} only when the rule separates two genuinely independent sections (e.g., between an article and a related-items panel). This adds role="separator" and aria-orientation.

When to use decorative={false}

• Between a main content area and a sidebar panel.
• Between unrelated form sections that need to be announced as separate.
• Between a navigation group and content.

In most cases (card sections, menu items, toolbar groups), decorative={true} is correct.

Orientation

• When decorative={false}, the aria-orientation attribute is set to "horizontal" or "vertical" to match the visual direction. This tells assistive tech how the separator is oriented.

Contrast

• The separator uses bg-border, which is designed to be visible against bg-background in both themes.

Audit checklist

• Decorative separators have aria-hidden
• Semantic separators have role="separator" and aria-orientation
• Separator is visible in both light and dark themes
• Decorative/semantic choice matches the actual content relationship