RE: Obscure images as labels

Yes, this is what we are talking about. While your suggestion sounds reasonable, it is not testable because there is no objective way to determine whether a “visual icon is so obscure as to break with the intuitiveness of the UI/UX”.

Culture and cognition are two reasons why the purpose of a symbol may be obvious to some people and not others. Time is also a factor, and I sometimes wonder how the symbol for burger buttons became ubiquitous. Not many people would have understood its purpose when they first started to be used. And even if you recognise the three lines as representing a burger, what does that tell you?

That symbol is not used anywhere outside of websites, so people using a browser for the first time will have no prior knowledge of it, which is equally true of some other symbols (such as two overlapping rectangles for a Copy button), but is not the case with the magnifying glass or dustbin symbols.

Steve

From: Benjamin Love <benjamin.james.love@gmail.com>
Sent: Saturday, June 22, 2024 4:10 AM
To: Ms J <ms.jflz.woop@gmail.com>
Cc: w3c-wai-ig@w3.org
Subject: Re: Obscure images as labels

Wait, unless this question is whether the icon/image requires a qualifying text description (i.e., label) to optimize its visually implied purpose for non programmatic reasons, but has a text alternative that is already programmatically accessible but visually hidden, then no, you do not require such a label. I would also argue you shouldn’t unless the visual icon is so obscure as to break with the intuitiveness of the UI/UX… in which case, why are we using that symbol?

Ben

On Fri, Jun 21, 2024 at 8:05 PM Benjamin Love <benjamin.james.love@gmail.com<mailto:benjamin.james.love@gmail.com>> wrote:
If the button does not use text, e.g.,

<button><img/></button>

Or,

<button><i/></button>

Or,

<button><svg/></button>

The element “representing” the function of the click event requires a programmatically accessible label.

The preferred method is to add actual text to functional element and hide the non-functional element from AT.

<button>My Button Text <img aria-hidden=“true”/></button>

I may be missing something here, but to have a functional element without a programmatically accessible is a failure.

Ben

On Fri, Jun 14, 2024 at 3:25 AM Ms J <ms.jflz.woop@gmail.com<mailto:ms.jflz.woop@gmail.com>> wrote:
Hello

If I have a button and the visible label is an icon or image which is basically very abstract and it isn't possible to infer the purpose of the control from the icon alone, but the button has a clear accessible name, does this fail 'headings and labels' please? It almost feels as though there is no label at all if the label is just a useless image or icon that does not clearly indicate the purpose of the control, in which case I even think there's an argument that it fails 'labels or instructions'. I have seen icons for say 'settings' labelled by images of animals (because this image was the company logo) which is entirely unrelated to. The accessible name was 'settings' but this doesn't fail label in name as the label is an image.

Thanks

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>