For a form to be accessible, it should be usable by people who use a screen reader or a keyboard to navigate.

  1. A user should be able to complete a form using only a keyboard, including interacting with dialog boxes
  2. Form fields should be labeled descriptively
  3. Tab order should be logical

In order to edit a form in Acrobat, open the form editor tool. In Acrobat DC go to Tools > Prepare Form. In earlier versions of Acrobat, go to Tools > Forms > Edit.

Acrobat DC Prepare Form option in toolbar

Acrobat Form Field Labels

Once the form field editor is open, existing form fields will be highlighted within the document. The form field labels will appear inside fields. Check these labels to make sure they are descriptive. In the example below, you can see that the Student Name field matches the label.

Acrobat form field label view

If the label does not match, double-click on the label to edit it. In the Text Field Properties dialog box that appears, edit the Name field.

Add form field label in the Name field of the Text Field Properties dialog

Acrobat Form Tab Order

Once your labels are correct, check the tab order. Keyboard and screen reader users will use the Tab key to jump from one field to the next, and this needs to happen in a logical order. To see the tab order, click on the drop-down menu icon next to "Fields" in the Form toolbar (Acrobat DC). Select Show Tab Numbers.

Acrobat Prepare Forms drop-down menu to show tab numbers

Now you should see numbers inside of each form field that tell you the tab order. In the screen shot below, the logical order for the check boxes is mp3 (6), PDF (7), then Daisy (8). With the current incorrect tab order, it will be read as mp3, Daisy, then PDF.

Acrobat form field labels with incorrect tab order

To fix the tab order, select the PDF label on the form. This will also select the correct label in the toolbar on the right. In the toolbar, select and drag "PDF" upwards into the correct position between mp3 and Daisy.

Acrobat form field label sidebar showing how to drag into the correct position for tab order

Web Forms

Online forms can be made more navigable by organizing related elements using the <fieldset> and <legend> tags. It is also important to clarify the relationship between labels and form elements using the <label> tag and its for attribute.

Consider the following when working with forms:

  1. Make sure form elements can be navigated from the keyboard. The Tab key should move focus sequentially through the form.
  2. Add labels to form elements, and use the <label> tag’s for attribute to point to the ID of the associated form element.
    • The for attribute keeps labels and form elements linked, regardless of where they appear on the page.
      • Example using the form <input> element: <label for="emailfield">Your email address:</label><input name="email" type="text" id="emailfield" size="45" maxlength="60"/>
    • Screen reader users typically use the TAB key to jump through form fields. Associated form labels are read for each field when the user navigates to it. Be sure to include cues within associated labels, as the screen reader will skip any non-label text.
  3. Group related form elements using a combination of <fieldset> and <legend> tags, which facilitate both visual comprehension and tabbing navigation for non-visual users.
  4. No matter how well you design your forms, some users may not be able to use them. Always provide a contact number or address for requesting a paper copy.