Creating accessible forms from HTML basics to advanced ARIA techniques

Why accessible forms matter#

Accessible forms ensure that all users, regardless of their abilities, can complete tasks on your website without barriers. Inaccessible forms exclude users who rely on assistive technologies such as screen readers or those who navigate using a keyboard. By adhering to accessibility standards, you create forms that are inclusive and compliant with the Web Content Accessibility Guidelines (WCAG).

Inaccessible forms can harm your brand reputation, lead to legal complications, and drive users away. Without an inclusive approach, you risk alienating users who rely on assistive technologies or keyboard navigation. Creating accessible forms ensures a better user experience and improves conversion rates because forms that are easier to use result in fewer drop-offs.

HTML basics for form accessibility#

Use proper label elements#

Labels provide essential information about input fields, making forms more understandable for users, especially those using screen readers. The for attribute in the label element links it to the input field by its id, ensuring screen readers can announce the label correctly.

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

Fieldset and legend for grouping#

Use fieldset and legend to group related fields together. This helps users understand the context of each group and provides structure that assistive technologies can navigate.

<fieldset>
  <legend>Personal Information</legend>
  <label for="firstname">First Name:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">Last Name:</label>
  <input type="text" id="lastname" name="lastname">
</fieldset>

Provide placeholder and descriptive text#

Placeholders can provide hints, but they should not replace labels. Placeholders are not always accessible as they might be difficult to read or absent for screen readers. Always pair them with explicit labels.

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com">

Error messages and validation#

Ensure that error messages are descriptive and easily accessible. Use the aria-describedby attribute to associate error messages with the respective input field. This tells screen readers which error belongs to which input.

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

Provide input assistance#

Use the autocomplete attribute to help users fill out forms faster by providing suggestions based on their previous inputs. This also helps assistive technologies understand what type of information is expected in each field.

<label for="address">Address:</label>
<input type="text" id="address" name="address" autocomplete="street-address">

Advanced techniques for form accessibility#

ARIA roles and attributes#

Use ARIA attributes like aria-required, aria-invalid, and aria-labelledby to provide additional context to screen readers. The aria-required attribute informs screen readers that a field is mandatory, helping users complete the form accurately.

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" aria-required="true">

Accessible form validation#

Form validation should be designed to work with screen readers. Announce errors dynamically using aria-live regions so that users are immediately aware of any issues. This helps provide real-time feedback to users, ensuring they can easily correct mistakes. When aria-live announcements fail to reach users, it is often a timing or scope issue rather than a spelling error, so understanding why aria-live regions announce nothing or everything at once is essential.

<div id="errorMessage" role="alert" aria-live="assertive">Please correct the errors in the form.</div>

Client-side validation with JavaScript#

Use JavaScript to provide real-time feedback without reloading the page. Update aria-invalid and announce errors through aria-live regions to keep screen reader users informed.

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  const password = document.getElementById('password');
  if (password.value.length < 8) {
    const error = document.getElementById('passwordError');
    error.textContent = 'Password must be at least 8 characters long.';
    password.setAttribute('aria-invalid', 'true');
    event.preventDefault();
  }
});

Keyboard navigation#

All form elements should be accessible using the keyboard alone. Most interactive elements are keyboard accessible by default, but the tabindex attribute can control the tab order for custom components. Skip links allow users to bypass repetitive content and navigate directly to the form.

<button type="button" tabindex="0">Submit Form</button>

<a href="#tools-to-test-form-accessibility" class="skip-link">Skip to tools to test form accessibility</a>

Logical focus management#

When a form submission results in errors, move the focus to the first error message using JavaScript. This ensures that users do not have to manually search for what went wrong. Focus management is one half of the keyboard accessibility story, and how to move focus and manage the tab order effectively deserves as much care as the markup itself.

const firstErrorField = document.querySelector('.error');
if (firstErrorField) {
  firstErrorField.focus();
}

ARIA live regions for success messages#

Announce form submission success messages using ARIA live regions to ensure users are aware when an action is successful.

<div id="successMessage" aria-live="polite">Your form has been submitted successfully!</div>

Tools to test form accessibility#

Accessibility testing tools and methods#

• WAVE browser extension evaluates the accessibility of forms and identifies potential issues
• Axe Accessibility Checker helps detect accessibility issues within form elements and provides recommendations
• Screen readers like NVDA, VoiceOver and JAWS test forms for a smooth user experience
• Keyboard testing by navigating through forms using the Tab key ensures all interactive elements are reachable

Listening is the only measurement: a passing automated audit reports on markup, not on whether announcements reach users. Test with screen readers running and focus positioned outside the form to catch timing issues.

Common mistakes to avoid#

Accessibility pitfalls#

• Missing labels: Every form control should have a corresponding label
• Relying on placeholder text only: Placeholder text is not an accessible substitute for labels
• Inadequate error descriptions: Provide descriptive error messages that clearly explain what went wrong and how to fix it
• Lack of focus indicators: Ensure visible focus indicators for form fields to help users navigate effectively

Each of these creates barriers for users with disabilities. Test your forms with keyboard-only navigation and screen readers to catch them in practice.

Benefits of creating accessible forms#

Accessible forms work for every user, regardless of their abilities. They comply with WCAG standards, helping you avoid legal issues related to web accessibility. Accessible forms are easier to use, leading to fewer drop-offs and better conversion rates. Because accessible websites are often more SEO-friendly, they can result in better search rankings.

Creating accessible forms involves much more than just following HTML standards. It requires considering the needs of all users, especially those with disabilities. By using appropriate labels, ARIA roles, and dynamic feedback mechanisms, you make your forms more accessible and ensure a better user experience for everyone.

Get help with form accessibility#

If your team needs guidance on accessible forms, Atyantik offers two paths forward. For work in progress, start with accessibility testing during the build to catch issues early. For a product already live, a WCAG and ADA compliance audit identifies gaps and outlines your path to conformance.