1.4.13 Content on Hover or Focus (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.
Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.
Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
Requirements
For content to be dismissed
- Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
- Provide a way to easily dismiss the additional content, such as by pressing ‘Escape’ or selecting a close button.
For content to be hoverable
- Make sure that the pop-up or tooltip doesn’t disappear when users try to reach it with their mouse cursor.
For content to be persistent
Once it appears, the content should remain visible until:
- The user removes hover or focus from the trigger and the extra content;
- The user dismisses the extra content.
- The information conveyed by the additional content becomes unnecessary.
Why is it important?
For disabled users on your website who may accidentally trigger content, or are not using a mouse, it is frustrating when pop up content:
- doesn’t ‘stay’ on the screen if they need to reach it
- won’t go away unless they move their cursor to it
Content which appears on hover can be difficult or impossible to perceive for users who struggle to read, if they are required to keep their mouse cursor over the trigger.
Summary
- If content (like a tooltip) appears when users hover over an element with their mouse (or tab to it with their keyboard), it must be easy to dismiss, easy to reach and remain visible.
- If moving the mouse or the keyboard focus to an element triggers additional content to appear and then hide again (like in pops-ups or tooltips), make sure that:
- The ‘extra’ content can be dismissed without moving your mouse, keyboard focus or screen reader cursor.
- If the user needs to hover or interact with the extra content, then the mouse cursor can move to it and use it, without it disappearing.
- The content stays visible until mouse or keyboard focus is moved, or the user dismissed it, or it is no longer useful.
Common mistakes
- Content shown on hover not being hoverable
- The user can’t dismiss content without moving cursor hover or keyboard focus.
- Content shown on mouse hover or keyboard focus does not stay visible until dismissed or invalid