WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Icon Description

for

From: glen walker
Date: Apr 5, 2018 7:46AM

Those are good points, Tim.

And just to make sure we're not missing a more basic question on labeling
an icon on a button, if you had something like this:

<button><i class='award'></button>

then you'd need some kind of accessible name for the button.

<button aria-label="create award"><i class='award'></button>

I know that's a basic principle but I wanted to state it in case Kakarla
was asking about that too.

As far as whether the aria-label should be "create" or "create award", I
like your advice.


On Thu, Apr 5, 2018 at 5:03 AM, Tim Harshbarger <
<EMAIL REMOVED> > wrote:

> Depending on the user interface, either 'Create" or "Create Award" might
> be ok. However, "Create Award" is probably better.
>
> My thinking is as follows.
>
> It is likely easier for the user to know they are on the right track if
> they click a "Create Award" icon that takes them to a dialog or page titled
> "Create Award".
>
> "Create" might also work, but the user can only imply what "Create" does
> through the context of the rest of the user interface and possibly the rest
> of the site or application.
>
> For example, in an user interface that is all about creating or managing
> awards, it might be quite clear to the user that an icon labelled "Create"
> would create an award. However, in a user interface where the user might
> create or manage many different things in addition to awards, figuring out
> what that label means will more heavily depend on the context where the
> icon occurs.
>
> Personally, I think there are situations where relying on the context is
> ok and being more explicit might be overkill or too verbose. However, being
> more explicit or detailed probably is a good thing in many situations and
> will not hurt anything in most situations.
>
> I hope that helps.
>
> Thanks,
> Tim
>