Generalized Buttons

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

Contact Us or call 1-877-932-8228
Generalized Buttons

Generalized Buttons

  • Button element allows both images and text on a button

The button element is a container that allows both images and text on a button. Images must have alt-text as we discussed earlier. The following is a rather ugly example.

Code Sample:

AccessibleForms/Demos/Code01.xml
<button name="submit" type="submit" />
		<strong>Go</strong> <img src="nextarrow.gif" alt="Next page" />
		</button>

Go with Arrow Button

When the text carries the message of the button and the image is redundant, then alt="" is good for the image. In the example above, alt="next page" was chosen for the alt-text, so for assistive technology the button reads "go next page" which is more information than a sighted user would get.

When a button receives focus, assistive technology knows to announce the content of that button, including alternative text on image buttons.

Next

This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.