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

Jump to bottom

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 7 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: 16 additions & 11 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 @@ -303,23 +303,28 @@ <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.
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 associating a label with a form control.
Copy link
Member

Choose a reason for hiding this comment

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

If we're aiming for simplicity/understandability (regardless of reading level etc), maybe instead of referring to "syntaxes" we could just talk about "ways" here and subsequently

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for considering understandability and simplicity, @patrickhlauke !

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Revised acordingly.

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.
This way of associating the label with the control is often called explicit association.
</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 is known as implicit association, is to wrap the checkbox and the labeling text in a <code>label</code> 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.
Copy link
Member

Choose a reason for hiding this comment

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

might be prudent to qualify this statement with "Currently, some combinations..." or similar, as the situation may well change

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If the bugs are fixed and this text is still present, the text will be equally inaccurate whether or not it includes the word "currently". The only way to avoid that problem would be to include a phrase like "as of December 2023", but I'm reluctant to start including such temporal prose in the APG.

So, it is somewhat risky to include any information of this nature. We have tried to avoid doing so. The long term strategy for addressing AT support is interop data from aria--at., which will be updated with each new release of a covered AT

</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