RE: Obscure images as labels

There is an interesting distinction between an image being used to label a component, and that image being used to label an adjacent component.

In the first case, the use of an image is ok as long as it has a text alternative.

However, the second case is addressed in technique G167, which says "When a button invokes a function on an input field, has a clear text label, and is rendered adjacent to the input field, the button also acts as a label for the input field."

It also says "The field must also have a programmatically determined name".

The intention is clearly that the text on the button provides a visual label for the input field, and that an image is not considered to be sufficient.

I don't understand why the same logic is not applied to the labelling of the button itself.

Steve

From: Ms J <ms.jflz.woop@gmail.com>
Sent: Friday, June 14, 2024 12:42 PM
To: Steve Green <steve.green@testpartners.co.uk>; w3c-wai-ig@w3.org
Subject: Re: Obscure images as labels

Hi Steve

Thanks for that. Yes I was looking at the definition of labels too and I was probably being pedantic but it defines the label as

'Text or other component with a text alternative'

not

'Text or the text alternative of another component with a text alternative'

Aka it reads like the component itself is still the label, not the text alternative. Which makes sense from a 'label in name' perspective- for example, if you have an image of text, and the alt acts as the accessible name but doesn't match the text in the image - this fails label in name because the label is the text in the image not the alt.

I take your point about labels and instructions being fields requiring data entry. So hypothetically, what happens if you have a field for data entry which had an unclear icon label? For example, a search field or filter field where they have used the adjacent button to label the field, but the adjacent button label is a non-standard or non-familiar icon.

Thanks

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>
________________________________
From: Steve Green <steve.green@testpartners.co.uk<mailto:steve.green@testpartners.co.uk>>
Sent: Friday, June 14, 2024 11:44:10 AM
To: Ms J <ms.jflz.woop@gmail.com<mailto:ms.jflz.woop@gmail.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org> <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: RE: Obscure images as labels


My view is that this is not a WCAG non-conformance, although it is clearly bad UX.



SC 3.3.2 (Labels or Instructions) only applies to links or other controls that are associated with data entry, so it does not apply to components such as burger menu buttons and "Help" icons. Even in the context of data entry, it explicitly does not require that labels are sufficiently clear or descriptive.



SC 2.4.6 (Headings and Labels) requires that if headings or labels are provided, they be descriptive. However, WCAG defines a label as "text or other component with a text alternative", which means that images can be used as long as the text alternative is sufficiently descriptive.

https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels#dfn-label



This is obviously of no use to sighted people, but I guess the rationale is that people with disabilities are not at a greater disadvantage than anyone else. In fact, the text alternative means that it is more accessible to some people with disabilities than it is to anyone else.



Steve Green

Managing Director

Test Partners Ltd





From: Ms J <ms.jflz.woop@gmail.com<mailto:ms.jflz.woop@gmail.com>>
Sent: Friday, June 14, 2024 11:20 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Obscure images as labels



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>