Describe best practices for inert="" in more detail

Closes #7796.

Co-authored-by: James Teh <jamie@jantrid.net>
Co-authored-by: Alice <95208+alice@users.noreply.github.com>

Author: 3 people

images/inert-example-loading-section.png

@@ -76119,14 +76119,16 @@ END:VCARD</pre>
 
    <li><p>If it is <span>editable</span>, the node behaves as if it were non-editable.</p></li>
 
-   <li><p>The user agent may ignore the node for the purposes of <span>find-in-page</span>.</p></li>
+   <li><p>The user agent should ignore the node for the purposes of <span>find-in-page</span>.</p></li>
   </ul>
 
-  <p class="note">Inert nodes generally cannot be focused. Inert nodes that are <span
-  data-x="concept-command">commands</span> will also get disabled.</p>
+  <p class="note">Inert nodes generally cannot be focused, and user agents do not expose the inert
+  nodes to accessibility APIs or assistive technologies. Inert nodes that are <span
+  data-x="concept-command">commands</span> will become inoperable to users, in the manner described
+  above.</p>
 
-  <p>User agents may allow the user to override the restrictions on search and text selection,
-  however.</p>
+  <p>User agents may allow the user to override the restrictions on <span>find-in-page</span> and
+  text selection, however.</p>
 
   <p>By default, a node is not <span>inert</span>.</p>
 
@@ -76156,19 +76158,84 @@ END:VCARD</pre>
   don't otherwise escape inertness (such as modal dialogs) are to be made <span>inert</span> by the
   user agent.</p>
 
-  <p class="note">By default, there is no persistent visual indication of a subtree being inert.
-  Authors are encouraged to clearly mark what parts of their document are active and which are
-  inert, to avoid user confusion. In particular, it is worth remembering that not all users can see
-  all parts of a page at once; for example, users of screen readers, users on small devices or with
-  magnifiers, and even users using particularly small windows might not be able to see the active
-  part of a page and might get frustrated if inert sections are not obviously inert. For individual
-  controls, the <code data-x="attr-fe-disabled">disabled</code> attribute is probably more
+  <p>An inert subtree should not contain any content or controls which are critical to
+  understanding or using aspects of the page which are not in the inert state. Content in an inert
+  subtree will not be perceivable by all users, or interactive. Authors should not specify elements
+  as inert unless the content they represent are also visually obscured in some way. In most cases,
+  authors should not specify the <code>inert</code> attribute on individual form controls. In these
+  instances, the <code data-x="attr-fe-disabled">disabled</code> attribute is probably more
   appropriate.</p>
 
-  <p>The <dfn data-x="dom-inert"><code>inert</code></dfn> IDL attribute must <span>reflect</span>
-  the content attribute of the same name.</p>
+  <div class="example">
+   <p>The following example shows how to mark partially loaded content, visually obscured by a
+   "loading" message, as inert.</p>
+
+   <pre><code class="html">&lt;section aria-labelledby=s1>
+  &lt;h3 id=s1>Population by City&lt;/h3>
+  &lt;div class=container>
+    &lt;div class=loading>&lt;p>Loading...&lt;/p>&lt;/div>
+    &lt;div inert>
+      &lt;form>
+        &lt;fieldset>
+          &lt;legend>Date range&lt;/legend>
+          &lt;div>
+            &lt;label for=start>Start&lt;/label>
+            &lt;input type=date id=start>
+          &lt;/div>
+          &lt;div>
+            &lt;label for=end>End&lt;/label>
+            &lt;input type=date id=end>
+          &lt;/div>
+          &lt;div>
+            &lt;button>Apply&lt;/button>
+          &lt;/div>
+        &lt;/fieldset>
+      &lt;/form>
+      &lt;table>
+        &lt;caption>From 20-- to 20--&lt;/caption>
+        &lt;thead>
+          &lt;tr>
+            &lt;th>City&lt;/th>
+            &lt;th>State&lt;/th>
+            &lt;th>20-- Population&lt;/th>
+            &lt;th>20-- Population&lt;/th>
+            &lt;th>Percentage change&lt;/th>
+          &lt;/tr>
+        &lt;/thead>
+        &lt;tbody>
+          &lt;!-- ... -->
+        &lt;/tbody>
+      &lt;/table>
+    &lt;/div>
+  &lt;/div>
+&lt;/section></code></pre>
+
+   <img src="/images/inert-example-loading-section.png" width="947" height="243" alt="Screenshot of Population by City content with an overlaid loading message which visually obscures the form controls and data table which have not fully rendered, and thus are in the inert state.">
 
+   <p>The "loading" overlay obscures the inert content, making it visually apparent that the inert
+   content is not presently accessible. Notice that the heading and "loading" text are not
+   descendants of the element with the <code>inert</code> attribute. This will ensure this text is
+   accessible to all users, while the inert content cannot be interacted with by anyone.</p>
+  </div>
+
+  <div class="note">
+   <p>By default, there is no persistent visual indication of an element or its subtree being
+   inert. Appropriate visual styles for such content is often context-dependent. For instance, an
+   inert off-screen navigation panel would not require a default style, as its off-screen position
+   visually obscures the content. Similarly, a modal <code>dialog</code> element's backdrop will
+   serve as the means to visually obscure the inert content of the web page, rather than styling
+   the inert content specifically.</p>
 
+   <p>However, for many other situations authors are strongly encouraged to clearly mark what parts
+   of their document are active and which are inert, to avoid user confusion. In particular, it is
+   worth remembering that not all users can see all parts of a page at once; for example, users of
+   screen readers, users on small devices or with magnifiers, and even users using particularly
+   small windows might not be able to see the active part of a page and might get frustrated if
+   inert sections are not obviously inert.</p>
+  </div>
+
+  <p>The <dfn data-x="dom-inert"><code>inert</code></dfn> IDL attribute must <span>reflect</span>
+  the content attribute of the same name.</p>
 
   <h3>Tracking <dfn export>user activation</dfn></h3>