ARIA: separator role

A separator is a divider that separates and distinguishes sections of content or groups of menuitems. There are two types of separators: a static structure that provides a visible boundary, identical to the HTML <hr> element, and a focusable, moveable widget.

Elements with the role separator have an implicit aria-orientation value of horizontal.

A non-focusable separator is a static structural element that 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. Thematic breaks that aren't focusable can still be perceivable by a screen reader user when using a reading cursor that does not depend on focus.

<h2>My first blog post</h2>
…
<img src="blueline.gif" role="separator" alt="" />
<h2>Two years later, my second post</h2>
…

In the example, an image creates a visual separator between two blog posts. The author could have used a semantic thematic break <hr> element and styled it with CSS to make it blue (and not have to change the image when they change the blog's theme), or the author could have encompassed each post in the semantic <article> element, or both.

<section role="feed">
  <article>
    <h2>My first blog post</h2>
    …
  </article>
  <hr />
  <article>
    <h2>Two years later, my second post</h2>
    …
  </article>
</section>

[role="feed"] > hr {
  height: 3px;
  background-color: blue;
}

An accessible name is not needed.

The separator role can be used to identify the element as a visual separator between groups of items within a menu, such as groups of menuitemradio or menuitemcheckbox elements.

If the separator is focusable, providing a visible boundary between two sections of content and enabling the user to change the relative size of the sections it separates by changing its position, the value of aria-valuenow must be set to a number reflecting the current position of the separator and the value must be updated when it changes. The aria-valuemin and aria-valuemax should also be included if they aren't set to the default values of 0 and 100, respectively.

An accessible name, with aria-label should be included if there is more than one focusable separator.

There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in a separator. To deal with this limitation, browsers, automatically apply role presentation to all descendant elements of any separator element as it is a role that does not support semantic children.

For example, consider the following separator element, which contains a heading.

<div role="separator"><h3>Title of my separator</h3></div>

Because descendants of separator are presentational, the following code is equivalent:

<div role="separator"><h3 role="presentation">Title of my separator</h3></div>

From the assistive technology user's perspective, the heading does not exist since the previous code snippets are equivalent to the following in the accessibility tree:

<div role="separator">Title of my separator</div>

aria-orientation (default is horizontal for separator)

By default, the divider for separator roles is assumed to be horizontal. The value can be included and set to horizontal, undefined (the default for other roles unless otherwise specified), or vertical.

aria-valuenow

If the separator is focusable and has a known value, the aria-valuenow defines the current value. If not focusable or the value is unknown, do not include this attribute.

aria-valuemin (default is 0)

If the separator is focusable, and the minimum value is not 0, include the minimum value with aria-valuemin. If the

aria-valuemax (default is 100)

If the separator is focusable, and the maximum value is not 100, include aria-valuemax with a value equal to or larger than aria-valuemin.

aria-valuetext

If the separator is focusable, and the aria-valuenow is not optimal in providing the user with usable information, included aria-valuetext content will be read instead of the aria-valuenow value.

• Thematic break HTML <hr> element
• Example separator in a menubar