Required Fields

Inputs are often required. But how should we provide this information properly? You've all seen the asterisk next to an input label. Sighted people have learned that an asterisk means "This field is required". How can we make this understandable for screen readers?

Let's have a look at several approaches and see how different assistive technologies will handle them.

The start

Before we start, let's have a look at the simplest input. We'll have no idea whether the input is mandatory or not.

<label for="input_one">First Name</label>
<input id="input_one">

Output

Voice Over:

First Name, edit text

Narrator:

First Name, editing

NVDA:

First Name, edit, has auto-complete, blank

ChromeVox:

First Name, edit text

The asterisk

This is something we'll often find on the internet. The developer just adds an asterisk to the end of the copy of the <label> because his/her designer told him/her to do so. It's so simple. Over the years people have learnt that this little asterisk means "Dude, fill out this field!" The days are long gone when the asterisk was at least explained somewhere at the bottom of the page.

<label for="input_two">First Name *</label>
<input id="input_two">

Output

Although we see this solution all over the internet - it's crap. Pardon my language. Every assistive technology will read out this little extra character:

Voice Over:

First Name star, edit text

Narrator:

First Name asterisk, editing

NVDA:

First Name star, edit, has auto-complete, blank

ChromeVox:

First Name asterisk, edit text

Here comes the usual exercise: Close your eyes and imagine someone reads First name star to you. What would you think? What’s going on here? Is the first name of the input "star"?

The word

In this case we replace the asterisk with the word it represents. We simply write "required" within the <label>.

<label for="input_three">First Name (required)</label>
<input id="input_three">

Output

Voice Over:

First Name required, edit text

Narrator:

First Name required, editing

NVDA:

First Name required, edit, has auto-complete, blank

ChromeVox:

First Name required, edit text

Sighted people will get it. It's there. Written in plain old letters. And people relying on assistive technology will get it too. We have to write something in this input field.

The mix

In this approach we'll add an asterisk as well as a "required" to the mix. But we'll "cover" the asterisk by placing it within a tag with an aria-hidden="true". We want to disguise it to the assistive tech. On the other hand, we'll hide the "required" from the sighted eye, leaving it "visible" to the assistive technology.

<label for="input_four">First Name <i aria-hidden="true">*</i><i class="visible-hidden">required</i></label>
<input id="input_four">

The .visible-hidden has been covered on the page about the skip link.

The output

We think we're so smart (that’s the "royal we"). It could have been the solution, but NVDA ignores the aria-hidden.

Voice Over:

First Name required, edit text

Narrator:

First Name required, editing

NVDA:

First Name star required, edit, has auto-complete, blank

ChromeVox:

First Name required, edit text

Okay, this doesn't work. Too bad.

Mix it with some CSS

Okay, maybe we can trick NVDA into ignoring the asterisks? What about not putting them into the DOM, but putting them into a pseudo element instead? That seems like a smart idea.

<label for="input_five">First Name <i class="asterisk" aria-hidden="true"></i><i class="visible-hidden">required</i></label>
<input id="input_five">

Here, .asterisk contains the character all sighted people will see.

.asterisk:after{
 content: "*";
 width: 5px;
 height: 5px;
}

The output

It seems like we're not as smart as we thought. NVDA will read the content of the pseudo element as well.

Voice Over:

First Name required, edit text

Narrator:

First Name required, editing

NVDA:

First Name star required, edit, has auto-complete, blank

ChromeVox:

First Name required, edit text

Come on...

The required attribute

This time we'll forget about any visual hint and simply use the required attribute on the <input>. That way we let the browser do all the work. Or do we?

<label for="input_six">First Name</label>
<input id="input_six" required>

The output

Voice Over:

First Name required, edit text

Narrator:

First Name, editing, required, invalid

NVDA:

First Name, edit, required, invalid, has auto-complete, blank

ChromeVox:

First Name required, edit text

Provided you don't want to give visual feedback, this is a good solution.

Required and hidden

Being optimistic we want to see... oh, forget it. I know this won't work. But let's have a look anyway. We'll bring back the hidden asterisk and combine it with the required attribute.

<label for="input_seven">First Name <i aria-hidden="true">*</i></label>
<input id="input_seven" required>

The output

As assumed NVDA will ignore the aria-hidden. So this is not a solution. Again.

Voice Over:

First Name, required, edit text

Narrator:

First Name, editing, required, invalid

NVDA:

First Name star, edit, required, invalid, has auto-complete, blank

ChromeVox:

First Name, edit text

The image

Since NVDA ignores the aria-hidden, is there a way to trick this piece of software? What about providing a representation of an asterisk instead of a real asterisk? We could add an image of an asterisk and slate the alt attribute for our purposes.

<label for="input_eight">First Name <img src="asterisk.png" alt="is required"></label>
<input id="input_eight">

The output

This time Narrator doesn't play along. Microsoft's assistive technology will ignore the image, respectively its alt attribute. So this isn't a solution either.

Voice Over:

First Name is required, edit text

Narrator:

First Name, editing

NVDA:

First Name is required, edit, has auto-complete, blank

ChromeVox:

First Name is required, edit text

VoiceOver, NVDA and ChromeVox will read First name is required without any pause. I would rather have something like First name. Is required. with a little pause between "name" and "is". That way we at least get the impression that the label says "First name is required", although "is required" should just be an additional hint.

Conclusion

Looking at - and listening to - all the above-mentioned examples, I have to say that the third example, where we simply write (required), is the best of the pick. Sighted people can read it and it is read to non-sighted people. Now you just have to convince your designer…

There is one tiny problem. In German, for example, "required" would become something like Pflichtfeld or erforderlich, which are quite long words. They may break every design.

Video example