Use ALT text to describe the function of any graphical buttons which may have been used.

(see guidelines for overcoming access barriers)

It is ok to use graphical buttons if they really do make forms easier to understand - provided that a text equivalent ("alt", "name", "id", "value", "title") is provided for the image (if you are using XHTML 1.1 then leave out the "name" attribute).

Be aware that when a user increases the browser text size the graphical button will not increase in size.

For an explanation on building client side image maps for form buttons go to: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-graphical-buttons

Example:

ALT text to describe function of graphical button:

First name:

Last name:

Code for using ALT text to describe function of graphical button

<form name="details">
   <p>First name: 
   <input type="text" id="firstname" name="fname" tabindex="1"></p>
   <p>Last name: 
   <input type="text" id="lastname" name="lname" tabindex="2"></p>
   <p><input type="image" name="Submit2" title="Submit" id="Submit" value="Submit"
   	src="../images/submitbutton1.gif" alt="submit form"></p>
</form>

Back to top