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.

Labels on dividers will be announced by a screen reader when navigating with a virtual cursor.

The divider component has been based on the following resources:

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.