How-Tos and Demos

Accessible Forms

Example: Buttons Using <input> elements of type="button" and <button> elements

Here are two visually 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.

Go

 

How to do it

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

 

Rationale

Buttons created with the <input> element have implicit text labels that are taken from their value attribute. Screen readers will speak this text, and therefore no additional mark-up is needed. Text labels for the <button> element come from the text between the start and end tags (or from the alt attribute of an image element used as a button.

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