• Success Criterion 1.4.12
  • Conformance level AA

Menu Items Pushed Out of Reach by Wider Word Spacing

1.4.12 — Text Spacing

Scenario

Setting

A dating app's profile setup

What’s wrong

Menus where increased word spacing pushes items out of clickable region (functionality loss).

Example 

.interest-menu { width: 200px; height: 240px; overflow: hidden; }
.interest-menu li { padding: 8px; }

Why it matters

Wider word spacing pushes lower interest options, like 'Hiking' and 'Cooking,' below the menu's fixed 240px height, where they can't be seen or clicked.

How to test

Apply the text-spacing override to a menu: if increased word spacing pushes items outside their clickable region, functionality is lost and it fails.

How to fix

Let overflowing menu content scroll into reach instead of hiding behind a clipped, fixed-height box.

.interest-menu { width: 200px; max-height: 240px; overflow-y: auto; }

Outcome

A user with wider word spacing scrolls down and still selects 'Hiking' from the full interest list.

Who is affected

Users with custom spacing settings lose the ability to select entire interest tags that scroll out of the visible, clickable area.

Learn more

Related scenarios