Add F114: Failure technique for focus obscured by overlay

[venkatvemuri28]

Add F114: Failure Technique for Focus Indicators Obscured by Semi-Opaque Overlays

Resolving for #3203

Problem

WCAG 2.2 Understanding document for SC 2.4.11 Focus Not Obscured (Minimum) mentions that semi-opaque overlays can reduce focus indicator visibility, but only describes the problem informally. There was no dedicated Failure Technique (F114) that auditors could reference when testing SC 1.4.11 Non-text Contrast failures where focus indicators are dimmed by overlays.

Solution

Created F114 failure technique with comprehensive testing guidance and a working example that demonstrates the issue.

Changes Made

New Files:

• techniques/failures/F114.html - Complete failure technique documentation
• working-examples/css-focus-obscured-overlay/index.html - Interactive working example

Modified Files:

• understanding/understanding.11tydata.js - Added F114 to SC 1.4.11 failure techniques list

F114 Technique Includes:

• Clear applicability criteria for semi-transparent overlays
• Detailed description of the failure condition
• Practical examples with CSS code
• Step-by-step testing procedure
• Expected results criteria
• Related techniques (C40, G195)

Working Example Features:

• Form with focusable controls demonstrating normal focus indicators
• Semi-transparent overlay (70% opacity) triggered by button
• Clear instructions for testing the failure
• Responsive design following WCAG project patterns
• Refactored CSS for maintainability (simplified form layout, consolidated button styles)

Testing

The working example allows auditors to:

1. Observe normal focus indicators
2. Activate overlay to see contrast reduction
3. Verify focus indicators become difficult to perceive
4. Test with color contrast analyzers

Impact

Provides auditors with a formal reference (F114) for citing SC 1.4.11 failures when focus indicators are obscured by semi-opaque overlays, filling the identified gap in WCAG testing guidance.

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	f1660f5
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/68fbd95bfd1a5b00084e9039
😎 Deploy Preview	https://deploy-preview-4673--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[fstrr]

Preview

[scottaohara]

while i realize the primary goal of this new technique is to show how this fails 2.4.11, should it not also mention this example fails other SCs as well? Other failing techniques similarly list the other SC(s) that are applicable

[detlevhfischer]

Hmmm... I think for a failure of 2.4.11, it does not matter whether the obscuring object is opaque or semitransparent. With modal dialogs, focus should not reach the page background, so that is the primary failure (of 2.4.3) in the scenario outlined. It the failure occurs and the focus is not (or not well enough) visible on darkened background as a consequence, this seems at least secondary. So it is difficult to pin down this way because more than one SC fail (1.4.11 also being a candidate). The failure condition also would need to take into account if the dialog was explictily opened by the user (think of a chat window) or can be moved around / repositioned. If so, lack of contrast would more likely be a 1.4.11 failure (not-text contrast).