From 843023025a80f2bb8834fa9ea2a0bb2437302632 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 5 Dec 2023 20:57:56 -0800 Subject: [PATCH 1/8] Recommend use of 'for' over labeling by encapsulation --- .../names-and-descriptions-practice.html | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 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..c690a06d21 100644 --- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html +++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html @@ -301,25 +301,28 @@

Warning

Naming Form Controls with the Label Element

- The HTML label element enables authors to identify content that serves as a label and associate it with a form control. + The HTML label element enables authors to identify content that serves as a label and associate it with a form control. When a label element is associated with a form control, browsers calculate an accessible name for the form control from the label content.

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 label element as follows gives the checkbox an accessible name. -

- 
<label>
-  <input type="checkbox" name="subscribe">
-  subscribe to our newsletter
-</label>
-

- A form control can also be associated with a label by using the for attribute on the label element. - This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding an id attribute to the form control, which can be error-prone. - When possible, use the above encapsulation technique for association instead of the following for attribute technique. + HTML provides two syntaxes for specifying this relationship. + The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the ID of the control.

+ 
<input type="checkbox" name="subscribe" id="subscribe_checkbox">
 <label for="subscribe_checkbox">subscribe to our newsletter</label>
+ +

+ The other syntax, which doesn't return the correct accessible name in as many combinations of assistive technologies and browsers, is to wrap the checkbox and the labeling text in a label element. +

+ +
<label>
+<input type="checkbox" name="subscribe">
+subscribe to our newsletter
+</label>
+

Using the label element is an effective technique for satisfying Rule 2: Prefer Visible Text. It also satisfies Rule 3: Prefer Native Techniques. From bc264041fc8f38eff86f98aedcacae8945bb2f29 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 5 Dec 2023 21:01:38 -0800 Subject: [PATCH 2/8] Correct heading level (h3 to h4) on warning --- .../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 c690a06d21..71dc1bb140 100644 --- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html +++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html @@ -197,7 +197,7 @@

Naming with Child Content

</li> </ul>
-

Warning

+

Warning

If an element with one of the above roles that supports naming from child content is named by using aria-label or aria-labelledby, content contained in the element and its descendants is hidden from assistive technology users unless the descendant content is referenced by aria-labelledby. 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.

From 679fdc8f4ce20aba480f7ddb3ea7ae425174f1b9 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 6 Dec 2023 11:13:00 -0800 Subject: [PATCH 3/8] satis fy linter --- .../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 71dc1bb140..46d6fbe6c5 100644 --- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html +++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html @@ -308,7 +308,7 @@

Naming Form Controls with the Label Element

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. HTML provides two syntaxes for specifying this relationship. - The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the ID of the control. + The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the ID of the control. 

<input type="checkbox" name="subscribe" id="subscribe_checkbox">

From 670addcd3fcd51c3de905e9dfd7b5403bc9aece2 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Sun, 10 Dec 2023 12:27:46 -0800
Subject: [PATCH 4/8] Apply Patrick's suggestions from code review

Co-authored-by: Patrick H. Lauke 
---
 .../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 46d6fbe6c5..69c6e8475f 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -308,7 +308,7 @@ 
Naming Form Controls with the Label Element

             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.
             HTML provides two syntaxes for specifying this relationship.
-            The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the ID of the control.
+            The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the id of the control.
           

 
           
<input type="checkbox" name="subscribe" id="subscribe_checkbox">

From 4528f2e0c923285223639683686ae86408987b88 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Sun, 10 Dec 2023 12:44:36 -0800
Subject: [PATCH 5/8] Address feedback from Patrick

---
 .../names-and-descriptions-practice.html                       | 3 ++-
 1 file changed, 2 insertions(+), 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 69c6e8475f..1faf3bb1ab 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -315,7 +315,8 @@ 
Naming Form Controls with the Label Element

 <label for="subscribe_checkbox">subscribe to our newsletter</label>

 
           

-            The other syntax, which doesn't return the correct accessible name in as many combinations of assistive technologies and browsers, is to wrap the checkbox and the labeling text in a label element.
+            The other syntax is to wrap the checkbox and the labeling text in a label element.
+            However, some combinations of assistive technologies and browsers fail to treat the element as having the accessible name that is specified by using this syntax.
           

 
 
<label>

From 5fe78a32540d351cb972bfb927f3689792a50a01 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Sun, 10 Dec 2023 12:52:50 -0800
Subject: [PATCH 6/8] Improve paragraph structure

---
 .../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 1faf3bb1ab..d48e565b0e 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -303,11 +303,11 @@ 
Naming Form Controls with the Label Element

           

              The HTML label element enables authors to identify content that serves as a label and associate it with a form control.
             When a label element is associated with a form control, browsers calculate an accessible name for the form control from the label content.
-          

-          

             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.
-            HTML provides two syntaxes for specifying this relationship.
+          

+          

+            HTML provides two syntaxes for associating a label with a form control.
             The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the id of the control.
           

 

From d6f03eb3c6de3c51a60e6ae941eff662a93d8cd0 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Tue, 12 Dec 2023 08:11:57 -0800
Subject: [PATCH 7/8] Revise text to include the terms explicit and implicit
 association

---
 .../names-and-descriptions-practice.html                   | 7 ++++---
 1 file changed, 4 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 d48e565b0e..f118a566fe 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -301,7 +301,7 @@ 
Warning

         

           
Naming Form Controls with the Label Element

           

-             The HTML label element enables authors to identify content that serves as a label and associate it with a form control.
+            The HTML label element enables authors to identify content that serves as a label and associate it with a form control.
             When a label element is associated with a form control, browsers calculate an accessible name for the form control from the label content.
             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.
@@ -309,14 +309,15 @@ 
Naming Form Controls with the Label Element

           

             HTML provides two syntaxes for associating a label with a form control.
             The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the id of the control.
+            This way of associating the label with the control is often called explicit association.
           

 
           
<input type="checkbox" name="subscribe" id="subscribe_checkbox">
 <label for="subscribe_checkbox">subscribe to our newsletter</label>

 
           

-            The other syntax is to wrap the checkbox and the labeling text in a label element.
-            However, some combinations of assistive technologies and browsers fail to treat the element as having the accessible name that is specified by using this syntax.
+            The other syntax, which is known as implicit association,  is to wrap the checkbox and the labeling text in a label 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.
           

 
 
<label>

From fc57d9b2d5fbd6c3e818c2bceb99a598a126573f Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Sat, 16 Dec 2023 23:58:40 -0800
Subject: [PATCH 8/8] Further refine based on feedback

---
 .../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 f118a566fe..91fc4b2e15 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -307,8 +307,8 @@ 
Naming Form Controls with the Label Element

             However, unless the text is programmatically associated with the checkbox, assistive technology users will experience a checkbox without a label.
           

           

-            HTML provides two syntaxes for associating a label with a form control.
-            The syntax with the broadest browser and assistive technology support is to set the for attribute on the label element to the id of the control.
+            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 for attribute on the label element to the id of the control.
             This way of associating the label with the control is often called explicit association.
           

 
@@ -316,7 +316,7 @@ 
Naming Form Controls with the Label Element

 <label for="subscribe_checkbox">subscribe to our newsletter</label>

 
           

-            The other syntax, which is known as implicit association,  is to wrap the checkbox and the labeling text in a label element.
+            The other way, which is known as implicit association,  is to wrap the checkbox and the labeling text in a label 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.