At present, the Webform module only supports "on" or "off" as autocomplete attribute values and that could prevent achieving WCAG 2.1 AA compliance in relation to form elements collecting information about a user. To meet W3C WCAG 2.1 Success Criterion 1.3.5: Identify Input Purpose, form input fields that collect certain types of user information must have an appropriate autocomplete attribute. As well as "on" or "off", there is an extensive list of semantic values that should be used where appropriate - see https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-th....

A simple example would be a contact form asking for a person's name. Rather than set autocomplete="on", instead we set autocomplete="name":

<label for="name">Your full name</label>
<input type="text" id="name" name="name" autocomplete="name" />

Even for an email input, autocomplete should be set to "email" if the input is asking for the user's email address:

<label for="email">Your email</label>
<input type="text" id="email" name="email" autocomplete="email" />

(If however the form was asking for your cousin's email, there would be no need for the autocomplete attribute - or it can just be set to "on".)

For an input asking for someone's telephone number, multiple autocomplete attributes are possible. For example:

<label for="mobile">Your mobile number</label>
<input type="text" id="mobile" name="mobile" autocomplete="mobile tel" />

Proposed resolution

Extend the list of available autocomplete values for a form element in the Webform UI based on those listed at https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute.

I've had a go at this - see the attached patch and example webforms implementing some of the new autocomplete attributes. BUT I think there are a few problems with my solution:

  1. It only works on basic form inputs - it doesn't work on composite form elements (like the composite address element).
  2. For type specific elements like email or telephone, only a few of the available autocomplete attributes would make sense to use. The solution lists all attributes - so the onus would be on the form builder to choose appropriately.
  3. In cases where multiple autocomplete values are appropriate, for example, the user's work telephone number, this solution allows for some of these (e.g. autocomplete="work tel" and autocomplete="work tel-extension") - but I have not included all possible combinations (such as autocomplete="home tel-local-prefix") because it would seriously bloat the number of available options. Arguably all possible combinations should be available even if they are unlikely to be used?

So the solution is quite basic really, I've just modified WebformElementBase.php to extend the options available for the autocomplete select in the Webform's UI - see attached patch.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Glugmeister created an issue. See original summary.

Glugmeister’s picture

Issue summary: View changes
jrockowitz’s picture

Status: Active » Needs review
FileSize
5.13 KB

@Glugmeister This is a great idea!!!

I applied some webform UX enhancement to make the autocomplete autofill attributes a little easier to understand.

Since most users won't be using the autocomplete autofill attributes, I adding some conditional logic to show the autofill attributes and then added some very basic opt grouping. I also added a more complete description to autocomplete autofill input.

Glugmeister’s picture

@jrockowitz - I think this works very well and makes things clearer. Definitely an improvement.

I noticed a typo that was in the original patch. The option label for "cc-additional-name" should be "Additional names on card". Fixed in the attached.

  • Glugmeister authored d707847 on 8.x-5.x
    Issue #3113160 by Glugmeister, jrockowitz: Provide support for complete...
jrockowitz’s picture

Status: Needs review » Fixed

I committed the patch. Thanks for the help.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.