Encompasses guidance

First draft involving encompasses. I've also added the heading for the second of the primary considerations

understanding/22/focus-appearance-minimum.html

@@ -35,7 +35,7 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>
                     <ul>
                         <li>Is at least as large as the area of a 1 CSS pixel thick <a>perimeter</a> of the unfocused component, or an area at least as large as a 4 CSS pixel thick line along the shortest side of a <a>minimum bounding box</a> of the unfocused component;</li>
                         <li>Has a contrast ratio of at least 3:1 against the same pixels in the unfocused state;</li>
-                        <li>Has a contrast ratio of at least 3:1 against the component, or is no thinner than 2 CSS pixels.</li>
+                        <li>Has a contrast ratio of at least 3:1 against the adjacent colors, or is no thinner than 2 CSS pixels.</li>
                     </ul>
                 </li>
             </ul>
@@ -46,17 +46,13 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>
             <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>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>.
-            </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.
             </dd>
             <dt class="new"><dfn>encompasses</dfn></dt>
             <dd class="new">
-                Continuously surrounds, bounds or includes the whole of
+                Solidly bounds or surrounds, or includes the whole of
             </dd>
             </dl>
         </blockquote>
@@ -67,14 +63,47 @@ <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 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 <em>between</em> the focused and unfocused states.</p>
 
-        <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</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 sets 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>
+        <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.
+
+        <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>
+        <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>
+        </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>
+        </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>
+        </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>
+        </figure>      
+
+<h3>Indicator contrasts between its focused and unfocused states</h3>>
+<p>The second of the primary bullets states that the...</p>
+            <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">
-            <img src="img/focus-indicators-passing.png" alt="Three example indicators, an outline separated from the button, an inner outline, and a thick outline." width="250" />
+            <img src="img/focus-indicators-passing.png" alt="Three of 5 stars are selected with a solid blue focus indicator around the second. indicators, an outline separated from the button, an inner outline, and a thick outline." width="250" />
             <figcaption> Examples of outlines that would pass easily on a light background.</figcaption>
         </figure>
         <p>The minimum size requirement for each focus indicator shown above are:</p>