Add notes to 2.4.3 understanding

understanding/20/focus-order.html

@@ -17,11 +17,10 @@ <h2>In brief</h2>
       </dl>
 
    </section>
-   
-   <section id="intent">
+
+  <section id="intent">
       <h2>Intent of Focus Order</h2>
 
-
       <p>The intent of this Success Criterion is to ensure that when users navigate sequentially
          through content, they encounter information in an order that is consistent with the
          meaning of the content and can be operated from the keyboard. This reduces confusion
@@ -64,30 +63,54 @@ <h2>Intent of Focus Order</h2>
          sets of users and does not appear to either of them to jump around randomly. 
       </p>
 
+      <p>Focus order needs to allow the user to navigate focusable elements in a logical order,
+         and that order needs to preserve any meaning or operation that the page is conveying. 
+         Focus order does not necessarily need to follow the visual layout of the web page,
+         as long as the order in which elements receive focus is logical, and the hierarchy and relationship
+         of content implied by the visual presentation is preserved. For instance, in a two-column
+         layout, the assumption in western left-to-right systems may be that focus moves through the elements in the
+         left-hand column first, from the top to the bottom of the column, and then proceed to the right-hand column.
+         However, if the two columns are independent of each other, and meaning/operation are not affected, it is not
+         a failure if elements in the right-hand column receive focus first, followed by the elements in the left-hand column.
+         As a best practice, though, make sure the focus order reinforces the reading order implied by the visual layout.
+      </p>
+
+      <div class="note">
+         <p>It is not a failure of this Success Criterion if static/non-interactive content
+         receives focus. Making an element that does not act as an actionable user interface component
+         focusable, or programmatically moving focus to such an element, does not necessarily constitute
+         a failure of this Success Criterion. This situation is a failure if these additional focus stops
+         impede the operation of the content, or create confusing and/or illogical focus orders - for example,
+         a control appearing to receive focus multiple times due to the use of nested focusable elements.</p>
+         <pre><code>&lt;div tabindex="0"&gt;&lt;button&gt;...&lt;/button&gt;&lt;/div&gt;</code></pre>
+         <p>As a best practice, avoid having unwarranted focusable elements which cannot be operated
+         or actioned, as these are likely to make operation tedious for keyboard users.</p>
+      </div>
+
       <p>For clarity:</p>
 
       <ul>
 
          <li>Focusable components need to receive focus in an order that preserves meaning and
-            operability only when navigation sequences affect meaning and operability.
+            operability.
          </li>
 
-         <li>In those cases where it is required, there may be more than one order that will preserve
-            meaning and operability.
-         </li>
+         <li>Focus order does not necessarily need to follow the visual presentation or layout.</li>
 
          <li>If there is more than one order that preserves meaning and operability, only one of
             them needs to be provided.
          </li>
 
+         <li>Static/non-interactive elements can receive focus, as long as they don't significantly
+            impede operation of the content.
+         </li>
+
       </ul>
-
-
+
    </section>
    <section id="benefits">
       <h2>Benefits of Focus Order</h2>
 
-
       <p>These techniques benefit keyboard users who navigate documents sequentially and expect
          the focus order to be consistent with the sequential reading order.
       </p>
@@ -180,7 +203,6 @@ <h2>Examples of Focus Order</h2>
    <section id="resources">
       <h2>Resources for Focus Order</h2>
 
-
    </section>
 
    <section id="techniques">
@@ -194,11 +216,10 @@ <h3>Sufficient Techniques for Focus Order</h3>
          <ul>
 
             <li>
-
                <a href="../Techniques/general/G59" class="general">Placing the interactive elements in an order that follows sequences and relationships
                   within the content
                </a>
-               								       
+
             </li>
 
             <li>
@@ -210,9 +231,7 @@ <h3>Sufficient Techniques for Focus Order</h3>
                <ul>
 
                   <li>
-
                      <a href="../Techniques/css/C27" class="css">Making the DOM order match the visual order</a>
-
                   </li>
 
                   <li>
@@ -232,23 +251,17 @@ <h3>Sufficient Techniques for Focus Order</h3>
                <ul>
 
                   <li>
-
                      <a href="../Techniques/client-side-script/SCR26" class="script">Inserting dynamic content into the Document Object Model immediately following its
                         trigger element
                      </a>
-
                   </li>
 
                   <li>
-
                      <a href="../Techniques/HTML/H102" class="script">Creating modal dialogs with the HTML dialog element</a>
-
                   </li>
 
                   <li>
-
                      <a href="../Techniques/client-side-script/SCR27" class="script">Reordering page sections using the Document Object Model</a>
-
                   </li>
 
                </ul>
@@ -267,23 +280,20 @@ <h3>Additional Techniques (Advisory) for Focus Order</h3>
       <section id="failure">
          <h3>Failures for Focus Order</h3>
 
-
          <ul>
 
             <li>
-
                <a href="../Techniques/failures/F44" class="failure">Failure of 2.4.3 due to using tabindex to create a tab order that does not preserve
                   meaning and operability
                </a>
-               								       
+
             </li>
 
             <li>
-
                <a href="../Techniques/failures/F85" class="failure">Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent
                   to their trigger control in the sequential navigation order
                </a>
-               								       
+
             </li>
 
          </ul>