When hover or focus triggers content to appear, it is dismissible, hoverable and persistent.

Introduction

Additional content triggered by keyboard focus or mouse hover can cause accessibility issues for users with visual or cognitive impairments. Additional content can surprise users, prevent them completing a task or obscure content.

To overcome these issues, users must be able to understand when additional content appears and dismiss it.

How to Pass ‘Content on Hover or Focus’

Where keyboard focus or mouse hover triggers additional content to appear, the content must be:

  • Dismissible by the user without moving keyboard focus or mouse hover (for example by pressing the ‘escape’ key or closing on click);
  • Hoverable by the mouse pointer so the pointer can be moved over the content; and
  • Persistent until the user changes keyboard focus or mouse hover, dismisses the content or the content is no longer valid.

Exceptions

  • Where the content communicates an input error
  • Where the content doesn’t obscure other content
  • Where the additional content is controlled by the user, for example tooltips or sub-menus that appear on mouse hover which are controlled by web browser settings

‘Content on Hover or Focus’ Tips

Try not to use this type of content if you can avoid it – add your additional content to the page. 

See Also

Free Developer Resources

Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.

Powered by ConvertKit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.