WCAG22 - Focus Visible enh updates (#1121)

alastc · web-flow · commit c9be2d2205c4 · 2020-08-04T21:37:10.000+01:00
* Updates to the SC text and ripple effects. * Criterion typo * Updated SC in understanding, minor 2.4.7 update * Updates from issue 1055 * Aligned the 'at least' phrases in the SC text. * Update bsaed on 1064 * Updated mode of operation Based on #301 * Adding to the size metric and updating 1st line * Updated understanding to match SC text * Changes from the meeting https://www.w3.org/2020/06/30-ag-minutes.html#item02 * Adding 'discernable' https://www.w3.org/2002/09/wbs/35422/focus-visible-enh-issues3/results#xq4 * Adding fstorr's updates I needed to set this up to merge with the feature branch (rather than master) and my git-fu was no enough, so re-creating. * Renaming focus-vis-eng to focus-appearance-minumum * renaming the focus-appearance understanding doc * Adding Focus Appearance (Enhanced) * Adding technique for focus-appearance-enh * Added AAA to the new stuff section. * mbgowers update * SC updates from #1212 * Removing failures from focus-vis #1067 Co-authored-by: Alastair Campbell <acampbell@nomensa.com>
diff --git a/guidelines/index.html b/guidelines/index.html
@@ -93,6 +93,8 @@ <h4>New Features in WCAG 2.2</h4>
 					<ul>
                         <li><a href="#accessible-authentication">Accessible Authentication</a></li>
                         <li><a href="#dragging">Dragging</a></li>
+                        <li><a href="#focus-appearance-minimum">Focus Appearance (Minimum)</a></li>
+                        <li><a href="#focus-appearance-enhanced">Focus Appearance (Enhanced)</a></li>
                         <li><a href="#findable-help">Findable Help</a></li>
                         <li><a href="#fixed-reference-points">Fixed Reference Points</a></li>
                         <li><a href="#focus-visible-enhanced">Focus Visible (enhanced)</a></li>
@@ -273,7 +275,9 @@ <h3>Navigable</h3>
 
                 <section data-include="sc/20/section-headings.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/focus-visible-enhanced.html" data-include-replace="true"></section>
+                <section data-include="sc/22/focus-appearance-minimum.html" data-include-replace="true"></section>
+
+                <section data-include="sc/22/focus-appearance-enhanced.html" data-include-replace="true"></section>
 
                 <section data-include="sc/22/fixed-reference-points.html" data-include-replace="true"></section>
 
@@ -742,7 +746,7 @@ <h2>Change Log</h2>
     		<p>This section shows substantive changes made in WCAG 2.2 since WCAG 2.1. <a href="https://www.w3.org/WAI/WCAG21/errata/">Errata fixes to WCAG 2.1</a> have also been incorporated into WCAG 2.2.</p>
     		<p>The full <a href="https://github.com/w3c/wcag/commits/master/guidelines">commit history to WCAG 2.2</a> is available.</p>
     		<ul>
-    			<li>2020-01-14: Added <a href="#focus-visible-enhanced">Focus Visible Enhanced</a>.</li>
+    			<li>2020-01-14: Added <a href="#focus-appearance-minimum">Focus Visible (Enhanced)</a>.</li>
     		</ul>
     	</section>
     	<section class="appendix informative section" id="acknowledgements">
diff --git a/guidelines/sc/22/focus-appearance-enhanced.html b/guidelines/sc/22/focus-appearance-enhanced.html
@@ -0,0 +1,15 @@
+<section class="sc new">
+   
+    <h4>Focus Appearance (Enhanced)</h4>
+    
+    <p class="conformance-level">AAA</p>
+	<p class="change">New</p>
+    
+    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
+    <ul>
+        <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 2 <a>CSS pixel</a> solid border around the control.</li>
+        <li><strong>Change of contrast:</strong> Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.</li>
+        <li><strong>Unobscured:</strong> No part of the focus indicator is hidden by author-created content.</li>
+    </ul>
+    
+ </section>
diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
@@ -0,0 +1,19 @@
+<section class="sc new">
+   
+    <h4>Focus Appearance (Minimum)</h4>
+    
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+    
+    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
+    <ul>
+        <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 1 <a>CSS pixel</a> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.</li>
+        <li><strong>Change of contrast:</strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.</li>
+        <li><strong>Adjacent contrast:</strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
+        <li><strong>Unobscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
+    </ul>
+    <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
+    <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>
+    <p class="ednote">The working group is interested in feedback about the minimum area metric, and if there are unusual scenarios where visible indicators are caught by the wording.</p>
+    
+ </section>
diff --git a/guidelines/sc/22/focus-visible-enhanced.html b/guidelines/sc/22/focus-visible-enhanced.html
diff --git a/guidelines/terms/22/focus-indication-area.html b/guidelines/terms/22/focus-indication-area.html
@@ -1,7 +1,7 @@
 <dt class="new"><dfn>Focus indication area</dfn></dt>
 <dd class="new">
 	<p class="change">New</p>	
-   <p>The number of CSS pixels that change between the focused and unfocused states of a <a>User Interface Component</a>.
+   <p>the pixels that change between the focused and unfocused states of a <a>User Interface Component</a>
     </p>
    				
 </dd>
diff --git a/techniques/css/C41-enhanced.html b/techniques/css/C41-enhanced.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Creating a strong focus indicator within the component</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Creating a strong focus indicator within the component</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 create a highly visible focus indicator that has sufficient contrast against the internal background color of a component.</p>	
+		
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<p>The examples demonstrate a simple implementation where a focus styles is applied to blue background. As the indicator is contained inside the component, you can be sure it maintains contrast whatever background the component is placed on</p>
+
+			<section class="example">
+				<h3>Inner border</h3>
+				<p>HTML</p>
+                <pre><code>&lt;button&gt;Example button&lt;/button&gt;</code></pre>
+                
+                <p>CSS to provide the indicator. It narrows the scope to buttons within the <code>main</code> element.</p>
+                <pre><code>button { 
+    background-color: #3f86d4 /* medium blue */
+    color: white;
+    padding: 10px;
+    border: 1px #333 solid;
+}
+main button:focus { 
+    outline: 2px #fff5be solid; /* light yellow */
+    outline-offset: -4px;
+}</code></pre>
+
+                <figure id="focus-indicator-inside">
+                    <img src="../../understanding/22/img/focus-indicator-innerline-strong.png" alt="Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button." width="300" />
+                    <figcaption>The default and focused states of the button.</figcaption>
+                </figure>
+        
+			</section>
+      
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+				<p>For each focusable user interface element: </p>
+				<ol>
+                    <li>Place keyboard focus on each focusable user interface element on the page using the keyboard.</li>
+                    <li>Check that the focus indicator area is at least the size of a 2 CSS px border around the component.</li>
+                    <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 for the minimum focus indicator area.</li>
+				</ol>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#2 and #3 are true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G195">G195</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">The :focus pseudo-class on the Mozilla Developer Network</a></li>
+				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible">The :focus-visible pseudo-class on the Mozilla Developer Network</a></li>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/techniques/css/C41.html b/techniques/css/C41.html
@@ -58,7 +58,7 @@ <h3>Procedure</h3>
 				<p>For each focusable user interface element: </p>
 				<ol>
                     <li>Place keyboard focus on each focusable user interface element on the page using the keyboard.</li>
-                    <li>Check that the focus indicator area is at least the size of a 2 CSS px line along the longest edge of the component.</li>
+                    <li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.</li>
                     <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.</li>
                     <li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.</li>
 				</ol>
diff --git a/techniques/general/G195.html b/techniques/general/G195.html
@@ -28,7 +28,7 @@ <h3>Menus</h3>
             <li>Place focus on each focusable user interface element on the page using the mouse.</li>
             <li>Check that there is a highly visible focus indicator.</li>
             <li>Place focus on each focusable user interface element on the page using the keyboard.</li>
-            <li>Check that the focus indicator area is at least the size of a 2 CSS px line along the longest edge of the component.</li>
+            <li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.</li>
             <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.</li>
             <li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.</li>
          </ol>
diff --git a/understanding/20/focus-visible.html b/understanding/20/focus-visible.html
@@ -19,9 +19,9 @@ <h2>Intent of Focus Visible</h2>
       
       <p>It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.</p>
 
-      <p>Where the success criterion says “mode of operation”, this is to account for platforms which may not always show a focus indicator. In most cases there is only one mode of operation so this success criteria applies.</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>
       
-   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-visible-enhanced">Focus Visible (Enhanced)</a> does define how visible the indicator should be. Passing <a href="focus-visible-enhanced">Focus Visible (Enhanced)</a> would pass this success criterion.</span></p>
+   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> does define how visible the indicator should be. Passing <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> would pass this success criterion.</span></p>
       
       
    </section>
diff --git a/understanding/22/focus-appearance-enhanced.html b/understanding/22/focus-appearance-enhanced.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"></meta>
+   <title>Understanding Focus Appearance (Enhanced)</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+</head>
+<body>
+   <h1>Understanding Focus Appearance (Enhanced)</h1>
+   
+    <section id="status" class="advisement">
+        <h2>Status</h2>
+        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
+    </section>
+
+
+   <section class="remove">
+   
+        <h2>Focus Appearance (Enhanced) Success Criteria text</h2>
+        <blockquote>
+            <h4>Focus Appearance (Enhanced)</h4>
+    
+            <p class="conformance-level">AAA</p>
+            <p class="change">New</p>
+            
+            <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
+            <ul>
+                <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 2 <a>CSS pixel</a> solid border around the control.</li>
+                <li><strong>Change of contrast:</strong> Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.</li>
+                <li><strong>Unobscured:</strong> No part of the focus indicator is hidden by author-created content.</li>
+            </ul>
+        </blockquote>
+     </section>
+   
+    <section id="intent">
+        
+        <h2>Intent of Focus Appearance (Enhanced)</h2>
+
+
+        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is highly visible. This criterion is closely related to <a href="./focus-appearance-minimum.html">Success Criterion 2.4.11 Focus Appearance (Minimum)</a> and defines a higher level of visibility for the focus indicator.</p>
+
+        <p>In relation to Focus Visible (enhanced) this criterion:</p>
+        <ul>
+            <li>Expands the minimum area from 1 CSS pixel around the perimeter of the element to 2 CSS pixels around the perimeter.</li>
+            <li>Increases the change of contrast to 4.5:1.</li>
+            <li>Does not allow for any part of the element to be obscured by other content.</li>
+        </ul>
+        <p>The other aspects of the success criterion are the same as Focus Visible (Minimum).</p>
+        
+
+
+    </section>
+    <section id="benefits">
+      <h2>Benefits of Focus Appearance (Enhanced)</h2>
+      <p>The benefits of this success criterion are similar to Focus Appearance (Minimum).</p>
+      <ul>
+         <li>Letting anyone who relies on the keyboard to operate the page by enabling them to visually determine the component on which keyboard operations will interact at any point in time.</li>
+         <li>People with low vision are better able to follow a highly visible focus indicator.</li>
+         <li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
+      </ul>
+      
+   </section>
+   
+   <section id="examples">
+      <h2>Examples of Focus Visible</h2>
+      <p>The examples of this success criterion are similar to Focus Appearance (Minimum).</p>
+      <ul>
+         <li>When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.</li>
+         <li>When buttons receive focus, and outline is displayed within the button (around the text) that contrasts with the button’s background.</li>
+         <li>When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.</li>  
+         <li>When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.</li>        
+      </ul>
+      
+   </section>
+
+   
+   <section id="techniques">
+      <h2>Techniques for Focus Appearance (Enhanced)</h2>
+      
+      
+      <section id="sufficient">
+         <h3>Sufficient Techniques</h3>
+         
+         <p>@@@ Create a new techniques based on:</p>
+         <ol>
+            <li>
+                <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
+            </li>
+            <li>
+               <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
+            </li>
+            <li>
+            	<a href="../../techniques/css/C41">Creating a contrasting focus indicator inside the component</a>
+            </li>
+         </ol>
+         
+      </section>
+      
+      <section id="advisory">
+         <h3>Additional Techniques (Advisory)</h3>
+         
+      </section>
+      
+      <section id="failure">
+         <h3>Failures</h3>
+
+         <ul>
+            <li>								         
+                <a href="https://www.w3.org/WAI/WCAG21/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>
+            <li>								         
+               <a href="https://www.w3.org/WAI/WCAG21/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>
+         </ul>
+      </section>
+      
+   </section>
+   
+</body>
+</html>
diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
diff --git a/understanding/22/img/focus-indicator-innerline-strong.png b/understanding/22/img/focus-indicator-innerline-strong.png

-Original file line number
+Diff line change
 					<ul>
                         <li><a href="#accessible-authentication">Accessible Authenticationa>li>
                         <li><a href="#dragging">Dragginga>li>
 +                        <li><a href="#focus-appearance-minimum">Focus Appearance (Minimum)a>li>
 +                        <li><a href="#focus-appearance-enhanced">Focus Appearance (Enhanced)a>li>
                         <li><a href="#findable-help">Findable Helpa>li>
                         <li><a href="#fixed-reference-points">Fixed Reference Pointsa>li>
                         <li><a href="#focus-visible-enhanced">Focus Visible (enhanced)a>li>
                 <section data-include="sc/20/section-headings.html" data-include-replace="true">section>
 -                <section data-include="sc/22/focus-visible-enhanced.html" data-include-replace="true">section>
 +                <section data-include="sc/22/focus-appearance-minimum.html" data-include-replace="true">section>
++
 +                <section data-include="sc/22/focus-appearance-enhanced.html" data-include-replace="true">section>
                 <section data-include="sc/22/fixed-reference-points.html" data-include-replace="true">section>
     		<p>This section shows substantive changes made in WCAG 2.2 since WCAG 2.1. <a href="https://www.w3.org/WAI/WCAG21/errata/">Errata fixes to WCAG 2.1a> have also been incorporated into WCAG 2.2.p>
     		<p>The full <a href="https://github.com/w3c/wcag/commits/master/guidelines">commit history to WCAG 2.2a> is available.p>
     		<ul>
 -    			<li>2020-01-14: Added <a href="#focus-visible-enhanced">Focus Visible Enhanceda>.li>
 +    			<li>2020-01-14: Added <a href="#focus-appearance-minimum">Focus Visible (Enhanced)a>.li>
     		ul>
     	section>
     	<section class="appendix informative section" id="acknowledgements">
-Original file line number
+Diff line change
@@ @@ -0,0 +1,15 @@ @@
 +<section class="sc new">
++
 +    <h4>Focus Appearance (Enhanced)h4>
++
 +    <p class="conformance-level">AAAp>
 +	<p class="change">Newp>
++
 +    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:p>
 +    <ul>
 +        <li><strong>Minimum area:strong> The <a>focus indication areaa> is greater than or equal to a 2 <a>CSS pixela> solid border around the control.li>
 +        <li><strong>Change of contrast:strong> Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.li>
 +        <li><strong>Unobscured:strong> No part of the focus indicator is hidden by author-created content.li>
 +    ul>
++
 + section>
-Original file line number
+Diff line change
@@ @@ -0,0 +1,19 @@ @@
 +<section class="sc new">
++
 +    <h4>Focus Appearance (Minimum)h4>
++
 +    <p class="conformance-level">AAp>
 +	<p class="change">Newp>
++
 +    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:p>
 +    <ul>
 +        <li><strong>Minimum area:strong> The <a>focus indication areaa> is greater than or equal to a 1 <a>CSS pixela> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.li>
 +        <li><strong>Change of contrast:strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.li>
 +        <li><strong>Adjacent contrast:strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.li>
 +        <li><strong>Unobscured:strong> The item with focus is not entirely hidden by author-created content.li>
 +    ul>
 +    <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.p>
 +    <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.p>
 +    <p class="ednote">The working group is interested in feedback about the minimum area metric, and if there are unusual scenarios where visible indicators are caught by the wording.p>
++
 + section>
-Original file line number
+Diff line change
 				<p>For each focusable user interface element: p>
 				<ol>
                     <li>Place keyboard focus on each focusable user interface element on the page using the keyboard.li>
 -                    <li>Check that the focus indicator area is at least the size of a 2 CSS px line along the longest edge of the component.li>
 +                    <li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.li>
                     <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.li>
                     <li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.li>
 				ol>
-Original file line number
+Diff line change
       <p>It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.p>
 -      <p>Where the success criterion says “mode of operation”, this is to account for platforms which may not always show a focus indicator. In most cases there is only one mode of operation so this success criteria applies.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>
 -   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-visible-enhanced">Focus Visible (Enhanced)a> does define how visible the indicator should be. Passing <a href="focus-visible-enhanced">Focus Visible (Enhanced)a> would pass this success criterion.span>p>
 +   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-appearance-minimum">Focus Appearance (Minimum)a> does define how visible the indicator should be. Passing <a href="focus-appearance-minimum">Focus Appearance (Minimum)a> would pass this success criterion.span>p>
    section>