Categories
Portfolio

Identify input purpose lifts form usability and accessibility

Identify input purpose (autocomplete values) makes easier and faster form filling experiences for everyone entering personal or payment information.

Identify input purpose is a AA success criterion for compliance with Web Content Accessibility Guidelines 2.1. Its intent is to make forms asking for personal information easier to fill in. In this post I’ll cite the benefits of autocomplete for everyone including users of assistive technologies. Also, I’ll describe two case examples that warrant identifying input purpose.

2.1 Steps Forward at A11yCamp 2018

I first heard about this guideline at the 2018 A11yCamp conference in Melbourne. Jason Kiss gave a presentation titled 2.1 Steps Forward. He covered several new success criteria for the 2.1 standard of WCAG guidelines, including 1.3.5 Identify input purpose.

Who benefits?

People who have difficulty completing forms requesting personal data will benefit. This may be due to cognitive or mobility impairments. Everyone benefits when they can save time and eliminate typing or spelling errors.

Exploring WCAG 2.1 — 1.3.5 Identify Input Purpose by Becky Gibson

Identify input purpose on a member registration form

In February 2019, I conducted follow-up validation testing of a member registration wizard. The test confirmed we had resolved 5 of 7 identified issues. However, the form fields requesting personal data didn’t identify input purpose. The autocomplete values I recommended adding to the form fields:

Title:
autocomplete="honorific-prefix"
Given name:
autocomplete="given-name"
Family name:
autocomplete="family-name"
Email:
autocomplete="email"
Australian mobile number:
autocomplete="tel"
Address line 1:
autocomplete="address-line1"
Address line 2:
autocomplete="address-line2"
State:
autocomplete="address-level1"
Postcode:
autocomplete="postal-code"

After these attributes were implemented, I tested with the NVDA screen reader. Moving focus through the amended input fields announces “… with autocomplete” .

Identify input purpose on a donation form

Fields for a donation form where it’s helpful to identify input purpose:

  • donation amount: autocomplete="transaction-amount"
    • Is auto-completing the transaction amount helpful in this/any context? Let me know your thoughts in the comments.
  • credit card number: autocomplete="cc-number"
  • card expiry: autocomplete="cc-exp-month" and autocomplete="cc-exp-year"
  • cardholder’s name: autocomplete="cc-name"
  • card security code: autocomplete="cc-csc"

See the Pen autocomplete for payment form by Vernon Fowler (@vfowler) on CodePen.

Optimise inputs to reduce cognitive effort

Before a browser can help fill out forms on your behalf, values must be saved from an earlier form completion. Good form design patterns can make it easier to fill out fields correctly the first time.

“The width [of an input] gives users a clue as to the length of the content it requires”.

Silver, A. (2018). A Checkout Form. In Form Design Patterns. Smashing Media AG.

To reduce the cognitive effort needed to fill out the expiry and security code inputs, their box widths can be set to fit their maxlength values. I optimised the input width to guide sighted users to achieve this.

Optimise for mobile input

To display the easiest touchscreen keyboard for entering a donation amount, I used input type="number". Entering a dollar amount meets Adam Silver’s criteria for when to use the number input. However, number input is not suitable for entering credit card numbers and other numeric codes. Optimal onscreen keyboards are triggered by inputmode="numeric". Refer to everything you ever wanted to know about inputmode to decide when to use numeric or other values for the inputmode attribute.

Using the credit card autocomplete attributes can enable a prompt on your smartphone to use the camera to scan the information from your credit card. This fills in the form with the information scanned from your card, and saves you from typing everything except the card security code.

Payment forms often ask for the name on the card. In Safari and Chrome on mobiles, autocapitalize="words" switches the virtual keyboard to uppercase the first letter of each word. This can make it a little easier to type in names on mobile devices.

Optimising for mobile input makes it easier for mobile users. More accurate mobile input can give us confidence to let our browser fill out forms next time.

A secure protocol is required

For privacy, forms collecting personal information should already use the https protocol. For security, browsers won’t fill in credit card information under http. If you need help here, try the complete guide to switching from HTTP to HTTPS by Vladislav Denishev.

Conclusion

A registration form and a payment form are common cases to ask for user’s personal information. Many form fields will have corresponding HTML autocomplete values to identify input purpose. Implementing autocomplete values on web forms ensures compliance with WCAG 2.1 (AA) success criterion 1.3.5 Identify input purpose. Using appropriate autocomplete values makes a faster and easier form-filling experience for everyone.

1 reply on “Identify input purpose lifts form usability and accessibility”

Leave a Reply

Your email address will not be published. Required fields are marked *