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.

Sign up for GitHub

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

Accessible Names Practice: Recommend association via 'for' attribute when using 'label' element #2882

Merged
merged 8 commits into from
Dec 18, 2023
Merged

Accessible Names Practice: Recommend association via 'for' attribute when using 'label' element #2882

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8430230
Recommend use of 'for' over labeling by encapsulation
mcking65 Dec 6, 2023
bc26404
Correct heading level (h3 to h4) on warning
mcking65 Dec 6, 2023
679fdc8
satis fy linter
mcking65 Dec 6, 2023
670addc
Apply Patrick's suggestions from code review
mcking65 Dec 10, 2023
4528f2e
Address feedback from Patrick
mcking65 Dec 10, 2023
5fe78a3
Improve paragraph structure
mcking65 Dec 10, 2023
d6f03eb
Revise text to include the terms explicit and implicit association
mcking65 Dec 12, 2023
fc57d9b
Further refine based on feedback
mcking65 Dec 17, 2023
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
27 changes: 15 additions & 12 deletions content/practices/names-and-descriptions/names-and-descriptions-practice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -301,25 +301,28 @@ <h4>Warning</h4>
<section id="naming_with_labels">
<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.
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 syntaxes for specifying this relationship.
The syntax with 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.
mcking65 marked this conversation as resolved.
Show resolved Hide resolved
</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 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 <code>label</code> element.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the "in as many" sounds like we actually went around counting the totals. i'd generalise it more into something more like... "The other syntax is to wrap […]. However, this syntax is not supported by all combinations of assistive technologies and browsers." (if possible, i'd even be more specific and say which ones, at time of writing, have problems)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made some revisions to address this. Rather than just saying it is not supported, I tried to use words that help the reader understand what is not happening. In general, we avoid naming AT in the APG. We are plannig to provide support data that can show AT specifics via the aria-at data using the AT support tables on the example pages. Over time, that data will be able to surface in more places.

</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>.
Expand Down
Loading