As much as everyone loves wandering around a Wal-Mart for 8 hours trying to find the right kind of toothpaste, recent developments in technology have allowed many of us the unprecedented luxury of being able to order literally anything online.
These days, we can take care of more and more of our errands online, from shopping for clothes to depositing checks to filing our taxes, and as a result we seem to be constantly inputting the same set of information into online forms.
That’s typically where autofill comes in handy. Browsers and other user agents can store certain bits of information that we’re often required to enter online. Just think of how frustrating it would be if we had to key in our names, usernames, passwords, and addresses every time we were asked.
The prevalence of online forms can prove to be a challenge for users with certain cognitive, visual, or physical limitations. In such situations, it can be crucial that input fields are properly coded so that users who rely on assistive technologies are able to autocomplete data and possibly even view forms in a way that’s more easily comprehensible. For instance, some with cognitive limitations may prefer a means to identify input fields other than the typical word labels. If an input field’s purpose can be programmatically determined, depending on the field, these people can use a browser plug-in to swap out the labels the content author provided with icons or other symbols.
WCAG has assembled a list of common input field values. If your site contains an online form, you should adopt and repurpose this predefined taxonomy with HTML’s autocomplete attribute, wherever applicable, in order to help ensure your site is compatible with user agents and assistive technologies.
The autocomplete attribute in HTML is applicable for only a certain number of specific values. WCAG put this list of input purposes together from those terms that the autocomplete attribute would recognize.
To see these terms in action, here’s an example of code for a simple form that collects names and email addresses from users:
<form method=”post” action=”step2″>
<label for=”fname”>First Name</label>
<input id=”fname” type=”text” autocomplete=”given-name” … >
<label for=”lname”>Last Name Name</label>
<input id=”lname” type=”text” autocomplete=”family-name” … >
<label for=”email”>Email address:</label>
<input type=”text” id=”email” autocomplete=”email”>
<input type=”submit” value=”Continue…”>