Content on Hover or Focus
Mega menus and tooltips that open on hover can be closed with Escape, can be hovered themselves, and stay open until the shopper leaves them.
Who it affects
People who zoom in see a small part of the page at a time. A menu that opens over what they are reading has to close when they press Escape, and stay put while they move onto it.
What a scan checks
- On one page of each kind, the pointer moves onto each header menu and tooltip: Escape is pressed while it is open, the pointer moves from the trigger onto the content, and it is held there.
How it gets fixed
- One attribute on the menu item lets SiteRemora's script close the menu on Escape until the pointer and focus move away, bridge the gap between the item and its menu, and keep a tooltip open while it is hovered.
Every change is shown before it is applied, recorded with the code it replaced, and reverts in one click.
Before and after, on real stores
Found by our scanner on live Shopify stores and fixed in a test browser with the same change the app makes. The stores are described rather than named, and their names are taken out of the code.
A mega menu that Escape doesn't close
A woodturning supply catalog on Expanse
Removed: <li class="site-nav__item site-nav--has-dropdown site-nav--is-megamenu">Added: <li data-sr-reveal=".site-nav__dropdown" class="site-nav__item site-nav--has-dropdown site-nav--is-megamenu"> <details class="site-nav__details" data-hover="true"> <summary class="site-nav__link">Pen Making</summary> <div class="site-nav__dropdown megamenu">…</div>Hovering the menu item opens a panel over the page, and pressing Escape left it open. With the attribute, SiteRemora's script closes it on Escape until the pointer and focus move away. Menus built this way were flagged on all four stores in the test that use an Archetype theme.
Attach a remora to your shop
Install from the App Store. The first scan is free, takes about a minute, and tells you exactly where you stand.