E-mail List Archives
Thread: Image Buttons
Number of posts in this thread: 5 (In chronological order)
From: JP Jamous
Date: Thu, Nov 03 2016 7:22AM
Subject: Image Buttons
No previous message | Next message →
Okay Folks! Here is another one for ya!
The video player has buttons that have icons showing different symbols to
operate the player. While my concern is people with cognitive disabilities
and low vision, I am wondering what approach would be best to show the
symbol as well as text in the button caption.
Here is a code sample:
<button>
<span>
A square icon goes here, using the <i></i>, which is included in Bootstrap.
</span>
<span>
Stop
</span>
</button>
Is this the best approach to keep the text visible so it is not included in
the icon itself? My main concern is to find the happy medium for all of my
audience.
From: Birkir R. Gunnarsson
Date: Thu, Nov 03 2016 7:51AM
Subject: Re: Image Buttons
← Previous message | Next message →
Not sure your designers would like this much .. but it is ideal.
Second choice, use the title attribute of the button.
Yes, title attribute is not consistently displayed when buttons are
focused with the keyboard (except in IE 11/Edge), but that is a user
agent choice that should be fixed.
I think that would be a suitable compromise.
On 11/3/16, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Okay Folks! Here is another one for ya!
>
>
>
> The video player has buttons that have icons showing different symbols to
> operate the player. While my concern is people with cognitive disabilities
> and low vision, I am wondering what approach would be best to show the
> symbol as well as text in the button caption.
>
>
>
> Here is a code sample:
>
>
>
> <button>
>
> <span>
>
> A square icon goes here, using the <i></i>, which is included in Bootstrap.
>
> </span>
>
> <span>
>
> Stop
>
> </span>
>
> </button>
>
>
>
> Is this the best approach to keep the text visible so it is not included in
> the icon itself? My main concern is to find the happy medium for all of my
> audience.
>
>
>
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: JP Jamous
Date: Thu, Nov 03 2016 7:57AM
Subject: Re: Image Buttons
← Previous message | Next message →
Birkir,
That was my first thought and converting the spans into an img tag for proper semantic. As you mentioned, they won't like it, because it is not a definite solution. I also don't know how difficult low vision users find tooltips.
Can someone that has experience with low vision users shed some light on the title attribute? That will be highly appreciated.
From: Whitney Quesenbery
Date: Sat, Nov 12 2016 10:28AM
Subject: Re: Image Buttons
← Previous message | Next message →
Can't you address low vision with sufficient contrast?
And have you actually tested the interface with people with cognitive
disabilities to see how it works for them?
One of the lessons of usability is to understand what problem you are
actually solving.
On Thu, Nov 3, 2016 at 9:58 AM JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Birkir,
>
> That was my first thought and converting the spans into an img tag for
> proper semantic. As you mentioned, they won't like it, because it is not a
> definite solution. I also don't know how difficult low vision users find
> tooltips.
>
> Can someone that has experience with low vision users shed some light on
> the title attribute? That will be highly appreciated.
>
>
From: Jonathan Avila
Date: Mon, Nov 14 2016 7:38AM
Subject: Re: Image Buttons
← Previous message | No next message
> Can't you address low vision with sufficient contrast?
There are more things to consider than just contrast. For example, with larger mouse pointers the tooltip can be obscured. In other situations the tooltip might hang off the right edge of the screen creating a scroll bar but when you move the mouse to see the rest of the tooltip the tooltip goes away.
Jonathan