Use of the
hr element to indicate context breaks allows assistive technologies
to inform users of the change.
- Use the
hrelement wherever a context break occurs. [WCAG 1.3.1]
A context break represents a shift in thought, time, location, or similar in a work of fiction or non-fiction. These changes are typically represented by a noticeable blank space between paragraphs (i.e., considerably more than occurs between paragraphs). A context break sometimes include asterisms and other decorations (traditionally when the shift occurs immediately at the bottom of a print page where it might not be apparent).
In the past, CSS margins and images have been used to include context breaks, but the HTML5 specification
has redefined the semantics of the
hr element specifically for this purpose. CSS styling can
be applied to change the default appearance.
hr element should not be used for purely decorative purposes, such as decoration between
sections, or at the beginning or end of them.
- HTML5 — The
Frequently Asked Questions
- Why shouldn't I use CSS to increase padding or margins to get the same effect?
Although you may get the same visual effect, the user is given no information that a change in context has occurred. CSS class names carry no semantic meaning.
Print-first workflow tools often use this CSS technique to indicate context changes when exporting, but it is inherently inaccessible.
- Can I insert an
imgtag to indicate context change?
Images are a suboptimal way to indicate a context change because they carry no semantic information. Unlike pure CSS solutions, the
altattribute can be used to indicate the context change, but that doesn't compensate for the more uniform experience that the
hrelement can provide.