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.

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>

Google Forms

Google Forms is a survey administration software included as part of the web-based Google Docs Editors suite. 

Keyboard Shortcuts

Please check out Keyboard Shortcut for google Forms

You can also see additional information how to create and edit Google Forms with a Screen Reader

Uploading Image and Video

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

Images need to have alternative text [alt text link].

Videos need to have captions [caption link].

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.

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.

Test for Accessibility

Applicable WCAG Success Criteria

References:

Willamette University

Marketing and Communications

Address
900 State Street
Salem Oregon 97301 U.S.A.

Back to Top