Controls, once visible, must not disappear based on pointer hover or keyboard focus changes unless they are replaced by an equivalent control or the disappearance is initiated by the user.
Why It Matters
If controls (especially those needed to complete a task) disappear when the user moves the mouse away or tabs to another element, it can be very confusing and frustrating. Users might lose track of the control or be unable to re-activate it easily. This is particularly problematic for users with low vision using magnification or those with motor/cognitive impairments.
Fixing the Issue
Ensure that once controls become visible (either by default or through user interaction like opening a menu), they remain visible until the user explicitly dismisses them (e.g., closes the menu/dialog) or navigates away from the context where the control is relevant. Avoid making controls disappear simply because the mouse pointer moved off them or keyboard focus shifted elsewhere, unless an equivalent control remains.
Good Code Example
A dropdown menu that stays open until explicitly closed or focus moves out:
<div class="dropdown-container">
<button aria-haspopup="true" aria-expanded="false" onclick="toggleMenu(this)">Actions</button>
<ul role="menu" hidden>
<li role="menuitem"><button onclick="action1()">Edit</button></li>
<li role="menuitem"><button onclick="action2()">Delete</button></li>
</ul>
</div>
<script>
function toggleMenu(button) {
const menu = button.nextElementSibling;
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !expanded);
menu.hidden = expanded;
// Basic focus management / dismiss logic would be needed here
// e.g., close on Esc, close if focus moves outside the menu+button
}
// The menu remains visible even if the mouse moves off the button or menu items
// until the user clicks outside, presses Esc, or activates an item.
</script>
Bad Code Example
Tooltip with actions that disappears when the mouse moves off the trigger:
<style>
.trigger-bad .tooltip-actions { display: none; position: absolute; }
.trigger-bad:hover .tooltip-actions { display: block; }
/* If the user hovers the trigger, sees the actions, but then moves */
/* the mouse slightly towards the action buttons, the tooltip disappears */
/* because hover is lost on the trigger. This fails 1.4.13 and 3.2.8. */
</style>
<div class="trigger-bad">
Hover for Actions
<div class="tooltip-actions">
<button>Action 1</button>
<button>Action 2</button>
</div>
</div>
Hover for Actions
Search Ultimate Guide
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
