Making Your HubSpot Website WCAG 2.1 Compliant

1.4.13 Content on Hover or Focus

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELAA
Success Criteria

1.4.13 Content on Hover or Focus

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable: A 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.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is not resolved with accessiBe or HubSpot and requires manual management.

Understanding

This Success Criterion regards any web item that can only be viewed on hover. For users that have low vision, limited mobility, or use keyboards as their sole navigation tool, certain parameters need to be met so that they can successfully interact with the hovered content. To do so, this content needs to be:

  1. Dismissible:
    The purpose of this criteria is to prevent interference of the original website's content when interacting with content that appears once a specific prompt is hovered over. When a hover-prompted item is activated, it typically blocks out other elements on the page. For a user that has a magnified viewport and uses their cursor to pan the screen, they may risk re-triggering the hover when trying to navigate around. Alternatively, there are users who do not use a mouse and instead navigate websites using their keyboard exclusively. Two methods to satisfy this criteria include:

    1. Positioning the hovered content in an area that doesn't obstruct any on the screen including the hover trigger. This excludes any white space or background images.

    2. Allow for the hovered item to be dismissed using a keyboard, such as the Escape button.

    This criteria does not include error messages that require attention or action.
  2. Hoverable:
    Oftentimes, when the cursor is moved away from prompt that causes the hovered element to appear, this triggers the element to disappear. For example, if there is a text prompt that says "Click Here" and upon hover of it, a text box appears with additional information. If the user moves their mouse through this box, it will leave the space where "Click Here" is stated. In many cases, this will make the box disappear. This is a problem for cases where users may need or want to use their cursor to follow the content of the hovered item. To remedy this, hovered content should remain visible until one of the following parameters are met:

    1. The cursor is moved off the prompt OR any part of the hovered element.

    2. The hovered item is dismissed using a method that satisfies the Dismissible criteria, such as using the Escape key on the keyboard.

    3. The information in the hovered content is no longer relevant - such as a "busy" message on an item that has been completed.

  3. Persistant 
    In certain cases, a hovered element has a time-limit to how long it is open and if an item is hovered over for long enough, this element will disappear. Users with disabilities may require additional time to review the content. To fulfill this criteria, hovered content must remain visible until a user removes focus from the trigger/hovered item, or uses a Dismissible method such as the Escape key.

Making sure users with disabilities can engage appropriately with hovered items is an important part of their web experience and should not be overlooked.

Solution

Unfortunately, accessiBe does not offer a solution to this criteria nor do their hover capabilities fulfill the requirements. 

A web developer will have to make sure the website is built with these criteria in place themselves. As a recap, here are the components a developer must ensure to include:

  • Allow for multiple methods to dismiss the hovered item including one that can be done using a keyboard.
  • Don't just make the hover prompt the hover trigger, make the entire hovered element part of the trigger so that regardless where on the item the mouse may be, it will stay open until the cursor is moved entirely away the hovered item/prompt or a dismissible element is used to close it.
  • Don't put a time-limit on hovered elements. Make sure it stays open as long as it is engaged by the user.

For more information, please visit the official W3C article: Understanding 1.4.13 Content on Hover or Focus


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.

Recent Morey Creative Studios Blog Articles