Content on hover & focus

Some content is transient: it appears as a pop-up in a layer on top of the page. The pop-up is displayed when the user hovers over a trigger element with the mouse, or focuses the trigger with the keyboard.

Often, pop-up content acts as a custom tooltip, explaining the meaning of an icon, or expanding an abbreviation. In other cases, pop-up content provides additional information, like a glossary definition, or some kind of content preview for a link.

Content on hover or focus in action

The following video shows a Wikipedia entry with pop-ups that are activated both by pointer hover and by keyboard focus.

Video description

On the page Wikipedia page for Clara Schumann,

  • The user tabs through several links to other Wikipedia articles.
  • on focusing the links, pop-ups with article previews open.
  • Using the mouse, the pop-up can be activated and goes to the article.

Typical usability problems with content on hover or focus

Content that pops up on hover or focus is often problematic for people with low vision who use strong zoom magnification (in the browser; via accessibility settings of the operating sytem; or by using dedicated magnification software like ZoomText or SuperNova).

Problems with dismissing pop-up content

When users zoom in, only a small part of the screen is still visible as a magnified section. When content pops up here, it often hides content underneath that users want to read or interact with. Therefore, it is important to be able to dismiss this pop-up content.

When people use magnification software, the visible magnified section is often positioned so theat the mouse cursor of the keyboard-focused element is right at the centre. If content pops up and users want to dismiss it, they may not see a control for dismissal - also, by moving focus they would lose the very content that they were just about to read. That is why it is important to be able to dismiss pop-up content without having to move the current focus - for example, by pressing the escape key (ESC).

Problems with reading pop-up content that is not fully visible

Another frequent problem is that the pop-up content is often larger than the currently visible enlarged section. Users who want to read the pop-up content must then be able to move the mouse over it without the content closing automatically. Often, users find that content disappears once they move the mouse away from the trigger - so they have no way of reading the content.

Problems with pop-up content that suddenly disappears

Some pop-up content closes automatically after a while. Users should have enough time to read the pop-up content - it must remain visible until it is deliberately dismissed by the user (or the user moves keyboard focus elsewhere). An exception exists for content that is no longer valid (e.g., information on an auction that has expired).

Examples

The following examples show typical usability problems when interacting with content on hover and focus.

1 Impaired mobility: read content visible on hover

For users with impaired mobility, it is difficult to control movements with the mouse that is required to read content in areas that is visible on hover or focus.

Video description

On the Swedish page Particles in air at public areas a chart is used to present information about levels of particles in the air of certain public places. To show information about a certain point in the chart, the user hovers on the point and the information becomes visible.

  • Content areas visible on hover cannot be reached with keyboard navigation.
  • Users cannot actively choose to open or close the content areas.
  • Users cannot move the cursor onto the content areas because they are instantly closed, and new ones are opened on every movement.

2 Low vision and magnifying: read content visible on hover

For users with low vision and magnifying technology, it is difficult to perceive and read all content presented inside an area that is visible only on hover and that cannot be closed when needed.

Video description

On the Swedish web page Particle levels in air at public areas a chart is used to present information about levels of particles in the air at certain public places. To show information about a certain point in the chart, the user hovers on the point and the information becomes visible. In this video a user is trying to read the content with magnifying technology.

  • The user cannot move the cursor onto the information area, which makes it impossible for the user to all content.
  • Mouse movements make content areas disappear very easily.
  • It's difficult for users to get an overview of a content area and to control the it's behavior.

3 Cognition: Read content on hover or focus and understand the context

Video description

On the Swedish web page Particle levels in air at public areas a chart is used to present information about levels of particles in the air at certain public places. To show information about a certain point in the chart, the user hovers on the point and the information becomes visible. In this video a user with cognitive disabilities is trying to read content in a graph.

  • The user experience the content areas to be very reactive, and that the mouse movements make content areas disappear very easily. Content is demanding to read.
  • The user also experiences that the content area hides information in the background.
  • It's difficult for users to get an overview of a content area and to control the it's behavior.

How should the dismissal of hover / focus content be implemented?

The new WCAG 2.1 Success Criterion 1.4.13 Content on hover or focus is a very recent addition to the standard. There is some uncertainty what authors should do to make content on hover or focus dismissible.

If content is shown via CSS (via the a:hover and a:focus pseudo-classes), the ESC key may not work properly when the focus still hovers or rest on the trigger. It would work if the pointer is moved over the content, away from the trigger. Activation of the trigger to close the content is conceivable, but it would not be applicable to links, since the activation of the link would at the same time leave the context of use.

This needs experimentation - Sufficient Techniques for this Success Criterion are still in development. One consequence could be that content on hover or focus should be triggered via scripts rather than via CSS pseudo-classes to prevent a situation where the content pops up again straight after dismissal.

Accessibility tips for content on hover or focus

  • Pop-up content that only appears on hover or focus will not show up on many devices. This includes devices with touch screens (Mobile phones, tablets). Do not present critical information exclusively in hover or focus content. Consider showing additional content on activating rather than focusing the trigger.
  • Show pop-up content both when hovering over the trigger with a pointer and when focusing the trigger with a keyboard (tabbing to it). To make the content accessible for keyboard users, the trigger should be a keyboard-focusable element (like a button or link).
  • Use the tooltip role on content that pops up as a tooltip.
  • For tooltips that provide the name of an icon, use aria-labelledby on the trigger. An example is the name "settings" for a cog icon. This will make screen readers read the tooltip when the trigger receives keyboard focus. (Note that aria-labelledby may in some browsers not work on elements like div that are not natively interactive or have no appropriate role like role="button" assigned to it.)
  • If a tooltip contains additional text, provide the label with (hidden) text and connect the content via aria-describedby – compare Heydon Pickering's article on Tooltips & Toggletips.
  • Make sure the pointer can be moved over the popup content, away from the trigger,  without the content closing.
  • Implement content on hover and focus in a way that it can be dismissed without changing the focus (e.g., via a keyboard shortcut like ESC). But see the note on dismissal of hover / focus content above.

Resources for content on hover or focus