From 2c5e1d1717d3e514e54be40f4679f280e30f3ac3 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 1 Dec 2023 08:37:33 +0000
Subject: [PATCH 1/5] Amend implicit vs explicit label advice in naming
 document

Explicit `<label>`s are preferred over implicit ones, as they have better AT support.

Closes https://github.com/w3c/aria-practices/issues/2870
---
 .../names-and-descriptions-practice.html               | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 01369d3b78..300424080e 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -307,19 +307,21 @@ <h3>Naming Form Controls with the Label Element</h3>
           <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.
+            Wrapping the checkbox and the labeling text in a <code>label</code> element as follows gives the checkbox an accessible name. This is often referred to as <em>implicit</em> labelling.
           </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.
+            A form control can also be associated with a label by using the <code>for</code> attribute on the <code>label</code> element, using <em>explicit</em> labelling.
+            This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding a unique <code>id</code> attribute to each form control.
           </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>
+            While both techniques are equally valid, currently explicit labels are better supported by assistive technology. When possible, use the above technique for <em>explicit</em> labelling instead of the <em>implicit</em> technique.
+          </p>
           <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>.

From 51e7754de1717edcc451208566736b4663cd7a7b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 1 Dec 2023 08:41:07 +0000
Subject: [PATCH 2/5] Change `labelling` to `labeling`

for consistency with existing prose
---
 .../names-and-descriptions-practice.html                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 300424080e..378f453607 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -307,20 +307,20 @@ <h3>Naming Form Controls with the Label Element</h3>
           <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. This is often referred to as <em>implicit</em> labelling.
+            Wrapping the checkbox and the labeling text in a <code>label</code> element as follows gives the checkbox an accessible name. This is often referred to as <em>implicit</em> labeling.
           </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, using <em>explicit</em> labelling.
+            A form control can also be associated with a label by using the <code>for</code> attribute on the <code>label</code> element, using <em>explicit</em> labeling.
             This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding a unique <code>id</code> attribute to each form control.
           </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>
-            While both techniques are equally valid, currently explicit labels are better supported by assistive technology. When possible, use the above technique for <em>explicit</em> labelling instead of the <em>implicit</em> technique.
+            While both techniques are equally valid, currently explicit labels are better supported by assistive technology. When possible, use the above technique for <em>explicit</em> labeling instead of the <em>implicit</em> technique.
           </p>
           <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>.

From 0d139d293f693332fd178842fb14d2ca1619cf10 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 1 Dec 2023 13:32:56 +0000
Subject: [PATCH 3/5] Update
 content/practices/names-and-descriptions/names-and-descriptions-practice.html

Co-authored-by: Daniel Montalvo <49305434+daniel-montalvo@users.noreply.github.com>
---
 .../names-and-descriptions/names-and-descriptions-practice.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 378f453607..9916b50722 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -307,7 +307,7 @@ <h3>Naming Form Controls with the Label Element</h3>
           <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. This is often referred to as <em>implicit</em> labeling.
+            Wrapping the checkbox and the labeling text in a <code>label</code> element as follows gives the checkbox an accessible name. This is often called <em>implicit</em> labeling.
           </p>
           <pre><code>&lt;label&gt;
   &lt;input type="checkbox" name="subscribe"&gt;

From 4fbf9113a36f2f450787bc6cbb342870061167ea Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 1 Dec 2023 13:33:13 +0000
Subject: [PATCH 4/5] Update
 content/practices/names-and-descriptions/names-and-descriptions-practice.html

Co-authored-by: Daniel Montalvo <49305434+daniel-montalvo@users.noreply.github.com>
---
 .../names-and-descriptions/names-and-descriptions-practice.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 9916b50722..8041b544c8 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -314,7 +314,7 @@ <h3>Naming Form Controls with the Label Element</h3>
   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, using <em>explicit</em> labeling.
+            A form control can also be associated with a label by using the <code>for</code> attribute on the <code>label</code> element. This is often called <em>explicit</em> labeling.
             This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding a unique <code>id</code> attribute to each form control.
           </p>
           <pre><code>&lt;input type="checkbox" name="subscribe" id="subscribe_checkbox"&gt;

From 9d85980d5a0a903b34620826c5ef141c96cd71a8 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 1 Dec 2023 13:33:43 +0000
Subject: [PATCH 5/5] Update
 content/practices/names-and-descriptions/names-and-descriptions-practice.html

Co-authored-by: Daniel Montalvo <49305434+daniel-montalvo@users.noreply.github.com>
---
 .../names-and-descriptions/names-and-descriptions-practice.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 8041b544c8..13d74eccbe 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -320,7 +320,7 @@ <h3>Naming Form Controls with the Label Element</h3>
           <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>
-            While both techniques are equally valid, currently explicit labels are better supported by assistive technology. When possible, use the above technique for <em>explicit</em> labeling instead of the <em>implicit</em> technique.
+            While both techniques are equally valid, <em>explicit</em> labeling is currently better supported by assistive technology. When possible, use <em>explicit</em> labeling instead of <em>implicit</em> labeling.
           </p>
           <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>.