WCAG 2.1 Implementations/JF/research
Functional Gap in Browsers with @autocomplete Attributes
As part of the testing required to advance the SC 1.3.4 WCAG 2.1 requirement, I initially set up a test file that had an example of each of the 53 named values for autocomplete tokens found in the W3C HTML 5.2 specification (https://www.w3.org/TR/html52/sec-forms.html#sec-autofill - I did not evaluate the values of True or False). The rudimentary test file can be found at http://john.foliot.ca/demos/autofill.php (Not Secure) and https://john.foliot.ca/demos/autofill.php (SSL Cert).
My intention with building out this file was to first attempt to fill out a form input with each value, to see which values were being “automatically” stored by each browser. Additionally, while sometimes difficult to find, form input values being stored on the browser can also usually be edited via the browser settings (on most browsers tested: I could not find a setting in Internet Explorer, but more on IE later). On a positive note, none of the browsers I tested would support the Credit Card fields on a page not encrypted via SSL.
Test Results
Current native support in the browsers is both incomplete and inconsistent across different browsers, with approximately 50% support of the named values (see chart below). Support in 3rd-party applications however appears quite robust.
NOTE: I have not tested support for additional address line or level fields beyond level 2, as most browsers did not provide the ability to add this data. 3rd-party applications such as LastPass however allow for custom fields to be added, so support for these fields is available in theory.
NOTE: Testing of the fields related to Credit Cards is restricted to forms being served via https. Screen captures here are provided from that secure context.
Summary:
Browsers by Platform
| Windows Platform | Mac Platform | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Autocomplete Token Values | Firefox | Chrome | Edge | Internet Explorer | Vivaldi (Chromium) | Brave | Safari | Chrome | Firefox |
| autocomplete="name" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="honorific-prefix" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="given-name" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="additional-name" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="family-name" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="honorific-suffix" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="nickname" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="username" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="new-password" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="current-password" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="organization-title" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="organization" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="street-address" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="address-line1" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="address-line2" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="address-line3" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="address-level4" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="address-level3" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="address-level2" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="address-level1" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="country" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="country-name" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="postal-code" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-name" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-given-name" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-additional-name" | Field-level support only | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="cc-family-name" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-number" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-exp" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-exp-month" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-exp-year" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="cc-csc" | Field-level support only | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="cc-type" | Field-level support only | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="transaction-currency" | Field-level support only | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="transaction-amount" | Field-level support only | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="language" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="bday" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="bday-day" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="bday-month" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="bday-year" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="sex" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="url" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="photo" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="tel" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="tel-country-code" | Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-national" | Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-area-code" | Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-local" | Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-local-prefix" | Not Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-local-suffix" | Not Supported | Not Supported | Not Applicable | Not Applicable | Supported | Not Supported | |||
| autocomplete="tel-extension" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
| autocomplete="email" | Supported | Supported | Not Applicable | Not Applicable | Supported | Supported | |||
| autocomplete="impp" | Not Supported | Not Supported | Not Applicable | Not Applicable | Not Supported | Not Supported | |||
3rd-Party Applications
| Autocomplete Token Values | LastPass (www.lastpass.com) | DashLane (www.Dashlane.com) | |
|---|---|---|---|
| autocomplete="name" | Supported | Error - Wrong Value | |
| autocomplete="honorific-prefix" | Supported | Not Supported | |
| autocomplete="given-name" | Supported | Supported | |
| autocomplete="additional-name" | Supported | Not Supported | |
| autocomplete="family-name" | Supported | Supported | |
| autocomplete="honorific-suffix" | Customized Support [1] | Not Supported | |
| autocomplete="nickname" | Supported | Customized Support [2] | |
| autocomplete="username" | Supported | Customized Support [2] | |
| autocomplete="new-password" | Customized Support [1] | Not Supported | |
| autocomplete="current-password" | Customized Support [1] | Not Supported | |
| autocomplete="organization-title" | Supported | Not Supported | |
| autocomplete="organization" | Supported | Supported | |
| autocomplete="street-address" | Supported | Supported | |
| autocomplete="address-line1" | Supported | Error - Wrong Value | |
| autocomplete="address-line2" | Error - Wrong Value | Not Supported | |
| autocomplete="address-line3" | Error - Wrong Value | Not Supported | |
| autocomplete="address-level4" | Supported | Not Supported | |
| autocomplete="address-level3" | Supported | Not Supported | |
| autocomplete="address-level2" | Supported | Not Supported | |
| autocomplete="address-level1" | Supported | Not Supported | |
| autocomplete="country" | Supported | Error - Wrong Value | |
| autocomplete="country-name" | Supported | Supported | |
| autocomplete="postal-code" | Supported | Supported | |
| autocomplete="cc-name" | Supported | Error - Wrong Value | |
| autocomplete="cc-given-name" | Supported | Error - Wrong Value | |
| autocomplete="cc-additional-name" | Supported | Not Supported | |
| autocomplete="cc-family-name" | Supported | Not Supported | |
| autocomplete="cc-number" | Supported | Not Supported | |
| autocomplete="cc-exp" | Supported | Not Supported | |
| autocomplete="cc-exp-month" | Supported | Not Supported | |
| autocomplete="cc-exp-year" | Supported | Not Supported | |
| autocomplete="cc-csc" | Supported | Not Supported | |
| autocomplete="cc-type" | Customized Support [1] | Not Supported | |
| autocomplete="transaction-currency" | Supported | Not Supported | |
| autocomplete="transaction-amount" | Supported | Not Supported | |
| autocomplete="language" | Error - Wrong Value | Not Supported | |
| autocomplete="bday" | Supported | Supported | |
| autocomplete="bday-day" | Supported | Error - Wrong Value | |
| autocomplete="bday-month" | Supported | Error - Wrong Value | |
| autocomplete="bday-year" | Supported | Supported | |
| autocomplete="sex" | Supported | Not Supported | |
| autocomplete="url" | Customized Support [1] | Not Supported | |
| autocomplete="photo" | Customized Support [1] | Not Supported | |
| autocomplete="tel" | Supported | Supported | |
| autocomplete="tel-country-code" | Supported | Not Supported | |
| autocomplete="tel-national" | Supported | Not Supported | |
| autocomplete="tel-area-code" | Error - Wrong Value | Not Supported | |
| autocomplete="tel-local" | Supported | Not Supported | |
| autocomplete="tel-local-prefix" | Error - Wrong Value | Not Supported | |
| autocomplete="tel-local-suffix" | Error - Wrong Value | Not Supported | |
| autocomplete="tel-extension" | Supported | Not Supported | |
| autocomplete="email" | Supported | Supported | |
| autocomplete="impp" | Customized Support [1] | Not Supported |
Results by Browser
Firefox:
Supports (16+2 values + Unusual Support for the 12 Credit Card fields):
- autocomplete="name"
- autocomplete="given-name"
- autocomplete="additional-name"
- autocomplete="family-name"
- autocomplete="organization"
- autocomplete="street-address"
- autocomplete="address-line1" (appears to re-use street-address data)
- autocomplete="address-level1" (* State)
- autocomplete="address-level2" (* City)
- autocomplete="country" (** Appears to extract 2-letter code via the dropdown values)
- autocomplete="country-name"
- autocomplete="postal-code"
- autocomplete="tel"
- autocomplete="tel-country-code"
- autocomplete="tel-national"
- autocomplete="tel-area-code"
- autocomplete="tel-local"
- autocomplete="email"
NOTE: Firefox claims to only support address fields in the United States (see highlighted comment in inset image)
NOTE: in Firefox, when providing a space-separated value for telephone, the browser re-configures the number as a solid string, and adds the “+” in front of the country code.
Credit Card Data:
- autocomplete="cc-name"
- autocomplete="cc-given-name"
- autocomplete="cc-additional-name"
- autocomplete="cc-family-name"
- autocomplete="cc-number"
- autocomplete="cc-exp"
- autocomplete="cc-exp-month"
- autocomplete="cc-exp-year"
- autocomplete="cc-csc"
- autocomplete="cc-type"
- autocomplete="transaction-currency"
- autocomplete="transaction-amount"
NOTE: Firefox does not appear to auto-populate Credit Card fields, however it does appear to remember values if you start typing into each field, by exposing possible 'completed' values, in a fashion to how Edge and Internet Explorer support form inputs (see below).
Chrome:
Supports (21+1 values):
- autocomplete="name"
- autocomplete="given-name"
- autocomplete="additional-name"
- autocomplete="family-name"
- autocomplete="organization"
- autocomplete="street-address"
- autocomplete="address-line1" (* Appears to re-use street-address data – need to verify spec intent)
- autocomplete="address-level1" (* State)
- autocomplete="address-level2" (* City)
- autocomplete="country" (** Appears to extract 2-letter code via the dropdown values)
- autocomplete="country-name"
- autocomplete="postal-code"
- autocomplete="tel"
- autocomplete="email"
Credit Card Data:
- autocomplete="cc-name"
- autocomplete="cc-given-name"
- autocomplete="cc-family-name"
- autocomplete="cc-number"
- autocomplete="cc-exp"
- autocomplete="cc-exp-month"
- autocomplete="cc-exp-year"
- autocomplete="cc-type"
Internet Explorer
Does Not Support
Currently, it does not appear that Internet Explorer supports any of the autocomplete values. When attempting to complete the form, IE offers up some values for form inputs based upon what appears to be a rudimentary predictive typing feature, but there does not appear to be any direct association of the values to possible data-fields. For example, in the screen capture, when typing in “J”, the browser offers possible values previously typed that begin with “j”, but with no other apparent logic provided.
Credit Card Data: Card fields operate in the same fashion as all the other fields. For example, if I attempt to start typing a credit card number that starts with three, then the browser offers to insert 372572661123456, although there is no indication that it is a valid CC number or not, nor which card it is. (Currently using a dummy American Express number)
Microsoft Edge:
Does Not Support
Currently, it does not appear that Edge supports any of the autocomplete values. When attempting to complete the form, Edge offers up some recently typed values for form inputs, but there does not appear to be any association of the values to possible data-fields.
Credit Card Data: Card fields operate in the same fashion as all the other fields. For example, if I attempt to start typing a credit card number that starts with three, then the browser offers to insert 372572661123456, although there is no indication that it is a valid CC number or not, nor which card it is.
Vivaldi Browser (based on Chromium)
Source: https://vivaldi.com
Supports (27+1 values):
- autocomplete="name"
- autocomplete="given-name"
- autocomplete="additional-name"
- autocomplete="family-name"
- autocomplete="organization"
- autocomplete="street-address"
- autocomplete="address-line1" (* Appears to re-use street-address data – need to verify spec intent)
- autocomplete="address-level1" (* State)
- autocomplete="address-level2" (* City)
- autocomplete="country" (** Appears to extract 2-letter code via the dropdown values)
- autocomplete="country-name"
- autocomplete="postal-code"
- autocomplete="tel"
- autocomplete="tel-country-code"
- autocomplete="tel-national"
- autocomplete="tel-area-code"
- autocomplete="tel-local"
- autocomplete="tel-local-prefix"
- autocomplete="tel-local-suffix"
- autocomplete="email"
Credit Card Data:
- autocomplete="cc-name"
- autocomplete="cc-given-name"
- autocomplete="cc-family-name"
- autocomplete="cc-number"
- autocomplete="cc-exp"
- autocomplete="cc-exp-month"
- autocomplete="cc-exp-year"
- autocomplete="cc-type"
Brave Browser (Chromium)
Source: https://www.brave.com
Supports (21+1 values):
- autocomplete="name"
- autocomplete="given-name"
- autocomplete="additional-name"
- autocomplete="family-name"
- autocomplete="organization"
- autocomplete="street-address"
- autocomplete="address-line1" (* Appears to re-use street-address data – need to verify spec intent)
- autocomplete="address-level1" (* State)
- autocomplete="address-level2" (* City)
- autocomplete="country" (** Appears to extract 2-letter code via the dropdown values)
- autocomplete="country-name"
- autocomplete="postal-code"
- autocomplete="tel"
- autocomplete="email"
Credit Card Data:
- autocomplete="cc-name"
- autocomplete="cc-given-name"
- autocomplete="cc-family-name"
- autocomplete="cc-number"
- autocomplete="cc-exp"
- autocomplete="cc-exp-month"
- autocomplete="cc-exp-year"
- autocomplete="cc-type"
Results by 3rd-Party Application
LastPass Premium (www.lastpass.com)
Supports (40 values natively, support for 49 with user-customization):
- autocomplete=name
- autocomplete=honorific-prefix
- autocomplete=given-name
- autocomplete=additional-name
- autocomplete=family-name
- autocomplete=honorific-suffix (Customized Support)
- autocomplete=organization-title
- autocomplete=organization
- autocomplete=street-address
- autocomplete=address-line1
- autocomplete=address-line2 (Issues with Line2 and Line3 values - see screen capture)
- autocomplete=address-line3
- autocomplete=address-level4 (Customized Support)
- autocomplete=address-level3 (Customized Support)
- autocomplete=address-level2
- autocomplete=address-level1
- autocomplete=country
- autocomplete=country-name
- autocomplete=postal-code
- autocomplete=nickname
- autocomplete=username
- autocomplete=new-password (Customized Support)
- autocomplete=current-password (Customized Support)
- autocomplete=bday
- autocomplete=bday-day
- autocomplete=bday-month
- autocomplete=bday-year
- autocomplete=sex
- autocomplete=url (Customized Support)
- autocomplete=photo (Customized Support)
- autocomplete=tel
- autocomplete=tel-country-code
- autocomplete=tel-national
- autocomplete=tel-local
- autocomplete=tel-extension
- autocomplete=email
- autocomplete=impp (Customized Support)
Credit Card Data:
- autocomplete=cc-name
- autocomplete=cc-given-name
- autocomplete=cc-additional-name
- autocomplete=cc-family-name
- autocomplete=cc-number
- autocomplete=cc-exp
- autocomplete=cc-exp-month
- autocomplete=cc-exp-year
- autocomplete=cc-csc
- autocomplete=cc-type (Customized Support)
- autocomplete=transaction-currency
- autocomplete=transaction-amount
[1] Customized Support: LastPass does not currently support native fields for all values "Out-of-the-box", however there is a function to add additional values to the app, which then configures LastPass to support these new values.
Dashlane (www.dashlane.com)
Supports (12 values natively + 7 erroneously, no apparent support for user-customization):
- autocomplete=given-name
- autocomplete=family-name
- autocomplete=honorific-suffix
- autocomplete=nickname
- autocomplete=username
- autocomplete=organization
- autocomplete=street-address
- autocomplete=country-name
- autocomplete=postal-code
- autocomplete=bday
- autocomplete=bday-year
- autocomplete=tel
- autocomplete=email
Credit Card Data:
NOTE: Dashlane appears to have numerous confusions related to fields and values
[2] Username and nickname appear to be auto-generated by the application