Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

Applicability

Any technology

This failure relates to:

Description

This describes a failure condition that occurs when the user agent's default visual indication of keyboard focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied visual focus indicator. Turning off the focus indicator instructs the user agent not to present the focus indicator. Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.

Examples

Failure Example 1: The focus indicator is turned off with CSS

The following CSS example will remove the default focus indicator, which fails the requirement to provide a visible focus indicator.

Example Code:

:focus {outline: none}

Failure Example 2: The outline of elements is visually similar to the focus indicator

The following CSS example will create an outline around links that looks the same as the focus indicator. This makes it impossible for users to determine which one in fact has the focus, even though the user agent does draw the focus indicator.

Example Code:

a {outline: thin dotted black}

Failure Example 3: Elements have a border that occludes the focus indicator

The following CSS example creates a border around links that does not have enough contrast for the focus indicator to be seen when drawn on top of it. In this case the focus indicator is drawn just ouside the border, but as both are black and the border is thicker than the focus indicator, it no longer meets the definition of "visible".

Example Code:

a {border: medium solid black}

Resources

No resources available for this technique.

Tests

Procedure

  1. Set the focus to all focusable elements on a page using the keyboard.

  2. Check that the focus indicator is visible.

Expected Results