Digital Accessibility
Digital Accessibility / Accessibility Guidelines / Accessible Forms

Accessible Forms

Forms are an important part of providing information and collecting responses online. An accessible form ensures that users can identify each field, understand what information is required, navigate through the form, and correct errors when needed.

  • Google Forms is a survey administration software included as part of the web-based Google Docs Editors suite. Please check theGoogle Forms Guidelinesand theGoogle Forms Administrator Information and Ownership Rolesfor more information.

    To make Google Forms accessible, the forms should be easy to understand, organized, and simple. A Google Form needs to be screen reader friendly and meet WCAG 2.0 AA guidelines.

    Google Forms Best Practices:

    1. Use sections with clear headings to break up the information into digestible, comprehensive pieces. Sections help reduce the stress of your reader and offer natural stopping points to take a break.

    • Include response validation rules.Response validationallows you to create rules that users have to follow as they interact with your form. For example, you can set a question to only accept numbers for a phone number question. 
    • Avoid using images as part of the questions. Google Forms does not allow you to add an alternative text for the images. 
    • When using alinear scale questionstype, add a description of the scale question so that screen reader users can understand your question easier. 
    • Avoid putting links in your Google Forms. Google Forms does not support link text or link titles for hyperlinks. Providing a full link without any description creates confusion for screen reader users. Without link text, screen readers will read the link address in full.

    Google Forms Accessibility Features for Creators

    Google Forms supports keyboard shortcuts. Please seeKeyboard Shortcuts for Google Formsfor more information.

    Furthermore, you may also want to see additional information on how tocreate and edit Google Forms with a Screen Reader before publishing your form.

  • A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing.

    Forms typically have labels or prompts that are obvious to sighted users, but their association with particular form fields is made based on visual cues, such as relative position and proximity to the field.

    To make forms accessible, forms should be easy to understand, complete, and submit. Users need to easily identify instructions, required form fields, field formatting requirements and error messages.

    The Label Element

    The <label> in HTML conveys the necessary information to the users to take action.. Label elements associate text labels with the input label programmatically. Screen readers will read out the label when the user is focused on the form input.

    To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

    Example of Implementation of Label Element:

    <div class="registrationForm">

    <label for="firstName">First Name: </label>

    <input type="text" name="firstName" id="firstName">

    Group Form Control

    Sometimes, there will be a set of form controls that belong to a group. For example, a multiple choice question. 

    In a group level form, use <fieldset> to bind the form controls inside a group and the <legend> attribute is used as the primary label that will be exposed when assistive technology users move the focus to the first radio button. 

    Example of Accessible Group Form:

    <div class="registrationForm">

    <fieldset>

    <legend> What is your pronoun? </legend>

    <input type="radio" id="heHim">

    <label for="heHim"> He/Him </label>

    <input type="radio" id="sheHer">

    <label for="sheHer"> She/Her </label>

    <input type="radio" id="theyThem">

    <label for="theyThem"> They/Them </label>

    </fieldset>

    How to Properly Indicate Required Fields

    Required fields need to clearly show when a form is not submitted because of a missed required field so that users know how to continue. Using just color or an asterisk to indicate a required field can be unclear for some users. It is also important to explain required fields when what's asked is unclear. To make your form accessible, try:

    • Indicating before submission with a large, clear symbol
    • Including "Required" in the question or placing "(Required)" at the end of your question so that screen readers can pick up what is necessary
    • When a form is submitted without filling a field, consider highlighting or bordering the missed question/s and adding a text notice that explains the issue and how to fill the field correctly

    Form Templates

    Here are some form templates that have proper indication built-in.

    Uploading Image and Video

    Images and videos that are uploaded to a form need to be accessible. 

    Images need to have alternative text.

    Videos need to have captions.

    Web Forms Best Practices

    • Use native HTML form controls, such as <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>
    • Allow users to review data before submitting. 
    • Ensure that your web site forms can be understood and operated with the keyboard alone.
    1. Turn on the Developer tab (if not already on)
      Word menu → Preferences → Ribbon & Toolbar → check "Developer" → Save.
    2. Set up your labels first
      Type out each question/label as normal text (e.g., "Name:", "Date:", "Student ID Number:"), leaving a blank space after each one where the field will go. Delete any underscores you used as placeholders, you don't need them once you add real fields.
    3. Insert a text field
      1. Click right after the label where the field should go.
      2. On the Developer tab, click the Text Box.
      3. A grey shaded box appears, that's your fillable field.
      4. Repeat for every text-entry item (Name, Date, etc.).
    1. Insert a Yes/No field
      1. Click where the answer should go.
      2. Click the Combo Box on the Developer tab.
      3. Click Options right after.
      4. Click Add, type "Yes," click OK. Click Add again, type "No," click OK.
      5. Click OK to close.
    1. Name each field
      1. Click on a field, then click Options on the Developer tab.
      2. In the box that appears, give it a clear name (e.g., "Student Name," "Anticipated Graduation Date") this matters for accessibility.
      3. Repeat for every field.
    1. Lock the form
      1. Once all fields are in, click Protect Form on the Developer tab.
      2. This locks the layout so people can only fill in the fields, not edit anything else.
    1. Test it
      1. Click into each field yourself and confirm it works like you'd expect before sending it out.

    NOTE: these fields work great in Word, but they won't transfer when you convert to PDF. You'll rebuild them in Acrobat's Prepare Form tool afterward.

    1. Open Prepare a Form
      1. Open your PDF in Adobe Acrobat.
      2. Go to Tools → Prepare a Form.
      3. Select your file and click Start.
    2. Let Acrobat detect fields
      1. Acrobat will automatically identify possible form fields.
      2. Review each field carefully and make sure the fields were detected correctly.
      3. Delete any fields that Acrobat added incorrectly.
    3. Add any missing fields
      1. Use the toolbar to add fields manually.
      2. Choose the appropriate field type such as Text Field, Checkbox, Radio Button, Dropdown, or Signature Field.
      3. Place each field where it belongs on the form.
    4. Set up each field
      1. Double-click a field to open Properties.
      2. Set the appropriate field type, options, formatting, and whether the field is required.
      3. Add a clear Tooltip that describes what information the user should enter. This is important for accessibility.
    5. Name each field
      1. Give every field a clear, unique name.
      2. Use names that describe the purpose of the field rather than generic names such as "Text1" or "Field2."
      3. Repeat for every field.
    6. Set the Tab Order
      1. Open the Fields panel.
      2. Arrange the fields so the tab order follows the form's logical reading and completion order.
      3. Test the order by pressing Tab through the form.
    7. Test the form
      1. Click into each field and fill out the form yourself.
      2. Make sure every field works correctly and that dropdowns, checkboxes, and other controls behave as expected.
      3. Test the form using only the keyboard to make sure users can move through all fields with Tab.
    8. Run the Accessibility Check
      1. Open Accessibility → Accessibility Check.
      2. Run the checker and review any errors or warnings.
      3. Fix accessibility issues before sharing the final PDF.

    NOTE: Acrobat's automatic field detection is a starting point, not a guarantee that the form is accessible. Always review the field names, tooltips, field order, and accessibility-check results before publishing the form.

Test for Accessibility

Applicable WCAG Success Criteria

References: