Merge pull request #3123 from w3c/wcag22-cr3-last-updates

WCAG 2.2 CR 3 updates

guidelines/index.html

@@ -102,7 +102,6 @@ <h4>New Features in WCAG 2.2</h4>
 						<li>3.3.9 <a href="#accessible-authentication-enhanced">Accessible Authentication (Enhanced)</a> (AAA)</li>
 					</ul>
 					<p>The new success criteria may reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria.</p>
-					<p>In addition to the above new Success Criteria, <a href="#focus-visible">Focus Visible</a> has been promoted from Level AA to Level A.</p>
 				</section>
 				<section>
 					<h4>Numbering in WCAG 2.2</h4>
@@ -267,7 +266,7 @@ <h3>Navigable</h3>
 
                 <section data-include="sc/20/headings-and-labels.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/focus-visible.html" data-include-replace="true"></section>
+                <section data-include="sc/20/focus-visible.html" data-include-replace="true"></section>
 
                 <section data-include="sc/20/location.html" data-include-replace="true"></section>
 

guidelines/sc/22/focus-appearance.html

@@ -2,27 +2,14 @@
 
     <h4>Focus Appearance</h4>
 
-    <p class="conformance-level">AA</p>
+    <p class="conformance-level">AAA</p>
 	<p class="change">New</p>
 
-    <p>When the keyboard <a>focus indicator</a> is visible, one or both of the following are true:</p>
-    <ol>
-        <li>The entire <a>focus indicator</a> meets all the following:
-
-            <ul>
-                <li><a>encloses</a> the <a>user interface component</a>  or sub-component that is focused, and</li>
-                <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li>
-                <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.</li>
-            </ul>
-        </li>
-        <li>An area of the focus indicator meets all the following:
-            <ul>
-                <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component or sub-component, and</li>
-                <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li>
-                <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li>
-            </ul>
-        </li>
-    </ol>
+    <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p>
+    <ul>
+        <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li>
+        <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.</li>
+    </ul>
 
     <p>Exceptions:</p>
     <ul>

guidelines/sc/22/target-size-minimum.html

@@ -7,11 +7,11 @@ <h4>Target Size (Minimum)</h4>
 
     <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p>
     <ul>
-        <li><strong>Spacing:</strong> The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</li>
+        <li><strong>Spacing:</strong> Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target;</li>
         <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li>
-        <li><strong>Inline:</strong> The target is in a sentence, or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text;</li>
+        <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li>
         <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li>
-        <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li>
+        <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed.</li>
     </ul>
     <p class="note">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.</p>
     <p class="note">For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.</p>

guidelines/terms/22/minimum-bounding-box.html

@@ -1,4 +1,4 @@
-<dt class="new"><dfn>minimum bounding box</dfn></dt>
+<dt class="new"><dfn data-lt="bounding boxes">minimum bounding box</dfn></dt>
 <dd class="new">
 	<p class="change">New</p>	
    <p>the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.</p>

guidelines/terms/22/perimeter.html

@@ -2,6 +2,6 @@
 <dd class="new">
 	<p class="change">New</p>	
    <p>continuous line forming the boundary of a shape not including shared pixels, or the <a>minimum bounding box</a>, whichever is shortest.</p>
-  <aside class="example"><p>The perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em> -4, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋<em>r</em>.</p></aside>
+  <aside class="example"><p>The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4<em>h</em>+4<em>w</em>, where <em>h</em> is the height and <em>w</em> is the width. For a 2 CSS pixel perimeter around a circle it is 4𝜋<em>r</em>.</p></aside>
 </dd>
 

understanding/20/focus-visible.html

@@ -19,7 +19,7 @@ <h2>Intent of Focus Visible</h2>
 
       <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-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>
+   	<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</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>

understanding/22/focus-appearance.html

@@ -18,50 +18,31 @@ <h2>Status</h2>
 
         <h2>Focus Appearance Success Criterion text</h2>
         <blockquote>
-            <p class="conformance-level">AA</p>
+            <p class="conformance-level">AAA</p>
+
+            <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p>
+            <ul>
+                <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li>
+                <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states</li>
+            </ul>
 
-            <p>When the keyboard <a>focus indicator</a> is visible, one or both of the following is true:</p>
-            <ol>
-                <li>The entire <a>focus indicator</a>:
-                    <ul>
-                        <li><a>encloses</a> the visual presentation of the user interface component, and</li>
-                        <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li>
-                        <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.</li>
-                    </ul>
-                </li>
-                <li>An area of the focus indicator meets all the following:
-                    <ul>
-                        <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component, and</li>
-                        <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li>
-                        <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li>
-                    </ul>
-                </li>
-            </ol>
-
-            <p>Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements may be applied to the sub-component instead.</p>
-
             <p>Exceptions:</p>
             <ul>
                 <li>The focus indicator is determined by the user agent and cannot be adjusted by the author, or</li>
                 <li>The focus indicator and the indicator's background color are not modified by the author.</li>
             </ul>
-
-            <p class="note">Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu. However, it may also be possible to indicate user interaction for such sub-components by relying strictly on a visual indication of which item is <em>selected</em>. Where selectable sub-components have no differentiated focus indicator, the visual indicator for sub-component selection is measured against <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a> requirements, not against this Criterion.</p>
-
+
+            <p class="note">What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.</p>
+
+            <p class="note">Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.</p>
+
             <p class="note">Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.</p>
+
             <dl>
             <dt class="new"><dfn>Focus indicator</dfn></dt>
             <dd class="new">
 	            pixels that are changed to visually indicate when a user interface component is in a focused state.                		
             </dd>
-            <dt class="new"><dfn>minimum bounding box</dfn></dt>
-            <dd class="new">
-                the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such has hypertext links), the bounding box is based on how the component would appear on a single line.
-            </dd>
-            <dt class="new"><dfn>encloses</dfn></dt>
-            <dd class="new">
-                solidly bounds or surrounds
-            </dd>
             <dt class="new"><dfn>perimeter</dfn></dt>
             <dd class="new">
                 continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box of a complex shape, whichever is shortest. For example, the perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em> -4, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋<em>r</em>.

understanding/22/target-size-minimum.html

@@ -23,13 +23,13 @@ <h4>Target Size (Minimum)</h4>
              <p class="change">New</p>
 
              <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p>
-            <ul>
-                <li><strong>Spacing:</strong> The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</li>
+             <ul>
+                <li><strong>Spacing:</strong> Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target;</li> 
                 <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li>
-                <li><strong>Inline:</strong> The target is in a sentence, or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text;</li>
-                <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li>
-                <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li>
-            </ul>
+                 <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li>
+                 <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li>
+                 <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed.</li>
+             </ul>
             <p class="note">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.</p>
             <p class="note">For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed top to bottom, the line-height would be horizontal.</p>
             <dl><dt class="new"><dfn data-lt="target offsets">target offset</dfn></dt>