w3c · mbgower · Oct 31, 2025 · Feb 15, 2021 · Feb 15, 2021 · Feb 15, 2021
diff --git a/understanding/20/focus-order.html b/understanding/20/focus-order.html
@@ -8,11 +8,9 @@
 <body>
    <h1>Understanding Focus Order</h1>
 
-
    <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
@@ -55,6 +53,28 @@ <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 also does not need to follow the visual presentation 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 elements in the
+         left-hand column would receive focus first – and, more generally, that focus order proceeds across lines,
+         from components in the top-left corner of the viewport to the bottom-right corner.
+         However, if meaning and operation are not affected, in this case it is not a failure if elements in the right-hand
+         column receive focus first. As a best practice, though, make sure the focus order reinforces the reading order.
+      </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 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 focusable elements which cannot be operated
+         or actioned, as these are likely to make operation unnecessarily tedious for keyboard users.</p>
+      </div>
+
       <p>For clarity:</p>
 
       <ol>
@@ -63,6 +83,8 @@ <h2>Intent of Focus Order</h2>
             operability only when navigation sequences affect meaning and operability.
          </li>
 
+         <li>Focus order does not need to follow visual presentation or layout.</li>
+
          <li>In those cases where it is required, there may be more than one order that will preserve
             meaning and operability.
          </li>
@@ -71,14 +93,16 @@ <h2>Intent of Focus Order</h2>
             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>
+
       </ol>
 
-
    </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>
@@ -110,7 +134,6 @@ <h2>Benefits of Focus Order</h2>
    <section id="examples">
       <h2>Examples of Focus Order</h2>
 
-
       <ol>
 
          <li>On a web page that contains a tree of interactive controls, the user can use the up
@@ -176,7 +199,6 @@ <h2>Examples of Focus Order</h2>
    <section id="resources">
       <h2>Resources for Focus Order</h2>
 
-
    </section>
 
    <section id="techniques">
@@ -190,11 +212,11 @@ <h3>Sufficient Techniques for Focus Order</h3>
          <ol>
 
             <li>
-               									         
+
                <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G59" class="general">Placing the interactive elements in an order that follows sequences and relationships
                   within the content
                </a>
-               								       
+
             </li>
 
             <li>
@@ -206,9 +228,9 @@ <h3>Sufficient Techniques for Focus Order</h3>
                <ul>
 
                   <li>
-                     											             
+
                      <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27" class="css">Making the DOM order match the visual order</a>
-                     										           
+
                   </li>
 
                   <li>
@@ -234,23 +256,23 @@ <h3>Sufficient Techniques for Focus Order</h3>
                <ul>
 
                   <li>
-                     											             
+
                      <a href="https://www.w3.org/WAI/WCAG21/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="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR37" class="script">Creating custom dialogs in a device independent way</a>
-                     										           
+
                   </li>
 
                   <li>
-                     											             
+
                      <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR27" class="script">Reordering page sections using the Document Object Model</a>
-                     										           
+
                   </li>
 
                </ul>
@@ -269,23 +291,22 @@ <h3>Additional Techniques (Advisory) for Focus Order</h3>
       <section id="failure">
          <h3>Failures for Focus Order</h3>
 
-
          <ul>
 
             <li>
-               									         
+
                <a href="https://www.w3.org/WAI/WCAG21/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="https://www.w3.org/WAI/WCAG21/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>