WCAG 1.4.13 — Content on Hover or Focus — tooltip/popup not dismissible

Who Is Affected

Keyboard users, people with motor disabilities who have difficulty with precise mouse movements, users with tremors or limited dexterity, screen reader users, and anyone using assistive technology that doesn't rely on mouse hover.

What This Means

When content appears on hover or focus (like tooltips, dropdown menus, or popup help text), users must be able to dismiss it without removing their mouse or keyboard focus from the trigger element. This is critical because some users cannot easily move their mouse away from the hover area, and keyboard users need a way to close popups without losing their place on the page.

The content must be dismissible using the Escape key, hoverable (users can move their mouse over the popup content itself), and persistent (it doesn't disappear unless the user dismisses it or removes focus).

Fix: CMS / Theme

Most hover/focus content issues stem from JavaScript components in your theme or plugins that don't follow proper dismissal patterns.

For Joomla:

1. Go to Extensions → Templates → Your Template → Edit Files
2. Look for JavaScript files handling tooltips, dropdowns, or popup menus
3. Ensure all hover/focus triggered content includes:

   // Add Escape key handler
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
       // Hide all visible tooltips/popups
       closeAllPopups();
     }
   });
   

4. Verify popup content is hoverable by adding CSS pointer-events: auto to the popup container
5. Test that content persists until explicitly dismissed

For WordPress:

1. Go to Appearance → Theme Editor or use a child theme
2. Check your theme's JavaScript files and any tooltip/dropdown plugins
3. For common plugins like Toolset or custom tooltips, add escape key functionality:

   jQuery(document).keyup(function(e) {
     if (e.keyCode === 27) { // Escape key
       jQuery('.tooltip, .popup, .dropdown-menu').hide();
     }
   });
   

4. Ensure CSS allows mouse interaction with popup content (no pointer-events: none)

Fix: Content Editor

If you're using tooltip or popup functionality added through the content editor:

1. Test the dismissal method: Use keyboard navigation to trigger the tooltip, then press Escape
2. Verify hoverability: Move your mouse over the popup content itself — it should remain visible
3. Check persistence: The popup should not disappear when you move between the trigger and the popup content
4. If any of these fail, contact your web developer to implement proper dismissal handlers
5. As a temporary fix, consider replacing hover tooltips with click-to-reveal content or always-visible help text

Alternative approach: Replace problematic hover content with:

• Expandable sections (click to show/hide)
• Modal dialogs with proper close buttons
• Inline help text that doesn't require hover
• Links to dedicated help pages

Standard Reference

WCAG 2.1 Success Criterion 1.4.13 — Content on Hover or Focus, Level AA

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

• Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content

• Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing

• Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid

• W3C Understanding SC 1.4.13

• WCAG Technique G219 — Hover/Focus content meets requirements

• WCAG Failure F95 — Content not dismissible