Divider

A rule between blocks of content, with an optional label.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<div class="wsu-divider" role="separator">Saved plans</div>

<div class="wsu-divider wsu-divider--vertical" role="separator" aria-orientation="vertical">Saved plans</div>

Why it works this way

• role="separator" rather than <hr>. <hr> cannot contain the label, so a divider reading "Saved plans" between two sections would have to paint the word as a pseudo-element, which puts it in front of sighted users and nowhere in the accessibility tree. The label here is real content instead.
• An unlabeled divider renders with nothing between its rules, the same shape a plain <hr> would have drawn anyway, so leaving the label out costs nothing.

Accessibility

• role="separator" names what the rule is for (1.3.1).
• A vertical divider carries aria-orientation="vertical" so its role is not assumed to be horizontal.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
vertical	false	Sets aria-orientation="vertical" and the vertical rule.

Vue

Prop	Type and default	What it does
vertical	Boolean, false	Sets aria-orientation="vertical" and the vertical rule.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-divider.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	div	role	1
public apps/examples/static-html/public-app.html	div	role	1