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.
<button name="submit" type="submit" /> <strong>Go</strong> <img src="nextarrow.gif" alt="Next page" /> </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.
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.