---
title: "Content on Hover or Focus"
url: "https://barrierefreihochzwei.de/en/wcag/1-4-13-content-on-hover-or-focus"
language: "en"
description: "WCAG 1.4.13 covers tooltips, submenus and popups that appear on hover or focus: dismissible, hoverable and persistent. Learn how to build them right."
published: "2025-01-01T08:00:00+01:00"
updated: "2026-10-15T09:41:59+02:00"
---

# Content on Hover or Focus

When content learns to float.

- **Erfolgskriterium:** 1.4.13
- **Prinzip:** Perceivable
- **Konformitätsstufe:** Level AA
- **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/cont...](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)

Success criterion 1.4.13

# 1.4.13 Content on Hover or Focus

Level AAPerceivable

When content learns to float.

## 1. What is the goal of this criterion?

Tooltips, dropdown menus and small popups are as much a part of the web today as smartphones are of our pockets. But what happens when such content suddenly appears and disappears just as quickly – before you could read it? Or when it covers exactly what you were trying to read? People who use screen magnifiers or people with motor impairments then face a real problem.

The goal of Success Criterion 1.4.13 is that content appearing on hover or focus stays predictable and controllable. When content is revealed by moving the mouse over something or by keyboard focus, everyone must be able to perceive it and deal with it.

## 2. What exactly does it require?

The criterion applies to additional content that appears when an element is hovered with the mouse or focused with the keyboard, and disappears again when hover or focus is removed. This includes custom tooltips, submenus and other non-modal popups.

As soon as such content appears, three conditions must be met:

**Dismissible:** there’s a mechanism to dismiss the additional content without moving the mouse or keyboard focus – typically the Escape key. Exception: the content communicates an input error or doesn’t obscure or replace other content.

**Hoverable:** if the content appears on mouse hover, the pointer can be moved onto the additional content without it disappearing.

**Persistent:** the additional content stays visible until hover or focus is removed, the user dismisses it, or its information is no longer valid.

**Exception:** content whose presentation is controlled by the browser and not modified by you – for example tooltips from the HTML `title` attribute.

**Not covered** are elements that only become visible themselves on focus, such as skip links – they aren’t additional content but the focused element itself.

## 3. Why does it matter for accessibility?

Imagine working with strong screen magnification and only seeing a small part of the page. A tooltip appears, but half of it lies outside your view. When you try to move the pointer to the tooltip to read it in full, it vanishes instantly.

Well-built hover and focus content makes websites accessible because it:

- Lets people with low vision take in additional content at their own pace – including with screen magnifiers
- Allows people with motor impairments to close accidentally triggered content without having to move the mouse precisely
- Lets people using a greatly enlarged mouse pointer dismiss content when the pointer covers it
- Gives people with cognitive disabilities predictable interactions and time to read
- Makes the same information available to keyboard users as to mouse users

The criterion reduces frustration and makes websites more pleasant for everyone – including people who simply read a bit more slowly.

## 4. How to meet the criterion

The good news: most problems can be solved with thoughtful design and a few lines of JavaScript. Here are proven implementation tips:

**Make it dismissible:**

- Offer the Escape key as a way to close it
- Position additional content so it doesn’t cover important areas where possible
- Keep enough distance from other interactive elements

**Make it hoverable:**

- Keep the additional content visible when the pointer moves over it
- Avoid gaps between the trigger and the additional content, or bridge them with a short hide delay
- Test with different pointer sizes

**Make it persistent:**

- Only let content disappear when hover or focus is removed, the user dismisses it, or the information is no longer valid
- Don’t use automatic timeouts that make the content vanish on its own
- Allow for different reading speeds

**Technical implementation:**

```
// Example: a tooltip that meets all three conditions
const trigger = document.getElementById('help-button');
const tip = document.getElementById('help-tooltip');
let hideTimer;

function show() {
  clearTimeout(hideTimer);
  tip.hidden = false;
}
function hideSoon() {
  hideTimer = setTimeout(() => { tip.hidden = true; }, 300);
}

// Show on hover and on keyboard focus
trigger.addEventListener('mouseenter', show);
trigger.addEventListener('focus', show);

// Hoverable: the tooltip stays when the pointer moves onto it
tip.addEventListener('mouseenter', show);
trigger.addEventListener('mouseleave', hideSoon);
tip.addEventListener('mouseleave', hideSoon);
trigger.addEventListener('blur', () => { tip.hidden = true; });

// Dismissible: Escape hides it without moving pointer or focus
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') tip.hidden = true;
});
```

**Tools and best practices:**

- Connect the tooltip to its trigger with `aria-describedby` so screen readers announce it
- Test with screen magnification (for example 400% browser zoom or the operating system’s magnifier)
- Test every hover interaction with the keyboard too – what appears on hover should also appear on focus (see [Keyboard](https://barrierefreihochzwei.de/en/wcag/2-1-1-keyboard))
- Make sure revealed content doesn’t hide the focus (see [Focus Not Obscured (Minimum)](https://barrierefreihochzwei.de/en/wcag/2-4-11-focus-not-obscured-minimum))

## 5. Why this criterion matters for businesses

Success Criterion 1.4.13 is another case where accessibility isn’t an end in itself – it brings real benefits for your business.

**1. Reach a wider audience** Predictable hover and focus interactions make your website usable for people with a wide range of disabilities. That includes temporary limitations too – such as using only one hand or a touchpad instead of a mouse.

**2. Fewer user errors** Menus that don’t collapse at the slightest twitch of the mouse and tooltips that don’t permanently cover anything make navigation more relaxed. That means fewer drop-offs – especially in complex interfaces such as shops, configurators or web applications.

**3. Better experience for everyone** Controllable overlays reduce frustration and support requests. People without disabilities benefit too.

**Last but not least: legal requirements.** The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). The technical benchmark is the harmonised standard EN 301 549, which references WCAG 2.1 Level AA for web content – and 1.4.13 is part of that. Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice.

## 6. The success criterion in the W3C’s words

> **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.
> 
> **Exception:** The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
> 
> **Note 1:** Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute \[HTML\].
> 
> **Note 2:** Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
> 
> **Note 3:** This criterion applies to content that appears in addition to the triggering component itself. Since hidden components that are made visible on keyboard focus (such as links used to skip to another part of a page) do not present additional content they are not covered by this criterion.

In short: content that appears on hover or focus must be dismissible without moving the pointer or focus, must allow the pointer to move over it, and must stay visible until the user no longer needs it.

**Official explanation from the W3C**

The W3C explains every success criterion in depth – with intent, examples and techniques.

[Understanding 1.4.13](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)

## More criteria from “Perceivable”

 [  1.1.1 Level A ### Non-text Content

When images need words.

 ](https://barrierefreihochzwei.de/en/wcag/1-1-1-non-text-content) [  1.2.1 Level A ### Audio-only and Video-only (Prerecorded)

When podcasts and silent videos need a second form.

 ](https://barrierefreihochzwei.de/en/wcag/1-2-1-audio-only-and-video-only-prerecorded) [  1.2.2 Level A ### Captions (Prerecorded)

When videos need to make sense without sound.

 ](https://barrierefreihochzwei.de/en/wcag/1-2-2-captions-prerecorded)