Overview
Dividers should be implemented as decorative elements that don't interfere with screen reader navigation.
Use semantic HTML structure to make sure content separation is understood by assistive technologies.
Semantic Markup
- Use <hr> element for semantic content separation that should be announced to screen readers.
- Use role="presentation" for purely decorative dividers that don't need to be announced to assistive technologies.
- Ensure adequate colour contrast (3:1 minimum) between divider and background colours for visual accessibility.
- Maintain proper content structure around dividers so screen readers can navigate content sections logically without confusion.