Spotlight 28: Content on hover

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.

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.?

要查看或添加评论,请登录

Ivett Csordas的更多文章

  • Spotlight 36: Sizing

    Spotlight 36: Sizing

    Let's talk about the requirements for sizing content. While WCAG doesn't explicitly define a minimum size of text, it’s…

    1 条评论
  • GAAD Event Roundup

    GAAD Event Roundup

    The third Thursday in May is Global Accessibility Awareness Day. It reminds us that accessibility goes beyond…

    1 条评论
  • Spotlight 35: Motion

    Spotlight 35: Motion

    In Spotlight 12, we talked about the importance of avoiding flashes to prevent seizures in individuals with…

    2 条评论
  • Spotlight 34: Keyboard accessibility

    Spotlight 34: Keyboard accessibility

    Not all learners navigate content using a mouse. In this spotlight let’s review how we can make content accessible to…

  • Spotlight 33: Adaptability

    Spotlight 33: Adaptability

    Let’s review three guidelines that talk about making content adaptable to different user needs and preferences, such as…

  • Spotlight 33: Adaptability

    Spotlight 33: Adaptability

    Let’s review three guidelines that talk about making content adaptable to different user needs and preferences, such as…

  • Spotlight 32: Sensory characteristics

    Spotlight 32: Sensory characteristics

    Have you ever tried following instructions that felt like they were written in a language you couldn't understand? Now,…

  • Spotlight 31: New WCAG 2.2 Criteria (WCAG 2.5.7, 2.5.8, 3.2.6)

    Spotlight 31: New WCAG 2.2 Criteria (WCAG 2.5.7, 2.5.8, 3.2.6)

    After many months of anticipation, WCAG 2.2 was finally published in October 2023.

    2 条评论
  • Spotlight 30: Accessibility for Storyboards with Rachel A. Synder

    Spotlight 30: Accessibility for Storyboards with Rachel A. Synder

    We always look forward to video spotlights. In this episode, featured guest Rachel A.

    1 条评论
  • Spotlight 29: Ease of navigation

    Spotlight 29: Ease of navigation

    Being able to navigate learning content creates a smooth user experience. In many cases, this is something that is…

    2 条评论

社区洞察

其他会员也浏览了