Push buttons, input with type="button", and input with type="submit", include the value attribute, which is the text that is placed on the button, like "submit, "search," or "go." That text is immediately available to assistive technology.
When a user tabs to this kind of a push button, the button gets focus (a dotted focus rectangle surrounds the button text). And when the button has focus, the screen reader or talking browser knows to announce the text on the button, the value of the value attribute. In the example above, this value is "go." As a web developer, if you didn't put a text string on the submit button (no value attribute) then the browser will fill in text, either "Submit" or "Submit Query" depending on the browser.
The special case of input with type="button" is kind of fun. If you don't provide a value for this button, no one, blind or sighted user will know what you intend:
That is not likely to be a mistake you will make.
Image button accessibility is provided by adding alternative text as explained for images and image maps in an earlier lesson. The input element with type="image" must include the src attribute for the image source and alt attribute for the alternative text.
Remember, if the button has text, use that text for the alt-text. Doing otherwise is not a critical error or violation of the guidelines, but it can cause confusion. For example, the button below from target.com had alt="Proceed to Checkout" at the time that NFB brought suit against the Target Corporation. Imagine a telephone conversation between a sighted support person and a blind customer, with the support person saying "click on the Continue Checkout button" and the customer responding, "There is no Continue Checkout button" because the screen reader reads it as "Proceed to Checkout."
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.