What is the best way to dismiss content on hover or focus?

, by Detlev Fischer

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 - especially if content is shown just by CSS, i.e. without intervention of script.

It seems that for the dismissal via key strokes, scripting will be necessary. The usual way is adding an event listener to content that pops up - which implies that the object must be generated by a script rather than via CSS pseudo-classes.

If content is simply shown via CSS (via the a:hover and a:focus pseudo-classes), the ESC key may not work properly since focus would still hover or rest on the trigger.  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.

This issue needs experimentation - Sufficient Techniques for this Success Criterion are still in development. The draft Techniques currently listed in the Understanding text for 1.4.13, ARIA: Using role="tooltip" and CSS: Using hover and focus pseudo classes, are not enough to sort out the dismissible problem.

Go back

Add a comment

Please add 4 and 5.