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 6 commits into
base: main
Choose a base branch
from

Conversation

detlevhfischer
Copy link
Contributor

@detlevhfischer detlevhfischer commented Nov 21, 2024

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).

See rendered version of the revised 2.4.6 Understanding text

Copy link

netlify bot commented Nov 21, 2024

Deploy Preview for wcag2 ready!

Name Link
🔨 Latest commit 36cceff
🔍 Latest deploy log https://app.netlify.com/sites/wcag2/deploys/673f6957228bf400081e72b4
😎 Deploy Preview https://deploy-preview-4147--wcag2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Wording changes to explanation of descriptive icon (different contexts affext interpretation).
minor wording changes
Changing "loupe" to "magnifying glass"
@@ -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.
Copy link
Member

Choose a reason for hiding this comment

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

making 'label' plural to match the preceding plural 'images'.
swapped out 'should' with 'would need to' to avoid using "should" in an informative doc.

Suggested change
<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.
<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 would need to ensure that the image and its use as label in a particular context can be considered conventional and widely understood.

understanding/20/headings-and-labels.html Outdated Show resolved Hide resolved
understanding/20/headings-and-labels.html Outdated Show resolved Hide resolved
@@ -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.
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.
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>
Copy link
Member

Choose a reason for hiding this comment

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

some suggested text to expand on this

Suggested change
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>
Placed on or near another image, a loupe or magnify 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>

@@ -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.
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.
Copy link
Member

Choose a reason for hiding this comment

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

Some suggested text for you to consider:

  • swapped out the first instance of "icon" with "image", as previously "image" was the term being used, and prior to introducing the example, changing to "icon" seemed awkward.
  • Split the first sentence into two, and carried over the "conventional and widely understood" caveat from the previous paragraph to explain why it can be still descriptive in different contexts.
  • changed "when placed after" to "accompanying a" since the former was narrowly scoped and not representative of how all instances of search fields might be designed.
  • similarly changed 'triggering' to the changed text because sometimes a search icon is merely a label, and sometimes it also acts as a button, but it always is a means to identifying the search widget.
Suggested change
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.
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 is commonly interpreted as indicating the field is for entering and submitting a search query.

@detlevhfischer
Copy link
Contributor Author

detlevhfischer commented Nov 21, 2024

Sounds all very reasonable. Do you want to create a PR on my PR or do you want me to implement those changes?

@scottaohara
Copy link
Member

@detlevhfischer i provided them as suggestions so that if you agree with them, you can just commit them into your existing PR via GitHub's "commit suggestion" button that follows each of my proposed changes.

I would rather you be the one to commit these, as personally am against the idea of someone editing/committing to someone else's PR without explicit permission :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants