Epic Forms

Web accessibility isn't just a nice-to-have feature—it's a fundamental aspect of building an inclusive digital world. For the 15% of the global population living with some form of disability, accessible forms can mean the difference between being able to participate online or being excluded entirely. In this comprehensive guide, we'll explore how to make your forms accessible to everyone, regardless of ability.

Understanding Accessibility Basics

Web accessibility means designing websites and applications that people with disabilities can perceive, understand, navigate, and interact with. For forms, this means ensuring users can:

Perceive all form elements and instructions
Understand what information is being requested
Navigate between fields using various input methods
Successfully complete and submit the form
Receive and understand feedback and error messages

The Web Content Accessibility Guidelines (WCAG) provide the standard framework for accessibility. Currently at version 2.1, with 2.2 recently released, these guidelines outline specific criteria for making web content accessible across three levels: A (minimum), AA (recommended), and AAA (enhanced).

The Business Case for Accessible Forms

Beyond the ethical imperative, there are compelling business reasons to prioritize form accessibility:

Expanded audience: Accessible forms allow you to reach the 1.3 billion people worldwide with disabilities
Legal compliance: Many jurisdictions require digital accessibility under laws like the ADA and Section 508
SEO benefits: Many accessibility practices also improve search engine optimization
Universal usability: Accessible design typically creates a better experience for all users
Reduced support costs: Fewer users need help completing accessible forms

Accessibility is not a feature or a nice-to-have. It's a quality requirement, just like security, performance, or usability.

Key Principles for Accessible Form Design

1. Proper Markup and Structure

The foundation of accessible forms is proper HTML markup. This allows assistive technologies like screen readers to correctly interpret and announce form elements.

Use semantic HTML elements (<form>, <fieldset>, <legend>, <label>, <input>)
Associate labels with form controls using the 'for' attribute
Group related fields with <fieldset> and <legend>
Maintain a logical tab order that follows visual layout
Use appropriate input types (email, tel, date, etc.)

<!-- Good example with proper markup -->
<form>
  <fieldset>
    <legend>Contact Information</legend>
    
    <div class="form-group">
      <label for="name">Full Name</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>
    </div>
  </fieldset>
</form>

This markup ensures that screen readers will announce 'Contact Information' as a section, then properly identify each field with its label and required status.

2. Descriptive Labels and Instructions

Clear labeling is essential for all users, but particularly crucial for those using assistive technologies.

Use descriptive labels that clearly indicate what information is needed
Provide format examples for complex inputs (e.g., 'Date (MM/DD/YYYY)')
Include accessible instructions for special requirements
Clearly mark required fields using both color and a symbol (like an asterisk)
Avoid placeholder text as the only form of instruction

While placeholder text can provide helpful examples, it disappears when users begin typing and may have poor color contrast. Always use visible labels positioned above or to the left of inputs.

3. Error Prevention and Recovery

Accessible forms help users avoid errors and recover easily when mistakes happen.

Validate input in real-time when possible
Provide clear error messages that explain the problem and how to fix it
Position error messages adjacent to the relevant field
Use both color and icons to indicate errors (don't rely on color alone)
Allow users to resubmit the form without re-entering valid information

<!-- Accessible error message -->
<div class="form-group">
  <label for="email">Email Address</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    aria-invalid="true" 
    aria-describedby="email-error">
  <div id="email-error" class="error-message" role="alert">
    <svg class="error-icon" aria-hidden="true"></svg>
    Please enter a valid email address (example@domain.com)
  </div>
</div>

The aria-invalid attribute tells assistive technologies that the field contains an error, while aria-describedby associates the error message with the input field.

4. Keyboard Accessibility

Many users with motor disabilities, as well as power users, navigate exclusively with a keyboard.

Ensure all form controls are keyboard accessible
Maintain a logical tab order (use tabindex only when necessary)
Provide visible focus indicators that highlight the current element
Create large enough click/touch targets (minimum 44x44 pixels)
Avoid interactions that rely solely on hovering or complex mouse movements

Test your form by completing it using only a keyboard. You should be able to access all fields, buttons, and custom controls using Tab, Enter, Space, and arrow keys.

5. Visual Design and Readability

Accessible visual design ensures that users with low vision or color blindness can perceive all form elements.

Use sufficient color contrast (minimum 4.5:1 for text, 3:1 for UI components)
Don't rely on color alone to convey information
Allow text resizing up to 200% without breaking layout
Use clear visual boundaries for input fields
Choose readable fonts and adequate text size (minimum 16px for body text)

Examples of sufficient (left) and insufficient (right) color contrast for form elements.

6. ARIA Attributes for Enhanced Accessibility

Accessible Rich Internet Applications (ARIA) attributes provide additional information to assistive technologies when HTML alone is insufficient.

Use to indicate required fields
Apply aria-labelledby to associate complex labels with inputs
Use aria-describedby to link inputs with additional instructions
Implement aria-live regions for dynamic content updates
Add for important error messages

ARIA should be used as an enhancement, not a replacement for good HTML. Always start with semantic HTML before adding ARIA attributes.

7. Time Constraints and Recovery

Some users need more time to complete forms due to motor, cognitive, or visual disabilities.

Avoid or extend session timeouts for form completion
Warn users before time expires and provide an extension option
Save form progress when possible
Allow users to return to previous steps without data loss
Confirm before resetting or clearing form data

8. Custom Form Controls

Custom-styled select dropdowns, checkboxes, and other controls require special attention to maintain accessibility.

Implement appropriate ARIA roles, states, and properties
Ensure keyboard operability matches native controls
Maintain focus visibility on custom elements
Test thoroughly with screen readers
Consider using the native HTML element with CSS styling when possible

<!-- Accessible custom checkbox -->
<div class="custom-checkbox">
  <input type="checkbox" id="terms" class="visually-hidden">
  <label for="terms" class="checkbox-label">
    <span class="checkbox-custom" aria-hidden="true"></span>
    I accept the Terms and Conditions
  </label>
</div>

<style>
  .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;
  }
  
  .checkbox-custom {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid #555;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
  }
  
  input:checked + label .checkbox-custom {
    background: #0070f3;
    border-color: #0070f3;
    background-image: url('checkmark.svg');
  }
  
  input:focus + label .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.3);
  }
