WCAG22 - focus visible enhanced

build.xml

@@ -40,6 +40,7 @@
 		<delete file="${inputdir.guidelines}/index-flat.html" failonerror="false"/>
 		<delete file="${inputdir.guidelines}/wcag.xml" failonerror="false"/>
 		<delete file="${inputdir.guidelines}/wcag.json" failonerror="false"/>
+		<delete file="${inputdir.guidelines}/versions.xml" failonerror="false"/>
 		<delete file="${inputdir.techniques}/techniques.xml" failonerror="false"/>
 		<delete file="${inputdir.techniques}/technique-associations.xml" failonerror="false"/>
 		<delete file="output.html" failonerror="false"/>
@@ -63,6 +64,35 @@
 		</xslt>
 	</target>
 
+	<target name="guidelines-versions" description="Create XML list of which WCAG version introduces which guidelines">
+		<local name="output.file"/>
+		<property name="output.file" value="${inputdir.guidelines}/versions.xml"/>
+		<echo file="${output.file}"><![CDATA[<versions>
+]]></echo>
+		<for param="current.dir">
+			<path><dirset dir="understanding" includes="*"/></path>
+			<sequential>
+				<local name="version"/>
+				<basename file="@{current.dir}" property="version"/>
+				<echo file="${output.file}" append="yes"><![CDATA[	<version name="${version}">
+]]></echo>
+				<for param="current.file">
+					<path><fileset dir="@{current.dir}" includes="*"/></path>
+					<sequential>
+						<local name="id"/>
+						<basename file="@{current.file}" property="id" suffix="html"/>
+						<echo file="${output.file}" append="yes"><![CDATA[		<id id="${id}"/>
+]]></echo>
+					</sequential>
+				</for>
+				<echo file="${output.file}" append="yes"><![CDATA[	</version>
+]]></echo>
+			</sequential>
+		</for>
+		<echo file="${output.file}" append="yes"><![CDATA[</versions>
+]]></echo>
+	</target>
+
 	<target name="guidelines" depends="init">
 		<mkdir dir="output/guidelines/22"/>
 		<copy file="guidelines/guidelines.css" todir="output/guidelines/22"/>
@@ -78,6 +108,7 @@
 
 	<!-- Techniques -->
 	<target name="techniques-list" description="Create XML list of all the technique files">
+		<local name="output.file"/>
 		<property name="output.file" value="${inputdir.techniques}/techniques.xml"/>
 		<echo file="${output.file}"><![CDATA[<techniques>
 ]]></echo>
@@ -182,16 +213,16 @@
 	</target>
 
 	<!-- Understanding -->
-	<target name="understanding" depends="guidelines-xml, techniques-list, understanding-index, understanding-flatten" description="Generate formatted Understanding docs">
-		<makeurl file="${basedir}/input/understanding/" property="input.understanding"/>
+	<target name="understanding" depends="guidelines-xml, guidelines-versions, techniques-list, understanding-index" description="Generate formatted Understanding docs">
+		<makeurl file="${basedir}/understanding/" property="base.understanding"/>
 		<mkdir dir="${basedir}/output/understanding/"/>
 		<local name="output.dir"/>
 		<makeurl file="${basedir}/output/understanding/" property="output.dir"/>
 		<echo message="Outputting Understanding to ${output.dir}"/>
 		<xslt in="${inputdir.guidelines}/wcag.xml" out="output.html" style="xslt/generate-understanding.xslt" force="true">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${input.understanding}"/>
+			<param name="base.dir" expression="${base.understanding}"/>
 			<param name="output.dir" expression="${output.dir}"/>
 			<param name="loc.guidelines" expression="https://www.w3.org/TR/WCAG21/" if="publication"/>
 			<param name="loc.understanding" expression="https://www.w3.org/WAI/WCAG21/Understanding/" if="publication"/>

guidelines/index.html

@@ -257,14 +257,16 @@ <h3>Navigable</h3>
 
                 <section data-include="sc/20/headings-and-labels.html" data-include-replace="true"></section>
 
-                <section data-include="sc/20/focus-visible.html" data-include-replace="true"></section>
+                <section data-include="sc/22/focus-visible.html" data-include-replace="true"></section>
 
                 <section data-include="sc/20/location.html" data-include-replace="true"></section>
 
                 <section data-include="sc/20/link-purpose-link-only.html" data-include-replace="true"></section>
 
                 <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>
 
             <section class="guideline new">

guidelines/sc/22/focus-visible-enhanced.html

@@ -0,0 +1,15 @@
+<section class="sc">
+
+    <h4>Focus Visible (Enhanced)</h4>
+
+    <p class="conformance-level">AA</p>
+
+    <p>When a <a>User Interface Component</a> displays a visible keyboard <a>focus</a>, 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 the longest side of the bounding rectangle of the focused control, times 2 <a>CSS pixels</a>.</li>
+        <li><strong>Focus contrast:</strong> Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.</li>
+        <li><strong>Contrast or thickness:</strong> The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
+    </ul>
+    <p class="note">A focus indicator that is larger than the minimum area may have parts that do not meet the 3:1 contrast ratio, as long as an area equal to the minimum does meet the contrast ratio.</p>
+
+ </section>

