Separator / horizontal rule

How to test a separator / horizontal rule

Gherkin Condensed

Given that I am on a page with a separator / horizontal rule

WHEN I use arrow keys to browse to the separator I SEE the element is skipped entirely. It is completely inert.

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use arrow keys to browse to the separator
- I HEAR The element is skipped entirely. It is completely inert.

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to the separator
- I HEAR The element is skipped entirely. It is completely inert.

When I use	I see/hear
Any key	Nothing happens. It is completely inert.

When I use	I hear
Swipe	The element is skipped entirely. It is completely inert.

Reads	I hear
Name	The element is skipped entirely. It is completely inert.

Separators must be ignored by the screenreader.

It is preferred to create these lines with CSS rather than using a DOM element.

If you are unable to use appropriate CSS styles, add aria-hidden="true" to ensure it doesn’t distract from the experience.

<hr aria-hidden="true">

Angular Material uses a dom element to create separators.

<div role="separator" aria-hidden="true"></div>