Google Forms
Google Forms is a survey administration software included as part of the web-based Google Docs Editors suite. Please check the Google Forms Guidelines and the Google Forms Administrator Information and Ownership Roles for 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:
- 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 validation allows 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 a linear scale questions type, 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 see Keyboard Shortcuts for Google Forms for more information.
Furthermore, you may also want to see additional information on how to create and edit Google Forms with a Screen Reader before publishing your form.
Web/HTML forms
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.