<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
  <button type="submit">Submit</button>
</form>

This structure provides a clear hierarchy and helps screen readers understand the relationship between form elements.

Labels are crucial for accessibility. They provide context for form controls and help users understand what information is required. I always make sure to associate labels with their corresponding form controls using the ‘for’ attribute. This association is not only beneficial for screen reader users but also increases the clickable area for mouse users.

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

In some cases, we might want to visually hide labels while keeping them accessible to screen readers. I use a CSS technique for this:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Then, I apply this class to labels that I want to hide visually:

<label for="search" class="visually-hidden">Search:</label>
<input type="search" id="search" name="search">

Error handling is another critical aspect of accessible forms. It’s important to provide clear, descriptive error messages that help users understand and correct their mistakes. I use the ‘aria-describedby’ attribute to associate error messages with form controls:

<label for="password">Password:</label>
<input type="password" id="password" name="password" aria-describedby="password-error" required>
<span id="password-error" class="error" role="alert"></span>

In my JavaScript, I update the error message and make it visible when validation fails:

const passwordInput = document.getElementById('password');
const passwordError = document.getElementById('password-error');

passwordInput.addEventListener('input', function() {
  if (this.value.length < 8) {
    passwordError.textContent = 'Password must be at least 8 characters long';
    passwordError.style.display = 'block';
  } else {
    passwordError.textContent = '';
    passwordError.style.display = 'none';
  }
});

Keyboard navigation is essential for users who can’t use a mouse. I ensure that all interactive elements in my forms are focusable and that the focus order is logical. The ‘tabindex’ attribute can be used to control the focus order, but I prefer to structure my HTML in a way that provides a natural tab order.

For complex forms, I often use fieldsets and legends to group related form controls. This helps users understand the structure of the form and the relationships between different sections:

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
  <fieldset>
    <legend>Shipping Address</legend>
    <label for="address">Street Address:</label>
    <input type="text" id="address" name="address" required>
    <label for="city">City:</label>
    <input type="text" id="city" name="city" required>
    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip" required>
  </fieldset>
  <button type="submit">Submit</button>
</form>

When it comes to form controls, I always use native HTML elements when possible. They come with built-in accessibility features and are widely supported across different browsers and assistive technologies. For example, I use for dropdown menus, for multi-line text input, and appropriate input types like ‘email’, ‘tel’, and ‘number’ for specific data types.

However, there are times when custom form controls are necessary. In these cases, I make sure to implement ARIA (Accessible Rich Internet Applications) attributes to provide the necessary information to assistive technologies. For instance, if I’m creating a custom dropdown menu, I might use something like this:

<div class="custom-select" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="select-label">
  <span id="select-label">Choose an option</span>
  <ul role="listbox" id="select-options">
    <li role="option" id="option1">Option 1</li>
    <li role="option" id="option2">Option 2</li>
    <li role="option" id="option3">Option 3</li>
  </ul>
</div>

This structure provides the necessary semantic information for screen readers to understand and interact with the custom control.

Another important aspect of accessible forms is providing clear instructions and helpful text. I use ‘aria-describedby’ to associate these instructions with form controls:

<label for="password">Password:</label>
<input type="password" id="password" name="password" aria-describedby="password-help" required>
<p id="password-help">Password must be at least 8 characters long and include a number and a special character.</p>

For required fields, I not only use the ‘required’ attribute but also indicate this visually and in the label text:

<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required>

I also use CSS to visually indicate required fields:

label[for] + input:required::after {
  content: '*';
  color: red;
  margin-left: 3px;
}

When it comes to form submission, I always provide clear feedback to users. This includes both success and error messages. I use ARIA live regions to announce these messages to screen reader users:

<div id="form-status" aria-live="polite"></div>

In my JavaScript, I update this element with appropriate messages:

const formStatus = document.getElementById('form-status');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (formIsValid()) {
    formStatus.textContent = 'Form submitted successfully!';
    // Process form submission
  } else {
    formStatus.textContent = 'There were errors in your submission. Please correct them and try again.';
    // Highlight errors
  }
});

Another technique I often use is progressive enhancement. This means starting with a basic, functional form that works without JavaScript, and then enhancing it with JavaScript for a better user experience. For example, I might start with a simple date input:

