E-mail List Archives
Thread: Icon Description
Number of posts in this thread: 4 (In chronological order)
From: Kakarla Meharoon
Date: Thu, Apr 05 2018 1:01AM
Subject: Icon Description
No previous message | Next message →
*Hi,*
*There is one add an icon it has the title as "Create" but once the user
clicks the + button it will open a popup as "Create Award". Since the Add
icon is coded with i tag with the title, Whether I need to provide "Create
Award" for this icon or no need.*
From: Tim Harshbarger
Date: Thu, Apr 05 2018 5:03AM
Subject: Re: [EXTERNAL] Icon Description
← Previous message | Next message →
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
From: glen walker
Date: Thu, Apr 05 2018 7:46AM
Subject: Re: [EXTERNAL] Icon Description
← Previous message | Next message →
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 ADDRESS 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
>
From: Bourne, Sarah (MASSIT)
Date: Thu, Apr 05 2018 2:37PM
Subject: Re: Icon Description
← Previous message | No next message
Adding to what Tim and Glen said, if the icon has writing on it, then the accessible name should match it. For instance, if the icon includes "Create" as part of the image, then use "Create" for the aria-label. If it doesn't match, for instance if it says "Award", and the label is "Create" then a voice user (such as Dragon) will have trouble getting to it.
Sarah E. Bourne
Director of IT Accessibility
Executive Office of Technology Services and Security (EOTSS)
1 Ashburton Place, 8th Floor, Boston, MA 02108
Office: (617) 626-4502
= EMAIL ADDRESS REMOVED = | www.mass.gov/eotss