Skip to content

Add F114: Failure technique for focus obscured by overlay #4673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+384 −1
Open

Add F114: Failure technique for focus obscured by overlay #4673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions techniques/failures/F114.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criterion 1.4.11 due to focus indicator being obscured by a semi-opaque overlay</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Failure of Success Criterion 1.4.11 due to focus indicator being obscured by a semi-opaque overlay</h1><section class="meta"><p class="id">ID: F114</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
<p>Any technology that supports semi-transparent overlays (such as CSS with opacity or rgba colors) and focus indicators.</p>
</section><section id="description"><h2>Description</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<p>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.</p>
<p>Here is example CSS that creates a semi-opaque overlay:</p>
<pre xml:space="preserve"><code class="language-css">.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 */
}</code></pre>
<p>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.</p>
<ul class="working-example">
<li><a href="../../working-examples/css-focus-obscured-overlay/">Example of focus indicator obscured by overlay</a></li>
</ul>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Navigate through the page using keyboard navigation (Tab key) to move focus to various interactive elements.</li>
<li>Check if any semi-opaque overlays or translucent content appear that could cover focus indicators.</li>
<li>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.</li>
<li>Use a color contrast analyzer to measure the contrast between the focus indicator and the background as it appears through the overlay.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>If the contrast ratio of any focus indicator, when obscured by a semi-opaque overlay, is less than 3:1, then this failure condition applies and the content fails this Success Criterion.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../css/C40">C40</a>: Creating a lightbox that can be closed with the Escape key</li>
<li><a href="../general/G195">G195</a>: Using an author-supplied, highly visible focus indicator</li>
</ul></section><section id="resources"><h2>Resources</h2></section>
</body></html>
2 changes: 1 addition & 1 deletion understanding/understanding.11tydata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -539,7 +539,7 @@ export default function (data) {
techniques: ["G207", "G209"],
},
],
failure: ["F78"],
failure: ["F78", "F114"],
},

"text-spacing": {
Expand Down
336 changes: 336 additions & 0 deletions working-examples/css-focus-obscured-overlay/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Failure: Focus indicator obscured by semi-opaque overlay</title>
<style>

/* Reflow Styling */

.row {
width: 100%;
display: flex;
flex-flow: row wrap;
}

.row-nested {
width: calc(100% + 2rem);
margin: 0 -1rem 1rem -1rem;
}

.col {
padding: 1rem;
flex: 0 1 100%;
}

@media all and (min-width: 576px) {
.col-panel {
flex: 0 1 50%;
padding-bottom: 0.25rem;
}
}

@media all and (min-width: 992px) {
main {
flex: 0 1 66.333333%;
}
aside {
flex: 0 1 33.333333%;
margin-top: 0;
}
}

/* Content Styling */

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

body {
font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
background-color: #fafafc;
margin: 0;
}

a:hover {
text-decoration: none;
}

h1, h2, h3 {
color: #005a6a;
}

h1 {
font-size: 2rem;
margin: 0;
}

h2 {
font-size: 1.5rem;
margin-top: 0;
}

h3 {
font-size: 1.2rem;
margin-top: 0;
}

header {
background-color: #005a9c;
margin-top: 1rem;
}

header nav ul {
list-style: none;
}

header nav ul li {
display: inline;
padding: 0 0.25rem;
}

nav {
position: relative;
border-top: 1px solid #005a9c;
border-bottom: 1px solid #005a9c;
background-color: #003366;
margin: 0 -1rem -1rem -1rem;
}

nav ul {
padding-left: 1rem;
}

a {
color: #ffffff;
}

main {
background: #ffffff;
padding-bottom: 0;
}

aside {
border-left: 1px solid #dddddd;
}

footer {
color: #ffffff;
background-color: #3b3b3b;
border-top:1px solid #dddddd;
}

.logo {
width: 90px;
vertical-align: middle;
margin: 0 .5rem 1rem 0;
}

.panel {
background-color: #fafafc;
border: 1px solid #ddd;
padding: 1rem;
}

/* Failure Example Specific Styles */

.form-field {
margin-bottom: 1rem;
}

.form-field label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}

.form-field input {
width: 100%;
padding: 0.5rem;
border: 1px solid #666;
border-radius: 4px;
font-size: 1rem;
}

.form-field input:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

.button-group {
text-align: center;
margin-top: 1rem;
}

.btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
margin: 0 0.5rem;
}

.btn:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

.btn:hover {
background-color: #e0e0e0;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
z-index: 1000;
align-items: center;
justify-content: center;
}

.overlay.show {
display: flex;
}

.modal {
background: white;
padding: 2em;
border-radius: 8px;
max-width: 400px;
text-align: center;
}

.modal .btn {
display: block;
margin: 1em auto 0;
width: auto;
}

.instructions {
background-color: #e6f3ff;
border: 1px solid #0066cc;
padding: 1em;
margin: 1em 0;
border-radius: 4px;
}

.failure-note {
background-color: #ffe6e6;
border: 1px solid #cc0000;
padding: 1em;
margin: 1em 0;
border-radius: 4px;
}

</style>

</head>

<body class="row">

<header class="col">
<a href="http://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg">Failure Example</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Techniques</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main class="col">
<h1>Failure Example: Focus Indicator Obscured by Semi-Opaque Overlay</h1>

<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Use the Tab key to navigate through the form controls below.</li>
<li>Notice the blue focus outline on each control.</li>
<li>Click the "Open Modal" button to show the overlay.</li>
<li>With the overlay visible, use Tab to navigate through the background controls.</li>
<li>Observe how the focus indicators are now dimmed by the semi-transparent overlay.</li>
</ol>
</div>

<div class="failure-note">
<p><strong>Failure:</strong> 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.</p>
</div>

<div class="row row-nested">
<div class="col col-panel">
<div class="panel">
<h2>Form Controls</h2>
<form>
<div class="form-field">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>

<div class="form-field">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>

<div class="button-group">
<button type="button" onclick="openModal()" class="btn">Open Modal</button>
<button type="submit" class="btn">Submit Form</button>
</div>
</form>
</div>
</div>
<div class="col col-panel">
<div class="panel">
<h2>Additional Information</h2>
<p>This example demonstrates how semi-opaque overlays can obscure focus indicators, violating SC 1.4.11 Non-text Contrast.</p>
<p>The modal overlay uses <code>rgba(0, 0, 0, 0.7)</code> 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.</p>
</div>
</div>
</div>
</main>
<footer class="col">
<h2>Footer</h2>
<p>This is a working example for WCAG Technique F114.</p>
</footer>

<div class="overlay" id="overlay">
<div class="modal">
<h2>Modal Dialog</h2>
<p>This is a modal dialog with a semi-transparent overlay behind it.</p>
<p>The background controls are still focusable, but their focus indicators are obscured.</p>
<button onclick="closeModal()" class="btn">Close Modal</button>
</div>
</div>

<script>
function openModal() {
document.getElementById('overlay').classList.add('show');
}

function closeModal() {
document.getElementById('overlay').classList.remove('show');
}

// Allow closing with Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
</script>
</body>
</html>