Description
A divider that separates and distinguishes sections of content or groups of menuitems.
There are two types of separators: a static structure that provides only a visible boundary and a focusable, interactive widget that is also moveable. If a separator is not focusable, it is revealed to assistive technologies as a static structural element. For example, a static separator can be used to help visually divide two groups of menu items in a menu or to provide a horizontal rule between two sections of a page.
Authors MAY make a separator focusable to create a widget that both provides a visible boundary between two sections of content and enables the user to change the relative size of the sections by changing the position of the separator. A variable separator widget can be moved continuously within a range, whereas a fixed separator widget supports only two discrete positions. Typically, a fixed separator widget is used to toggle one of the sections between expanded and collapsed states.
If the separator is focusable, authors MUST set the value of aria-valuenow to a number reflecting the current position of the separator and update that value when it changes. Authors SHOULD also provide the value of aria-valuemin if it is not 0 and the value of aria-valuemax if it is not 100. If missing or not a number, the implicit values of these attributes are as follows:
- The implicit value of aria-valuemin is 0.
- The implicit value of aria-valuemax is 100.
- The implicit value of aria-valuenow is 50.
In applications where there is more than one focusable separator, authors SHOULD provide an accessible name for each one.
Elements with the role separator have an implicit aria-orientation value of horizontal.
Example
HTML Example
<p>Lorem ipsum…</p>
<hr role=”separator”>
<p>Lorem ipsum…</p>
Characteristics
Superclass Role
- structure (if not focusable)
- widget (if focusable)
Related Concepts
- HTML hr
Required States and Properties
- aria-valuemax (if focusable)
- aria-valuemin (if focusable)
- aria-valuenow (if focusable)
Supported States and Properties
- aria-orientation
- aria-valuetext (if focusable)
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Children Presentational
- True
Implicit Value for Role
- Default for aria-orientation is horizontal.
- Default for aria-valuemin is 0.
- Default for aria-valuemax is 100.
- Default for aria-valuenow is 50.
Implicit Value for Role
- Default for aria-orientation is horizontal.
Semantic HTML
Use the HTML <hr> tag.
<p>
This is the first paragraph of text.
</p>
<hr>
<p>
This is the second paragraph of text.
</p>
Reference
- W3C (opens new window)