guidelines/sc/22/focus-visible.html

@@ -0,0 +1,11 @@
+<section class="sc">
+
+    <h4>Focus Visible</h4>
+
+    <p class="conformance-level">A</p>
+
+    <p>Any keyboard operable user interface has a mode of operation where the keyboard focus
+       indicator is visible.
+    </p>
+
+ </section>

guidelines/terms/22/focus-indication-area.html

@@ -0,0 +1,9 @@
+<dt class="new"><dfn data-lt="Focus">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>
+
+</dd>

guidelines/terms/22/focus.html

@@ -0,0 +1,9 @@
+<dt class="new"><dfn data-lt="Focus">Focus</dfn></dt>
+<dd class="new">
+
+   <p class="change">New</p>
+
+   <p>The point where the user’s input interacts with the web page. For example, tabbing through a page with a keyboard moves the focus. Clicking or tapping on the page would move the focus for mouse and touchscreen usage. Different inputs can be used by a user, but at any one time there would be one point of focus for the user with the last input used.
+    </p>
+
+</dd>

techniques/css/C40.html

@@ -37,7 +37,7 @@ <h2>Examples</h2>
 				<h3>A light and dark dotted indicator</h3>
 				<p>Description</p>
 				<pre><code>*:focus {
-	box-shadow: 0 0 0px 1px white;
+	box-shadow: 0 0 0px 2px white;
 	outline: dotted;
 }</code></pre>
 			<p class="working-example"><a href="../../working-examples/css-two-focus-colors/dotted.html">Working example of combining a dark outline and light text shadow</a></p>
@@ -65,15 +65,16 @@ <h2>Tests</h2>
 
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>For each focusable user interface element: </p>
+				<p>For each focusable user interface element:</p>
 				<ol>
 					<li>Check that the two-colors in the focus indicator are adjacent and have a contrast ratio that is 3:1 or greater with each other.</li>
+					<li>Check that the colors used contrast with the adjacent colors, or are at least 2 CSS pixels thick.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
-					<li>#1 is true.</li>
+					<li>#1 and #2 are true.</li>
 				</ul>
 			</section>
 		</section>

techniques/css/focus-indicator-inner.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Creating a focus indicator within the component</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Creating a 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-inside.png" alt="Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button." width="200" />
+                    <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 line along the longest edge of 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>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#2, #3, #4 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>

techniques/general/G195.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an author-supplied, highly visible focus indicator</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an author-supplied, highly visible focus indicator</h1><section class="meta"><p class="id">ID: G195</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Generally applicable.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. The default focus indicator in many browsers is a thin,dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color.</p>
+      <p>The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. The default focus indicator in many browsers is a thin, dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color. Some browsers use a pale blue outline, which can be difficult to see on some backgrounds.</p>
       <p>In this technique, when the user places focus on an element, using the mouse, tab key, arrow keys, keyboard shortcuts, or any other method, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>Links</h3>
-
             <p>A Web page has a dark background color and light text and links. When focus lands on a link, the link is outlined with a bright yellow line, 3 pixels wide.</p>
-
       </section>
       <section class="example">
          <h3>Form Elements</h3>
@@ -28,12 +28,14 @@ <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 there is a highly visible focus indicator.</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 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>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Checks #2 and  #4 are true.</li>
+            <li>Checks #2, #4, #5 and  #6 are true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>

understanding/20/focus-visible.html

@@ -17,54 +17,40 @@ <h2>Intent of Focus Visible</h2>
          keyboard focus.
       </p>
 
-      <p>The purpose of this success criterion is to help a person 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>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>Note that a keyboard focus indicator can take different forms. One common way is a
-         caret within the text field to indicate that the text field has the keyboard focus.
-         Another is a visual change to a button to indicate that the button has the keyboard
-         focus.
-      </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>Focus Visible (Enhanced)</a> does define how visible the indicator should be. Passing <a>Focus Visible (Enhanced)</a> would pass this success criterion.</span></p>
 
 
    </section>
    <section id="benefits">
       <h2>Benefits of Focus Visible</h2>
 
-
       <ul>
-
          <li>This Success Criterion helps anyone who relies on the keyboard to operate the page,
             by letting them visually determine the component on which keyboard operations will
             interact at any point in time.
          </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>
-
-
+
       <ul>
-
          <li>When text fields receive focus, a vertical bar is displayed in the field, indicating
             that the user can insert text, OR all of the text is highlighted, indicating that
             the user can type over the text.
          </li>
-
          <li>When a user interface control receives focus, a visible border is displayed around
             it.
          </li>
-
       </ul>
 
    </section>