diff --git a/techniques/failures/F114.html b/techniques/failures/F114.html new file mode 100644 index 0000000000..042d3e3936 --- /dev/null +++ b/techniques/failures/F114.html @@ -0,0 +1,47 @@ +Failure of Success Criterion 1.4.11 due to focus indicator being obscured by a semi-opaque overlay

Failure of Success Criterion 1.4.11 due to focus indicator being obscured by a semi-opaque overlay

ID: F114

Technology: failures

Type: Failure

When to Use

+

Any technology that supports semi-transparent overlays (such as CSS with opacity or rgba colors) and focus indicators.

+

Description

+

This describes the failure condition that occurs when a focus indicator is positioned behind a semi-opaque overlay (such as a lightbox, modal, or other translucent content), resulting in the focus indicator's contrast being reduced below the 3:1 ratio required by Success Criterion 1.4.11 Non-text Contrast.

+

Focus indicators are visual cues that show which element currently has keyboard focus. When these indicators appear behind semi-transparent content, the overlay reduces the perceived contrast between the focus indicator and its background, making it harder or impossible for users with low vision to perceive the focus indicator.

+

This failure occurs even if the component itself is not entirely obscured, as the reduced contrast of the focus indicator violates the non-text contrast requirements.

+

Examples

+
+

A webpage uses a semi-transparent dark overlay to dim the background content when displaying a modal dialog. When keyboard users tab through the background content, the focus indicators (such as outline borders) appear dimmed because they are rendered behind the overlay, reducing their contrast below 3:1.

+

Here is example CSS that creates a semi-opaque overlay:

+
.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
+  z-index: 1000;
+}
+
+.focused-element {
+  outline: 2px solid #ffffff; /* White focus outline */
+}
+

When the overlay is present and an element receives focus, the white outline appears behind the semi-transparent black overlay. The effective contrast of the white outline against the dimmed background may be insufficient, failing 1.4.11.

+ +
+

Tests

+

Procedure

+
    +
  1. Navigate through the page using keyboard navigation (Tab key) to move focus to various interactive elements.
    2. +
  2. Check if any semi-opaque overlays or translucent content appear that could cover focus indicators.
    3. +
  3. For each focusable element that could be covered by such an overlay, measure the contrast ratio of the focus indicator while the overlay is present.
    4. +
  4. Use a color contrast analyzer to measure the contrast between the focus indicator and the background as it appears through the overlay.
    5. +
+
+

Expected Results

+ +
+

Resources

+ diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js index fb9e83a3f1..eec9f7ae42 100644 --- a/understanding/understanding.11tydata.js +++ b/understanding/understanding.11tydata.js @@ -539,7 +539,7 @@ export default function (data) { techniques: ["G207", "G209"], }, ], - failure: ["F78"], + failure: ["F78", "F114"], }, "text-spacing": { diff --git a/working-examples/css-focus-obscured-overlay/index.html b/working-examples/css-focus-obscured-overlay/index.html new file mode 100644 index 0000000000..3d2889210e --- /dev/null +++ b/working-examples/css-focus-obscured-overlay/index.html @@ -0,0 +1,336 @@ + + + + + + Failure: Focus indicator obscured by semi-opaque overlay + + + + + + +
+ Failure Example + +
+ +
+

Failure Example: Focus Indicator Obscured by Semi-Opaque Overlay

+ +
+

Instructions:

+
    +
  1. Use the Tab key to navigate through the form controls below.
    2. +
  2. Notice the blue focus outline on each control.
    3. +
  3. Click the "Open Modal" button to show the overlay.
    4. +
  4. With the overlay visible, use Tab to navigate through the background controls.
    5. +
  5. Observe how the focus indicators are now dimmed by the semi-transparent overlay.
    6. +
+
+ +
+

Failure: When the semi-opaque overlay is present, the contrast of the focus indicators (blue outline) is reduced below the 3:1 ratio required by SC 1.4.11 Non-text Contrast, making them difficult to perceive for users with low vision.

+
+ +
+
+
+

Form Controls

+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+
+

Additional Information

+

This example demonstrates how semi-opaque overlays can obscure focus indicators, violating SC 1.4.11 Non-text Contrast.

+

The modal overlay uses rgba(0, 0, 0, 0.7) which creates a dark semi-transparent layer over the content. When keyboard users navigate through the form controls behind this overlay, the blue focus indicators become difficult to see due to reduced contrast.

+
+
+
+
+ + +
+
+

Modal Dialog

+

This is a modal dialog with a semi-transparent overlay behind it.

+

The background controls are still focusable, but their focus indicators are obscured.

+ +
+
+ + + +