PDF Form Accessibility

To create an accessible PDF Form, always start with preparing your form first!  To prepare the form, you must first understand how to create fillable forms in Adobe Acrobat. Before continuing with this tutorial, review Adobe's guide on creating fillable PDF forms first.

• AutoForms

  To create a fillable PDF, start by using Adobe Acrobat's form auto detect tool. This tool will scan a PDF document and insert form fields in areas where placeholder boxes are located.

  

  NOTE: although this tool is useful, DO NOT rely on Autoforms to create your entire PDF form.  This tool is not perfect and may often miss areas that require form fields or may add form fields in areas where forms are not needed. 

   

• Form Field Name

  All form field require a UNIQUE 'Name' associated with it. The form field 'Name' can be developed using the Auto-forms tool or by going to the form field properties. The form field name is essential to ensure a form field can be tagged with accessibility markup in later steps. 

  

   

• Tooltips

  To create an accessible PDF form, tooltips are critical. Screen reader users rely on tooltips to understand and fill out a form. Therefore, tooltips must be as descriptive as possible to ensure a screen reader user can understand the form field and accurately complete a form.

  Bad Tooltips vs. Good Tooltips

  When adding a form field, by default, Adobe Acrobat may either leave a tooltip blank or may add the form field ‘Name' as the tooltip. However, the 'Name' and the tooltip should NEVER be the same. The tooltip must be an instructional sentence or statement.

  

   

  

  Tooltips for Checkboxes

  The tooltips for all checkboxes need to explicitly describe what selecting the checkbox will entail. Unlike radio buttons, dropdowns, and lists boxes, checkboxes in Adobe Acrobat cannot be grouped. As a result, the tooltip for a checkbox must provide as much information as necessary to ensure a screen reader user understands they are selecting.

  In the example images below, various checkboxes are present regarding training types and the user must check all the training's they are interested in attending. 

  

  The image below shows an example of a bad tooltip for one of the checkbox items. In this example, the tooltip only states ‘Select Intro to Accessibility’. It does not tell the reader what selecting this checkbox entails so the reader will not know that by selecting this checkbox they will be requesting a training for ‘Intro to Accessibility’.  

  

  The image below is an example of a good tooltip for the same checkbox item. In this example the tooltip says ‘I would like an Intro to Accessibility Training’. This tooltip clearly lets a user know that by selecting this checkbox they will be requesting a specific training.  

  

• Required Fields

  Setting required fields in a form is often necessary in order to process information. The following steps must be taken to ensure required fields are identified to screen reader users.

  1. Asterisk: First, the universal design best practices for all forms (web forms, document forms, printed form, etc.) is to include a required field indicator. An asterisk (*) is generally placed next to each required field and is associated with the phrase “* Indicates required field”. This phrase is often located at the top of a document to alert users that fields are present.  

     

  2. Required Field checkbox: For a PDF form, when making a form field required, the ‘required’ checkbox must be selected in the form properties. When this checkbox is selected the form field will become bold in a red box and the screen reader user will be alerted that the field is required. 

     

  3. Input “Required” status in tooltip: Unfortunately, the ‘required’ field checkbox may not always alert a screen reader user that a field is required. As a result, best practice is to incorporate the words ‘required’ in the tooltip.

     

   

• Buttons

  If you are adding a button to a PDF form, it is important to first understand how buttons work in a PDF. Buttons in a PDF document are ONLY functional within Adobe applications including Adobe Acrobat Professional and Adobe Acrobat Reader. If the PDF form is opened within a browser, the button DOES NOT work!

  

  Therefore, if buttons are present in a PDF form, instructions must be included that inform users to completed the form within an Adobe application and not the browser. As an example, the following statement can be used:

  "To fill out and submit the form, please save the form to your desktop and open the form using Adobe Acrobat Professional or Adobe Acrobat Reader. DO NOT complete the form within your web browser; your data will not be saved and your form will not be submitted."

   

• Form Field Appearance

  It is important to conduct a visual check of your PDF form to ensure the data is easy to see and comprehend.

  • Form Color: When adding a color to a form field box, the color must be clear enough so that the text can be easily read.

  

  • Button Color: buttons in a PDF form must a light color to ensure that the visible keyboard focus can be seen when tabbing.

  

  • Form Borders: Form borders are optional; however, we recommend including a border color to make it easier for users to see what areas need to be filled out.

• Tab Order

  The tab order is the order in which a user can navigate through a form using the "tab" key only. The tab order must always follow the structure and visual design of the page. To control the tab order in a PDF form, the “fields” side panel must be opened. Within the “fields” panel you can drag and drop fields to the desired location.   

  

  Within the ‘fields” panel you can also view the numerical order for each form field by opening the “field” options dropdown and selecting “Show Tab Numbers”. This will result in numbers to appear next to each field which will make it easier to determine the fields location in the tab order.  

  

Once the form is prepared, the next step is to add the PDF accessibility markup. This step requires an understanding of PDF accessibility principles and best practices. Before continuing with this part, review UDC’s PDF accessibility tutorial to learn about creating accessible PDF documents.

• Remove Placeholder Boxes

  When creating a fillable PDF form, authors will often add placeholder boxes to define where they intend to place a form field. These boxes are not the same as a form field border because they are not associated with the form.  Additionally, when tagging the document for accessibility, placeholder boxes often interfere and make it difficult to tag the form fields. As a result, we strongly encourage removing all placeholder boxes.

  

  How to Remove Placeholder Boxes

  The placeholder boxes can be removed in the content panel. The content panel contains all the information about a document.

  

  As you navigate through the list of items in the content panel, areas that are associated will highlight in the document. Once the target item is highlighted you can remove it by the document by simply selecting delete.

  

  The item will then be deleted from the document.

  

  If an author chooses to keep the placeholder boxes, they will need to ensure that these boxes are tagged as ‘decorative/artifact’ boxes. Go to the next step for more information. 

