Skip to content

Commit 67450a7

Browse files
detlevhfischerscottaoharambgoweralastcpatrickhlauke
authored
2.4.6-headings-and-labels-descriptive-icons (#4147)
Closes #4095 A proposed addition to the 2.4.6 Understanding text that states that conventional icons can in some cases serve as descriptive label of form controls. Included is an example of a conventional icon (loupe for search). - Addresses the isue raised in #4095 - Adresses the point regarding the descriptiveness of icon labels brought up in #4102 See [rendered version of the revised 2.4.6 Understanding text (updated 26 Nov 2024)](https://raw.githack.com/w3c/wcag/a9e2ef7668d136a631fc7467530796a8ce9debdb/understanding/20/headings-and-labels.html) --------- Co-authored-by: Scott O'Hara <scottaohara@users.noreply.github.com> Co-authored-by: Mike Gower <mikegower@gmail.com> Co-authored-by: Alastair Campbell <ac@alastc.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
1 parent 4bd0ba9 commit 67450a7

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

understanding/20/headings-and-labels.html

+6
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ <h2>Intent of Headings and Labels</h2>
3030
<p>Labels and headings do not need to be lengthy. A word, or even a single character,
3131
may suffice if it provides an appropriate cue to finding and navigating content.
3232
</p>
33+
<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>
34+
<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>
35+
<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>
3336

3437
<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
3538
does not require that content acting as a heading or label be correctly marked up or
@@ -90,6 +93,9 @@ <h2>Examples of Headings and Labels</h2>
9093
<dt>A form asking for the name of the user</dt>
9194
<dd>A form asks for the name of the user. It consists of two input fields to ask for the first
9295
and last name. The first field is labeled <q>First name</q>, the second is labeled <q>Last name</q>.</dd>
96+
<dt>A search field labeled by a magnifying glass icon</dt>
97+
<dd>A search text input is followed by a button containing a magnifying glass icon that activates the search function.
98+
The icon has the string "search" as programmatically determinable label.</dd>
9399
</dl>
94100

95101
</section>

0 commit comments

Comments
 (0)