WCAG 1.4.13: Content on Hover or Focus

Introduction to WCAG 1.4.13: Content on Hover or Focus

WCAG 1.4.13, titled „Content on Hover or Focus,” is a Level AA success criterion introduced in WCAG 2.1. Its primary goal is to ensure that additional content which appears when a user hovers over an element with a mouse or focuses on it with a keyboard (such as tooltips, popovers, or custom menus) is accessible and usable by everyone. This criterion addresses common accessibility barriers associated with dynamically displayed content, ensuring users have sufficient time and means to interact with or dismiss this content.

Why This Criterion Matters

Dynamically displayed content can pose significant challenges for various user groups:

• Users with Motor Impairments: Individuals who rely on a mouse but have difficulty performing precise movements may struggle to keep the pointer within the trigger area to maintain the visibility of content. If the content disappears immediately upon moving the pointer, they may not be able to interact with it. Keyboard-only users need robust focus management.
• Users with Low Vision and Screen Magnifiers: When using a screen magnifier, a user’s view of the screen is significantly zoomed in. Content appearing on hover or focus might cover other parts of the screen or appear outside their current magnified view. If this content disappears quickly or cannot be dismissed easily, it can become impossible to read or interact with, especially if they need to move their magnified view to see all of it.
• Users with Cognitive Disabilities: Unexpected content appearing and disappearing without clear control can be disorienting and frustrating. The ability to dismiss content easily provides a sense of control and predictability.
• Keyboard-Only Users: For content that appears on focus, it’s crucial that it remains visible and interactive as the user tabs through the content. If it disappears when focus moves away or if it cannot be interacted with via keyboard, it becomes inaccessible.

This criterion ensures that such content provides a predictable and controllable experience, preventing it from being a barrier to information access or task completion.

Understanding the Success Criterion 1.4.13 Requirements

Success Criterion 1.4.13 mandates three key requirements for content triggered by hover or focus, unless the content conveys an input error or is non-essential (e.g., a simple visual effect):

1. Dismissible

The user must be able to easily dismiss the additional content without moving their pointer or keyboard focus. This typically means providing a mechanism to close the content, such as:

• Pressing the Escape (Esc) key.
• An explicit „Close” button within the content itself.

The act of dismissing should not require the user to perform complex movements or to move their pointer/focus away from the triggering element if they are not yet finished interacting with the content.

2. Hoverable / Focusable

If the content is triggered by hovering with a pointer, the user must be able to move their pointer over the additional content without the content disappearing. Similarly, if it’s triggered by focus, the user must be able to move their keyboard focus into the additional content if it contains interactive elements, or simply have it remain visible if it contains only informative content, without the content disappearing. This is crucial for:

• Users of screen magnifiers who need to move their magnified view to see all of the content.
• Users with motor impairments who need to carefully move their pointer to interact with controls inside the pop-up.
• Keyboard users who need to tab through interactive elements within the content.

3. Persistent

The additional content must remain visible until the user dismisses it, or until the hover/focus trigger is removed and the content is no longer needed (e.g., the user explicitly moved their pointer or focus away from both the trigger and the content). It should not automatically disappear after a set time limit, as this creates a 'race condition’ where users might not have enough time to read or interact with it. This persistence ensures users have ample time to process the information or complete an interaction.

Practical Guidelines for Compliance

To comply with WCAG 1.4.13, consider the following practical guidelines when implementing content that appears on hover or focus:

• Provide a Clear Dismissal Mechanism: Implement an 'Escape’ key handler to close the content. For complex or interactive pop-ups, include a visible 'Close’ button.
• Manage Focus Correctly: For content triggered by focus, ensure that tabbing into the pop-up content is possible if it contains interactive elements. If it’s purely informational, ensure it remains visible as the user continues navigating.
• Maintain Visibility on Hover: Design your CSS and JavaScript so that moving the mouse pointer from the trigger element onto the revealed content does not cause the content to disappear. This often involves defining a larger 'active’ area that encompasses both the trigger and the content.
• Avoid Timed Dismissals: Do not implement automatic timeouts for content dismissal unless it’s a non-essential status message that appears briefly and does not require user interaction.
• Use ARIA Attributes: Employ ARIA attributes such as aria-describedby, aria-labelledby, aria-expanded, and role="tooltip" to properly associate the dynamic content with its trigger element and convey its purpose to assistive technologies.
• Consider Mobile Responsiveness: On touch devices, hover states often translate to a tap. Ensure that tapping an element reveals the content in a way that is easily dismissible and persistent. Sometimes, a dedicated 'More Info’ button is a better solution for touch.

Examples of Implementation

