Discuss your project
Go back

Creating Accessible Forms: From HTML Basics to Advanced Techniques

/* by - November 12, 2024 */
Tech UpdateWeb Accessibility
Accessibility

Forms are an integral part of any web application, from signing up for a newsletter to making online purchases. Ensuring forms are accessible is crucial for providing an inclusive user experience for individuals with disabilities, including users relying on screen readers or keyboard navigation. This guide will take you through the steps to create accessible forms, starting with HTML basics and moving to advanced ARIA techniques.

Why Accessible Forms Matter

Accessible forms are vital to ensure that all users, regardless of their abilities, can complete tasks on your website without barriers. Inaccessible forms can exclude users who rely on assistive technologies, such as screen readers or those who navigate using a keyboard. By adhering to accessibility standards, you can 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. Can you afford to overlook this critical aspect of your website? To truly understand accessibility’s impact on your web presence, delve into Introduction to Web Accessibility to learn how to create a seamless experience for all users.

Inaccessible forms are a hidden threat to your website’s success. They can alienate users relying on assistive technologies, result in legal consequences for non-compliance, and even damage your brand reputation. Are you confident your web applications meet the latest standards? Learn how to ensure compliance with WCAG 2.2 in our blog: how to implement WCAG 2.2 guidelines in website. Don’t leave your website vulnerable.

For more information on accessibility guidelines, refer to WCAG Standards.

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.
<label for="username">Username:</label>
<input type="text" id="username" name="username">

The for attribute in the <label> element links it to the input field by its id, ensuring screen readers can announce the label correctly.

  • Fieldset and Legend for Grouping
    • Use <fieldset> and <legend> to group related fields together, which helps users understand the context of each group.
<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 shouldn’t replace labels. Placeholders are not always accessible as they might be difficult to read or absent for screen readers.
<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.
<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.
<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.

    Discover how ARIA roles can enhance web interactions and improve accessibility. Learn more in our detailed guide on ARIA roles in Web Accessibility.
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" aria-required="true">

aria-required="true" informs screen readers that the field is mandatory, helping users complete the form accurately.

  • 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.
<div id="errorMessage" role="alert" aria-live="assertive">Please correct the errors in the form.</div>

This helps in providing real-time feedback to users, ensuring they can easily correct mistakes.

  • Client-Side Validation with JavaScript: Use JavaScript to provide real-time feedback without reloading the page.

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. The tabindex attribute can be used to control the tab order for custom components.
<button type="button" tabindex="0">Submit Form</button>
    • Skip Links: Include a skip link at the top of the page to allow users to bypass repetitive content and navigate directly to the form.
<a href="#mainform" class="skip-link">Skip to main form</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 don’t have to manually search for what went wrong.
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

  1. WAVE Tool
    • WAVE is a browser extension that evaluates the accessibility of forms and identifies potential issues.
  2. Axe Browser Extension
  3. Screen Readers
    • Test forms using popular screen readers like NVDA, VoiceOver, and JAWS to ensure a smooth user experience.
    References:
  4. Keyboard Testing
    • Manually test forms by navigating through them using the Tab key to ensure that all interactive elements are reachable and properly announced.

Common Mistakes to Avoid

  1. Missing Labels: Every form control should have a corresponding label.
  2. Relying on Placeholder Text Only: Placeholder text is not an accessible substitute for labels.
  3. Inadequate Error Descriptions: Provide descriptive error messages that clearly explain what went wrong and how to fix it.
  4. Lack of Focus Indicators: Ensure visible focus indicators for form fields to help users navigate effectively.

Benefits of Creating Accessible Forms

  1. Inclusive User Experience: Forms that are accessible provide a seamless experience for all users, regardless of their abilities.
  2. Compliance with Regulations: Ensuring that forms comply with WCAG standards helps avoid legal issues related to web accessibility.
  3. Improved Conversion Rates: Accessible forms are easier to use, leading to fewer drop-offs and better conversion rates.
  4. Better SEO: Accessible websites are often more SEO-friendly, which can result in better 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 can make your forms more accessible and ensure a better user experience. At Atyantik Technologies, we focus on building inclusive digital experiences. Contact us if you need help improving your web forms’ accessibility.