Wayne's Metadata Scratch pad
SC Shortname
Metadata on Hover
SC Text
Current:
None
Proposed:
Add the following new SC:
For informational content that appears on hover or focus, all of the following are true:
- Turn Off
- The informational content can be turned off
- Neither obscures nor is obscured
- The informational content does not obscure the triggering content nor is it obscured by the pointer
- Other method
- hover and/or focus are not the only means of accessing the informational content
- Not important
- does not include information necessary to perceive content
This does not apply to user agent rendering of the title attribute.
Suggested Priority Level
Level AA
Related Glossary additions or changes
- Informational content
- Content whose primary purpose is to provide information rather than navigational or functional elements such as links, buttons or menus.
What Principle and Guideline the SC falls within.
New SC under Principle 1, Related to Guidelines:
Description
The primary case of this in HTML is the use of tool tips for conveying important information. Authors should not put important information in title attributes that can become unreadable when content and cursors are enlarged. [new >> In addition, the tool tip information should not cover related important information, like the content that triggered the tool tip.<< new] Information should be available through more than one mechanism, and this helps people using touch devices or keyboard-only input.
The more general case is that any hidden information should not only be available to specific input types such as a mouse.
Benefits
People who increase the size of mouse cursors in their operating system or with screen magnification software will not be prevented from perceiving content due to unreadable tooltip text. [new >> Enlarged tool tips will not cover important information related to the trigger and will not run off the page and become unreadable. << new]
User Need:
Users can see and interact with all content and user interface controls presented visually, including when users have changed display settings such as text size, magnification, and cursor appearance.
Source: LVTF RESOLUTION, 9 March 2016
Evidence
Simply Accessible
Joanna Briggs explains Simply Accessible's testing results and recommendation in the article, Title attributes.
When hovering over a link that has a title attribute, the large mouse pointer covers the start of the title attribute. Longer title attributes may not fit inside the viewport with higher levels of magnification...
In usability testing, we've even observed a user who was looking for a link on the screen. She didn’t know that she stopped her mouse over a link with a title attribute. That title attribute hid the link she was trying to hunt down.
How do you avoid these problems? Just avoid using title attributes.
Cursor Overlapping Tooltip Text on Hover Example
Simply Accessible has a screenshot illustrating the problem (.png file). It shows a large hand cursor overlapping a tool tip that should read "2013 Fall TV Schedule". It reads "13 Fall TV Schedule".
University of Minnesota Duluth
Students with low vision experienced serious issues with cursors overlapping tooltip text on hover during March 2015 formal usability testing of a teaching-and-learning Web product. Icons were identified solely via tool tips and were unreadable on hover. It was not a momentary issue. It was a constant issue. The problem was reported to the vendor with the recommendation that real on-screen text be used.
Cursor Overlapping Tooltip Text on Hover Examples
To illustrate the issue the following images were created based that University of Minnesota Duluth usability testing. Original samples from the video are linked on the Use case Wiki page [Laura, UC-5]). An email explaining Obscured Tooltip issue is available.
-
On hover, a hand cursor overlaps a tooltip that should read: "footnotes"
-
On hover, a hand cursor overlaps a tooltip that should read: "glossary"
-
On hover, a hand cursor overlaps a tooltip that should read: "mail".
Samples of screenshots from the original video of the testing sessions are available:
OS X FireFox Test Case
Besides the Simply Accessible and University of Minnesota Duluth evidence, the overlap issue also occurs in OS X in FireFox when the cursor is enlarged. The large cursor overlaps the tooltips making them unreadable. A test page is available.
- Choose Apple menu > System Preferences, then click Accessibility.
- Click "Display" then drag the Cursor Size slider to the right from normal to large.
Cursor Overlapping Tooltip Text on Hover Example
-
On hover, a large pointer cursor overlaps a tooltip that should read: "facebook"
In addition tooltips do not enlarge in FireFox, Safari, or Chrome.
Perkins
A list of job postings within a recruitment site are links to their respective job description. They also trigger tooltips on hover (a large div) that displays the first sentence or two about the position. This informational content that is displayed on mouse hover covers nearly all the job listings behind it. Basically, if your mouse touches a job posting, a div appears that covers the list. This situation is really a nightmare for screen magnification users - since the zoom window follows the mouse, you can't read the listings without touching a trigger which in turn obscures what you want to see.
[new >> In the case where the user employs browser zoom, and the browser does support text enlarge for tool tip, the tool tip for large content like this gets truncated by the page top or bottom. The large tool tip would run off the page and be unreadable. This is because the mouse being occupied to show the tool tip cannot be used to scroll the tool tip. << new]
Div on Hover Obscuring Content Example
-
Mouse hover covering content behind it.
HTML5
The HTML5 Recommendation warns authors against use of the title attribute.
So WCAG 2.1 wouldn't be alone in calling out another title attribute issue. That specification states:
Warning Relying on the
titleattribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification. attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
Testability
For each item of content that is only shown by hovering your mouse over an element, check that:
- the content that appears does not include links, buttons, or other interactive features;
Then:
- the content is available by a method other than mouse-hover (for example onfocus);
- does not cover other content.
Expected Results
- Check #1 is true, and if so then #2, #3 must be true to pass.
[Error >> What do we do. There is no #3. Do we mean the first #1 to be #1 and the second #2? It is stated like an if ... Then?? what is meant << Error]
Techniques
Related Existing Techniques
- F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
- F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%
New Techniques
- Using static on-screen text and not relying on title attributes for tooltips. (future technique)
- Using a JavaScript / CSS to provide a pop-over that works on hover and focus that does not cover other content. [New >> Be sure to turn off the default hover action << New]
- Using onclick (accessible to keyboard and touch devices) to show small pop-over content instead of title attributes (future technique).
- Providing an On-Screen Text Alternative for an Icon Font