How-Tos and Demos

Accessible Forms

Example: Graphical buttons

This example shows two nearly identical buttons that might be used to submit a form (such as a search). Screen readers will identify both of them as "Go" buttons. The first one was created using the <input> element, and the second uses the <button> element.

 

How to do it

Code example for buttons using <input> elements of type="button" and <button> elements

 

Rationale

Forms that include graphical buttons have to meet accessibility requirements for both forms and images. In fact, when forms include graphical buttons, it's impossible to satisfy the requirements for accessible forms without making sure the graphical buttons also meet the standards for images.

In other words, images used as buttons must have alt text. For buttons created using <input> elements of type=image, the alt attribute will be part of the <input> element, along with the src attribute indicating the filename for the image. For images placed inside the <button> element, the alt, src, width, and height attributes are placed inside the <img>element. Screen readers will then speak the alt text just as they do on other images.

Forms should not include graphical links created with the <a> element. Technically speaking, such graphical links are not true form controls, so some screen readers (including JAWS) will skip over these elements when people use the screen reader's forms commands. In addition, using <input> and <button> elements allows greater control over visual presentation through the use of style sheets.

 

How it sounds with the JAWS screen reader

Listen to JAWS reading this form

 

JAWS transcript

[Go button]

 

Applicable Accessibility Standards and Guidelines

• Section 508 Requirements and WCAG 1.0 Checkpoints for Forms
• Section 508 Requirements and WCAG 1.0 Checkpoints for Graphics