Current versions of SC and Definitions

• SC for viewing | SC for editing
• popup definition for viewing | popup definition for editing
• SC in full draft guideline
• Understanding doc for viewing | Understanding doc for editing | Understanding doc in master

SC Shortname

Popup Visibility

SC Text

The following are true when a popup becomes visible, except where the visual presentation of the popup is controlled by the user agent and is not modified by the author:

• Trigger: Either the popup does not obscure any essential content within the trigger, or the popup can be closed via a standard keyboard exit method, such as the escape key.
• Hover: If the popup is triggered via pointer hover, then the pointer may be moved onto the popup without loss of popup visibility.
• Focus: The popup remains visible while the trigger or any popup component has keyboard focus, unless the user takes an explicit action to close the popup.

Suggested Priority Level

Level AA

Related Glossary additions or changes

• popup (and trigger): content which becomes visible only when associated content, called the trigger, gains keyboard focus or pointer hover

What Principle and Guideline the SC falls within.

Principle 1: Perceivable, Guideline 1.4: Distinguishable

Description

Popup content that appears only on focus or mouse hover can present many challenges for users with low vision and others whose mouse accuracy may be low. Techniques can be employed to successfully perceive and interact with popups as long as certain conditions are met when a popup is displayed.

First, if a popup is positioned to cover all or part of its triggering content, then the trigger can become much more difficult to perceive under magnification. In this situation, screen area that doesn't trigger the popup may be the minority, resulting in a difficult cycle to pan the screen without re-triggering the popup. The solution is to always position the popup adjacent to its trigger.

Next, a popup can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger. For large popups, magnified views may mean that the user needs to scroll or pan to completely view the popup, which is impossible unless the user is able to move their pointer off the trigger without the popup disappearing. Another common situation is when large pointers have been selected via platform settings or assistive technology. Here, the pointer can obscure a significant area of the popup. A technique to view the popup fully in both situations is to move the mouse pointer onto the popup itself. Ensuring this capability also offers advantages for users who utilize screen reader feedback on mouse interactions.

Finally, when a popup contains user interface components that can gain focus, a user technique can be employed to move focus onto the popup. As long as the popup remains displayed, the view can then be magnified, scrolled, or panned for optimal perception without regard to mouse position over the content. For popups with multiple clickable items, this also offers the advantage of being able to make and correct a clicking mistake without losing visibility of the popup.

This criterion does not attempt to solve such issues when the appearance of the popup is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the title attribute in HTML as a small tooltip.

Additional notes to be clarified in Understanding:

1. Dialogs cannot be popups because they would fail SC 3.2.1, On Focus, by gaining focus on only focus or hover.
2. Add more detail to exception (basically when code is supplied but no styling).
3. Explain that proximity is implied by hover condition.
4. Add language to explain exception for focus condition when user has dismissed the popup and trigger still has focus.
5. Explain that whitespace within the trigger is okay to obscure (only essential content).
6. Explain rationale on allowing ESC to close popup.

Benefits

1. Users who increase the size of mouse cursors via platform settings or assistive technology.
2. Users who view content under magnification.
3. Users with low mouse cursor accuracy due to low vision, motor impairment, etc.

Testability

For each possible popup on the webpage, check that:

1. The triggering content is not obscured when the popup is visible
2. Display the popup via hover if possible, and ensure the pointer can be moved onto the popup without loss of visibility.
3. If the popup contains user interface components, then move focus to each to ensure the popup remains visible.

All must be true to pass.

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

• Positioning popups adjacent to triggering content (CSS)
• Ensuring popups remain visible on hover or focus (CSS and JavaScript)
• Using static content instead of popups for important information or controls
• Using a JavaScript / CSS to provide a popup that works on hover and focus that does not cover other content
• Using onclick (accessible to keyboard and touch devices) to show popup content

Support Material

The Low Vision Task Force wiki on Popup Interference contains a wealth of additional information and background.