Add autocomplete attribute to form controls to help users fill out forms more efficiently

Rule

• Audit: Accessibility
• Standard: WCAG
• Level: AA
• Success Criteria: 1.3.5
• ID: autocomplete-attribute-usage

WCAG Success Criterion 1.3.5 focuses on programmatically identifying form input purposes through attributes like `autocomplete`, enabling browsers and assistive technologies to enhance form-filling efficiency 0:1. This accessibility feature significantly impacts users with various disabilities by providing automated assistance during form completion.

Disabilities impacted

Visual impairments

• Users benefit from consistent labeling across forms.
• Assistive technologies can present field purposes in multiple modalities.
• Language-independent identification helps users unfamiliar with text labels.

Cognitive disabilities

• Reduces memory load for users with dyslexia and cognitive impairments.
• Enables browser auto-filling of personal information.
• Helps users with executive function difficulties complete forms accurately.

Motor impairments

• Minimizes manual typing required for form completion.
• Particularly valuable for users with cerebral palsy, stroke survivors, and those with motor neuron disease.
• Reduces fatigue associated with extensive keyboard interaction.

Why it matters

The implementation of proper autocomplete attribute creates significant benefits:

1. Enhanced form completion efficiency:
   • Automated filling of personal information.
   • Reduced error rates in data entry.
   • Consistent presentation across different contexts.
2. Improved user experience:
   1. Customized assistance through assistive technologies.
   2. Visual indicators (icons) for users who prefer image-based communication.
   3. Support for users with varying abilities and preferences.

Coding problems and solutions

Common coding problems

1. <input type="email">

2. <input type="text" autocomplete="custom-value">

How to fix it

1. <form>
       <label for="username">Username:</label>
       <input type="text" id="username" name="username" autocomplete="username">
       
       <label for="email">Email:</label>
       <input type="email" id="email" name="email" autocomplete="email">
   </form>

2. Use valid predefined autocomplete tokens.

Known limitations

Technical constraints

• Some technologies may not support multiple purpose values.
• Combined fields (like username/email) may require single-purpose designation.
• Browser support varies for certain autocomplete values.

Implementation challenges

• Limited to predefined taxonomy of terms.
• Cannot define custom autocomplete purposes.
• May conflict with site-specific security policies.

Resources

• Identify Input Purpose (Level AA)
• HTML attribute: autocomplete