Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Forms

Buttons

By default, the submit and reset input types display "Submit Query" and "Reset" respectively in the resulting buttons. You can change the text on buttons of these types by using the value attribute. Here are three button examples with their code next to them:

<input type="submit">

<input type="reset">

<input type="submit" value="Find">

Most people will find the above sufficient for their needs, as buttons on web forms are normally only used to submit a form that has been filled in. For those who need more interesting buttons than these (or who just want to know) read on.

Buttons with Images

Buttons containing images can be created using the button or input tags. As usual with images, you must use an alt attribute with img tags. In this case the alt attribute is read by the screen reader along with any text present in the rest of the button. Here are some examples of these kinds of buttons:

<button name="status" value="check">

<img src="alert.gif" alt="Alert!"> Check Status

</button>

A screen reader will say "Alert Check Status" when encountering the above, and it will pass a variable named "status" with a value of "check" to whatever the form is pointing to.

<input type="image" name="Search" src="search.jpg" alt="Search" />

A screen reader will say "Search" for this one, passing only the variable name "Search" with no value.

Advanced Techniques

You probably noticed that the text in the button version above is not neatly centered top-to-bottom. This can be corrected with a bit of CSS, but embedding img tags in buttons adds extra code for a screen reader, so it is really just better to avoid them. A good option for graphical buttons is to use CSS to define a background image (and other non-functional graphical attributes) for the button. This keeps the button code simple and has the advantage of being usable on submit and reset buttons as well. Here are a few examples that use CSS to impart a background image:

<button name="status" value="check" class="alert_btn">

Check Status

</button>

 

<input type="submit" value="Check Status" class="alert_btn">

 

Finally, here is the CSS style definition used to set up the look of both buttons above:

.alert_btn {

height: 40px;

width: 11em;

padding: 4px;

text-align: right;

background: #dcdcdc url(/committees/webcomm/accessibilityTutorials/forms/alert.gif) no-repeat;

}

.alert_btn:hover {

background-color: #fbdfdb;

}

There are many ways to code buttons. A more complete discussion on buttons can be found in the article Rediscovering the Button Element by Kevin Hale.