Pushed away by pop ups: when UI gets in the way
When you hover over an element on a webpage and a pop-up appears, moving your mouse away makes it disappear. Simple interaction - until it isn’t.
For many users, moving the mouse doesn’t just move the cursor. It moves the entire page. That small difference can turn a helpful tooltip or pop-over into something that blocks content, traps focus or makes information effectively unreachable.
Along with an estimated 30% of assistive technology users in the UK, I use a screen magnifier and experience this problem on a regular basis. Unlike browser zoom, magnification software enlarges the entire screen and pans the view as you move the mouse.
That single behaviour changes the rules for hover-based content. To be accessible, content that appears on hover needs to be dismissible, hoverable, and persistent.
When content gets in the way of content
If the pop-up can’t be dismissed with the Escape key, and it sits on top of what I am trying to read, I can’t simply move the pointer away to clear it.
Because moving the pointer also moves the magnified view, I lose my place. I may still be looking at the pop up, or have it covering something important, and I’m forced to hunt back to where I was before I can continue reading.
For me, that turns what should be a small interaction into a disruption that pulls me away from the content entirely.
A reliable dismiss action - especially the Escape key - lets me stay in control without disrupting my position on the page.
Design guidance
- Always support the Escape key to close tooltips, help bubbles, and popovers.
- After dismissal, keep the trigger available so users can reopen the content if needed.
When you can't reach what you see
If the content appears on hover, users must be able to move their pointer into it without it disappearing.
At higher magnification levels, only part of the pop up will be visible on the screen at once. To read it, I need to pan the view by moving the pointer over the pop up itself.
If the pop up disappears as soon as I move into it, I can never actually reach it. I experience this regularly on sites where hover interactions haven’t been designed with magnification in mind.
Design guidance
- Let people move the pointer from the trigger into the pop up without it collapsing.
- Avoid gaps between the trigger and the pop up which cause accidental “hover loss”.
- Use a short grace period before hiding on pointer-out.
When time disappears before the task is done
Content should stay visible until the user dismisses it, moves focus or the information is no longer relevant.
Different users read at different speeds. Auto-dismiss timers remove control. They force users to rush reading or repeatedly trigger content just to finish it.
For me, that often means reopening the same pop up multiple times because it disappears before I’ve finished reading it. Something that should take seconds becomes frustrating and unnecessarily tiring.
Design guidance
- Avoid auto-hiding content after a short timeout.
- Keep content open while focus or pointer is on the trigger or the pop up.
- If content must expire, explain why and make it easy to reopen.
A quick way to test: Windows Magnifier
A simple way to see this in action is to test your interface using Windows Magnifier at a higher zoom level:
- Open Magnifier using WINDOWS KEY+NUMPAD PLUS
- Increase magnification to 400% or higher
- Trigger any tooltip, help bubble, or popover
- Try navigating it without moving the pointer away
Then check:
- Press Escape. Does it close cleanly without moving your view?
- Move the pointer from trigger into pop up. Does it stay open?
- Take your time reading. Does anything disappear unexpectedly?
If any of this fails, users relying on magnification are likely to experience accessibility barriers.
What good pop up accessibility looks like
If your interface reveals content on hover or focus, it needs to be:
- Dismissible - so users can close it without losing their place.
- Hoverable - so users can move into it and read it fully.
- Persistent - so users have enough time to process the information.
In practice, that means:
- Always support Escape as a reliable exit.
- Ensure pointer movement between trigger and content doesn’t accidentally close it.
- Avoid auto-hide behaviours that remove control.
- Make triggers keyboard accessible and return focus on close.
- Test at 400%+ magnification as part of your normal QA, especially when validating how interfaces behave in real-world conditions.
When these behaviours aren’t in place, hover-based content stops being a convenience feature and starts becoming a barrier - particularly for people interacting with interfaces in different ways.
When they are, you don’t just improve accessibility for people using magnification - you improve clarity, control, and usability for everyone interacting with your interface.
About Zoonou
Zoonou is a UK-based digital QA and accessibility company. Our Accessibility Team work closely with clients to make accessibility part of everyday delivery - supporting teams to create inclusive digital experiences that work for real users.
Share this article
Designing interfaces with hover or focus states and not sure if they’re truly accessible? We can help you build interactions that give users control, clarity, and confidence - not barriers. Let’s chat.
More articles
How accessibility changed the way I write and create content
Building an accessibility scanner that balances technical precision and human needs
I use assistive tech – here’s why accessibility overlays don’t work