Bruce Lawson's personal site

Formstack, autocomplete and accessibility

TL;DR: Until Formstack integrates autocomplete, I don’t believe it’s possible to guarantee accessible forms. Formstack’s inadequate accessibility documentation suggests they do not understand their obligations.

If you find filling in forms boring, you won’t believe how boring coding them can be. And then you have to do something with the submissions, decide on how to archive them, their GDPR liabilities etc. No wonder so many organisations go looking for third party solutions.

For web users, browsers can do a lot of work to help filling in forms accurately and quickly. We’re all familiar with browsers remembering your username and password. Also, all browsers let you input credit card details and other personal data (address, name, date of birth etc) and that can be used by the browser to autocomplete forms, if the developer identifies the purpose of the field:

<input autocomplete="given-name" id="fname" type="text">

(There’s a list of possible autocomplete values in the HTML spec. MDN’s autocomplete documentation is, as usual, excellent.)

A client recently asked me to evaluate their site against the new WCAG 2.2 requirements. One of these is 3.3.7 Redundant Entry which states “Information previously entered by or provided to the user that is required to be entered again in the same process is either auto-populated, or available for the user to select”. This doesn’t require developers to integrate browser’s autocomplete (logic could be developed to populate from back-end systems), but it could certainly help. And, at level AA (which is the minimum you should aspire to), autocomplete is required by Success Criterion 1.3.5: Identify Input Purpose:

The purpose of each input field collecting information about the user can be programmatically determined when: The input field serves a purpose identified in the Input Purposes for user interface components section; and The content is implemented using technologies with support for identifying the expected meaning for form input data.

The client had made the decision to use Formstack to generate their forms. I pored through the Formstack documentation to learn how to set autocomplete attributes on the HTML it generates, but found nothing. Eventually, I emailed support who replied

Unfortunately, we currently do not have support for this feature however, this is an excellent idea and may be something that we can add in a future release. We recommend submitting this as a Feature Request on our feedback page for our Product team to review for implementation.

I filed a Feature Request, feeling like Winston Smith depositing paper into the Memory Hole. The email contained a link which told me they are “substantially 508 Compliant” (‘508’ is a US accessibility law – note, they don’t claim to be ‘fully compliant’). The page invited me to “get more details and information on our 508 Compliance, please click here!”. “Click here” link text is a failure of the most basic level of accessibility, and the link is broken.

Are Formstack Forms 508 Compliant-
We're very happy to say that our Published Forms are substantially 508 Compliant. This means Users with visual or hearing impairments can fill out online Forms created through Formstack. To get more details and information on our 508 Compliance, please click here!

Nitpicking, but Pat Lauke pointed out 508 still references WCAG 2.0, so the “new” 1.3.5 Identify Input Purpose from 2.1 isn’t necessarily covered by being “508 compliant”, although it is necessary for WCAG. Helpfully, Formstack also has a page Is Formstack WCAG Compliant? which doesn’t talk about WCAG at all, conflating it with 508.

Formstack is committed to complying with the government standards for Section 508 compliance, and we strive to meet the needs of all users, regardless of disability status. To help you create Section 508 compliant forms for your websites, blogs, and social media, our form builder warns you if you're attempting to include features that are not supported by assistive technology. For additional information and resources on Formstack and Section 508 compliance, please review our information and security page found here. Voluntary Product Accessibility Template (VPAT) Many large companies voluntarily choose to follow WCAG and Section 508 compliance guidelines. If you are part of a federal-funded industry, an international organization, or if your company has adopted these internal regulations, you must provide equal accessibility to users with disabilities.

This does not give me confidence that Formstack understands the accessibility requirements of the forms it generates.

Formstack claims that it helps you to “Create the frictionless digital experiences that employees and customers expect”, so it’s bizarre that it doesn’t allow you to integrate with autocomplete; when Google first implemented it in Chrome they found that “by correctly using autocomplete attributes on your forms, users complete them up to 30% faster“.

Of course, browsers will try to help out. Here’s Microsoft Edge valiantly trying to autocomplete a Formstack form:

Formstack showing an error because its heuristics were not able to completely guess the fields

Edge (which is based on Chromium) is packed full of heuristics which even employ machine learning to try to match the previously-supplied user data with the fields. Or, Formstack could simply add simple logic to their form builder so that if I choose a ‘name’ entry field, it adds autocomplete="given-name" to the relevant input field. Perhaps Formstack could expose an “advanced mode” in their designer in which you can attach arbitrary attributes and values to a form element. Until then, I don’t believe it’s possible to guarantee accessible forms if you’re using Formstack.

For humans, “don’t make me think” is a good design motto. For machines, it’s “don’t make me guess”.

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

One Response to “ Formstack, autocomplete and accessibility ”

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.