Design

Horizontal rule anatomy

To ensure the overall height of the HR rules align to our Design System's grid system the total height including padding and line weight must always be divisible by 4.

To achieve this the padding for each of the different horizontal rules is adjusted to factor in the height of the horizontal line.

For consistency the colour for horizontal rules is determined by the the border colour variables.

Research and Rationale:

The <hr> HTML element represents a thematic break between paragraph-level content. It can signify a change in scene, topic, or section within a document. Historically, the <hr> element was used to create a visible horizontal line between sections, but it is now defined semantically rather than presentationally (Mozilla Developer Network, n.d.).

When using <hr> elements, it is essential to consider their purpose and impact on accessibility:

Decorative horizontal rules

If the <hr> is used purely for decorative purposes (for example when conveying visual separation without conveying meaning), you must ensure it is not announced by screen readers or other assistive technologies. To achieve this, apply the aria-hidden="true" attribute. This attribute tells screen readers to ignore the element, maintaining a seamless experience for users who rely on assistive technologies.

In such cases, the horizontal rule is designed to use lighter less intrusive border colours. Because the rule is decorative, it does not need to meet accessibility contrast requirements.

Thematic breaks

When the <hr> is used semantically as a thematic break (for example indicating a shift in content or topic), it must remain perceivable to all users. In this scenario we do not include the aria-hidden attribute. This ensures that screen readers announce the thematic break, providing clarity about the content's structure. To ensure the <hr> meets accessibility contrast guidelines the styles are set to use colours which meet a contrast ratio or 3:1.