• Adding Tags

  Tagging text and images in a PDF requires knowledge of PDF accessibility principles. Review UDC’s PDF accessibility tutorial to learn more about tagging a document.

  PDF Forms Require Tags to be Separated! 

  As a rule of thumb when tagging text in a PDF form, always make sure to separate the tags. Form fields often expand horizontally and as a result, all the text in a PDF form that is associated should be its own tag.

  For example, in the image below, a radio button group is present called ‘Training Type’ with the radio button choices ‘Individual Training’ and ‘Group Training’. In the image, all the text is grouped into one paragraph tag which will result in the screen reader to read the text as ‘Training Type Individual Training Group Training’. This will make it difficult for a screen reader user to respond to the question.  Instead, the text must be tagged with individual paragraph tags so that the screen reader can properly read the information and associate the form field tags correctly.

  

• Tagging Form Fields

  In addition to tagging the text and images, the form fields must also be tagged. To tag a form field, follow the steps listed below:

  1. Open the tags panel and go to the options icon

  2. Go to 'Find'

     

  3. The Find Element window will open and under the Find dropdown select 'Unmarked annotations'.  

     

  4. Select the button 'Find'. This should result in the first form field to be highlighted.

     

  5. Once the first form field is highlighted the 'Tag Element' button is enabled. Select the button.  

     

  6. The New Tag window will open and under the Type dropdown, select 'Form'.

     

  7. Then select the 'OK' button.  

     

  8. Repeat steps 5, 6 and 7 until the Find Complete window appears.

     

  9. To verify all form fields are properly tagged, go to the Tag’s panel and verify the 'OBJR' label is associated with each form field.

     

   

• Organizing the Tag Tree

  Once all the form and document tags are in place, the next step is to organize the tags within the tag tree. The tags tree contains all the tags in the document and it must be organized to ensure the document is read correctly by a screen reader. To move items around in the tags tree, simply drag them to the desired location.   

  

   

• Fix the Reading Order

  The document reading order must always be organized so that a screen reader will read a document correctly.  Organizing the reading order is done via the ‘Order’ panel. This is often the most challenging step in creating a fillable PDF form because the form fields will often interfere with the organization while dragging items and cause the file to crash.

  

  Tips for Organizing the Order

  • Fix the tag tree first! With PDF Forms, the tag tree and reading order will often align so if the tag tree is organized correctly, the reading order will match the tag tree order.
  • Always Save as you go! While dragging items in the reading order ALWAYS save after every step. If the file crashes as you drag items, if the file is saved constantly, you will be able to revert back to the previous step.

Once the order is fixed, the PDF should undergo a series of accessibility checks to ensure the it meets all accessibility requirements and best practices. There are several automated, manual, and visual checks to conduct for a PDF form. 

• Accessibility Full Check

  Adobe Acrobat has a built-in accessibility checker that will scan a PDF document to ensure it meets various accessibility requirements. When the checker is used, it will provide a report that lists all pass, fails and manual checks required in the document. To learn how to use the checker, review UDC’s PDF accessibility tutorial. 

  Common Errors

  1. Title: By default, the “Title” will ALWAYS be listed as an error. To fix this error, simply right click on the title error and select fix. The description window will appear where the checkbox Leave As Is is selected under the title. Unselect the checkbox and type the title of the document and then select OK.

     

  2. Tab Order: With PDF forms, the “tab order” is often a default error. Similar to the ‘Title’ error, this can be fixed by simply right clicking on the tab order error and selecting fix. Adobe Acrobat will then automatically fix the error.

     

  Color Contrast

  Color contrast is a manual check that requires an author to inspect the colors used in the PDF. A color contrast checker such as the Colour Contrast Analyser can be used to facilitate this check. As a rule of thumb, WCAG Level AA requires a color contrast ration of at least 4.5:1 for regular sized text (12 or 14 pt. font) and 3:1 for large text (18pt. font). 

  Logical Reading Order  

  The logical reading order can be inspected by reviewing the numerical order as shown through the Order Panel. In addition, a screen reader check is highly recommended to verify the reading order. 

• Tab Order Check

  A manual check of the tab order should be conducted to ensure that the tab order is consistent with the page structure and order. To conduct a tab order check simply use the Tab key to navigate. 

• Screen Reader Check

  We highly recommend conducting a screen reader check to ensure the document is read correctly when navigating. Consider using the screen reader NVDA to check. 

  

  Note: DO NOT use Adobe Acrobats built-in ‘Read Out Loud’ tool as a screen reader. This tool is NOT a screen reader and will not capture the same information a screen reader can.

The final step for creating an accessible PDF form is to ensure the document can be filled out using BOTH Adobe Acrobat Professional and Adobe reader. To ensure the PDF form can be filled out using Adobe Reader, the Reader Extended Mode must be enabled.

• Enable Reader Extended Mode

  The following steps must be taken to enable Reader Extended Mode:

  1. Go to File, Save as Other, and then to Reader Extended PDF

  2. Select Enable More Tools (includes form fill-in & Save).

     

  3. A window will then appear. Select the Save Now button.

     

  4. To save the reader extended file, make sure that the file name indicates that this is a reader extended version.

     

• Final PDF Form

  At the end of the accessible PDF form creation process, there should be two PDF files, the Original PDF form and the Reader Extended Version of that file. If revisions to the PDF form are required, the revisions must be made in the original PDF and NOT the reader extended version. A new reader extended copy will need to be made from the revised PDF.