WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Minimum size for links with images/hotspots focusable events

for

From: Vincent Young
Date: Oct 14, 2011 11:57AM

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 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 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 REMOVED> > wrote:
> >
> >> On Thu, Oct 13, 2011 at 11:04 AM, Nancy Johnson < <EMAIL 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
> >>