Accessibility

Accessible horizontal rule requirements

Keep these considerations in mind if you are modifying the design system or creating a custom component.

Best practice

Ensure sufficient contrast

If an <hr> is not used a decorative element make sure the colour of the horizontal rule has enough contrast with the background so that users with visual impairments can perceive it easily.

Avoid using patterns or textures

Use solid lines for horizontal rules to avoid potential issues for users with cognitive or visual impairments.

Use appropriate spacing

Ensure that there is sufficient whitespace around the horizontal rule to improve readability and avoid creating a cluttered layout (WAI, n.d.).

Consider screen readers

Keep in mind that screen readers may interpret the <hr> element as a "section break" or "thematic break"; ensure that its usage aligns with the intended meaning in the content structure. If <hr> tags are used for visual purposes only it doesn't need to be announced by a screen reader. Add the attribute aria-hidden="true" so screen readers will ignore the element. If the element should be announced by a screen reader, the aria-hidden attribute can be removed.