• Success Criterion 2.5.7
  • Conformance level AA

Split-Pane Layout Resizable Only by Dragging the Divider

2.5.7 — Dragging Movements

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Split-pane resizing only by dragging the divider.

Example 

divider.addEventListener('mousedown', startResize);
document.addEventListener('mousemove', resizePanes);
// there is no reset button and no keyboard resize

Why it matters

A learner who can't drag the divider precisely is stuck with a translation panel too small or too large to read.

How to test

Try resizing a split-pane layout via a button, keyboard shortcut, or preset sizes instead of dragging the divider: if drag is the only method, it fails.

How to fix

Give the divider keyboard-arrow resizing and a one-click reset, not drag as the only option.

<button aria-label="Reset panel sizes" onclick="resetPaneSizes()">Reset layout</button>
divider.tabIndex = 0;
divider.addEventListener('keydown', handleArrowResize);

Outcome

A learner presses Reset once, and both panels return to a comfortable, readable size.

Who is affected

People with limited fine motor control and keyboard-only users who cannot operate a mouse-drag divider.

Learn more

Related scenarios