Content Divider

How the Content Divider works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue

AAWCAG 2.2 target

3keyboard interactions

A plain divider is a role="separator" with aria-orientation="horizontal". A divider that holds buttons becomes a role="group" of native buttons, because a separator cannot contain controls. The line itself is a decorative span.

Keyboard#

Tab

Passes over a plain or labelled divider: it is not focusable. On a button divider, moves to each button.

Enter

On a divider button: runs its action.

Space

On a divider button: runs its action on key release.

Semantics#

role="separator"

Announced as a separator. Its children are presentational, so a label inside it ("Today", "Or") may not be read.

Section, label, orb

aria-orientation="horizontal"

The default, set explicitly.

Separator

role="group"

Holds the buttons. Grouped buttons get a Button Group named "Divider actions".

Button types

<button aria-label>

Named "Add item" by default; pass buttonAriaLabel for the real action.

Icon button

aria-hidden

Decoration only.

Lines and orb

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

Not required

Line · Every type

The #f2f2f2 line (1.12:1 on white) is decorative; spacing and content still separate the groups.

WCAG 1.4.11 Non-text Contrast ↗

4.5:1

Labels · Center, Left, Solid text

Satoshi Medium 14 in #6d6d6d measures 5.17:1 on white. The overline in #8f8f8f measures 3.23:1 on white and 3.10:1 on the 2% band.

WCAG 1.4.3 Contrast (Minimum) ↗

4.5:1

Button label · Rest, Hover, Pressed

11px bold #6d6d6d: 5.17:1 at rest, 4.62:1 on hover, 3.19:1 pressed.

WCAG 1.4.3 Contrast (Minimum) ↗

3:1

Focus indicator · Focus visible

A 2px #1a6ef8 ring with a white gap (4.54:1 on white).

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗

Motion#

The divider button's hover fill changes over 150ms.

Checklist#

Use aria-hidden on a divider that is only spacing, so screen readers don't announce a separator between every block.

When a label matters ("Or" between two sign-in methods), don't rely on it inside role="separator": put it in aria-label, or render the label as text beside a hidden line.

The overline (Or, section names) is under 4.5:1 and the pressed button label is about 3.2:1. Both need a darker shade.

A divider button that expands content needs aria-expanded, which the component does not set.