Accessible Names Practice: Recommend association via 'for' attribute …

…when using 'label' element (pull #2882)

Resolves issue #2870 by revising the content of the section describing usage of the HTML label element. Revisions include:
1. Move description of the `for` attribute technique before the description of the encapsulation technique.
2. Note that using the `for` attribute is known as 'explicit association' and using encapsulation is known as 'implicit association'.
3. State that explicit association has better AT/browser support than implicit association.

---------

Co-authored-by: Patrick H. Lauke <[email protected]>

content/practices/names-and-descriptions/names-and-descriptions-practice.html

@@ -197,7 +197,7 @@ <h3>Naming with Child Content</h3>
   &lt;/li&gt;
 &lt;/ul&gt;</code></pre>
           <div class="warning">
-            <h3>Warning</h3>
+            <h4>Warning</h4>
             <p>If an element with one of the above roles that supports naming from child content is named by using <code>aria-label</code> or <code>aria-labelledby</code>, content contained in the element and its descendants is hidden from assistive technology users unless the descendant content is referenced by <code>aria-labelledby</code>.
             It is strongly recommended to avoid using either of these attributes to override content of one of the above elements except in rare circumstances where hiding content from assistive technology users is beneficial.
             In addition, in situations where visible content is hidden from assistive technology users by use of one of these attributes, thorough testing with assistive technologies is particularly important.</p>
@@ -303,23 +303,28 @@ <h3>Naming Form Controls with the Label Element</h3>
           <p>
             The HTML <code>label</code> element enables authors to identify content that serves as a label and associate it with a form control.
             When a <code>label</code> element is associated with a form control, browsers calculate an accessible name for the form control from the <code>label</code> content.
-          </p>
-          <p>
             For example, text displayed adjacent to a checkbox may be visually associated with the checkbox, so it is understood as the checkbox label by users who can perceive that visual association.
             However, unless the text is programmatically associated with the checkbox, assistive technology users will experience a checkbox without a label.
-            Wrapping the checkbox and the labeling text in a <code>label</code> element as follows gives the checkbox an accessible name.
           </p>
-          <pre><code>&lt;label&gt;
-  &lt;input type="checkbox" name="subscribe"&gt;
-  subscribe to our newsletter
-&lt;/label&gt;</code></pre>
           <p>
-            A form control can also be associated with a label by using the <code>for</code> attribute on the <code>label</code> element.
-            This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding an <code>id</code> attribute to the form control, which can be error-prone.
-            When possible, use the above encapsulation technique for association instead of the following <code>for</code> attribute technique.
+            HTML provides two ways of associating a label with a form control.
+            The one that provides the broadest browser and assistive technology support is to set the <code>for</code> attribute on the <code>label</code> element to the <code>id</code> of the control.
+            This way of associating the label with the control is often called explicit association.
           </p>
+
           <pre><code>&lt;input type="checkbox" name="subscribe" id="subscribe_checkbox"&gt;
 &lt;label for="subscribe_checkbox"&gt;subscribe to our newsletter&lt;/label&gt;</code></pre>
+
+          <p>
+            The other way, which is known as implicit association,  is to wrap the checkbox and the labeling text in a <code>label</code> element.
+            Some combinations of assistive technologies and browsers fail to treat the element as having an accessible name that is specified by using implicit association.
+          </p>
+
+<pre><code>&lt;label&gt;
+&lt;input type="checkbox" name="subscribe"&gt;
+subscribe to our newsletter
+&lt;/label&gt;</code></pre>
+
           <p>
             Using the <code>label</code> element is an effective technique for satisfying <a href="#naming_rule_visible_text">Rule 2: Prefer Visible Text</a>.
             It also satisfies <a href="#naming_rule_native_techniques">Rule 3: Prefer Native Techniques</a>.