<style>
    .tooltip-container {
      position: relative;
      display: inline-block;
    }

    .tooltip-trigger {
      background-color: #007bff;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      border: none;
      font-size: 1rem;
    }

    .tooltip-content {
      visibility: hidden;
      opacity: 0;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 10px;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Position the tooltip above the text */
      left: 50%;
      margin-left: -100px;
      transition: opacity 0.3s, visibility 0.3s;
      pointer-events: none; /* Allows mouse to pass through when hidden */
    }

    .tooltip-content::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    /* Combined hover/focus state for trigger and content */
    .tooltip-container:hover .tooltip-content,
    .tooltip-container:focus-within .tooltip-content,
    .tooltip-content.is-visible { /* For JS control */
      visibility: visible;
      opacity: 1;
      pointer-events: auto; /* Allow interaction when visible */
    }
  </style>

  <div class="tooltip-container">
    <button class="tooltip-trigger" aria-describedby="myTooltip" type="button">Hover or Focus Me</button>
    <div id="myTooltip" class="tooltip-content" role="tooltip">
      <p>This is important information about the button. You can dismiss it with Esc or move your mouse over it.</p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tooltipContainer = document.querySelector('.tooltip-container');
      const tooltipTrigger = tooltipContainer.querySelector('.tooltip-trigger');
      const tooltipContent = tooltipContainer.querySelector('.tooltip-content');

      let isHoveringContainer = false;
      let isFocusingTrigger = false;

      // Show on hover or focus
      tooltipContainer.addEventListener('mouseenter', () => {
        isHoveringContainer = true;
        tooltipContent.classList.add('is-visible');
      });
      tooltipContainer.addEventListener('mouseleave', () => {
        isHoveringContainer = false;
        if (!isFocusingTrigger) {
          tooltipContent.classList.remove('is-visible');
        }
      });

      tooltipTrigger.addEventListener('focus', () => {
        isFocusingTrigger = true;
        tooltipContent.classList.add('is-visible');
      });
      tooltipTrigger.addEventListener('blur', () => {
        isFocusingTrigger = false;
        // Check if mouse is still hovering the container
        if (!isHoveringContainer) {
          tooltipContent.classList.remove('is-visible');
        }
      });

      // Dismiss with Escape key
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && tooltipContent.classList.contains('is-visible')) {
          tooltipContent.classList.remove('is-visible');
          // Optionally return focus to the trigger element
          if (document.activeElement === tooltipTrigger || tooltipContainer.contains(document.activeElement)) {
             tooltipTrigger.focus();
          }
        }
      });
    });
  </script>
Copy text

<style>
    .bad-tooltip-container {
      position: relative;
      display: inline-block;
    }

    .bad-tooltip-trigger {
      background-color: #dc3545;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      border: none;
      font-size: 1rem;
    }

    .bad-tooltip-content {
      visibility: hidden;
      opacity: 0;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 10px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -100px;
      transition: opacity 0.3s, visibility 0.3s;
    }

    .bad-tooltip-content::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    /* Only shows on direct hover of the trigger, not persistent */
    .bad-tooltip-trigger:hover + .bad-tooltip-content,
    .bad-tooltip-trigger:focus + .bad-tooltip-content {
      visibility: visible;
      opacity: 1;
    }
  </style>

  <div class="bad-tooltip-container">
    <button class="bad-tooltip-trigger" type="button">Hover Me (Incorrect)</button>
    <div class="bad-tooltip-content">
      <p>This content disappears if you try to move your mouse over it or press Esc key.</p>
    </div>
  </div>
Copy text

Best Practices and Common Pitfalls

Best Practices:

• Implement Multiple Dismissal Methods: Always provide an „Escape” key mechanism. For more complex overlays or pop-ups, a visible „Close” button (with proper focus management) is also recommended.
• Ensure Pointer Containment: When content appears on hover, make sure that moving the pointer from the trigger element onto the new content does not cause the content to disappear. This can often be achieved by wrapping both the trigger and the content in a parent container and applying hover styles to the parent (e.g., using :hover or :focus-within on the parent).
• Proper Focus Management: For content containing interactive elements (e.g., links, buttons, form fields), ensure that keyboard focus can move into the revealed content and navigate through its interactive elements. When the content is dismissed, focus should ideally return to the trigger element or a logical next element.
• Use ARIA Attributes Judiciously:
  • For simple, non-interactive tooltips, use aria-describedby on the trigger element pointing to the tooltip’s ID, and role="tooltip" on the tooltip content.
  • For more complex pop-ups or menus, consider aria-expanded on the trigger and appropriate roles like menu, dialog, or listbox on the pop-up content, along with proper focus trapping if it’s a modal dialog.
• Test Thoroughly: Always test dynamic content with keyboard navigation, screen readers (e.g., NVDA, JAWS, VoiceOver), and screen magnifiers to ensure full compliance and usability.

Common Pitfalls:

• Content Disappearing Too Quickly: The most common violation. If the content disappears as soon as the mouse leaves the trigger, or after a short timeout, users with motor impairments or screen magnifiers will struggle.
• Inability to Hover/Focus the Content Itself: If the revealed content itself cannot receive pointer hover or keyboard focus, it becomes impossible to interact with internal links, buttons, or to read it comfortably with a magnifier.
• Lack of Keyboard Dismissal: Not providing an 'Escape’ key or a visible close button prevents keyboard-only users from dismissing the content.
• Essential Information Hidden: Relying solely on hover/focus for essential information without an alternative (e.g., a permanent link, static text) can make the content inaccessible for users who cannot trigger hover/focus or who miss the ephemeral content.
• Content Obscuring Other Elements: While not directly covered by 1.4.13, dynamic content should not permanently obscure other critical parts of the page without a way to move or dismiss it.

Conclusion

Adhering to WCAG 1.4.13 is vital for creating inclusive web experiences. By ensuring that content appearing on hover or focus is dismissible, hoverable/focusable, and persistent, you empower a wider range of users, including those with motor, cognitive, and visual impairments, to access and interact with your website’s content effectively. Proactive design and development with these principles in mind lead to a more robust and user-friendly web.