INSIGHTS | November 27, 2020

WCAG: 1.3.5 Identify Input Purpose


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.

Online Forms: THEY’RE EVERYWHERE…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.

[Source: http://designwoop.com/2014/07/29-checkout-interfaces-ecommerce-web-design/]

crm

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.

Embed gif:

Angry Spongebob Squarepants GIF - Find & Share on GIPHY

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.

Input Purposes and Autocomplete

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″>
<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=”email”>Email address:</label>
<input type=”text” id=”email” autocomplete=”email”>
</div>
<div>
<input type=”submit” value=”Continue…”>
</div>

</form>

Contact Us

Monday Loves You
1770 West Berteau Avenue, #206
Chicago, IL 60613
312.973.1112
hi@mondaylovesyou.com

Terms of Use

©Duple Meter LLC 2024

Stay Connected.

Contact Us.

Monday Loves You
1770 West Berteau Avenue, #206
Chicago, IL 60613
312.973.1112
hi@mondaylovesyou.com

Terms of Use

Stay Connected.