Autofill on input fields collecting information about the user

[ecureuill]

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

---

WCAG: 1.3.5

• [ ] Form fields that serve certain purposes must have the correct HTML5 autocomplete attribute.

There are two ways this attribute is used. When wearing the autofill expectation mantle, the autocomplete attribute describes what input is expected from users. When wearing the autofill anchor mantle, the autocomplete attribute describes the meaning of the given value. See full specification and list here

Tests Procedure

For each form field that collects information about the user and corresponds to an autocomplete field described in List of commons input purpose, check the following:

1. The form field has a valid and well-formed autocomplete attribute and value pair.
2. The purpose of the form field indicated by the label corresponds with the autocomplete token on the input. Expected Results: If 1 and 2 are true, then the test passes and the technique has been successfully implemented

Example

This is a simple form that collects contact and credit card information from the user.

<form method="post" action="step2">
 <div>
   <label for="fname">First Name</label>
  <input id="fname" type="text" autocomplete="given-name" ... >
  </div>
  <div>
    <label for="lname">Last Name Name</label>
  <input id="lname" type="text" autocomplete="family-name" ... >
    <label for="cc-num">Credit card number:</label>
    <input type="text" id="cc-num" autocomplete="cc-number">
  </div>
  <div>
    <label for="exp-date">Expiry Date:</label>
    <input type="month" id="exp-date" autocomplete="cc-exp">
  </div>
  <div>
    <input type="submit" value="Continue...">
  </div>
</form>

List of commons input purpose

The following input control purposes are intended to relate to the user of the content and pertain only to information related to that individual.

• name - Full name
• honorific-prefix - Prefix or title (e.g., "Mr.", "Ms.", "Dr.", "Mlle")
• given-name - Given name (in some Western cultures, also known as the first name)
• additional-name - Additional names (in some Western cultures, also known as middle names, forenames other than the first name)
• family-name - Family name (in some Western cultures, also known as the last name or surname)
• honorific-suffix - Suffix (e.g., "Jr.", "B.Sc.", "MBASW", "II")
• nickname - Nickname, screen name, handle: a typically short name used instead of the full name
• organization-title - Job title (e.g., "Software Engineer", "Senior Vice President", "Deputy Managing Director")
• username - A username
• new-password - A new password (e.g., when creating an account or changing a password)
• current-password - The current password for the account identified by the username field (e.g., when logging in)
• organization - Company name corresponding to the person, address, or contact information in the other fields associated with this field
• street-address - Street address (multiple lines, newlines preserved)
• address-line1 - Street address (one line per field, line 1)
• address-line2 - Street address (one line per field, line 2)
• address-line3 - Street address (one line per field, line 3)
• address-level4 - The most fine-grained administrative level, in addresses with four administrative levels
• address-level3 - The third administrative level, in addresses with three or more administrative levels
• address-level2 - The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found
• address-level1 - The broadest administrative level in the address, i.e., the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town
• country - Country code
• country-name - Country name
• postal-code - Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the dissement, if relevant, to the address-level2 field)
• cc-name - Full name as given on the payment instrument
• cc-given-name - Given name as given on the payment instrument (in some Western cultures, also known as the first name)
• cc-additional-name - Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name)
• cc-family-name - Family name given on the payment instrument (in some Western cultures, also known as the last name or surname)
• cc-number - Code identifying the payment instrument (e.g., the credit card number)
• cc-exp - Expiration date of the payment instrument
• cc-exp-month - Month component of the expiration date of the payment instrument
• cc-exp-year - Year component of the expiration date of the payment instrument
• cc-csc - Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)
• cc-type - Type of payment instrument
• transaction-currency - The currency that the user would prefer the transaction to use
• transaction-amount - The amount that the user would like for the transaction (e.g., when entering a bid or sale price)
• language - Preferred language
• bday - Birthday
• bday-day - Day component of birthday
• bday-month - Month component of birthday
• bday-year - Year component of birthday
• sex - Gender identity (e.g., Female, Fa’afafine)
• url - Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field
• photo - Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
• tel - Full telephone number, including country code
• tel-country-code - Country code component of the telephone number
• tel-national - Telephone number without the county code component, with a country-internal prefix applied if applicable
• tel-area-code - Area code component of the telephone number, with a country-internal prefix applied if applicable
• tel-local - Telephone number without the country code and area code components
• tel-local-prefix - First part of the component of the telephone number that follows the area code, when that component is split into two components
• tel-local-suffix - Second part of the component of the telephone number that follows the area code, when that component is split into two components
• tel-extension - Telephone number internal extension code
• email - E-mail address
• impp - URL representing an instant messaging protocol endpoint (for example, "aim:goim?screenname=example" or "xmpp:fred@example.net")

Security considerations

Organizations can be concerned about allowing input fields to be automatically filled-in. There is sometimes confusion about how browsers save information and the security implications.

For the autocomplete attribute:

• This technique should only be used when asking for data about the user who is filling the form in, not for other people.
• It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
• Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
• The form is not auto-submitted, the user can see the data before it is submitted.
• It is easy to wipe both history and form data in the browser settings.
• It is easy to engage a privacy mode, such as private browsing.
• Even without autocomplete set in the webpage, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.

The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.

[github-actions[bot]]

This Feature is ready to be implemented.

[github-actions[bot]]

This issue is easy for contributing. Everyone can work on this.

[github-actions[bot]]

This Feature is ready to be implemented.