PDF Accessibility
Accessible Forms in Acrobat XI

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. This can be accomplished by creating a PDF form from scratch within Acrobat or by adding form fields to an existing 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

While many of the principles in this article can be applied to older versions of Acrobat Pro, this article is written specifically for users of Acrobat XI Professional.

1. Add Form Fields

Just as "tags" are essential to the accessibility of a PDF file, true form fields and buttons are essential to the accessibility of a PDF form. This allows the form to be filled out and submitted within Adobe Reader.

Note

You can easily check to see if a PDF form has the necessary fields by opening the file in Acrobat or Adobe Reader. If the Highlight Existing Field option is visible in a purple bar at the top of the page, this means the PDF already has form fields.

Creating PDF forms from scratch

FormsCentral

When creating a new form within Acrobat XI Professional, Adobe will prompt you to use another application called FormsCentral. It can be opened as a standalone application or by selecting File > Create > Create Form from the main menu in Acrobat.

Note
  • While FormsCentral can be used to create accessible PDF forms, the interface itself is not accessible to keyboard or screen reader users.
  • An online version of FormsCentral is available as a subscription service as well. It provides the same functionality as the desktop version and also includes the ability to distribute and analyze forms online. See Adobe's site for additional information about this service.

New form fields can be added to the page with the Insert menu in the upper-right part of the screen or with the Add Item menu that is always visible at the end of the document.

Screenshot of the 'Add Item' menu in FormsCentral

This menu provides options for all common types of form fields and also includes an option for Likert-type rating scales. Most of these options automatically add the correct accessibility information, but a few options, such as groups of checkboxes and Likert scales, may need some additional information (more on this below).

Important

There are some accessibility limitations in FormsCentral including lack of support for headings and alternative text. These will need to be addressed in Acrobat. To edit a PDF created in FormsCentral within Acrobat, you must: open the PDF in Acrobat, select Save a Copy (not Save As), close the original file, and open the copy.

Form submission buttons can only be added in Acrobat Pro or with FormsCentral online.

LiveCycle Designer

LiveCycle Designer is another tool that can be used to create PDF forms. Although it has a number of features to facilitate the creation of accessible PDF forms (possibly better than the features in Acrobat), be aware of a few important limitations:

  • LiveCycle Designer was packaged with Acrobat X Professional and earlier, but it is no longer included with Acrobat. It must now be purchased separately, meaning it is likely that many people will not have access to this program into the future.
  • It is a Windows-only program.
  • PDF forms created in LiveCycle Designer cannot be edited in Acrobat. While both programs produce PDF files, they are not compatible with each other.

For more information about creating accessible PDF forms in LiveCycle Designer, visit Adobe's LiveCycle accessibility page.

Adding form fields to an existing PDF

Many PDF forms are created in other programs such as Adobe InDesign or MS Word. Form labels must be added to these fields within Acrobat Professional before they can be filled out electronically. 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 to do this:

  • Use the Make Accessible Wizard outlined in the previous page of this article. This is probably the easiest approach, and something you should be doing anyway.
  • Select Tools from the right-hand column, then Forms > Create. A dialog will open. Select From Existing Document > Current Document, and Acrobat will automatically add form fields to the file.

This option can also be accessed in the Accessibility menu, but all three options will trigger the same process.

Adding and removing form fields

If a form field was not detected, select the Forms Panel > Edit > Add New Field to add a field manually. A menu of available form fields will appear.

screenshot

Select the desired form field type and drag it to the correct place on the page. Ensure the new form field covers the existing space in the file (e.g., a new radio button should cover the circle that already appears on the page).

screenshot of a radio button being placed on the page

Items that are not true 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 incorrect form fields, select Tools in the right-hand column > Forms > Edit Forms. Right Click on the unnecessary form field and select Delete.

screenshot

2. Ensure Every Form Field Has a Descriptive Tooltip

Regardless of the method used to add form fields to a PDF, the next step is to ensure that the field has correct descriptive text.

When a screen reader user navigates to a form field or button, its contents must be described to the screen reader. This descriptive text is known by several different terms including "name" in WCAG 2.0, "accessible name" in WAI-ARIA, and usually just "label" in HTML. In Adobe documentation, and in this article, it will be called "accessible label," or simply, "label." There are a number of ways to provide this accessible label in a webpage (<label>, title, aria-labelledby, etc.). In a PDF, the only reliable way to provide this information is with the Tooltip property within a form field. With the exception of radio buttons (described below), which require some additional work, the rule is simple:

Important

Any information that a screen reader user needs to fill in a form field must be included in the field's Tooltip.

Editing the Tooltip

