Skip to Digital Accessibility at Ramapo College site navigationSkip to main content

Creating Accessible Forms

Web Forms

Web Forms Quick Start Guide

Learn how to create accessible forms from the World Wide Web consortium (W3C).

  1. Provide Clear Labels and Instructions. Every form control (text fields, checkboxes, radio buttons, etc.) must have a meaningful, programmatically associated label. Instructions for the entire form and individual fields should be clear and concise, especially regarding required inputs, data formats, and time limits.
  2. Structure and Grouping. Use semantic HTML elements to convey meaning and structure. Use the <fieldset> and <legend> elements to group related form controls (e.g., a set of radio buttons for a single question).
  3. Keyboard Accessibility. All interactive elements must be keyboard accessible, as many users with disabilities do not use a mouse.
  4. Error Prevention and Correction. Help users avoid and correct mistakes by providing highly visible, specific, and helpful inline error messages that explain how to fix the issue. Error messages should be descriptive and include the field’s label text.
  5. Use Standard HTML Elements. Whenever possible, use native HTML form elements (e.g., <input type=”date”> instead of custom date pickers) as they have built-in accessibility features.
  6. Visual Design. Ensure sufficient contrast between form elements and the background, and provide clearly defined boundaries for input fields. Avoid using color alone to convey information, such as marking required fields only in red.

Reference List: World Wide Web Consortium. (2014, September 15). Forms tutorial. W3C Web Accessibility Initiative. https://www.w3.org/WAI/tutorials/forms/.

Ramapo

Web Forms Courses & Tutorials

PDF Forms

PDF Forms Quick Start Guide

To create a fillable, accessible PDF form using only Adobe Acrobat Pro tools and documentation, follow this four-step quick-start workflow.

  1. Initialize Form Fields
    • Open the Tool: From the global bar, select All tools > Prepare a form.
    • Detect Fields: Select your document and ensure “Form Field Auto Detection” is enabled. Click Start to allow Acrobat to automatically identify and place interactive fields.
    • Refine Manually: If fields are missed, use the top toolbar to drag and drop Text Fields, Checkboxes, or Dropdown lists exactly where needed.
  2. Configure Field Properties
    • Every interactive element must be identifiable by assistive technology
    • Add Tooltips: Double-click a field to open Properties. In the General tab, enter a descriptive Tooltip. This is the text a screen reader announces as the field’s label.
    • Set Requirements: If a user must complete the field, check the Required box in the General tab.
      Apply Formatting: Use the Format tab to restrict entries to specific types, such as Dates or Phone Numbers.
  3. Establish Structure and Navigation.
    • Tag the Fields: Exit the form editor and select All tools > Prepare for accessibility > Automatically tag form fields. This anchors the interactive fields into the document’s tag tree so they are reachable by screen readers.
    • Set Tab Order: Return to Prepare a form. In the right-hand Fields pane, click the options menu (three-dot or funnel icon) and select Order Tabs by Structure. This ensures users move through fields in a logical, structured sequence when using the “Tab” key.
  4. Verify with the Accessibility Checker
    • Run Audit: Select All tools > Prepare for accessibility > Check for accessibility.
    • Fix Errors: Review the results in the left-hand panel. You can right-click any “Failed” items, such as missing tooltips or untagged fields, and select Fix to resolve them directly. For more complex issues, right-click and select Explain to open official guidance from the Adobe Help Center.

Reference List:

Ramapo

PDF Forms Courses & Tutorials