WCAG 1.4.13 Content on Hover or Focus — Testing Guide for Mobile & Web Apps

WCAG 1.4.13, "Content on Hover or Focus," is a critical Level AA criterion that ensures users can easily perceive and interact with information revealed by hovering over an element or giving it focus.

Ensuring Content on Hover or Focus is Accessible (WCAG 1.4.13)

WCAG 1.4.13, "Content on Hover or Focus," is a critical Level AA criterion that ensures users can easily perceive and interact with information revealed by hovering over an element or giving it focus. This means that any content that appears when a user hovers their mouse over an element, or when that element receives keyboard focus, must remain visible until the user dismisses it.

What WCAG 1.4.13 Requires

Simply put, this criterion states that if a user triggers additional content by hovering or focusing on an element, that content must:

• Be dismissible: The user must have a way to close or hide this revealed content without moving their pointer or focus away from the original triggering element.
• Be hoverable/focusable: If the revealed content itself contains interactive elements, the user must be able to move their pointer or focus onto that content and interact with it.
• Stay visible: The revealed content should persist until the user explicitly dismisses it or it is no longer relevant to the user's task.

This prevents users, especially those with motor impairments or those using keyboard navigation, from losing access to essential information.

Why WCAG 1.4.13 Matters

This criterion directly impacts users who struggle with fine motor control, rely on keyboard navigation, or use assistive technologies.

• Keyboard-only users: Without the ability to hover, these users depend on focus to reveal information. If revealed content disappears when focus shifts, they cannot access it.
• Users with motor impairments: Precision hovering can be difficult. If content disappears when the pointer drifts slightly, it creates a frustrating and unusable experience.
• Users with cognitive disabilities: Unexpected disappearance of information can be disorienting and make it harder to process content.
• Users with low vision: They may need to magnify content, making precise hovering even more challenging.

Compliance with WCAG 1.4.13 is also a legal requirement under regulations like the EU's European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA) in the United States, ensuring digital services are accessible to a broader user base.

Common Violations and Examples

Many applications, both web and mobile, inadvertently violate this criterion.

#### Web Applications

1. Tooltips that disappear on focus shift: A common example is a tooltip that appears when hovering over an icon. If the tooltip vanishes the moment the user tries to tab to it (e.g., to copy text from it), it fails.

• Scenario: A user hovers over a question mark icon next to a form field. A tooltip with an explanation appears. The user wants to copy the explanation but presses Tab to move focus to the next form field. The tooltip disappears.

1. Navigation menus that hide on mouse-out: Many mega-menus or dropdowns hide as soon as the mouse pointer leaves the menu area, even if the user is still within the parent navigation item.

• Scenario: A user clicks on a "Products" menu item. A large dropdown appears. The user moves their mouse to select a specific product category within the dropdown. As their mouse momentarily drifts off the "Products" menu item itself, the entire dropdown vanishes.

1. Interactive elements within hover-revealed content: If a link or button is only revealed on hover, and the user cannot interact with it without the hover state disappearing, it's a violation.

• Scenario: Hovering over a user's avatar reveals a "View Profile" link. The user attempts to click the "View Profile" link, but as their mouse moves from the avatar to the link, the hover state ends, and the link disappears before it can be clicked.

#### Mobile Applications

While "hover" is less common on touch interfaces, the principle applies to focus and long-press actions.

1. Contextual menus that disappear on focus loss: A user taps on an item in a list. A contextual menu appears near the item. If tapping anywhere else on the screen (or even just shifting focus slightly) causes the menu to disappear before the user can select an action, it's a violation.

• Scenario: In an email app, a user long-presses an email to bring up options like "Archive," "Delete," "Mark as Read." The user intends to select "Archive" but accidentally taps slightly off the email item. The contextual menu disappears.

1. Information pop-ups triggered by focus: On some mobile apps, tapping a button or icon might reveal an information overlay. If this overlay disappears when the user tries to interact with its content, it's a problem.

• Scenario: A user taps an "i" icon next to a setting in a mobile app. An information box pops up. The user tries to scroll within the information box to read more, but the box closes because focus is no longer strictly on the "i" icon.

How to Test for Compliance

Testing for WCAG 1.4.13 requires a combination of manual and automated approaches.

#### Manual Testing Steps

1. Keyboard Navigation:

• Use the Tab key to navigate through interactive elements.
• When an element reveals content on focus, verify that the content remains visible.
• Try to Tab into the revealed content. If it contains interactive elements, confirm you can focus on and interact with them.
• Press Shift + Tab to move backward. Ensure the revealed content does not disappear unexpectedly.
• Use Enter or Spacebar to activate elements. Observe if revealed content interferes with activation or disappears prematurely.
• Use the Esc key to dismiss revealed content. This is a common and expected dismissal method.

