This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique F114:Failure of Success Criterion 1.4.13 Content on hover and focus when content cannot be dismissed without the pointer hover or the keyboard focus

About this Technique

This technique is not referenced from any Understanding document.

This failure applies when the user, by hovering over parts of content or by focusing an element via the keyboard, causes popup content to appear that cannot dismissed without moving the focus.

Description

Content elements may respond to receiving keyboard focus or pointer hover by inserting additional popup content that may now cover other parts of content. For users, especially those that use strong page magnification, this addition of popup content without activation can be disorienting in different ways:

  • the new popup content may cover content that the user may want to access
  • The new popup content may not appear fully in the magnified viewport, necessitating a move of the viewport by panning, tabbing, or pointer focussing in order to access the popup content

Since popup content on hover and focus can unexpectedly cover page content that users may want to access, it is important that there is an easy way to dismiss such popup content. The most common method for that is to press the ESC key. Another possible method is activating the pointer at the current location.

Examples

  • Custom tooltip: When focussing an icon with a question mark that is placed after an input field, a popup window with an explanation of the expected input appears that covers a part of the form. Pressing the ESC key or activating the pointer at the same position fails to close the submenu.
  • Sub-menu: When the mouse pointer is moved over the entry in a menubar, a submenu appears. Pressing the ESC key or activating the pointer at the same position fails to close the submenu.
  • Sub-menu over decorative content or whitespace: When the mouse pointer is moved over the entry in a menubar, a submenu appears over a decorative image or whitespace. Across different viewport widths, the submenu does not cover information. This is not a failure.

Tests

Procedure

    • Using the tab key, navigate through interactive content.
    • If popup content appears that hides information, press the ESC key and check whether this closes the popup content
    • Move the pointer over interactive elements.
    • If popup content appears that hides information:
      • press the ESC key and check whether this closes the popup content
      • Activate the pointer device at the current pointer position

Expected Results

  • If popup content on keyboard focus does not disappear when pressing ESC or popup content on hover does not disappear when pressing ESC or activating the pointer at the same position then this failure condition applies and content fails the success criterion.
Back to Top