Re: Obscure images as labels

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