E-mail List Archives
Thread: Minimum size for links with images/hotspots focusable events
Number of posts in this thread: 7 (In chronological order)
From: Nancy Johnson
Date: Thu, Oct 13 2011 11:03AM
Subject: Minimum size for links with images/hotspots focusable events
No previous message | Next message →
Hi,
Does anyone know appropriate sizing for links with images.. I am
working on a site with very small buttons say
24px by 23px... and some smaller.
Thanks,
Nancy Johnson
From: Ghita Jones
Date: Thu, Oct 13 2011 11:30AM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | Next message →
Hello Nancy,
I don't recall seeing much that's specific other that the Illinois
regulations:
9.3 - Avoid using small links. What: The size of the "clickable" area of a
link is limited to the size of the image or text that makes up the link.
Why:Mouse-users with limited fine motor control may have difficulty pointing
to and clicking on links that are small, especially if the links are close
together. How: Make sure that images used for links are reasonably large,
preferably 16 pixels by 16 pixels or larger. Use standard or enlarged font
sizes for text links, and avoid using text links that are shorter than 4
characters in length. Avoid placing small links close
together.athttp://www.dhs.state.il.us/IITAA/IITAAWebImplementationGuidelines.html
Best,
Ghita
On Thu, Oct 13, 2011 at 12:04 PM, Nancy Johnson < = EMAIL ADDRESS REMOVED = >wrote:
> Hi,
>
> Does anyone know appropriate sizing for links with images.. I am
> working on a site with very small buttons say
> 24px by 23px... and some smaller.
>
> Thanks,
>
> Nancy Johnson
>
From: Vincent Young
Date: Thu, Oct 13 2011 2:09PM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | Next message →
> Does anyone know appropriate sizing for links with images..
Need some context. Is the image the only clickable item? Does it have text
inside? If so, what is the size of that text? Any examples you can
provide?
On Thu, Oct 13, 2011 at 10:04 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = >wrote:
> Hi,
>
> Does anyone know appropriate sizing for links with images.. I am
> working on a site with very small buttons say
> 24px by 23px... and some smaller.
>
> Thanks,
>
> Nancy Johnson
>
From: Jared Smith
Date: Thu, Oct 13 2011 4:09PM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | Next message →
On Thu, Oct 13, 2011 at 11:04 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = > wrote:
> Does anyone know appropriate sizing for links with images.
This isn't something that is addressed by WCAG 2.0, mostly because
small clickable elements are difficult for everyone, though especially
for those with limited motor control. I think common sense can
generally indicate if something is too small - if it seems to small,
it probably is.
Of interest may be this demo by Derek Featherstone of a button that
increases in size if you click near it -
http://examples.furtherahead.com/growing-button-simple/
Jared
From: Vincent Young
Date: Thu, Oct 13 2011 8:30PM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | Next message →
> Of interest may be this demo by Derek Featherstone of a button that
> increases in size if you click near it -
> http://examples.furtherahead.com/growing-button-simple/<;http://examples.furtherahead.com/growing-button-simple/>;
Very cool example and interesting topic. Nancy, if images are a must, below
are some requirements you may consider:
1. Make sure the images are not too small. As Jered said, if you have
doubts, they probably are.
2. Try to make the image meaning as clear as possible.
3. The image should have descriptive alt and title text.
4. The image should not pixelate when you zoom (ensure the image is slightly
bigger than it needs to be. If you are worried about increased file size,
you may need to get creative.)
5. Ensure there is a focus indicator and title text shows when focused.
6. Make sure the image (or equivalent) is visible in high-contrast mode.
Example:
http://www.webhipster.com/testing/accessibility/image-link/index.html
(very simple example, you'd want to do your own testing/implementation)
On Thu, Oct 13, 2011 at 3:10 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Thu, Oct 13, 2011 at 11:04 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Does anyone know appropriate sizing for links with images.
>
> This isn't something that is addressed by WCAG 2.0, mostly because
> small clickable elements are difficult for everyone, though especially
> for those with limited motor control. I think common sense can
> generally indicate if something is too small - if it seems to small,
> it probably is.
>
> Of interest may be this demo by Derek Featherstone of a button that
> increases in size if you click near it -
> http://examples.furtherahead.com/growing-button-simple/
>
> Jared
>
From: Nancy Johnson
Date: Fri, Oct 14 2011 6:45AM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | Next message →
Thank you,
They aren't live.. The larger one "Go" is an input type image about 26px
The technology around the smaller one had to be "submit" so it is a
background image with the value text styled off the page. It has a
disabled background image and a different enabled background image.
The hotspot for the submit may be 16px. The text size is probably too
small. When I zoomed to 400% IE8. The background the text in the
background image was still readable and hadn't lost too much
resolution.
Nancy
On Thu, Oct 13, 2011 at 10:30 PM, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
>> Of interest may be this demo by Derek Featherstone of a button that
>> increases in size if you click near it -
>> http://examples.furtherahead.com/growing-button-simple/<;http://examples.furtherahead.com/growing-button-simple/>;
>
> Very cool example and interesting topic. Nancy, if images are a must, below
> are some requirements you may consider:
>
> 1. Make sure the images are not too small. As Jered said, if you have
> doubts, they probably are.
> 2. Try to make the image meaning as clear as possible.
> 3. The image should have descriptive alt and title text.
> 4. The image should not pixelate when you zoom (ensure the image is slightly
> bigger than it needs to be. If you are worried about increased file size,
> you may need to get creative.)
> 5. Ensure there is a focus indicator and title text shows when focused.
> 6. Make sure the image (or equivalent) is visible in high-contrast mode.
>
> Example:
> http://www.webhipster.com/testing/accessibility/image-link/index.html
>
> (very simple example, you'd want to do your own testing/implementation)
>
>
> On Thu, Oct 13, 2011 at 3:10 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On Thu, Oct 13, 2011 at 11:04 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>> > Does anyone know appropriate sizing for links with images.
>>
>> This isn't something that is addressed by WCAG 2.0, mostly because
>> small clickable elements are difficult for everyone, though especially
>> for those with limited motor control. I think common sense can
>> generally indicate if something is too small - if it seems to small,
>> it probably is.
>>
>> Of interest may be this demo by Derek Featherstone of a button that
>> increases in size if you click near it -
>> http://examples.furtherahead.com/growing-button-simple/
>>
>> Jared
>>
From: Vincent Young
Date: Fri, Oct 14 2011 11:57AM
Subject: Re: Minimum size for links with images/hotspots focusable events
← Previous message | No next message
I would strongly suggest using text and CSS whenever possible. You don't
have to worry about resolution on touch devices and will typically load
faster than an image. Be careful about how you implement the background
image. In high contrast mode, the background image could disappear. This
is a problem for images that convey meaning. Either use an inline image,
do a workaround like Steve Faulkner did with CSS (
http://www.paciellogroup.com/blog/2010/01/high-contrast-proof-css-sprites/),
or detect high contrast mode (http://dev.aol.com/axs) and do something
fancy.
On Fri, Oct 14, 2011 at 5:47 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you,
>
> They aren't live.. The larger one "Go" is an input type image about 26px
>
> The technology around the smaller one had to be "submit" so it is a
> background image with the value text styled off the page. It has a
> disabled background image and a different enabled background image.
> The hotspot for the submit may be 16px. The text size is probably too
> small. When I zoomed to 400% IE8. The background the text in the
> background image was still readable and hadn't lost too much
> resolution.
>
> Nancy
>
> On Thu, Oct 13, 2011 at 10:30 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >
> wrote:
> >> Of interest may be this demo by Derek Featherstone of a button that
> >> increases in size if you click near it -
> >> http://examples.furtherahead.com/growing-button-simple/<;
> http://examples.furtherahead.com/growing-button-simple/>;
> >
> > Very cool example and interesting topic. Nancy, if images are a must,
> below
> > are some requirements you may consider:
> >
> > 1. Make sure the images are not too small. As Jered said, if you have
> > doubts, they probably are.
> > 2. Try to make the image meaning as clear as possible.
> > 3. The image should have descriptive alt and title text.
> > 4. The image should not pixelate when you zoom (ensure the image is
> slightly
> > bigger than it needs to be. If you are worried about increased file
> size,
> > you may need to get creative.)
> > 5. Ensure there is a focus indicator and title text shows when focused.
> > 6. Make sure the image (or equivalent) is visible in high-contrast mode.
> >
> > Example:
> > http://www.webhipster.com/testing/accessibility/image-link/index.html
> >
> > (very simple example, you'd want to do your own testing/implementation)
> >
> >
> > On Thu, Oct 13, 2011 at 3:10 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> On Thu, Oct 13, 2011 at 11:04 AM, Nancy Johnson < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >> > Does anyone know appropriate sizing for links with images.
> >>
> >> This isn't something that is addressed by WCAG 2.0, mostly because
> >> small clickable elements are difficult for everyone, though especially
> >> for those with limited motor control. I think common sense can
> >> generally indicate if something is too small - if it seems to small,
> >> it probably is.
> >>
> >> Of interest may be this demo by Derek Featherstone of a button that
> >> increases in size if you click near it -
> >> http://examples.furtherahead.com/growing-button-simple/
> >>
> >> Jared
> >>