-
Notifications
You must be signed in to change notification settings - Fork 235
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add sufficient technique for 2.4.7 using
:focus-visible (#3272)
Two years late, but: here's the technique I intended to write for #301 (comment) (but a recent lengthy discussion on mailing list reminded me that back in #301 the WG had indeed agreed this interpretation) [Preview of new techinque](https://raw.githack.com/w3c/wcag/patrickhlauke-focus-visible-technique/techniques/css/C45.html) --------- Co-authored-by: Alastair Campbell <ac@alastc.com> Co-authored-by: Mike Gower <mikegower@gmail.com>
- Loading branch information
3 people
committed
May 14, 2024
1 parent
ce91353
commit a2b2f22
Showing
7 changed files
with
178 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> | ||
| <head> | ||
| <title>Using CSS :focus-visible to provide keyboard focus indication</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css"/> | ||
| </head> | ||
| <body> | ||
| <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h1> | ||
| <section id="meta"> | ||
| <h2>Metadata</h2> | ||
| <p id="id"></p> | ||
| <p id="technology">CSS</p> | ||
| <p id="type"></p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p>All technologies that support CSS.</p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS <code class="language-css">:focus-visible</code> pseudo-class.</p> | ||
| <p>Styles defined with the regular <code class="language-css">:focus</code> pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show <code class="language-css">:focus-visible</code> styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally <em>not</em> show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <code><input></code> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).</p> | ||
| <p>This satisfies the requirement of providing a <q>mode of operation where the keyboard focus indicator is visible</q>.</p> | ||
| <div class="note"> | ||
| <p>This technique is only sufficient <em>if</em> it uses styles that provide a <em>visible</em> focus indicator.</p> | ||
| </div> | ||
| <div class="note"> | ||
| <p>There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit <code class="language-css">:focus</code> style for these cases.</p> | ||
| </div> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h3> | ||
| <p>In this example, we have a standard <code><button></code> control in the HTML.</p> | ||
| <p>By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using <kbd>Tab</kbd>.</p> | ||
| <p>In order to make this focus indication more prominent, we use the <code class="language-css">:focus-visible</code> pseudo-class selector to define a more intentional and pronounced focus style.</p> | ||
| <p>Working example: <a href="../../working-examples/css-focus-visible/">Using CSS <code class="language-css">:focus-visible</code> to provide keyboard focus indication</a>.</p> | ||
| <pre><code><!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, | ||
| initial-scale=1, shrink-to-fit=no"> | ||
| <title>Using CSS :focus-visible to | ||
| provide keyboard focus indication</title> | ||
| <style> | ||
| /* Specific :focus-visible styles */ | ||
|
|
||
| :focus-visible { | ||
| outline: 5px solid red; | ||
| } | ||
| … | ||
| </style> | ||
| </head> | ||
| <body> | ||
| … | ||
| <button>Example button</button> | ||
| … | ||
| </body> | ||
| </html></code></pre> | ||
| </section> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="test-procedure"> | ||
| <h3>Procedure</h3> | ||
| <p>For each user interface component that can receive keyboard focus:</p> | ||
| <ol> | ||
| <li>Set focus to the interface component using the keyboard (generally, navigating to the component using <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd>)</li> | ||
| <li>Verify that once the component has received focus, a focus indicator is visible</li> | ||
| </ol> | ||
| </section> | ||
| <section class="test-results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check 2 is true.</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ol> | ||
| <li><a href="C15">C15</a></li> | ||
| <li><a href="../general/G165">G165</a></li> | ||
| <li><a href="../general/G195">G195</a></li> | ||
| <li><a href="C40">C40</a></li> | ||
| </ol> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <ol> | ||
| <li><a href="https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo">CSS Selectors Level 4 - <code class="language-css">:focus-visible</code> pseudo-class</a>.</li> | ||
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><abbr title="Mozilla Developer Network">MDN</abbr> - <code class="language-css">:focus-visible</code> pseudo-class</a>.</li> | ||
| </ol> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <title>Using CSS :focus-visible to provide keyboard focus indication</title> | ||
| <style> | ||
|
|
||
| /* Specific :focus-visible styles */ | ||
|
|
||
| :focus-visible { | ||
| outline: 5px solid red; | ||
| } | ||
|
|
||
| /* General styles for the example */ | ||
|
|
||
| body { | ||
| font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif; | ||
| background-color: #fafafc; | ||
| color: #222; | ||
| margin: 0; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| pre { | ||
| background-color: #f0f0f0; | ||
| border: 1px solid #888; | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h1> | ||
| <p>In this example, we have a standard <code><button></code> control in the HTML.</p> | ||
|
|
||
| <button>Example button</button> | ||
|
|
||
| <p>By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using <kbd>Tab</kbd>.</p> | ||
| <p>In order to make this focus indication more prominent, we use the <code class="language-css">:focus-visible</code> pseudo-class selector to define a more intentional and pronounced focus style.</p> | ||
| <pre><code>:focus-visible { outline: 5px solid red; }</code></pre> | ||
| </body> | ||
| </html> |