RE: images used as form submit buttons

Scarlett Julian (ED) wrote:

> I am working on the assumption that using an image to submit 
> a form will cause accessibility problems either because of the need for 
> javascript or because it would mean using invalid html to create a text 
> alternative for the image.

It requires some care to make image submit buttons reasonably accessible,
and you cannot achieve as good accessibility as with normal submit buttons.

There have been quite a many answers already in the list, but I'm afraid
that even if combined, they paint an incomplete picture of the situation.

If you use <input type="image">, then accessibility is fairly good _if_ you
include alt="...", name="..." and value="..." attributes, typically with
identical values, e.g.
<INPUT TYPE="image" SRC="search.png" VALUE="Search" ALT="Search"
NAME="Search">  
The reason is that different browsers use different attributes as specifying
the alternate text. There might still be problems with some browsers that
use _none_ of them, though that's rather rare. (Adding a title="..."
attribute hardly helps much. Browsers that support it surely support some of
the other ways as well.) But there are _other_ accessibility problems.

The "image button" is most often just text in some stylicized form. The
question naturally arises whether it would then be better to use a normal
submit button with a style sheet. An image is of fixed size, so it will
cause problems to people who need larger font size. A well-styled normal
button can adapt to the user's preferences as regards to the font size.

On Netscape 4, image buttons don't participate in the tabbing order. This is
serious to people who need (or strongly before) keyboard access to all
functionality.

Using <button> isn't really an option. It does not degrade gracefully on
non-supporting browsers.

In principle, you could use an <img> element with an event attribute that
submits the form, with a normal (or image) submit button specified as an
alternative in a <noscript> element. But the markup for <img> should be
JavaScript-generated (with document.write(...)) then, to avoid a non-working
button-like appearing when JavaScript is off.

A summary of the problems and partial solutions:
http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html

"Executive summary": consider first using a normal submit button and a style
sheet; if that's not feasible, make sure the <input type="image"> element
has name, value, and alt attributes with an identical value.

-- 
Jukka Korpela
TIEKE Tietoyhteiskunnan kehittämiskeskus ry
Finnish Information Society Development Centre 
Salomonkatu 17 A, 10th floor, FIN - 00100 HELSINKI, FINLAND
Phone: +358 9 4763 0397 Fax: +358 9 4763 0399 
http://www.tieke.fi  jukka.korpela@tieke.fi

Received on Monday, 27 May 2002 06:10:21 UTC