• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 1.4.13: Content on Hover or Focus

Understanding SC 1.4.13: Content on Hover or Focus

Last Modified: April 14, 2020 by Raghavendra Satish Peri 1 Comment

Success Criterion 1.4.13 Content on Hover or Focus (Level 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.

In modern design practices, adding new content to the existing work flow is being adopted widely. while the user is interacting with content using a mouse hover or a keyboard focus “the new content may be presented to the user in the form of tooltips, menus, pop-ups & slide outs etc.” These kinds of interactions might pose accessibility challenges to a wide variety of disable user groups as they tend to obscure the content or the user might have trouble pointing the mouse on the triggering element for a long time.

This success criterion intends to fill that gap between such additional contents and the operability for people with disabilities with the following guidelines:

Dismissible

When a person with low vision uses magnification software to magnify the content on the page & when widgets like tooltips, menus & pop-ups appear, they tend to obscure other content on the page. To avoid this users must be provided a mechanism to dismiss the widgets such as using an escape key or provide a close button while the user is on the additional content itself. By providing these options to dismiss content user can just avail one of these options & get back to the content on the page without moving the mouse pointer.

Hoverable

Generally the new content appears when the mouse pointer hovers over the triggering element or when it receives keyboard focus. Users might want to interact with this content & move the mouse pointer to the newly appeared content block… during this scenario there is a greater chance that content might disappear as the mouse pointer is moved away from the triggering element. Here, user must be given an opportunity to interact with the content & must be allowed to move the mouse pointer to the content block that appears.

Persistent

The intent of this condition is to satisfy the two conditions discussed above. Also, the users with disabilities would need more time to read the additional content. So setting a timed disappearance of the additional content is not encouraged unless the content itself becomes invalid like a “busy” message.
In other words, this is the summary:

  • User must be provided with an option to dismiss content.
  • User moves the mouse pointer from the trigger or the content block.
  • The content presented is not valid any more…

Exceptions

  • When the mouse pointer is over an HTML control that has a title element, browsers will display the title value. Since the browser performs this action, it is not covered by this success criterion.
  • Modal dialogs are not affected because focus moves into and remains within it until the user dismisses it.
    • Points to Remember

      • Provide a method to dismiss the additional content that appear on hover or keyboard focus.
      • Make sure that content is present until the user moves away the mouse pointer from the triggering element or content block.
      • Make sure that experience is persistent.

      References

      Understanding Success Criterion 1.4.13: Content on Hover or Focus

      Share A11Y Love

      • Twitter
      • LinkedIn
      • Facebook
      • Reddit

      More Accessibility Articles

Filed Under: WCAG

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Product Manager [Accessibility]breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog at raghava.in.

Reader Interactions

Comments

  1. Phill says

    April 15, 2020 at 4:50 am

    Important to include being able to get to, interacting with, and navigate from the new content via the keyboard. If you included that point I missed it.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally

Recent Comments

  • Raghavendra Satish Peri on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Raghavendra Satish Peri on Digital Accessibility Companies Roundup
  • Andrew Somers on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Regine Lambrecht on Digital Accessibility Companies Roundup
  • william hruska on 18 Free Mobile Accessibility Testing Tools

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y