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 warranted 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.
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:
- Given name:
- Family name:
- Australian mobile number:
- Address line 1:
- Address line 2:
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:
- Is auto-completing the transaction amount helpful in this/any context? Let me know your thoughts in the comments.
- credit card number:
- cardholder’s name:
- card expiry:
- security code (CCV):
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. When entering credit card numbers and other numeric codes via onscreen keyboards,
inputmode="numeric" is more appropriate than
type="number". Refer to everything you ever wanted to know about inputmode to decide when to use these similar attributes. Also, payment forms often ask for the name on the card. In Safari and Chrome on mobiles,
autocapitalize="characters" switches the virtual keyboard to uppercase for all letters. 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.
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 experience for everyone to complete these kinds of forms.