Understanding Autocompletion and Autofill
Web browsers, by default, store user-entered information from website forms. This allows browsers to offer autocomplete (suggestions while typing) and autofill (pre-populating fields). These features, while convenient, can raise privacy concerns.
However, certain form data, like one-time pins or sensitive information (government IDs, credit card security codes), should not be saved. As a web developer, you have the tools to control this behavior, even if users have autocomplete enabled in their browser settings.
WCAG 2.1 and Autocomplete
WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose) focuses on programmatically identifying form fields related to personal information. This standard does *not* mandate that autocomplete or autofill *must* function. You can meet the criterion by correctly using the autocomplete attribute on individual form fields, even if autocomplete is disabled for the entire form.
Disabling How to Disable Autocompletion
To disable autocompletion in forms, utilize the autocomplete attribute. You can apply it to an entire element or to specific elements.
Setting autocomplete="off" on a field has two primary effects:
1. It instructs the browser not to save the data entered by the user for future autocompletion on similar forms. (Note: Some browsers may make exceptions, such as prompting users to save passwords).
2. It prevents the browser from caching form data in the session history. This is important because, without this, a user clicking 'back' after submitting a form might see their previously entered data.
“As a web developer, you have the power to control form behavior and user data, enhancing both security and the user experience.
MDN Web Docs
Interactive Elements
Explore how to control autocompletion effectively.
Code Snippets
See practical code examples demonstrating how to implement `autocomplete="off"` in your HTML forms.
Browser Compatibility Table
Check browser compatibility for the `autocomplete` attribute to ensure consistent behavior across different browsers.
Accessibility Best Practices
Learn how to make your forms accessible when disabling autocomplete, including the use of ARIA attributes.
Browser Addressing Persistent Suggestions
If a browser continues to offer suggestions despite the autocomplete="off" setting, you may need to adjust the element's attributes further. This is because browsers can sometimes override these settings for security or usability reasons.
Managing Autofill for Login Fields
Modern browsers include built-in password management. They prompt users to save login credentials, which are then automatically filled on subsequent visits to the site. This can often be seen as a security benefit.
Therefore, browsers often *ignore* autocomplete="off" on login fields. If a site sets autocomplete="off" on a form with username and password fields, the browser *will still* offer to remember the login information.
To prevent autofilling of password fields specifically (e.g., on a user management page where a new password is being set), use autocomplete="new-password". Note that this is a hint to the browser, and compliance may vary.