I see forms all the time that make me wonder if we’ll ever see people noting required fields in a form correctly. I bet you do too. Timing is everything, and yesterday—just as an article of ours was published at A List Apart called ARIA and Progressive Enhancement where we look at required fields in detail—I saw an example of a form that just makes me cringe.

Web forms are everywhere–they drive interaction and e-commerce. They are the cornerstone of web applications and a critical component of accessibility for even the simplest of web sites. Why? Because if you get forms wrong from an accessibility or usability perspective, your app falls down in a hurry.

Even the simplest of things aren’t as straightforward as we’d like them to be.

Take a look at noting required fields for a form. You’ve likely seen hundreds of ways to tell a person that certain fields are required over the years. Just yesterday, I saw this example:

Screenshot of a billing form marking required fields with a thick red line to the left of the required fields.
Screenshot: Here you can see that Address, City, State, Postal Code and Country are required fields. However, you can only “see” it as it is created with an empty div and a CSS background-color.

Here’s the code that is used to show that this is a required field:


<div class="requiredField"></div>

div.requiredField {
	background-color: #DC2222;
	width: 3px;
}

There is nothing in the HTML — no information at all — that indicates required fields. It is all being done entirely with an empty, semantically meaningless div and some CSS properties. This means that it is a completely visual solution, and has nothing available for a screen reader or other assistive technology to read.

So what are you to do?

Simple.

Content (HTML) is your most reliable way of showing people what fields are required.

  • It can be the word “required” in your form label.
  • It could be an asterisk, or even an image of an asterisk.
  • It could simply be a statement that “all fields are required” before the form.

In the future, that may change to include other techniques like adding HTML5’s “required” attribute or even ARIA’s “aria-required” attribute.

For now, it needs to be in your content, not your CSS.

The future

We study form interaction a lot — it is usually tops on the list for our clients when we’re looking at their web apps. If you’re interested in a deep look at more modern methods, go read our article over at A List Apart:

ARIA and Progressive Enhancement

The meatiest part of the article is a detailed look at modern techniques for denoting required fields.

Take a look at the Going a bit deeper section. It may overwhelm you, but you’ll see the details of testing several different scenarios for noting required fields. We test methods for showing required fields like HTML5’s required attribute and ARIA’s “aria-required” attribute. At the end of the day, we always come back to our standard method of including appropriate content in the form label. We started using that method in 2005 and have been using it ever since.

If you need to make your forms accessible, please take a look at our Virtual Seminar In Top Form: Designing and Building Accessible Forms. As a bonus, we’re giving everyone that registers a copy of Luke Wroblewski’s Web Form Design book (a $22 value).

Sign up now

6 thoughts on “Will we ever get required fields right?”

Read comments

  1. rotsotnir says:

    Why does this read like a giant advert?

    1. Hi rotsotnir — There certainly is an element of “advertising” in it. We’ve got a very relevant course that we’re delivering, so highlighting it was something I wanted to do. Is your comment based on the fact that the reference to our virtual seminar is in the middle of the article? in a call-out? or is it based on something else? I’m genuinely curious to know what it is that you feel makes it simply an advert.

      1. rotsotnir says:

        Moving it to the bottom certainly helped. But you’re trying to make it look like a reluctant ‘hey, we can help you if you need it’ and then throwing in ‘as a bonus, we’re giving …’ with a big ‘Sign up now’ button – it almost feels like being tricked to read it. Should be more ‘let us help you’ and less ‘give us your money’.

        Otherwise it is a very good article and I enjoyed it.

      2. Thanks for the feedback. If you don’t mind, I’ll keep asking question to fully understand you 🙂

        The “as a bonus, we’re giving…” part — was it just the wording of that that put you off? If I hadn’t used the words “as a bonus” (even though it is) would it have been different to you? As for the sign up now — it’s just a link that we put in there as a call to action… sometimes if you don’t ask people to do something, they won’t. Again, was it just the wording?

      3. rotsotnir says:

        It may have been different. I guess its the combination of that sentence combined with the call to action that lends itself into more of an advertisement. Kind of like 3am infomercials – “And as a bonus to our first 100 callers, we’re giving away these steak knives free! Call now!”

  2. I enjoyed this rant and the straightforward summary about what to do to make sure required field indicators are accessible.

    I’ve liked to this article from our forms advice web site:
    http://www.formsthatwork.com/Appearance

Hi there! We've closed the comments after a week of spirited discussion on this post. If there's something we've missed, please reach out and let us know.