Accessibility in Forms

Let’s create accessible PDF forms.

Forms need to be made accessible due to the increasing use of technology; most forms are provided in PDF, HTML, Microsoft Word(R), Google Docs, etc. The PDF forms are most commonly used. If the forms are not accessible, people using screen readers or keyboards will not fill them. PDF forms are different from HTML forms. In HTML forms, you need to associate the label text with the input field. Label text is not possible to add in PDF forms, but Adobe offers a way around that. PDF forms have some limitations. It is recommended to use Google forms and HTML forms if possible. To create PDF forms and make them accessible, you will need the Adobe Acrobat DC(R) to access the prepare form tool.

After completing this training guide you will be able to:

  1. Add form fields to make accessible forms
  2. Write proper tooltips to improve accessibility
  3. Learn about tags in accessible forms
  4. Set the correct tab order
  5. Grasp how the document properties create a solid foundation
  6. Perform accessibility tests

Add Form Fields to Make Accessible Forms


The Adobe Acrobat DC’s Prepare Form tool enables you to add form fields. If you do not see the tool in the tool list on the right side of the screen, find it in the following ways:

  • Click on the More Tools option.
    More tools option
    Scroll down in the tool list until you see the Prepare Form tool.
    Forms and signatures tools
    Click on the Add button below it.
  • Type “Prepare Form” in the Search tool field on the right side of the document window to find it another way.
    Search tool option
    Prepare form tool
    When you find this tool, click on Prepare Form. The following window will appear:
    Form requires signatures

If the document requires signatures (Tip: this signature should be required only when absolutely necessary), click the checkbox that says, “This document requires signatures" and click on the Start button. Checking this prompts the program to populate some or all of your form fields. You may need to add fields manually if you’ve created a complex form. 

Learn how to create form fields.

Write proper tooltips to improve accessibility


Tooltips in PDF form are like alt text to images. Writing descriptive tooltips is critical to screen readers. Write clear and concise tooltips. For example, a good example of a tooltip for the field below would be “Mother’s first name.” Your tooltip text should be fewer than 50 characters.

Textbox tooltip

 

Tooltips on form fields such as checkboxes and radio buttons can be tricky. For checkboxes, include the number of total checkboxes you have. In the example below there are 4.

Checkbox example

For example, for the checkboxes above a good example of tooltips would be:

FieldTooltip
None English conversation level: None (1 of 4)
Beginner Beginner (2 of 4)
Intermediate Intermediate (3 of 4)
Advanced Advanced (4 of 4)

When writing tooltips for radio buttons, include the question. For example, for the field below, the tooltip for both Yes and No radio buttons would be “Do you plan to drive?”. However, you do not need to include “yes” or “no” in the tooltip because, for the radio buttons, the screen reader announces the options. For example, for the Yes radio button in the field below, the NVDA screen reader announces, “ Do you plan to drive? Yes, radio button not checked”.

Radio button example

Right-click on the field and select Properties > General to access the Tooltips.

Tooltip example

What are tags in accessible forms?


Tags in a form document are similar to HTML tags, used by assistive technologies to identify the content that is important to read. For example, headings are added to heading tags (<h>), form fields are added to form tags (<form>), paragraphs are added to paragraph tags (<p>), etc.

  • Tags define the order of the content in the document. The screen reader reads the content by its tagged order. If you do not add correct tags, screen readers will not read them correctly, and it can be very confusing. For example, if the form field is tagged in a paragraph tag instead of a form tag, the screen reader will not announce it is a form field, and the user will not be able to fill it.

If you do not tag the content, the screen reader will not read that content. Unfortunately, creating form fields in the PDF document does not create form tags. New steps are required to create form tags for all the fields. Add the tags in PDF using Acrobat DC, or use PDF remediation software.

Set the correct tab order


Tab order is the order in which the form fields are navigated when the user presses the TAB key. Setting the correct tab order is critical for screen readers to work properly; otherwise, it will confuse screen reader users and users using only the keyboard for navigation. Acrobat has a feature that enables you to set the tab order. On the right side, click on the dropdown button beside the text “Fields.”

Tab order list

You should see the following options:

Order tabs options

 

Order Tabs

  • By Structure: This option automatically sets the tab order. For complex forms, this option may not yield desired tab order. In that case, you should choose the “Order Tabs Manually” option.
  • By Row: This option sets the tab order left to right.
  • By Column: This option sets the tab order top to bottom.
  • Manually: This option enables you to set the tab order manually by clicking and dragging fields in the list of fields on the right side.

    Tab order example

We recommend checking the order by pressing the TAB key on the keyboard to navigate the form fields. Then, fix the correct order of the form fields by using the steps above.

Additional Features


Adobe offers additional features other than form fields to add content to the form.

Text: Use this feature to add text to the document.

Add text option

Button: Create a button using this feature. Once you have added the button, right-click on it to access Properties > Actions to add JavaScript code to define the button’s functionality.

Add button option

Picture: Use this feature to add an image placeholder that will enable the user to upload a picture in the document.

Add image option

Barcode: This feature enables you to add a barcode to the document.

Add barcode option

Document Properties create a solid foundation


Consider the document properties - title and language while making your document accessible. The document title is different from the file name. If you do not set a document title, the title defaults to the file name, which is not always readable. For example, without a title for the document below the screen reader will use the file name for the title and announce the title as “file 1 dot pdf”.

Bad file name example

File name in Adobe

Set the document language for the screen readers to identify the language. For example, if your document is in Spanish, and you do not select the correct document language, the screen reader will not read the document correctly because it will not pronounce words correctly. Access the document properties panel by clicking File > Properties. To add the title:

  1. Go to File > Properties
  2. Add the Title

    Document title setting

To change the language:

  1. Go to the Advanced tab in the Properties panel.
  2. Correct or add the document language.

    Document language setting

Accessibility Testing


Learn how to perform accessibility tests on your document.