Identify input purpose is a AA success criterion. For compliance with Web Content Accessibility Guidelines 2.1 it is a must. It makes forms asking for personal information easier to fill in. In this post, I’ll tell the benefits of autocomplete. It has advantages for everyone including users of assistive technologies. Also, I’ll describe two example cases that warrant identifying input purpose.
- 2.1 Steps Forward at A11yCamp 2018
- Who benefits?
- Identify input purpose on a member registration form
- Identify input purpose on a donation form
- Optimise inputs to reduce cognitive effort
- Optimise for mobile input
- A secure protocol is required
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. Yet our 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:
- card expiry:
- cardholder’s name:
- card security code:
Optimise inputs to reduce cognitive effort
Your browser can help fill out forms on your behalf once input values are saved from an earlier session. Good form design patterns 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 cognitive effort needed to fill out card expiry and security code, set their input width to fit their longest 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 whole 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. Besides, desktop browsers will render spinner buttons to increment or decrement the input value. In these situations, incrementing or decrementing make no sense. Optimal mobile 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.
Scan your card information
Inputs with credit card autocomplete attributes can enable smartphone scanning your credit card. You can then use the camera to scan the information from your credit card. This fills in the form with the information scanned from your card. It saves you from typing everything except the card security code.
Entering capital first letters
Payment forms often ask for the name on the card. In Safari and Chrome on mobiles, use a text input with
autocapitalize="words". This switches the virtual keyboard to uppercase the first letter of each word. Once mobile users are familiar with this feature, it can make typing in names easier.
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 have corresponding 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.