Skip to content

Vernon Fowler

Designing inclusive and engaging digital experiences

  • Latest articles
  • Presentations and workshops

Tag: forms

Forms make or break the most crucial online interactions: checkout (commerce), registration (community), data input (participation and sharing), and any task requiring information entry.

Any meaningful experience on the web has a form. Whether it’s a form made of text boxes, toggles, buttons, checkboxes, or touchable widgets, web developers need to be purposeful about forms to make users happy and increase conversions.

HTML5 introduced new features for web forms. Identifying input purpose via autocomplete attributes makes easier and faster form filling experiences for everyone entering personal or payment information. New input type, inputmode, and pattern attributes help users enter data accurately and efficiently.

When semantic HTML elements are not enough, a little ARIA can make them accessible, for example to screen reader users.

Wireframing a web form wizard

I sharpened my wireframing skills, uncovered form and flow improvements, and created thoroughly commented artifacts that aided my handover conversation.

Published 30 January, 2020
Categorized as Portfolio Tagged accessibility, design system, forms, user interfaces, wireframing

How to improve form validation messages

Red colour #D4351C on a white backround gives enough contrast to comply with WCAG Contrast (Minimum)

Our registration form wizard used a mix of inaccessible default browser error messages and ambiguous custom form validation messages in red text.

Published 30 November, 2019
Categorized as Portfolio Tagged accessibility, CSS, forms, HTML

When and where to set input spellcheck =false

A form will spellcheck your name, email and postal address, giving false positives. I’ll share how I tweak this for a less jarring form-filling experience.

Published 1 October, 2019
Categorized as Portfolio Tagged forms, HTML, inclusive design

Posts navigation

Newer posts Page 1 Page 2 … Page 5 Older posts
  • LinkedIn
  • Twitter
  • Mastodon
  • CodePen
  • email
Vernon Fowler
Proudly powered by WordPress.