WebAIM - Web Accessibility In Mind

PDF Accessibility
Accessible Forms in Acrobat

Overview

Compared to HTML, PDF forms have some inherent accessibility limitations. There is no real way to associate the visible text label with the form field, but there is a way to provide a text description that will be read to a screen reader while navigating through the PDF. In addition to the accessibility principles outlined in the previous page of this article, the following four steps are required to ensure the accessibility of a PDF form:

  1. Add the correct form fields to the PDF.
  2. Include an accessible label that describes the purpose of the form control to a screen reader. This is provided through the Tooltip.
  3. Add tags to the form fields.
  4. Check (and if necessary, repair) the tab order.
Note

This article is written for Acrobat DC Pro, but most of the instructions also apply to Acrobat XI Pro. The group of tools found in Prepare Form in Acrobat DC can be found under Forms > Edit Forms in Acrobat XI.

1. Add Form Fields

Most PDF forms start out as Microsoft Word files or other electronic documents with empty spaces for form fields. Actual form fields must be added within Acrobat Professional before the file can be filled out electronically.

Add form fields automatically

With most files, the easiest way to add form fields is to have Acrobat detect and label these fields automatically. There are two main ways yto do this:

  1. Use the Make Accessible Wizard outlined in the previous page of this article.
  2. In the Tools tab, find and add Prepare Form to the Tools Pane. When you run this tool, it will prompt you to select a file.
    In Acrobat XI: Tools pane > Forms > Create, then select From Existing Document > Current Document.

Form fields can sometimes be incorrectly added to the PDF by Acrobat. This is especially common for cells within a data table or lines that are used to separate page sections. To remove a form control, click on it and press Delete.

Add form fields manually

To add a form control manually, open the Prepare Form tools, and click on the desired form field type in the toolbar above your PDF.

Then drag the field to the correct place on the page. Ensure the new form field covers the existing space (e.g., a new radio button should cover the circle that already appears on the page).

Screenshot of two radio buttons that neatly cover the original circles

Acrobat will prompt you to add a field name. A descriptive name will probably be helpful when reviewing the form data later, but the name will not be read by a screen reader.

2. Ensure Every Form Field Has a Descriptive Tooltip

When a screen reader user navigates to a form field, its contents must be described to a screen reader user. This descriptive text is typically called a "label" because the <label> tag is the main way to accomplish this in a webpage. In a PDF, this information is provided through the Tooltip (with the exception of radio buttons, which is explained later).

Review or repair the Tooltip

When Acrobat adds form fields automatically, it also automatically adds a Name and Tooltip to each field based on text near the field. However, you should still review each Tooltip. If you added the fields manually, the Tooltip will be blank.

With the Prepare Form tool group open, right-click a form field and choose Properties. Make sure the text in the Tooltip conveys all the information a screen reader needs to correctly complete the field, and correct it if it does not.

Sceenshot of the Text Field Properties dialog. The tooltip field has text of First Name

If you are checking multiple Tooltip values, leave the Properties window open in an empty part of the screen and click on each form field.

Important

Fields that are marked "Required" within Acrobat are not identified by a screen reader. Identify required fields in the Tooltip.

Form field types

The following section provides additional details for specific types of form fields.

Text field

In most forms, the most common field type is a text field. There are options within Acrobat Pro to make this single or multi-line.

Dropdown list

These menus can be navigated with the arrow keys or by selecting the first letter of the desired option. If an option is selected by default, it will be read by a screen reader in addition to the Tooltip.

List box

A list box looks like an expanded dropdown list and allows the user to select multiple options by holding down the Shift or Control key while selecting an option with a mouse. List boxes introduce accessibility issues for keyboard users and usability issues for everyone. Use a group of checkboxes instead.

Radio buttons

Radio buttons (a group of options where only one option can be selected) require additional information to ensure accessibility. The following information must be provided in the Properties dialog:

  1. The Name must be the same for every radio button within the group. This groups the options together, just like the name attribute for HTML radio buttons. It also allows a keyboard user to select an option within the group using the arrow keys.
  2. The Tooltip value should also be the same for every radio button in the group. This provides a shared label for each of the options, like the <fieldset> and <legend> elements in HTML. Because this information will be read for each option in the group, it should be succinct.
    Radio Button Properties dialog. The Name field is 'YesNo' and the Tooltip is'Do you like radio buttons?
  3. Under the Options tab, the Radio Button Choice value must match the text that appears next to each radio button.
    The Radio button choice value is 'Yes'

If this information is presented correctly, both the Tooltip and Radio Button Choice values will be read to a screen reader.

Checkbox

Unfortunately, checkboxes cannot be grouped together in the same way as radio buttons. This means that the description of the group of checkboxes (if present) and the description of the checkbox itself should be defined in the Tooltip.

Note

These principles for radio buttons and checkboxes must be balanced with the need for a succinct Tooltip. For example, descriptive text that is merely informative (e.g., "Check all that apply") should probably not be added to each Tooltip. A Tooltip that is extremely long could possibly be added to the first checkbox or radio button with a more succinct Tooltip added to other options. Use your best judgment.

Button

To add text to a button, open the Properties dialog for the button, select the Options tab, and then enter the appropriate text in the Label option. If a button does not have a Tooltip, the text that appears on the button will be read by a screen reader, but if a Tooltip is provided it will override the button text. While adding a Tooltip to a button does not appear to be necessary, the accessibility checker will flag a button without a Tooltip as an error, so it may be best to provide a Tooltip for the button that is identical to the button text.

3. Add Tags to Form Fields

There is a significant bug in Acrobat—adding form fields to the page does not create the appropriate form tags. If this is not addressed, form fields will not be identified by a screen reader while reading through the file. Unfortunately, fixing this problem does take some time and effort. Once you are done adding the necessary fields and tooltips, follow these steps to add correctly-ordered tags to a form:

  1. Select the Close button in the upper-right corner of the screen.
  2. Open the Accessibility tools and choose the Autotag Form Fields option (skip this step if the option is disabled).
  3. Open the Tags pane on the left side of the window, select the Options menu (screenshot) > Find. In the Find Element dialog, choose Unmarked Annotations from the dropdown menu, select the Search Document radio button, and then click the Find button.

    This should highlight the first untagged form field on the page. Select the Tag Element button to open a new dialog. In the Type dropdown list, choose Form, and then OK.

    Keep adding tags to form fields until Acrobat indicates that the search is complete.
  4. Open the Reading Order tool. Ensure the Page content order radio button is selected and uncheck Display like elements in a single block.

    Then check to see if each text label is in its own box. For example, these "Yes" and "No" labels are in a single box, meaning they also share a single tag.
    Screenshot displaying two radio buttons with text labels. The reading order of the test that precedes the button is 23, but the reading order number for the first button is 34.
    If this occurs, drag a box around each label and press the Text button to put it in its own <P> tag. This would also be a good time to fix any other tagging issues with your PDF.
  5. Select the Show Order Panel button and repair the reading order.
  6. Confirm the reading order is correct in the Tags pane and repair if necessary.
    Screenshot of the repaired radio buttons. The reading order number for the first radio button is now 24.
  7. Once the reading order of the entire document is correct, select Full Check from the Accessibility panel and ensure there are no issues related to forms. If Tagged form fields - Failed appears, that means there are still untagged fields. You will need to repeat the above process. If Field descriptions - Failed appears, click on the error to see where the issue occurs, and repeat the process for adding a descriptive Tooltip.

4. Check and Repair the Tab Order

Once the form fields are labeled correctly, and the structure order has been corrected, the keyboard navigation order of the form fields should be correct. But it is still a good idea to double-check this, especially if you are relatively new to forms in PDFs. The easiest and most accurate way to test the keyboard navigation order is to save and re-open, and then use the Tab key to navigate the form. Another option is to review the tab order within Acrobat.

  1. Select Prepare Form and the bottom part of this pane will display a list of all the form fields in the PDF. Next to the Word "Fields" is a dropdown menu. Click this menu and make sure and make sure Order Tabs by Structure is checked (it should be by default), and check Show Tab Numbers.
  2. Numbers will appear within each form field outlining the tab order. If these numbers do not match the visual reading order, return to the Reading Order tool and Tags pane and confirm that reading order is logical. There is an option to change the tab order of form fields manually, but you should always be able to fix the tab order by creating a logical structure order. If this is not working for some reason, return to the dropdown menu next to the word change "Order Tabs by Structure" to Order Tabs Manually.
  3. Then drag and drop the options in the Fields panel to change the tab order. If you reorder forms, recheck the accessibility and repeat the steps in the previous section if necessary.

Other Principles

  • When a screen reader enters a form, it usually switches to a different reading mode, often called "forms mode." While in forms mode, the screen reader skips over content that is not a form control or link. For this reason, it is best to place important information or instructions that apply to the whole form before the first form field when possible.
  • Form error messages (e.g., an email field does not include an email address) are presented in a popup dialog. This dialog is accessible to screen reader users. If these are being used, ensure the error message provides the information that a user needs to find and fix the error.
  • Not every PDF form requires a button for submission. Many forms are designed to be filled out online and then printed and submitted in person or by mail.
  • LiveCycle Designer is an Adobe tool that can be used to create PDF forms. Although it has good accessibility features of its own, PDF forms created in LiveCycle Designer cannot be edited in Acrobat (or vice-versa).