Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amend implicit vs explicit label advice in naming document #2871

Closed
wants to merge 5 commits into from
Closed
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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> labeling.
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
</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> labeling.
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
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> labeling instead of the <em>implicit</em> technique.
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
</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
Loading