Merge pull request #2284 from w3c/focus-appearance-enclosed

Focus appearance enclosed

understanding/22/focus-appearance-minimum.html

@@ -22,7 +22,7 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>
 
             <p>When a <a>user interface components</a> has keyboard focus, the focus indicator:</p>
             <ul>
-                <li><a>Encompasses</a> the visual presentation of the user interface component;</li>
+                <li><a>Encloses</a> the visual presentation of the user interface component;</li>
                 <li>Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;</li>
                 <li>Has a contrast ratio of at least 3:1 against adjacent colors.</li>
             </ul>
@@ -48,11 +48,11 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>
             </dd>
             <dt class="new"><dfn>minimum bounding box</dfn></dt>
             <dd class="new">
-                the smallest enclosing box within which all the points of a shape lie. Where a component consists of disconnected parts, such as a link that wraps onto multiple lines, each part is considered to have its own bounding box.
+                the smallest enclosing non-rotated rectangle within which all the points of a shape lie. Where a component consists of disconnected parts, such as a link that wraps onto multiple lines, each part is considered to have its own bounding box.
             </dd>
-            <dt class="new"><dfn>encompasses</dfn></dt>
+            <dt class="new"><dfn>encloses</dfn></dt>
             <dd class="new">
-                Solidly bounds or surrounds, or includes the whole of
+                Solidly bounds or surrounds
             </dd>
             </dl>
         </blockquote>
@@ -63,43 +63,55 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>
         <h2>Intent of Focus Appearance (Minimum)</h2>
 
 
