WCAG 2.1 – What is Content on Hover or Focus?

Over the last few blog posts we’ve been looking at the new success criteria found within WCAG 2.1. Continuing with this series, in this post we will be looking at Content on Hover or Focus.

An example of a tooltip that is obscuring other content

Sometimes forms may be complicated but adding lots of information on the page may be distracting. Similarly, a menu might not be wide enough on the screen and other page links have to be nested inside another. In order to be able to provide additional information or navigation points, designers have included features that can ‘pop up’ to help a user on their website journey.

While these tooltips and sub-menus may help us, it’s important that they comply with certain standards and expectations to help everyone when visiting a website, including those with accessibility needs. If the screen loads additional content automatically, or disappears quickly, it can be frustrating and unhelpful.

1.4.13 – Content on Hover or Focus (Level AA)

The Content on Hover or Focus success criterion states:

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are 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.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML titleattribute.

Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

The success criterion found in WCAG 2.1 provides specific rules that need to apply to all additional content. In particular, there are three main points which is that additional content should be dismissable, hoverable and persistent.

Dismissable

Additional content is there to be helpful; to provide information or guidance across a website. However, if a user cannot get rid of content easily, the journey becomes frustrating and can leave them feeling ‘locked into’ a specific section of a website.

In 1.4.13, the dismissable rule states that additional content must not be dismissed by moving the mouse away from the additional content’s area. Rather, it must be through a keyboard action, usually the escape key, that will remove the content from view until such a time as when it is needed.

This sometimes has to happen because additional content may be triggered accidentally through the movement of a mouse or by tabbing through a page. If this content appears and covers additional content, it needs to be dismissed so the user can continue reading the rest of the page.

Additional content will fail if it cannot be dismissed without moving the mouse or keyboard.

Hoverable

To save space, some menus will group certain links together that a similar purpose. These links will be nested in a menu and can be seen by hovering over the parent category.

An example of a multi-level sub-menu

All additional content, whether a sub-menu, tooltip or other feature, must be able to be hovered over without disappearing. This may seem counter intuitive in some instances, such as why a tooltip needs to be hoverable. However, it may be that screen reader users or screen magnifier users require the ability to hover over certain elements in order for the assistive technology to read and interact with them.

A feature must be able to have a mouse hover over it, otherwise the feature would fail the criterion.

Persistent

A sub-menu, tooltip or other feature must be persistent, in that it must remain in place until the user decides that they no longer want to use it. If a feature appears and then disappears quickly, it ceases to be useful as no one can read its information in time. For example, a non-modal dialog – a popup box like an in page chat screen – needs to persist so that a user can interact with its features. If it minimises itself quickly and without warning, a user may struggle or choose not to interact with this item.

An example of a popup chat window

You may have also seen sub-menus that require the utmost mouse skill to select another item, otherwise the whole menu disappears. This isn’t good for anyone, let alone users with low mouse dexterity.

If a feature dismisses itself, say after 10 seconds, it would fail this criterion but could also fail under success criterion 2.2.2 – Pause, Stop, Hide, depending on the component being tested.

Working together

While the criterion mentions these issues separately, we will often find them working together on a component. For example, a submenu needs to be hoverable, persistent and dismissable as the user requires. A menu that is too easily dismissed cannot be hovered over, or one that is too persistent cannot be dismissed and can get in the way of other content.

Further to this, of course, is that the additional content must be both perceivable and operable.

Exceptions

The success criterion does mention that there are exceptions to this requirement of being dismissable, hoverable and persistent. The example given is where a user has included settings or assistive technology tools that may result in content appearing. This is not the fault of the webpage author and therefore they cannot be held responsible for this content. However, all content that is created by the author needs to be tested.

Conclusions

Additional content provides useful information about the user through tooltips, and allows them to navigate to important pages through sub-menus. This additional content must be able to be dismissed without moving the mouse, able to have a mouse or keyboard focus hover over them and remain in place until they are not needed.

The issues of dismissable, hoverable and persistent are mentioned separately in the WCAG guidelines, but in practice we find them working together on an individual component. While this criterion has a ‘double A’ conformity which benefits users with a disability, a component that passes this criterion will benefit all users of a website.

Is your additional content dismissable, hoverable and persistent?

You may have had your website tested previously but as a website has developed, other features have been added that hasn’t been tested. Likewise you may never have had your website tested and want to know if your additional content meets the WCAG standards.

It may be that you have some additional content on your website and you would like to know whether it meets the WCAG 2.1 guidelines. Feel free to contact us at Dig Inclusion where we can talk to you about your additional content and talk about conformance testing to the WCAG AA accessibility standard.