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

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
6 changes: 6 additions & 0 deletions understanding/20/headings-and-labels.html
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 label without additional text. In these cases, authors should ensure that the image and its use as label in a particular context can be considered conventional and widely understood.
detlevhfischer marked this conversation as resolved.
Show resolved Hide resolved
Note that the same icon can be interpreted differently in different contexts and still be considered descriptive in that context. For example, placed after a search field, a magnifying glass icon is commonly interpreted as triggering a search.
detlevhfischer marked this conversation as resolved.
Show resolved Hide resolved
Placed on an image, a magnifying glass icon is commonly interpreted as opening a magnified version of the image (or zooming into that image).</p>
detlevhfischer marked this conversation as resolved.
Show resolved Hide resolved

<p>This Success Criterion does not require headings or labels. This Success Criterion
requires that if headings or labels are provided, they be descriptive. This Success Criterion also
Expand Down Expand Up @@ -93,6 +96,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>
</dl>

</section>
Expand Down