Skip to content

Commit

Permalink
Amend implicit vs explicit label advice in naming document
Browse files Browse the repository at this point in the history
Explicit `<label>`s are preferred over implicit ones, as they have better AT support.

Closes #2870
  • Loading branch information
patrickhlauke committed Dec 1, 2023
1 parent fccb00c commit 2c5e1d1
Showing 1 changed file with 6 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>.
Expand Down

0 comments on commit 2c5e1d1

Please sign in to comment.