1.4.13 Content on Hover or Focus [AA]

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:

  • Dismissable: 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.>

Explanation

When content like custom tooltips or popup menus appear on mouse hover or keyboard focus, people must be able to tell the content is there, and to get rid of it without disrupting their current task. This means people can use the content if they want to, and can dismiss it when it’s no longer needed or if it was triggered accidentally.

Responsibilities

  • Design
  • Development
  • QA

Requirements

  • Content that appears on hover or focus does not obscure meaningful content underneath; or
  • Content that appears on hover or focus can be dismissed with the escape key and/or a close button;
  • Content that appears on hover or focus remains visible as long as the mouse pointer or keyboard focus is on either the trigger or the content, or the content is dismissed.

Common mistakes

  • A custom tooltip pops up on hover or focus and obscures the content underneath, and there is no way to dismiss it using the keyboard;
  • A popup message appears on hover or focus, but disappears if the mouse pointer or keyboard focus is moved to the message content.

Official resources

Other resources