1.4.13: Content on Hover or Focus

The Content on Hover or Focus guideline under WCAG 2.1 ensures that any additional content that appears when a user hovers over or focuses on an element is accessible and understandable. This guideline is designed to improve the user experience by making sure that the new content is dismissible, hoverable, and persistent.

Importance of 1.4.13: Content on Hover or Focus Success Criterion

Ensuring that content appearing on hover or focus is accessible is crucial for users with various disabilities, including:

Visual impairments:: Users who rely on screen readers need to be able to access and interact with additional content that appears on hover or focus.
Motor impairments:: Users with limited motor skills need to be able to dismiss the additional content without excessive movement or complex gestures.
Cognitive impairments:: Users with cognitive disabilities need additional content to appear in a predictable and manageable way, reducing cognitive load.

By adhering to this guideline, websites can ensure a more inclusive and seamless user experience for all users.

Primary Use Cases and Requirements Under Guideline 1.4.13: Content on Hover or Focus (Level AA)

Tooltip on Hover

Scenario: A user hovers over an icon to get more information in a tooltip.

Example: An information icon in a form that displays help text when hovered over.

Code Snippet:


<style>
    .tooltip {
        position: relative;
        display: inline-block;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
</style>
<div class="tooltip">Hover over me
    <div class="tooltiptext">Tooltip text</div>
</div>

Content on Focus

Scenario: A user navigates to a button using a keyboard, and additional information appears when the button receives focus.

Example: A form field that displays validation rules when focused.

Code Snippet:


<style>
    .info {
        display: none;
    }
    .focus:focus + .info {
        display: block;
    }
</style>
<button class="focus">Focus on me</button>
<div class="info">Additional information displayed on focus.</div>

Persistent Content

Scenario: A user hovers over a dropdown menu, and the menu remains open until the user dismisses it.

Example: A navigation menu that expands on hover and remains open for easy selection.

Code Snippet:


<style>
    .menu {
        display: none;
    }
    .menu-trigger:hover + .menu,
    .menu:hover {
        display: block;
    }
</style>
<div class="menu-trigger">Hover over me</div>
<div class="menu">Dropdown menu content</div>

Remediation Tips and How to Implement

Dismissibility: Ensure that additional content can be dismissed without moving the pointer or keyboard focus. Use a close button or similar mechanism.


<style>
    .popup {
        display: none;
    }
    .trigger:hover + .popup,
    .popup:hover {
        display: block;
    }
</style>
<div class="trigger">Hover over me</div>
<div class="popup">
    <span class="close-btn">X</span>
    Popup content
</div>
<script>
    document.querySelector('.close-btn').addEventListener('click', function() {
        this.parentElement.style.display = 'none';
    });
</script>

Hoverable: Ensure that users can move the pointer to the additional content without it disappearing.


<style>
    .hover-content {
        display: none;
    }
    .hover-trigger:hover + .hover-content,
    .hover-content:hover {
        display: block;
    }
</style>
<div class="hover-trigger">Hover over me</div>
<div class="hover-content">Hover content</div>

Persistent: Ensure that additional content remains visible until the user dismisses it or moves focus away.


<style>
    .persistent-content {
        display: none;
    }
    .persistent-trigger:focus + .persistent-content,
    .persistent-content:focus {
        display: block;
    }
</style>
<button class="persistent-trigger">Focus on me</button>
<div class="persistent-content" tabindex="0">Persistent content</div>