Skip to content

2.4.6-headings-and-labels-descriptive-icons #4147

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

Merged
merged 18 commits into from
May 6, 2025
Merged

2.4.6-headings-and-labels-descriptive-icons #4147

Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9b47bec
2.4.6-headings-and-labels-descriptive-icons
detlevhfischer Nov 21, 2024
150f22b
Update headings-and-labels.html
detlevhfischer Nov 21, 2024
ddde778
Update headings-and-labels.html
detlevhfischer Nov 21, 2024
9f86757
Update headings-and-labels.html
detlevhfischer Nov 21, 2024
cb6f62d
Update headings-and-labels.html
detlevhfischer Nov 21, 2024
36cceff
Update headings-and-labels.html
detlevhfischer Nov 21, 2024
99a9d42
Update understanding/20/headings-and-labels.html
detlevhfischer Nov 26, 2024
c8c0d9c
Update understanding/20/headings-and-labels.html
detlevhfischer Nov 26, 2024
047cc48
Update understanding/20/headings-and-labels.html
detlevhfischer Nov 26, 2024
a9e2ef7
Update headings-and-labels.html
detlevhfischer Nov 26, 2024
c768199
Update understanding/20/headings-and-labels.html
mbgower Feb 7, 2025
f0296bf
Merge branch 'main' into detlevhfischer-patch-1
mbgower Mar 10, 2025
436e537
Update understanding/20/headings-and-labels.html
mbgower Apr 25, 2025
9f1f34b
Update understanding/20/headings-and-labels.html
alastc Apr 25, 2025
0e3250e
Update understanding/20/headings-and-labels.html
alastc Apr 25, 2025
a63907e
Update understanding/20/headings-and-labels.html
alastc Apr 25, 2025
9bd0b4c
Merge branch 'main' into detlevhfischer-patch-1
scottaohara Apr 25, 2025
73c9310
Merge branch 'main' into detlevhfischer-patch-1
patrickhlauke May 1, 2025
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
6 changes: 6 additions & 0 deletions understanding/20/headings-and-labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ <h2>Intent of Headings and Labels</h2>
<p>Labels and headings do not need to be lengthy. A word, or even a single character,
may suffice if it provides an appropriate cue to finding and navigating content.
</p>
<p>Labels of form controls are usually text-based. In some cases, images can serve as descriptive labels without additional text. In these cases, authors should ensure that the image and its use as a label (in context) are widely understood.</p>
<p>Note that the same image can be interpreted differently in different contexts. However, it can still be considered descriptive if its use is commonly understood in each context. For example, when accompanying a text field, a loupe or magnifying glass icon with text alternative of "Search" is commonly interpreted as indicating the field is for entering and submitting a search query.</p>
<p>Placed on or near another image, a loupe or magnifying glass icon is commonly interpreted as a means to view a magnified version of the image (for instance, acting as a mechanism to zoom into the image, or opening a full-sized image in a new window).</p>

<p>This success criterion requires that if headings or labels are provided, they be descriptive. This success criterion does not require headings or labels; labels for inputs are covered separately by <a href="labels-or-instructions">3.3.2 Labels or Instructions</a>. This success criterion also
does not require that content acting as a heading or label be correctly marked up or
Expand Down Expand Up @@ -90,6 +93,9 @@ <h2>Examples of Headings and Labels</h2>
<dt>A form asking for the name of the user</dt>
<dd>A form asks for the name of the user. It consists of two input fields to ask for the first
and last name. The first field is labeled <q>First name</q>, the second is labeled <q>Last name</q>.</dd>
<dt>A search field labeled by a magnifying glass icon</dt>
<dd>A search text input is followed by a button containing a magnifying glass icon that activates the search function.
The icon has the string "search" as programmatically determinable label.</dd>
Copy link
Contributor

Choose a reason for hiding this comment

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

A visible text alternative is also needed. Can we please add an according sentence?

Copy link
Member

Choose a reason for hiding this comment

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

isn't this the whole point of this PR? clarifying that if an icon is "descriptive" enough, it doesn't need text?

Copy link
Contributor

@mbgower mbgower Apr 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

That is explicity stated: "In some cases, images can serve as descriptive labels without additional text."

Such an image needs a text alternative, but the author does not need to make the alternative visible, just programmatically available (which can be exposed to users in a number of ways, including visibly, through user agents and AT)

Copy link
Contributor

Choose a reason for hiding this comment

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

@patrickhlauke does this work?

Copy link
Member

Choose a reason for hiding this comment

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

This addition would make it seem like all instances of images directly need to have alt text, when in reality the image could have no alt text because the form field’s accname is clear enough. Eg having a search icon with alt=search next to a text field with an accname of search is not what anyone should think they need to do in this situation.

To put it bluntly, this just seems to make this more complicated, and to provide the appropriate nuance, it’d submit more verbiage is necessary.

Copy link
Member

@patrickhlauke patrickhlauke Apr 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

it's the text input that needs an accessible name, not the icon/image used as visual label, basically. (which would cross-reference 4.1.2 and, depending how you look at it, 1.1.1)

Copy link

Choose a reason for hiding this comment

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

Good point, sorry I missed that. In that case, its basically only 4.1.2 that is needed not 1.1.1.

</dl>

</section>
Expand Down