Accessible Forms in Acrobat
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:
- Add the correct form fields to the PDF.
- Include an accessible label that describes the purpose of the form control to a screen reader. This is provided through the Tooltip.
- Add tags to the form fields.
- Check (and if necessary, repair) the tab order.
This article is written for Acrobat DC Pro, but most of the instructions also apply to Acrobat XI Pro. The group of tools found inin Acrobat DC can be found under 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 to do this:
- Use the Make Accessible Wizard outlined in the previous page of this article.
- In the
In Acrobat XI: , then select .
tab, find and add to the Tools Pane. When you run this tool, it will prompt you to select a file.
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 thetools, 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).
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 thetool group open, a form field and choose . Make sure the text in the conveys all the information a screen reader needs to correctly complete the field, and correct it if it does not.
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.
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.
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.
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.
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 (a group of options where only one option can be selected) require additional information to ensure accessibility. The following information must be provided in thedialog:
nameattribute for HTML radio buttons. It also allows a keyboard user to select an option within the group using the arrow keys.
must be the same for every radio button within the group. This groups the options together, just like the
<legend>elements in HTML. Because this information will be read for each option in the group, it should be succinct.
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
- Under the
tab, the value must match the text that appears next to each radio button.
If this information is presented correctly, both theand values will be read to a screen reader.
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.
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.
To add text to a button, open thedialog for the button, select the tab, and then enter the appropriate text in the 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.
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.
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 is checked (it should be by default), and check .
- Numbers will appear within each form field outlining the tab order. If these numbers do not match the visual reading order, return to the 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 .
- Then drag and drop the options in the panel to change the tab order. If you reorder forms, recheck the accessibility and repeat the steps in the previous section if necessary.
- 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).