Accessibility is an important aspect to consider when designing and building forms on the web. Not only is it a legal requirement, but it also ensures that everyone, including those with disabilities, can access and use the form. In this blog post, we'll go over some best practices for implementing accessibility on a form, and provide an example of how to do so.

First, let’s start with the basics. All form elements should have proper labels associated with them. This includes text fields, radio buttons, checkboxes, and select menus. These labels should be associated with their respective form elements using the “for” attribute on the label element, and the “id” attribute on the form element. This way, assistive technologies, such as screen readers, can properly announce the label when the user interacts with the form element. Here’s an example of adequately associated labels:

<label for="name">Name:</label>
<input type="text" id="name">

Next, it’s essential to provide clear instructions for completing the form. This can be done by adding a description or instructions to the top of the form or by providing inline instructions next to specific form elements. Additionally, using clear, simple language when providing instructions. Here’s an example of inline instructions:

<label for="email">Email:</label>
<input type="email" id="email">
<span class="instructions">Please enter a valid email address.</span>

It’s also important to consider users who may be using assistive technologies or have difficulty using a mouse. To make the form more accessible, it’s a good idea to include keyboard shortcuts for everyday actions, such as submitting the form or moving between form elements. Additionally, it’s a good idea to include a “Skip to main content” link at the top of the page, which allows keyboard users to bypass the navigation and jump directly to the form. Here’s an example of a “Skip to main content” link:

<a href="#main-content">Skip to main content</a>
...
<form id="main-content">...</form>

It’s also a good idea to provide clear feedback to users when they interact with the form. For example, when a user submits the form, it’s a good idea to provide a message that tells them whether the form was submitted successfully or if there were errors. Additionally, it’s a good idea to provide clear error messages that explain what went wrong, and indicate where the error occurred. Here’s an example of clear error messages:

<label for="password">Password:</label>
<input type="password" id="password">
<span class="error">The password must be at least 8 characters long.</span>

Adding ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes provide additional information about form elements to assistive technologies. For example, you can use the “aria-required” attribute to indicate that a form field is required and the “aria-describedby” attribute to associate a form field with a description or instructions. Here’s an example:

<label for="username">Username:</label>
<input type="text" id="username" aria-required="true" aria-describedby="username-instructions">
<span id="username-instructions">Please enter a unique username.</span>

Using the “required” attribute: The “required” attribute is used to indicate that a form field must be filled out before the form can be submitted. This can be helpful for users who are using assistive technologies, as it will notify them that a field is required. Additionally, it’s a good idea to include a message or instruction that indicates which fields are required. Here’s an example:

<form>
  <label for="first-name">First Name:</label>
  <input type="text" id="first-name" required>
  <label for="last-name">Last Name:</label>
  <input type="text" id="last-name" required>
  <p>*Indicates required field.</p>
  <input type="submit" value="Submit">
</form>

Providing alternative text for images: If you’re using images in your form, it’s crucial to provide alternative text (alt text) that describes the image. This allows assistive technologies, such as screen readers, to announce the image’s description to users. Here’s an example:

<label for="captcha">Captcha:</label>
<img src="captcha.png" alt="Please enter the characters shown in the image." id="captcha">
<input type="text" id="captcha-response">

Grouping related form controls: When you have a group of related form controls, such as radio buttons or checkboxes, it’s a good idea to use the “fieldset” and “legend” elements to group them and provide a label for the group. This makes it easier for users to understand the group’s purpose and navigate through the form controls using assistive technologies. Here’s an example:

<fieldset>
  <legend>Select your favorite color:</legend>
  <input type="radio" id="color-red" name="color" value="red">
  <label for="color-red">Red</label>
  <input type="radio" id="color-green" name="color" value="green">
  <label for="color-green">Green</label>
  <input type="radio" id="color-blue" name="color" value="blue">
  <label for="color-blue">Blue</label>
</fieldset>

Finally, it’s a good idea to test the form with a variety of assistive technologies, such as screen readers and keyboard-only navigation, to ensure that it is fully accessible.

In conclusion, implementing accessibility on a form is an essential step in ensuring that everyone can access and use the form. By correctly associating labels with form elements, providing clear instructions, including keyboard shortcuts, providing clear feedback and error messages, and testing with assistive technologies, we can create forms that are accessible to all users.