-        <p>The purpose of this Success Criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This Success Criterion is closely related to <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
+        <p>The purpose of this Success Criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This Success Criterion is closely related to <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast for the focus indicator itself.</p>
 
         <p>For sighted people with mobility impairments who use a keyboard-like device (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also be keyboard-only users.</p>
 
-        <p>A keyboard focus indicator can take different forms. This Success Criterion lists three primary considerations that can be met to consistently acheive a sufficient focus appearance. It then provides a list of exceptions that can be used to assess at a focus indicator which may be less optimal for some users but still achieves a minimum level of focus appearance. This document will elaborate on each of the three primary considerations, then address the exceptions.
+        <p>A keyboard focus indicator can take different forms. This Success Criterion lists three primary considerations that can be met to consistently acheive a sufficient focus appearance. It then provides a list of exceptions for a focus indicator which may be less optimal for some users but still achieves a minimum level of focus appearance. This Understanding document will elaborate on each of the three primary considerations, then address the exceptions.
 
-        <h3>Encompassing</h3>
-        <p>The first of the primary bullets states that the focus indicator "encompasses" the user interface component. This is defined to mean to "solidly bound or surround, or include the whole of." Each of these phrases describes a fairly established method of invoking a focus indicator, as illustrated in the following series of images of a set of ratings stars. In all examples, the same three stars have already been selected, and focus is on the second star.</p>
+        <h3>Encloses</h3>
+        <p>The first of the primary bullets states that the focus indicator "encloses" the user interface component. This is defined to mean "solidly bounds or surrounds." Both "bounds" and "surrounds" describe optimal and established ways of showing focus, as illustrated in the following series of images of a set of ratings stars. In all examples, the same three stars have already been selected, and focus is on the second star.</p>
         <figure id="focus-border-solid">
             <img src="img/focus-indicator-solid-border.png" alt="Three of 5 stars are selected with a solid-line rectangular focus indicator around the second" />
-            <figcaption> Pass: a solidly bound focus rectangle encompasses the second of 5 stars.</figcaption>
+            <figcaption> Passes: a solidly bound focus rectangle encloses the second of 5 stars.</figcaption>
         </figure>
 
         <figure id="focus-outline-solid">
             <img src="img/focus-indicator-solid-outline.png" alt="Three of 5 stars are selected with a solid-line focus indicator outlining the second" />
-            <figcaption> Pass: a solid outline indicator surrounds the second of 5 stars.</figcaption>
+            <figcaption> Passes: a solid outline indicator surrounds the second of 5 stars.</figcaption>
         </figure>  
 
-        <figure id="focus-indicator-whole">
-            <img src="img/focus-indicator-whole-star.png" alt="Three of 5 stars are selected with the whole second star altered in color to indicate focus" />
-            <figcaption> Pass: a color change encompasses the whole second star to indicate focus.</figcaption>
-        </figure> 
-
         <p>Where the indicator does not "solidly" bound or surround the component, as with a dashed or dotted line, it cannot meet this primary consideration. However, a non-solid line can still pass if it meets the wording of the exceptions (discussed in more detail under Exceptions).</p>
 
         <figure id="focus-indicator-weak-dashed">
             <img src="img/focus-indicator-weak-dashed-border.png" alt="Three of 5 stars are selected with the whole second star outlined with a 1 pixel thick dashed line" />
-            <figcaption> Fail: the dashed outline does not "solidly bound" the second star and does not meet the exception language.</figcaption>
+            <figcaption> Fails: the dashed outline does not "solidly bound" the second star and does not meet the exception language.</figcaption>
         </figure>         
 
         <figure id="focus-indicator-strong-dashed">
             <img src="img/focus-indicator-strong-dashed-border.png" alt="Three of 5 stars are selected with the whole second star outlined with a 2 pixel thick dashed line" />
-            <figcaption> Pass: the dashed outline does not "solidly bound" the second star; however, the dashed line meets the area requirements of the exception langauge.</figcaption>
+            <figcaption> Passes: the dashed outline does not "solidly bound" the second star; however, the dashed line meets the area requirements of the exception langauge.</figcaption>
         </figure>      
 
-<h3>Indicator contrasts between its focused and unfocused states</h3>>
-<p>The second of the primary bullets states that the...</p>
+<h3>Indicator contrasts between its focused and unfocused states</h3>
+
+<p>The second of the primary bullets states that the indicator "has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states." The following illustration shows a *minimally* contrasting focus indicator, where some of the white pixels making up the page background have been altered to a mid-grey, which contrast 3:1 with the original white. Authors are encouraged to exceed the minimum focus appearance. For instance, the dark blue line in Figure 1 is much more visible.</p>
+
+<figure id="focus-indicator-star-with-light-focus">
+    <img src="img/focus-indicator-star-with-light-focus.png" alt="Two orange-yellow five-pointed stars, one with a mid-gray focus" width=80%  />
+    <figcaption> A button in the shape of a star, with a gray focus indicator that contrasts 3:1 with the white page background.</figcaption>
+</figure> 
+
+<h3>Contrasts at least 3:1 against adjacent colors</h3>
+
+The focus indicator must contrast against the pixels on either side. Where the indicator does not directly abut the component or any other object, it simply needs to contrast at least 3:1 against the page background. However, if the indicator abuts another shape, it must contrast 3:1 against this as well. [to be continued]
+
+<figure id="focus-indicator-abutted">
+    <img src="img/focus-indicator-star-with-abutted-line.png" alt="Three of 5 stars are selected with the whole second star outlined with a 1px thick line directly next to the star edge" />
+    <figcaption> ALASTAIR, I'm a bit concerned about this...</figcaption>
+</figure>    
+
+---
             <p>a requirement to make it clearly distinguishable. For example, using a thick outline that contrasts with the background behind the component would pass this criterion.</p>
 
         <figure id="focus-indicator-strong">
@@ -173,6 +185,11 @@ <h4>Minimum area</h4>
                 </blockquote>
 
                 <p>The bigger the visible change when an item receives focus, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element.</p>
+
+                <figure id="focus-indicator-whole">
+                    <img src="img/focus-indicator-whole-star.png" alt="Three of 5 stars are selected with the whole second star altered in color to indicate focus" />
+                    <figcaption> Pass: a color change applies to the whole second star to indicate focus. Clearly, the area is sufficient.</figcaption>
+                </figure> 
 
                 <p>The Success Criterion defines a minimum area using a calculation for perimeter, and a secondary minimum based on the shortest side of the control. It does not restrict where the indicators are placed, it is just providing two methods to calculate a minimum area.</p>