Roles

WAI-ARIA: Role=Separator

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

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.

Role=Separator 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

Inherited States and Properties

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

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=separator.

Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.