Mega-Menu That Collapses When Crossing the Gap to Reach It

Why it matters

Screen-magnifier users, people with motor tremors, and keyboard-only users of tooltips/menus.

How to test

Hover over a mega-menu trigger, then move the pointer diagonally toward the opened menu: if there's a gap that causes it to collapse before you arrive, it fails.

How to fix

Hover/focus-triggered content must stay visible until dismissed, be dismissible with Esc without moving pointer/focus, and remain when the pointer moves onto it.

<button aria-describedby="tip-1">ⓘ</button>

<div id="tip-1" role="tooltip">More info about this field</div>

A hover-triggered tooltip must be dismissible, stay put while the pointer moves onto it, and stay visible until dismissed.

Outcome

On a subscription box service's account settings, this barrier is gone for screen-magnifier users, people with motor tremors — they reach the same outcome without extra effort.

Who is affected

Screen-magnifier users, people with motor tremors, and keyboard-only users of tooltips/menus.