What is the function of the “autocomplete” tag?
The “autocomplete” tag is a feature that allows users to save contact information such as names, addresses, phone numbers, and email addresses for later use in other forms.
When a user returns to fill out a form other than the one already completed, the browser can offer suggestions based on previously stored information. This saves time and makes refilling easier. However, when the “autocomplete” feature is not properly configured, it can present accessibility barriers for some users.
For example, people with visual or motor disabilities may find it difficult to complete forms without this feature. That’s why it’s important for website developers to add the “autocomplete” tag to the appropriate form fields, indicating what type of information is expected in each field.
In summary, the “autocomplete” tag is important for improving the accessibility and usability of web forms for a wide variety of users, especially those with disabilities or physical limitations.
How is it inserted into HTML?
- Identify your form fields: Identify the fields in your form that you want to add the “autocomplete” tag to.
- Add the “autocomplete” tag to your form fields: To add the “autocomplete” tag to your form fields, simply add the “autocomplete” attribute to your HTML code and assign the corresponding value that matches the type of information being requested in that field. For example, for a “Name” field, you can add the tag “autocomplete” with the value “name.” We show you some examples:
See the Pen
Autocomplete by Taller Agencia (@webmastertalleragencia)
on CodePen. - Assign the correct values to the “autocomplete” tag: Make sure you assign the correct values to the “autocomplete” tag for each form field. Some of the most common values include “name” for name fields, “email” for email fields, “tel” for phone fields, and “address” for address fields.
How do I know what value corresponds to each field?
The value that should be assigned to the “autocomplete” tag on a form depends on the type of information being requested in the field. The most common are:
- “name”: Used for name fields, such as “First Name” or “Last Name”.
- “email”: Used for email fields, such as “Email” or “Email”.
- “tel”: Used for phone number fields, such as “Phone” or “Phone Number”.
- “address-line1”, “address-line2”, “address-level1”, “address-level2”, “postal-code”, “country”: used for address fields, such as “Address” or “Postal Code”.
For a complete list of “autocomplete” values and the types of information they represent, you can see the HTML specification for the “autocomplete” tag on the World Wide Web Consortium (W3C) website or at HTML attribute: autocomplete, where numerous examples of how these values could be inserted appear.
It is important to ensure that you use the correct “autocomplete” values in your form to ensure that users can complete the form efficiently and without problems.
How do I insert Contact Form into WordPress?
To insert the “autocomplete” tag into WordPress forms, its implementation will depend on the form plugin being used. Specifically for the Contact Form plugin, which is the one we use from Your Accessible Website, it is done by following these steps:
- Go to the Installed Plugins section.
- Select the contact plugin we have (in our case Contact Form 7).
- Find the form we want to edit.
- Add the “autocomplete” tag with the corresponding attribute to your field.
- Save changes.
Why is it so important in terms of Web Accessibility?
It is essential to have the “autocomplete” tag in the fields of your form to improve the accessibility and usability of your website. In this way, all those users who use assistive technologies such as screen readers or people with cognitive disabilities will be able to fill out the different fields of the form without problems.
It should be noted that browsers such as Google Chrome have their own implementation that remembers the user’s contact information for use on subsequent occasions. Despite this, it is imperative to add the “autocomplete” tag to your forms, since there could be users who have other browsers that do not have this implementation.
It’s also important to remember that while the “autocomplete” tag can improve the accessibility of your forms, it’s not the only feature that needs to be taken into account to make them accessible. It is important to follow all guidelines established by WCAG to ensure that your forms are accessible.
If you have questions regarding web accessibility, contact us and we will answer all your questions in this regard.
