Skip to content

Audit: Form fields are tagged with appropriate autocomplete attributes #10450

@socsieng

Description

@socsieng

Feature request summary

Note: This feature request is a subset of #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, 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. <input id="cvc" ...>)
    • Message (e.g. Does not have an autocomplete attribute., or Has unrecognized autocomplete attribute of cc-csc. Learn more.)

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?

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions