INPUT with valid ALT  
Section 508 1194.22(a); WAI / WCAG 1.0 checkpoint 1.1
 
 
Issue Description

Image used as a button in the form does not have a valid textual description.

Image does not have a LONGDESC attribute linking it to an HTML file that provides a detailed description that would not fit in the ALT attribute. A valid description is a string value of the ALT attribute that is not any of the following:

  • an empty string ("")
  • a blank string with one or more spaces (" ")
  • the name of the image file
  • the size of the image file
  • a string longer than 150 characters (this is actually only a suggestion - not a WCAG 1.0 or 508 requirement)
 
 
How to fix

Add the ALT attribute to the INPUT element while keeping the following in mind:

  • The description should explain the effect of clicking on the button.
  • ALT descriptions are not interpreted by browsers, and should not include HTML tags. Embedded tags can only confuse users and possibly search engines as well.
  • ALT descriptions that are too long may be truncated by browsers and increase the time required to download the page. A good rule of thumb is to use less than 10 words and 64 characters

Beware that when the mouse is used to click on the image, the form and the click coordinates are submitted to the server. If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, you should consider alternate approaches such as the following:

  • Use multiple submit buttons (each with its own image) in place of a single graphical submit button. You can use style sheets to control the positioning of these buttons.
  • Use a client-side image map together with scripting.
 
 
Issue Explanation

The ALT attribute describes the associated image so that users without graphics-enabled browsers can still effectively navigate the page. The advent of hand-held, text-only browsers makes the use of ALT descriptions more important now than ever.

If the button image does not have a textual description, users of non-graphical browsers will have no idea what clicking on that button will do.

Beware of another possible problem:

When the mouse is used to click on the image, the form and the click coordinates are submitted to the server.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, you should consider alternate approaches such as the following:

  • Use multiple submit buttons (each with its own image) in place of a single graphical submit button. You can use style sheets to control the positioning of these buttons.
  • Use a client-side image map together with scripting.