</style>

9. Mobile Accessibility

Mobile users with disabilities face additional challenges when completing forms.

Ensure touch targets are at least 44x44 pixels
Support both portrait and landscape orientations
Test with mobile screen readers (VoiceOver, TalkBack)
Use appropriate input types to trigger specialized keyboards
Implement responsive design that works at any zoom level

10. Testing for Accessibility

Thorough testing is essential to ensure your forms work for all users.

Use automated testing tools like Axe, WAVE, or Lighthouse
Conduct keyboard-only testing
Test with screen readers (NVDA, JAWS, VoiceOver)
Perform color contrast checks
Include users with disabilities in user testing when possible

Remember that automated tests can only catch about 30% of accessibility issues. Manual testing and user testing are essential components of a complete accessibility evaluation.

Real-World Examples

Before and After: Making a Form Accessible

Let's look at a contact form transformation from inaccessible to fully accessible:

Before (Inaccessible):

<form>
  <div>
    <input type="text" placeholder="Enter your name">
  </div>
  <div>
    <input type="text" placeholder="Enter your email">
  </div>
  <div>
    <textarea placeholder="Your message"></textarea>
  </div>
  <div>
    <div class="checkbox">
      <span class="box"></span>
      Subscribe to newsletter
    </div>
  </div>
  <button style="background: green">SEND</button>
</form>

After (Accessible):

<form aria-labelledby="form-title">
  <h2 id="form-title">Contact Us</h2>
  <p id="form-instructions">Fields marked with an asterisk (*) are required.</p>
  
  <div class="form-group">
    <label for="name">Name *</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      required 
      aria-required="true">
  </div>
  
  <div class="form-group">
    <label for="email">Email Address *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      required
      aria-required="true">
    <div id="email-hint" class="hint">Example: name@example.com</div>
  </div>
  
  <div class="form-group">
    <label for="message">Your Message *</label>
    <textarea 
      id="message" 
      name="message" 
      required
      aria-required="true"></textarea>
  </div>
  
  <div class="form-group">
    <input 
      type="checkbox" 
      id="newsletter" 
      name="newsletter">
    <label for="newsletter">Subscribe to our newsletter</label>
  </div>
  
  <button 
    type="submit"
    class="btn btn-primary"
    style="background-color: #008800; color: white; padding: 10px 20px;">
    Send Message
  </button>
</form>

The accessible version includes proper labels, semantic structure, clear instructions, and meets color contrast requirements. It works for keyboard users, screen reader users, and people with various disabilities.

Conclusion

Creating accessible forms isn't just about compliance—it's about ensuring everyone can use your digital products, regardless of ability. By following these guidelines, you'll create forms that work better for all users, including those with disabilities.

Remember that accessibility is a journey, not a destination. Start with the basics, test regularly, and continuously improve your forms based on feedback and new best practices.

Epic Forms includes built-in accessibility features that handle many of these requirements automatically. From proper markup to keyboard navigation and screen reader support, our platform helps you create forms that everyone can use. Start building accessible forms today!

Form Accessibility: Designing for Everyone