probeo

Why can't a separator have aria-valuenow?

aria-conditional-attr page

The issue

A separator with value attributes tells a screen reader it is an adjustable splitter when it is only a line between sections. Users can hear a value they can’t change, on an element they can’t reach with the keyboard.

The cause is that ARIA defines two kinds of separator. A focusable separator is a widget, a splitter the user drags or moves with the arrow keys, and takes aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext. A separator that can’t be focused is structure, like an <hr>, and those attributes don’t apply to it.

Scope

Each visible element with the separator role, explicit or from an <hr>, is checked when it can’t be focused. Probeo’s version of this rule checks separators only.

How to check you have it

  • In probeo: the page reports the aria-conditional-attr rule, “ARIA attributes must be used as specified for the element’s role”, with serious impact, naming the value attributes present on a non-focusable separator. This is a best practice rather than a WCAG criterion.
  • By hand: find role="separator" and <hr> in the source. If one has aria-valuenow or another value attribute, check whether it has a tabindex and responds to the keyboard.
  • With a tool: axe DevTools reports the same rule id; the accessibility tree shows the element’s role and whether it is focusable.

The fix

Decide which kind of separator the element is, and make its attributes match.

If it is a visual divider, remove the value attributes. If it really is a splitter that resizes panes, make it focusable with tabindex="0", handle the arrow keys, and keep the value attributes in step with its position.

<!-- A divider -->
<hr>

<!-- A splitter -->
<div role="separator" tabindex="0" aria-orientation="vertical"
     aria-valuenow="40" aria-valuemin="20" aria-valuemax="80"
     aria-label="Resize sidebar"></div>

Done when: every separator with value attributes can be focused and operated, and the check above comes back clean.

Do not

  • Do not add tabindex to a divider just to make the attributes valid; a focusable element that does nothing is a dead stop for keyboard users.
  • Do not leave value attributes that no longer track the splitter’s position.

FAQ

Does probeo check other conditional attributes?

Not in this rule. Its version covers non-focusable separators only.

Is an hr a separator?

Yes. An <hr> has the separator role implicitly, so the same rule applies if value attributes are added to it.

Does a splitter need a name?

Yes, when there is more than one, so a screen reader user can tell them apart. aria-label or aria-labelledby both work.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.