1. Pointer Interaction (Web):

• Hover over elements that reveal content.
• Move your mouse pointer slowly and deliberately into the revealed content. Ensure it doesn't disappear.
• Click or interact with elements within the revealed content.
• Move your pointer slightly away from the triggering element but still over the revealed content. Verify it remains visible.
• Try to dismiss the content by clicking outside of it or using an explicit close button.

1. Touch Interaction (Mobile):

• Use touch gestures (tap, long-press) to trigger content.
• After triggering, try to interact with the revealed content. Ensure it remains visible.
• Simulate accidental "touches" or focus shifts. Observe if the content disappears.
• Look for explicit dismissal mechanisms (e.g., "X" button, tapping outside the content area).

#### Automated Tools

While no tool can fully replace manual testing for this criterion, several can assist:

• Browser Developer Tools: Inspecting the DOM can reveal how hover/focus states are managed and if content is dynamically added.
• Accessibility Checkers (Browser Extensions): Tools like axe DevTools, WAVE, or Lighthouse can flag potential issues related to ARIA attributes and dynamic content. They might not explicitly identify 1.4.13 violations but can point to underlying code structures that commonly cause them.
• SUSA (SUSATest): As an autonomous QA platform, SUSA is designed to uncover these types of issues. By exploring your application, it simulates various user interactions and identifies failures.

#### Mobile-Specific Considerations

• Focus Management: On mobile, ensure that when a modal or pop-up appears, focus is correctly managed. The focus should be trapped within the modal until it's dismissed, or at least not immediately lost to the underlying screen elements.
• Dismissal Gestures: Standardize dismissal gestures. A common pattern is tapping outside the content area or a clear "close" button.

How to Fix Violations

Fixing WCAG 1.4.13 violations typically involves adjusting how dynamic content is managed.

1. Using ARIA Attributes:

• For content revealed by focus, use aria-haspopup="true" or aria-expanded="true" on the triggering element to indicate that it controls pop-up content.
• Ensure the revealed content has an appropriate role, like dialog or menu.

1. JavaScript Event Handling:

• For hover (Web): Instead of hiding content immediately on mouseout, use onmouseleave for the parent element and onmouseenter for the revealed content. Use timers (setTimeout) to delay hiding, allowing the user to move their pointer into the revealed content.
• For focus: Ensure that when an element gains focus, its associated content is displayed and remains visible until explicitly dismissed. When focus shifts away, use timers to delay hiding, giving the user a chance to re-focus on the content if needed.
• Dismissal: Implement an Escape key listener to close any revealed content. Provide clear "close" buttons or allow dismissal by clicking outside the content.

1. Mobile UI Frameworks:

• Most mobile UI frameworks provide components for dialogs, pop-ups, and menus that handle focus management and dismissal correctly by default. Ensure you are using these components and configuring them properly.
• For custom implementations, carefully manage focus and ensure that touch targets for dismissal are sufficiently large and placed logically.

Example (Conceptual JavaScript for Web):

// Pseudocode for managing hover-revealed content
const triggerElement = document.getElementById('trigger');
const revealedContent = document.getElementById('content');
let hideTimer;

triggerElement.addEventListener('mouseenter', () => {
    clearTimeout(hideTimer);
    revealedContent.style.display = 'block';
});

triggerElement.addEventListener('mouseleave', () => {
    hideTimer = setTimeout(() => {
        revealedContent.style.display = 'none';
    }, 200); // Delay hiding by 200ms
});

revealedContent.addEventListener('mouseenter', () => {
    clearTimeout(hideTimer); // Keep content visible if mouse enters it
});

revealedContent.addEventListener('mouseleave', () => {
    hideTimer = setTimeout(() => {
        revealedContent.style.display = 'none';
    }, 200);
});

// Add similar logic for focus and keyboard dismissal

How SUSA Checks This Criterion

SUSA leverages its autonomous exploration capabilities and persona-based testing to identify violations of WCAG 1.4.13.

• Autonomous Exploration: SUSA navigates through your application, interacting with elements as different user personas would. It automatically triggers hover and focus states and observes the behavior of revealed content.
• Persona-Based Testing:
• Power User / Teenager: These personas simulate rapid interaction and keyboard navigation, quickly revealing issues where content disappears too fast.
• Elderly / Novice / Accessibility Persona: These personas are designed for slower, more deliberate interaction. They test