Is content that appears on hover and focus accessible?

Question

How do I ensure that content that appears on hover or focus is accessible?

Answer

If there is content on your site that appears upon hover or focus the following must be true:

* Dismissible - 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.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.