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.

Accessible hover in eLearning

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.

Resources:

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

Discussion questions:

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