Search Menu
Language Menu
Mobile Menu
OGCIO

9.11 WCAG 2.1 Success Criterion 1.4.13 - Content on Hover or Focus

If additional content appears on focus/hover, you should ensure all of the following:

  • Dismissible: User can dismiss the additional content with the keyboard without moving focus/hover, e.g. via the escape key;
  • Hoverable: User can move the pointer over the additional content without making the additional content disappear; and
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, or the user dismisses it, or its information is no longer valid.

Before Rectification

A webpage sample displayed with a mega dropdown menu which covers part of the main content.

When user activates the “Support” menu via keyboard, a mega menu is displayed, which covered part of the main content. User is unable to view the content unless he/she moves the mouse pointer away from the mega menu.

After Rectification

A webpage sample with a mega menu disappeared.

Function is added for user to close the mega menu by pressing Escape key without moving the mouse pointer.

WCAG 2.1 Reference:

https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html