To check or edit the Tooltip of an existing form field, select the Forms Panel > Edit. Then right click the field and select Properties. The Properties dialog will appear. Ensure the Tooltip conveys all the information that a screen reader user would need to correctly complete the field.

screenshot of the text field properties dialog with a Tooltip of 'Last Name'

It is usually easiest to check all the Tooltip values at the same time by leaving this Properties window open in an empty part of the screen and clicking on each of the form fields.

Important

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

To edit the Tooltip in FormsCentral, select the form field and a Field Properties option will appear on the right-hand side of the page. Select Include Help Text checkbox and then enter the new expanded Tooltip in the field that appears.

Screenshot of the Field Properties Dialog. 'Include Help Text' is selected and the help text field reads 'First Name (required)'

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. Placeholder text (called Default Value in in the Properties window) will be read by a screen reader in addition to the Tooltip, but it should not be used in place of the Tooltip and should not include essential information. It is usually best to leave it blank.

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:

  • The Name must be the same for all of the radio buttons 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.
  • The Tooltip value should also be the same for all radio buttons within 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.
  • Under the Options tab, the Radio Button Choice value must match the text that appears next to each radio button.
    screenshot

If these three fields contain the correct information, both the Tooltip and Radio Button Choice values will be read to a screen reader.

Note

FormsCentral includes Likert scale options (e.g., Strongly Agree-Strongly Disagree). The Tooltips for these options are not correct and will need to be repaired.

Checkbox

Unfortunately, checkboxes cannot be grouped together in the same way as radio buttons. This means that the description of the group of checkboxes and the individual checkbox should be presented in the Tooltip.

screenshot

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.

Note
  • This occurs for fields that are detected and created automatically by Acrobat as well as any fields added manually. Forms created from scratch in FormsCentral do not have this problem.
  • This process should only be implemented after all form fields are present and have the appropriate Tooltips.

Follow these steps to add correctly-ordered tags to a form:

  1. If you are still editing forms, select Close Form Editing (screenshot) in the upper-right corner of the screen.
  2. Open the Accessibility panel. Select the Add Tags to Form Fields option (screenshot). This should add the necessary tags to the PDF, but it does not behave correctly, so additional steps are required to add the correct tags. If this option is disabled (screenshot), skip this step.
  3. Open the Tags pane on the left side of the window, select the Options menu (screenshot), and then select Find.
    screenshot
    In the Find Element dialog, select Unmarked Annotations from the dropdown menu, select the Search Document radio button, and then select the Find button.
    screenshot
    This should highlight the first untagged form field on the page. Select the Tag Element button to open a new dialog. In this new dialog, choose Form from the dropdown list (a Title is optional), and OK.
    screenshot
    Keep adding tags to form fields until Acrobat indicates that the search is complete.
  4. Return to the Accessibility panel and open the Touch Up Reading Order (TURO) tool. Ensure the Page content order radio button is selected, uncheck Display like elements in a single block, and select Show Order Panel.
    screenshot
  5. Use the TURO tool and Order panel together to ensure the reading order of every form field and label is correct. For example, the reading order of this group of radio buttons is incorrect and the text labels are grouped into 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.
    Using the TURO tool to create paragraph containers and the Order Panel reorder content, the final result would look something like this:
    Screenshot of the repaired radio buttons. The reading order number for the first radio button is now 24.
    Note: The bullets from the original MS Word document were moved to the background to further simplify this view. This can be accomplished by selecting the desired container and either pressing Delete in the Order Panel or the Background button in the TURO tool.
  6. 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. This would probably be a good time to do a final check for other accessibility issues as well.
    Screenshot of the accessibility checker results panel. All forms are marked passed
    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, return to the Forms panel and ensure all fields have an appropriate Tooltip.

4. Check and Repair the Tab Order

Once the form fields are labeled correctly, and the reading order has been corrected, the tab order of the form fields should be reviewed. To review the tab order, select the Forms Panel > Edit. The bottom half of this sidebar will now display a list of all the form fields in the file. Within this Fields section, select the Tab Order menu. Ensure Order Tabs by Structure and Show Tab Numbers are checked.

screenshot

Numbers will appear within each form field outlining the tab order.

Screenshot showing the tab order three form fields. Tab order is 2,1,3.

If these numbers do not match the visual reading order, return to the Order Panel and TURO tool as outlined in the previous section and ensure the reading order is logical. This is always preferable to changing the tab order manually. If this does not work for some reason, return to the Edit Fields menu and select Tab Order > and check Order Tabs Manually option.

screenshot

Then drag and drop the options in the Fields panel to change the tab order.

screenshot

Manually reordering the tab order can delete the tag information for the reordered form. 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 before the form begins and not between form fields.
  • 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.