Add sufficient technique for 2.4.7 using :focus-visible (#3272)

patrickhlauke · alastc · mbgower · web-flow · commit a2b2f2204a05 · 2024-05-14T10:38:58.000-07:00
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>
diff --git a/techniques/css/C15.html b/techniques/css/C15.html
@@ -100,6 +100,15 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
+    <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G165">G165</a></li>
+         <li><a href="../general/G195">G195</a></li>
+         <li><a href="C40">C40</a></li>
+         <li><a href="C45">C45</a></li>
+      </ul>
+    </section>
 		<section id="resources">
 			<h2>Resources</h2>
 			<ul>
diff --git a/techniques/css/C40.html b/techniques/css/C40.html
@@ -71,6 +71,9 @@ <h2>Related Techniques</h2>
 			<ul>
 				<li><a href="../general/G149">G149</a></li>
 				<li><a href="../general/G195">G195</a></li>
+				<li><a href="C15">C15</a></li>
+				<li><a href="../general/G165">G165</a></li>
+        <li><a href="C45">C45</a></li>
 			</ul>
 		</section>
 		<section id="resources">
diff --git a/techniques/css/C45.html b/techniques/css/C45.html
@@ -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>&lt;input&gt;</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>&lt;button&gt;</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>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width,
+              initial-scale=1, shrink-to-fit=no"&gt;
+  &lt;title&gt;Using CSS :focus-visible to
+         provide keyboard focus indication&lt;/title&gt;
+  &lt;style&gt;
+    /* Specific :focus-visible styles */
+
+    :focus-visible {
+      outline: 5px solid red;
+    }
+    …
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  …
+  &lt;button&gt;Example button&lt;/button&gt;
+  …
+&lt;/body&gt;
+&lt;/html&gt;</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>
diff --git a/techniques/general/G165.html b/techniques/general/G165.html
@@ -27,7 +27,11 @@
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G149">G149</a></li>
+      <li><a href="G149">G149</a></li>
       <li><a href="../css/C15">C15</a></li>
       <li><a href="../client-side-script/SCR31">SCR31</a></li>
+      <li><a href="../css/C15">C15</a></li>
+      <li><a href="G195">G195</a></li>
+      <li><a href="../css/C40">C40</a></li>
+      <li><a href="../css/C45">C45</a></li>
    </ul></section></body></html>
diff --git a/techniques/general/G195.html b/techniques/general/G195.html
@@ -39,8 +39,10 @@ <h3>Menus</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G149">G149</a></li>
-      <li><a href="../general/G165">G165</a></li>
+      <li><a href="G149">G149</a></li>
+      <li><a href="G165">G165</a></li>
       <li><a href="../css/C15">C15</a></li>
       <li><a href="../client-side-script/SCR31">SCR31</a></li>
+      <li><a href="../C40">C40</a></li>
+      <li><a href="../C45">C45</a></li>
    </ul></section></body></html>
diff --git a/understanding/20/focus-visible.html b/understanding/20/focus-visible.html
@@ -27,8 +27,12 @@ <h2>Intent of Focus Visible</h2>
       </p>
       
       <p>“Mode of operation” accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.</p>
+
+      <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 focus indicator for these cases.</p>
+      </div>
       
-   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> While Focus Visible does not specify what that form is, <a href="focus-appearance">2.4.13 Focus Appearance (Level AAA)</a> provides guidance on creating a consistent, visible indicator.</span></p>     
+   	<p>Note that a keyboard focus indicator can take different forms. <span class="wcag22">While Focus Visible does not specify what that form is, <a href="focus-appearance">2.4.13 Focus Appearance (Level AAA)</a> provides guidance on creating a consistent, visible indicator.</span></p>     
       
    </section>
    <section id="benefits">
@@ -83,52 +87,46 @@ <h2>Techniques for Focus Visible</h2>
       
       <section id="sufficient">
          <h3>Sufficient Techniques for Focus Visible</h3>
-         
-         
          <ul>
-            
             <li>
+
                									         
                <a href="../Techniques/general/G149" class="general">Using user interface components that are highlighted by the user agent when they receive
                   focus
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
                <a href="../Techniques/css/C15" class="css">Using CSS to change the presentation of a user interface component when it receives
                   focus
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
                <a href="../Techniques/general/G165" class="general">G165: Using the default focus indicator for the platform so that high visibility default
                   focus indicators will carry over
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
                <a href="../Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
                								       
-            </li>
 
+            </li>
             <li>
                <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
             </li>
-            
             <li>
-               									         
+               <a href="../../techniques/css/C45">Using CSS :focus-visible to provide keyboard focus indication</a>
+            </li>
+            <li>
                <a href="../Techniques/client-side-script/SCR31" class="script">Using script to change the background color or border of the element with focus</a>
-               								       
+
             </li>
-            
          </ul>
-         
       </section>
       
       <section id="advisory">
@@ -138,28 +136,21 @@ <h3>Additional Techniques (Advisory) for Focus Visible</h3>
       
       <section id="failure">
          <h3>Failures for Focus Visible</h3>
-         
-         
          <ul>
-            
             <li>
+
                									         
                <a href="../Techniques/failures/F55" class="failure">Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
                   focus when focus is received
                </a>
-               								       
             </li>
-            
             <li>
                									         
                <a href="../Techniques/failures/F78" class="failure">Failure due to styling element outlines and borders in a way that overrides or renders
                   non-visible the default visual focus indicator
                </a>
-               								       
             </li>
-            
          </ul>
-         
       </section>
       
    </section>
diff --git a/working-examples/css-focus-visible/index.html b/working-examples/css-focus-visible/index.html
@@ -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>&lt;button&gt;</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>

-Original file line number
+Diff line change
 				ul>
 			section>
 		section>
 +    <section id="related">
 +      <h2>Related Techniquesh2>
 +      <ul>
 +         <li><a href="../general/G165">G165a>li>
 +         <li><a href="../general/G195">G195a>li>
 +         <li><a href="C40">C40a>li>
 +         <li><a href="C45">C45a>li>
 +      ul>
 +    section>
 		<section id="resources">
 			<h2>Resourcesh2>
 			<ul>
-Original file line number
+Diff line change
@@ @@ -0,0 +1,98 @@ @@
 +>
 +<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 +	<head>
 +		<title>Using CSS :focus-visible to provide keyboard focus indicationtitle>
 +		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 +	head>
 +	<body>
 +		<h1>Using <abbr title="Cascading Style Sheets">CSSabbr> <code class="language-css">:focus-visiblecode> to provide keyboard focus indicationh1>
 +		<section id="meta">
 +			<h2>Metadatah2>
 +			<p id="id">p>
 +			<p id="technology">CSSp>
 +			<p id="type">p>
 +		section>
 +		<section id="applicability">
 +			<h2>When to Useh2>
 +			<p>All technologies that support CSS.p>
 +		section>
 +		<section id="description">
 +			<h2>Descriptionh2>
 +			<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-visiblecode> pseudo-class.p>
 +      <p>Styles defined with the regular <code class="language-css">:focuscode> 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-visiblecode> styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally <em>notem> 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 visibleq>.p>
 +			<div class="note">
 +				<p>This technique is only sufficient <em>ifem> it uses styles that provide a <em>visibleem> 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">:focuscode> style for these cases.p>
 +      div>
 +		section>
 +		<section id="examples">
 +			<h2>Examplesh2>
 +			<section class="example">
 +				<h3>Using <abbr title="Cascading Style Sheets">CSSabbr> <code class="language-css">:focus-visiblecode> to provide keyboard focus indicationh3>
 +				<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>Tabkbd>.p>
 +        <p>In order to make this focus indication more prominent, we use the <code class="language-css">:focus-visiblecode> 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-visiblecode> to provide keyboard focus indicationa>.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>Testsh2>
 +			<section class="test-procedure">
 +				<h3>Procedureh3>
 +				<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>Tabkbd>/<kbd>Shift+Tabkbd>)li>
 +          <li>Verify that once the component has received focus, a focus indicator is visibleli>
 +				ol>
 +			section>
 +			<section class="test-results">
 +				<h3>Expected Resultsh3>
 +				<ul>
 +					<li>Check 2 is true.li>
 +				ul>
 +			section>
 +		section>
 +		<section id="related">
 +			<h2>Related Techniquesh2>
 +			<ol>
 +				<li><a href="C15">C15a>li>
 +				<li><a href="../general/G165">G165a>li>
 +        <li><a href="../general/G195">G195a>li>
 +        <li><a href="C40">C40a>li>
 +			ol>
 +		section>
 +		<section id="resources">
 +			<h2>Resourcesh2>
 +			<ol>
 +				<li><a href="https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo">CSS Selectors Level 4 - <code class="language-css">:focus-visiblecode> pseudo-classa>.li>
 +				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><abbr title="Mozilla Developer Network">MDNabbr> - <code class="language-css">:focus-visiblecode> pseudo-classa>.li>
 +			ol>
 +		section>
 +	body>
 +html>
-Original file line number
+Diff line change
          ul>
       section>
    section><section id="related"><h2>Related Techniquesh2><ul>
 -      <li><a href="../general/G149">G149a>li>
 +      <li><a href="G149">G149a>li>
       <li><a href="../css/C15">C15a>li>
       <li><a href="../client-side-script/SCR31">SCR31a>li>
 +      <li><a href="../css/C15">C15a>li>
 +      <li><a href="G195">G195a>li>
 +      <li><a href="../css/C40">C40a>li>
 +      <li><a href="../css/C45">C45a>li>
    ul>section>body>html>