Content displayed on focus

Sometimes new content displays when the user tabs to an element or hovers their mouse cursor over it, and it disappears when the user moves focus or the cursor away from it — if this happens, the content must be dismissible and persistent in specific ways.

Example of new content that displays on focus

A tooltip or small popup with instructions displays when the user moves keyboard focus to or hovers their mouse over a question mark icon next to a form field.

Meeting the Web Accessibility Standard

When content that appears and disappears upon receiving and losing focus is dismissible by the user or remains visible until the user dismisses it, this meets WCAG 2 Success Criterion 1.4.13 Content on Hover or Focus (Level AA).

Dismissible and persistent

If new content displays when an element receives keyboard focus, then the following 2 conditions must be met:

  1. dismissible — there is a way to dismiss or close the new content without having to move keyboard focus
  2. persistent — the new content remains visible until:
    • the user moves focus away from the element, or
    • the user otherwise dismisses it, or
    • it is no longer applicable.

There are additional requirements for such new content where it appears on pointer hover.

For more on the requirements regarding content that appears on hover or focus, see:

Exceptions

  1. New content that displays on focus does not need to be dismissible without moving focus if the new content:
    • is about a form input error made by the user, or
    • does not visually block or replace any other content.
  2. The accessibility requirements for content that displays on focus do not apply where the browser or user agent controls the display of this new content.
Example of a scenario where the browser controls the display of new content

When a user hovers over an element with a mouse, the value of the element’s title attribute, if it has one, is normally displayed as a popup tooltip. This tooltip is a browser feature outside the developer’s control and is exempt from these requirements.