Divider
Divider
Easy to use for everyone
Horizontal dividers without a label use the semantic<hr>
('thematic break' or 'horizontal rule') HTML element.
Vertical dividers use theseparator
role and have anaria-orientation
attribute set tovertical
. Horizontal dividers with a label use theseparator
role and have anaria-orientation
attribute set tohorizontal
. These attributes are implicitly present on horizontal dividers with no label because of the use of the<hr>
element.
For Assistive Technology
Labels on dividers will be announced by a screen reader when navigating with a virtual cursor.
Based on
The divider component has been based on the following resources:
-
ARIA: separator role , accessed October 2024. -
WAI-ARIA: Role=Separator , accessed October 2024. -
<hr>: The Thematic Break (Horizontal Rule) element , accessed October 2024.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.