Autocomplete

• Provide autocomplete attribute to input fields along with appropriate values.
• The autocomplete attribute can be used on various types of form input fields such as "First Name", "Last Name", "Email", "Phone" and so on.
• Use appropriate values for the autocomplete attribute, such as on, off, given-name, family-name, email, tel and so on.
• When the autocomplete attribute is set on, the browser will attempt to automatically fill in the input field based on the user’s previous input or other data that the browser has collected.
• When the autocomplete attribute is set off, the browser will not offer any suggestions or autofill the input field.
• The HTML 5.2 autocomplete attribute supports a variety of values that allows to provide more specific instructions to the browser about how to autocomplete the input fields. They are as follows as mentioned in HTML 5.2 autofill tokens.
  • 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 &ndash 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&8217;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")

For example,

<div class="autocomplete">
    <label for="fullName">Full Name:</label>
    <!-- Autocomplete for Full name field -->
    <input name="fullName" id="fullName" class="autocomplete_input" type="text" autocomplete="name">

    <label for="email">Email:</label>
    <!-- Autocomplete for Email field -->
    <input name="email" class="autocomplete_input" id="email" type="email" autocomplete="email">
</div>

aria-autocomplete attribute

The aria-autocomplete can be used to indicate whether inputting text could trigger display of one or more suggestions or predictions.

Can be used for a combobox, searchbox, or textbox and specifies how suggestions or predictions will be presented.

• Provide aria-autocomplete attribute to textbox, searchbox, or combobox along with appropriate values.
• Use appropriate values for the aria-autocomplete attribute, such as none, inline, list and both as per requirement.
• Set aria-autocomplete attribute to none if no suggestions are displayed.
• When the aria-autocomplete attribute is set to inline, the suggested options will be displayed directly within the combobox input field.
• When the aria-autocomplete attribute is set to list, the suggested options will be displayed in a separate list that appears when the user interacts with the combobox.
• When the aria-autocomplete attribute is set to both, the suggested options can be displayed in the both models at the same time such as inline and in a separate list.

for example,

<div class="input-container open" id="combo-input">
    <h2>Combobox Autocomplete</h2>
    <!-- Combobox -->
    <label for="my-combobox">Find your eTextbook:</label>
    <input type="text" id="my-combobox" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="my-listbox">
    <button type="button" id="arw-downbtn" class="arrow-dwn" aria-label="eTextbook" tabindex="-1" aria-controls="my-listbox" aria-expanded="true">
        <i class="fa-solid fa-chevron-down"></i>
    </button>
</div>

<!-- Combobox options -->
<ul id="my-listbox" class="list-items" role="listbox" aria-label="eTextbook">
    <li role="option" id="option-0">Foundations of Decision Analysis</li>
    <li role="option" id="option-1">Optimization in Operations Research</li>
    ...
</ul>

Implementing autocomplete and aria-autocomplete attribute correctly benefits majorly the below users.

• People with cognitive disabilities
• People with visual disabilities
• People using speech input
• People with limited dexterity
• People using keyboard only