Sentence Forms (not Mad Libs)

Whether you call them sentence forms, narrative forms, fill-in-the-blank forms, or Mad Libs forms, you are probably describing a form where the fields are interspersed within words in a sentence. Unlike more traditional forms, laid out with simple pairings of labels and fields, these forms are meant to be read in a flow.

They were popular in the late aughts and early teens, but mostly waned after that. Maybe building and maintaining them was difficult (often a copywriter was best suited to construct them, and many tech efforts lack that), they were seen as passé (so not cool anymore), or promises of 25-40% conversion rate increases fell flat (once the novelty wore off).

More than a decade on, I am seeing a resurgence in the format. As with the first time these were dreamed up, the accessibility, and therefore usability, of most implementations leaves a lot to be desired.

Challenges

Some of what I note here comes from my own testing on these forms going back a decade or more. I have broken it up as a bullet list since it may be useful for your team to add to any checklists you have.

An Example Form

I found a form online, linked from one of the sites that promises more paying customers from genius contact forms if you follow its 5 easy something or others and which pitched this format in May of 2021 (so a decade late?). One of the featured forms has already been dumped by its owner, so I dug it out of the Wayback Machine and used that as my base.

Once I had created a similar but different form (in wording and fields), I went to work making it pass WCAG. Notice I am not saying that I made it accessible, or even usable. I only took the steps to make it pass WCAG.

You can play with the embedded version or visit the debug version to try it with your preferred assistive technology.

See the Pen by Adrian Roselli (@aardrian) on CodePen.

WCAG Changes

In order to pass muster with WCAG (levels A and AA), I had to make some modifications. A few were easy (like adding autocomplete). Some not so much, such as adding error handling (it is not robust) to identify what fields are in error and manage the focus as part of it.

The following is a simple list, but mostly it is there to guide the kinds of things you will need to consider before you even get your sample form in front of users for testing.

I also tried to keep the error messages friendly and follow the tone of the form. Obviously, your forms and messages would differ.

This may be one of the few cases where placeholder text is necessary for the fields to give context to the read — and also conveys the Mad-Libs-like cues we expect.

In a Screen Reader

I made two videos using NVDA 2021.1 with Firefox 91 to show how this form performs in a screen reader. The first video uses the “read-all” feature, where NVDA reads from the top of the page. The second is me tabbing through the form with a bonus few seconds showing the errors in action.

Using the read-all feature (different than just arrowing through the page). I made very long captions to try to keep the fields grouped with their sentences and also demonstrate how verbose the form is in this context.
Here I am tabbing through the form. You can hear how the placeholder gets announced with each field as well as the accessible name. The error message receives focus when I submit, which NVDA reads through no effort from me.

References

The following may be useful to understand some of what I am doing in the code:

Justin Yarbrough wrote an article, Exploring airline form accessibility for service animal handlers, where he detailed some of the now-mostly-corrected challenges in the PDF forms airlines provide. They are based on a US Department of Transportation document and they use a bit of a sentence format by letting you insert the animal name into simple statements like, blank is vaccinated for rabies. You can see an example of the form from Delta.

Wrap-up

Probably do not use this style of form. If you do, get a copywriter on board, make sure to address all the WCAG Success Criteria at Level AA, and then put it in front of users to test.

If you plan to use the form across languages then you may need to customize it per language with a copywriter. If you know you will have users who may auto-translate the form, be prepared for them to be confused.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>