Design Better Forms
Andrew Coyle
50K286

Excellent article, Andrew.

Most forms suffer from one of more of the “Don’t” design choices that this article neatly summarises and it’s great to see recommendations clearly illustrated.

Reference “Show all selection options if under 6”, from an accessibility point of view these should still be rendered in a semantically appropriate way. Whilst tempting to render these as a bunch of semantically unrelated <a> links or <button>s to achieve a “button-like” look, a custom-styled radio button array or HTML list are probably better suited to the job. Regardless of the elements used, one issue not covered in your proposed solution is that of the user not being able to revert their selection to an indeterminate state after making a selection (differences between HTML4 and 5 radio button specs covered in this article: https://css-tricks.com/indeterminate-radio-buttons/). It’s possible to hack around this with Javascript but it’s not an ideal solution due to potential compatibility issues with older assistive technologies. One advantage of a dropdown list is that it’s more flexible in that a “Select..” state can be made submittable if a selection isn’t mandatory, and allows users to revert an initial selection if needed.

Reference “Group related information”, form groups should be achieved using <fieldset> containers with section names rendered as <legends>. Historically these were a pain to style reliably cross-browser but are much easier these days.

Another item for consideration is form length — consider chunking forms into separate pages if they become long and unwieldy.

Like what you read? Give Blakeyg a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.