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 appears to prohibit the use of icons as labels #4095

Open
TestPartners opened this issue Oct 4, 2024 · 13 comments

Comments

@TestPartners
Copy link

The normative text says "Headings and labels describe topic or purpose". I don't see how an icon can describe anything, and the Understanding page makes no mention of the use of icons as labels.

It has been stated that icons can be used as labels in discussions regarding SC 3.3.2: Labels or Instructions, which does not require that labels are accurate or descriptive. See #3276

If the use of icons as labels conforms with SC 3.3.2 but does not conform with SC 2.4.6, I think this should be made explicit in the Understanding pages for both success criteria.

@patrickhlauke
Copy link
Member

starting with the premise that "describe" is a fluffy/vague/subjective term anyway, i'm sure though that we can agree that:

  • for icons/images, there are two aspects: the visual part, and the (per 1.1.1) alternative text part
  • you can make an argument for each of those two parts about whether something is correct/descriptive/appropriate or not ... if a search field is preceded by a poop emoji, it's probably not "descriptive" visually, compared to the same field preceded by a magnifying glass icon; likewise, if the text alternative for that icon/image isn't appropriate in conveying what the form field's use/purpose is

@TestPartners
Copy link
Author

I agree. For the purposes of this discussion I want to ignore the alternative text because that can be changed without changing the visual appearance. I am sure there have been plenty of discussions about adequate text alternatives.

It's a bit of a stretch to suggest that a magnifying glass icon describes the adjacent textbox (or indeed the button itself) because magnifying glass icons are commonly used for other purposes, such as buttons that enable magnification.

In Adobe Reader's Preflight tool, a magnifying glass icon is used to label the button that opens the Analyze tab. Would that fail this SC on the basis that the magnifying glass icon is reserved for search functionality? If an icon doesn't have a specific meaning, how can it be descriptive?

And I don't think anyone could argue that the three horizontal lines on a burger button describe its purpose. Its purpose is widely, but not universally, recognised now but it wasn't when it first started to be used.

@patrickhlauke
Copy link
Member

And I don't think anyone could argue that the three horizontal lines on a burger button describe its purpose. Its purpose is widely, but not universally, recognised now but it wasn't when it first started to be used.

which is why the whole concept of "describe" is fluffy and subjective anyway. Even when it comes to words/text ... "Menu" as word would not be understandable for somebody who never encountered it used to mean some kind of dropdown thing with options inside.

top of the old getbootstrap.com site on a mobile browser, with the classic 3-line 'hamburger' menu button, and a picture of McDonalds' 'Hamburglar' pointing to it

https://mastodon.social/@patrick_h_lauke/112280388288634835

@TestPartners
Copy link
Author

Let's not go off at a tangent again. If an icon can have multiple meanings (such as search, magnify, analyse etc.), its meaning is ambiguous in any context in which it is used. Surely this means it's impossible for it to "describe topic or purpose" at all. It's not just fluffy and subjective - each meaning may be unambiguous, but there is no way to tell which is correct.

@patrickhlauke
Copy link
Member

so what's your end goal out of this? officially make any use of an icon that acts as a label fail 2.4.6?

@TestPartners
Copy link
Author

My goal is to achieve consensus on this matter one way or the other. I think I have laid out a logical argument that icons cannot "describe topic or purpose" because they can and do have more than one meaning that cannot be determined from the context in which they are used. This is clearly an inconvenient outcome, so I would welcome a logical argument to the contrary.

@stevefaulkner
Copy link

words can also have multiple meanings, depending on context,

F**K you
vs
F**K me

for example same word used in different contexts has a different meaning

@TestPartners
Copy link
Author

Indeed, but the context determines the meaning of the word. The context does not determine the meaning of an icon. Here's why.

If a textbox is labelled by the word "Search" (whether it's a text label or a Search button), it is clear that a search function will be performed on whatever you enter in the textbox.

If a textbox is labelled by a magnifying glass icon, the icon could mean search, magnify, analyse or something else. You therefore cannot know what function will be performed on whatever you enter in the textbox.

Whatever level of ambiguity there is in relation to a word, there is additional ambiguity when using an icon because the icon can represent multiple words that may have their own ambiguity.

@stevefaulkner
Copy link

whilst i agree with @TestPartners in general there are definitely some cases where the placement of an icon in relation to another control and further in relation to other content on a page/screen the use of the icon as a visual label is unambiguous

@stevefaulkner
Copy link

for example:
downward arrow indicating a menu

@TestPartners
Copy link
Author

I think that arrows are a special case because all operating systems, browsers and pretty much every application use them for the same purpose, so it's reasonable to expect users to know what they do. Even when arrows are used in different contexts, such as in scrollbars or for opening dropdowns, the context makes their purpose obvious. I'm not sure there are many icons with such ubiquity.

@stevefaulkner
Copy link

Some, any or all of these icons are ambiguous to the extent that they require a text label to conform to WCAG? In context of being a persistent fixed location toolbar bar?
bottom navigation bar of chrome browser on iOS, has left and right arrows, plus symbol, kebab menu icon and a stylised square with a number “18” inside.

@stevefaulkner
Copy link

Some, any or all of these icons are ambiguous to the extent that they require a text label to conform to WCAG? In context of being a rich text editor toolbar?

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

No branches or pull requests

3 participants