This is for mobile or tablet devices – where pointer hover or keyboard focus triggers additional content to become visible and then hidden (like pop-ups or other options) you need make sure:
- The ‘extra’ content can be dismissed without moving focus, unless it does not obscure other page content.
- If the user needs to hover or interact with the extra content, then the pointer can move to it and use it, without it disappearing.
- The content stays visible until focus is moved, or the user dismissed it, or it is no longer useful.
Why is this a problem?
- For disabled users on your website who may accidentally trigger content or are using keyboards only or mobile devices it is frustrating when pop up content either doesn’t ‘stay’ on the screen if they need to use it or won’t go away without loosing their place.
- This also helps sight impaired users who don’t want to zoom in/out a lot to see if content is still active on the page (or not). It also gives all user enough time to understand the ‘extra’ content that appears and what they need to do.
Accessibility Requirements for 1.4.13 Content on Hover or Focus (AA)
This has several approaches depending on the control. 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:
- Manage focus and move the mouse pointer directly from the trigger onto the new content.
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.
Common mistakes for 1.4.13 Content on Hover or Focus (AA)
Techniques for 1.4.13 Content on Hover or Focus (AA)
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the “Other Techniques” section.
Common Failures for 1.4.13 Content on Hover or Focus (AA)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable
- @@ Failure to make content dismissable without moving pointer hover or keyboard focus
- @@ Failure to meet by content on hover or focus not remaining visible until dismissed or invalid
FAQs for Content on Hover or Focus(AA)
How do you make a hover accessible?
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 tool tip role on content that pops up as a tool tip.
Are tool tips accessible?
The accessibility requirements of tool tips. Tool tips must be discoverable and readable with a mouse, other pointer devices, keyboard, screen reader, zoom software, and any other assistive technology. They should provide relevant information that may be helpful to learn the UI, but is not required to operate it.
What is rollover or hover?
The difference between rollover and hover. is that rollover is (computing) a graphic element that changes its shape or color when the cursor moves over it while hover is (computing) to place the cursor over a hyperlink or icon without clicking.