Spotlight 28: Content on hover

Many of us are used to using a mouse to browse the internet or take eLearning courses. However, assistive technology users may not always use a mouse and more and more people access content from their mobile phones. In addition, some people may require screen magnification or an enlarged cursor to effectively engage with content. In these cases, the hover function can be problematic.?

The hover function in eLearning is typically a tooltip or a pop-up that gives more information, but it can also be a submenu that appears upon hovering over the main menu in the navigation.?

Since activating a hover state can be difficult without a mouse, it's usually better to replace these with options that can be tapped/clicked.

If you still use pop-up content, according to WCAG 1.4.13 Content on hover or focus (AA), you need to make it:

• Dismissible - meaning that learners can hide the pop-up content, usually by pressing the Escape key, a close button or tapping outside the area
• Hoverable - meaning that learners can move the cursor around the pop-up area without the pop-up disappearing?
• Persistent -meaning that the pop-up needs to stay on the screen until the learner moves the focus away from it or dismisses it

We gathered some resources for you for this topic.

• Follow this link to read the full criterion of 1.4.13: Content on focus or hover (w3.org)

Get Involved:?Come to the?LCA Spotlight LinkedIn group?and join the conversation.

• What examples of hover or focus have you come across in eLearning??
• Do you think hover triggers should be replaced with clickable/tappable triggers?
• What other issues do you see with content on hovers and focus?

When you post in the community, use the hashtag?#LCASpotlightHover

Don’t forget that you can sign up for our email newsletter, message us if you want to get involved, and access all the spotlights on the?LCA Spotlight?website.

We're looking forward to seeing your comments in the community!

Ivett and Sabrina

@LCA Spotlight

Thumbnail description: The trademark circles and the logo of LCA Spotlight. The text says "Spotlight 28:?Content on hover (WCAG 1.4.13)". At the bottom, there's a "#LCASpotlightHover" hashtag.?