GoogleChrome / GoogleChrome/lighthouse

Audit: Form fields are tagged with appropriate autocomplete attributes

Open
#10,450 3 comments 0 reactions 0 assignees View on GitHub
new_audit P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 20h
Merged PRs (30d)
19

Description

## Feature request summary

*Note: This feature request is a subset of https://github.com/GoogleChrome/lighthouse/issues/1639 and will focus on the autocomplete portion of the original issue.*

Introduce a new audit to validate that a page containing forms has valid autocomplete attributes to help developers create forms that maximize autofill compatibility/accuracy and improve user experience.

### Context

Many developers are tasked with creating applications that ask for user input using a form, and many of these forms will either deal with common input types like login forms, personal/contact details, payment details, etc. Many popular browsers can populate form fields with previously saved data if the browser can identify each form field. Identification is easy for browsers if form is implemented according to [specifications](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens), however, because many forms are not implemented according to specifications, browsers implement their own heuristics to compensate for this.

By adhering to the specifications, developers and users can expect a more predictable autofill experience.

### Audit appearance

This new audit should fall under best practices and should resemble some of the accessibility audits where each failed item is listed in the audit.

Example:

- Title: Autocomplete
- Description: Form fields have correct autocomplete attributes
- Results: Tabular, columns:
- Element (e.g. ``)
- Message (e.g. *Does not have an autocomplete attribute.*, or *Has unrecognized autocomplete attribute of `cc-csc`. Learn [more](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute).*)

### How is this audit different from existing audits?

There are no existing audits that cover this.

### What % of developers/pages will this impact?

No data points to refer to at this stage. Nearly all developers have either built a form or have visited a site that would benefit from effective autofill.

### How is the new audit making a better web for end users?

Will result in a more consistent autofill experience across all browsers resulting in a faster checkout for customers and lower abandonment for developers.

### What is the resourcing situation?

Will have resources to implement and document the audit.

### Any other links or documentation that we should check out?

- Existing issue: https://github.com/GoogleChrome/lighthouse/issues/1639
- Chrome autofill predictions: `chrome://flags/#show-autofill-type-predictions`
- [WHATWG specifications](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute)
- Google guidance on autofill: [Help users checkout faster with Autofill](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en)

## How is this beneficial to Lighthouse?

Provides additional value to web developers using Lighthouse and improves the quality of forms on the web overall.

Will also introduce a new gatherer which returns form field elements.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.