Why a11y?

Form Accessibility

Importance of Accessible Forms

Forms are a primary way users interact with websites, from logging in to making purchases. Inaccessible forms can prevent users with disabilities (such as those who use screen readers, have limited mobility, or cognitive impairments) from submitting information or understanding the form's functionality. Ensuring form accessibility improves usability for everyone.

Guidelines for Accessible Forms

Clear and Descriptive Labels

Each input field (text field, checkbox, radio button, etc.) needs a descriptive and visible label to identify what the user is expected to do.

  • Use the <label> element: Ensure every form control (input, select, textarea) is associated with a <label> element. The label can be programmatically linked to the form field by using the for attribute, or by wrapping the input within the label. 
    <label for="username">Username</label>
<input type="text" id="username" name="username"></label>
  • <label>
	Username
	<input type="text" name="username"l>
</label>
  • Use placeholder text cautiously: Placeholder text can be used as a hint, but it should not replace a proper label. Some screen readers may not read placeholder text by default, and it can disappear when the user types in the field.
  • Use ARIA labels for complex cases: If visible labels are not possible (e.g., icons), use aria-label or aria-labelledby attributes for screen readers. 
    <input type="text" aria-label="Search" placeholder="Search...">

Fieldset and Legend for Grouping

For groups of related form elements (e.g., a set of radio buttons), use the <fieldset> and <legend> elements to group and describe them.

<fieldset>
	<legend>Choose your favorite color</legend>
	<input type="radio" id="color1" name="color" value="red">
	<label for="color1">Red</label>
	<input type="radio" id="color2" name="color" value="blue">
	<label for="color2">Blue</label>
</fieldset>

Keyboard Accessibility

All form elements must be navigable and usable with a keyboard. Users should be able to:

  • Tab: Navigate through form fields using the Tab key.
  • Spacebar or Enter: Activate checkboxes, radio buttons, and submit buttons using the Spacebar or Enter.
  • Arrow Keys: Navigate between options in select dropdowns or radio button groups using the arrow keys.

Logical Tab Order

Ensure that the tab order follows a logical sequence, matching the visual order of the form fields. Use the natural document flow, but if necessary, the tabindex attribute can be used to manually adjust the tab order.

<input type="text" name="username" tabindex="1">
<input type="text" name="email" tabindex="2">

Accessible Error Messages

Clear and accessible error messaging is crucial for form validation. Make sure users are informed about any issues with their input and how to fix them.

  • Highlight errors programmatically: When an error occurs, use aria-invalid="true" on the input field and provide a descriptive error message linked to the input. Use aria-describedby to associate the error message with the form field. 
    <label for="email">Email</label>
<input type="text" id="email" name="email" aria-describedby="email-error" aria-invalid="true">
<span id="email-error">Please enter a valid email address.</span>
  • Provide focus to error messages: When an error is detected, move the user’s focus to the error message or summary of errors.
  • Real-time Validation: If using real-time validation (e.g., showing an error immediately after leaving the field), make sure the error message is easily perceivable by screen readers and sighted users alike.

Error Prevention for Important Forms

For critical forms (like financial transactions), follow these guidelines:

  • Allow users to review, correct, and confirm their inputs before final submission (WCAG 3.3.4 Error Prevention for Legal/Financial forms).

Additional Accessibility Considerations

Autocomplete and Autofill

Utilize the HTML autocomplete attribute to help users fill out forms more easily, especially for common fields like name, email, or address.

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

Form Instructions and Hints

Provide instructions or hints where necessary, especially if the form field has specific requirements (e.g., password complexity, date format).

<label for="password">password</label>
<input type="password" id="password" name="password">
<small>Must be at least 8 characters long, including a number and a special character.</small>

Use Proper Input Types

Use HTML5 input types (e.g., email, tel, number) to take advantage of built-in browser features like validation and optimized user experiences for mobile devices.

Accessible Submit Buttons

Ensure the submit button is focusable and keyboard-accessible. Avoid using <div> or <span> for submit actions. Instead, use the <button> element.

<button type="submit">Submit</button>

Common Mistakes to Avoid

  • Not using <label> tags: Never omit labels for input fields, even if you rely on placeholder text.
  • Relying only on color to indicate errors: Make sure error states (like required fields) are clearly indicated using both color and text (e.g., "Please enter your name").
  • Incorrect use of ARIA: Avoid using ARIA unnecessarily or incorrectly, as this can confuse assistive technologies. Use native HTML elements when possible.

Tools for Testing Form Accessibility

  • Axe Accessibility Checker: Test your form accessibility for keyboard navigation, labeling, and error handling.
  • WAVE (Web Accessibility Evaluation Tool): Check form elements for missing labels or inaccessible elements.
  • Manual Testing: Navigate through forms using only a keyboard (Tab, Shift+Tab, Enter) and use a screen reader (like NVDA or VoiceOver) to ensure that all form fields and error messages are accessible.

Related links