<label for="date">Date:</label>
<input type="date" id="date" name="date" required>

Then, if JavaScript is available, I might enhance this with a custom date picker that provides a better user interface while maintaining accessibility:

if (Modernizr.inputtypes.date) {
  // Browser supports native date input, do nothing
} else {
  // Browser doesn't support native date input, enhance with custom date picker
  $('#date').datepicker({
    // Ensure the custom date picker is accessible
    showOn: 'both',
    buttonText: 'Select Date',
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    yearRange: '-100:+0'
  });
}

For long forms, I often implement a multi-step process to make them less overwhelming. However, it’s crucial to maintain accessibility when doing this. I use ARIA attributes to indicate the current step and the total number of steps:

<form id="multi-step-form" aria-live="polite">
  <div class="step" aria-current="true" aria-label="Step 1 of 3">
    <!-- Step 1 form fields -->
  </div>
  <div class="step" aria-label="Step 2 of 3" hidden>
    <!-- Step 2 form fields -->
  </div>
  <div class="step" aria-label="Step 3 of 3" hidden>
    <!-- Step 3 form fields -->
  </div>
  <button type="button" id="prev-step">Previous</button>
  <button type="button" id="next-step">Next</button>
  <button type="submit">Submit</button>
</form>

In my JavaScript, I update these attributes as the user progresses through the form:

function goToStep(stepNumber) {
  const steps = document.querySelectorAll('.step');
  steps.forEach((step, index) => {
    if (index === stepNumber - 1) {
      step.removeAttribute('hidden');
      step.setAttribute('aria-current', 'true');
    } else {
      step.setAttribute('hidden', '');
      step.removeAttribute('aria-current');
    }
  });
}

Color contrast is another important consideration for accessibility. I always ensure that there’s sufficient contrast between text and background colors. I use tools like the WebAIM Color Contrast Checker to verify that my color choices meet WCAG guidelines.

For form controls, I make sure that focus states are clearly visible. This helps keyboard users understand which element they’re currently interacting with. I often use a combination of outline and box-shadow for this:

input:focus, select:focus, textarea:focus, button:focus {
  outline: 2px solid #4A90E2;
  box-shadow: 0 0 3px #4A90E2;
}

When it comes to form validation, I implement both client-side and server-side validation. Client-side validation provides immediate feedback to users, while server-side validation ensures data integrity. For client-side validation, I use HTML5 form validation where possible, supplemented by JavaScript for more complex validation rules.

Here’s an example of how I might implement form validation:

<form id="registration-form" novalidate>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">
  <span id="username-error" class="error" aria-live="polite"></span>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span id="email-error" class="error" aria-live="polite"></span>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required minlength="8">
  <span id="password-error" class="error" aria-live="polite"></span>
  
  <button type="submit">Register</button>
</form>

And the accompanying JavaScript:

const form = document.getElementById('registration-form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');

form.addEventListener('submit', function(event) {
  let isValid = true;
  
  if (!username.validity.valid) {
    showError(username, 'Username must be between 3 and 20 characters long');
    isValid = false;
  }
  
  if (!email.validity.valid) {
    showError(email, 'Please enter a valid email address');
    isValid = false;
  }
  
  if (!password.validity.valid) {
    showError(password, 'Password must be at least 8 characters long');
    isValid = false;
  }
  
  if (!isValid) {
    event.preventDefault();
  }
});

function showError(input, message) {
  const errorElement = document.getElementById(input.id + '-error');
  errorElement.textContent = message;
}

This code provides immediate feedback to users when they try to submit the form with invalid data. The error messages are associated with the form controls using ‘aria-live’ regions, ensuring that screen reader users are informed of the errors.

In conclusion, creating accessible web forms is a multifaceted process that requires attention to detail and a deep understanding of various accessibility principles. By implementing these best practices and techniques, we can ensure that our forms are usable by the widest possible audience, regardless of their abilities or the devices they use. Remember, accessibility is not just about compliance with guidelines; it’s about creating a better user experience for everyone. As web developers, it’s our responsibility to make the web a more inclusive place, one form at a time.