Inputs

Input fields

There is no decent form without at least one input field. You probably already guessed that you need to use a label to make the input accessible. In the following example we’ll start from scratch and enhance our input step by step. Let’s try a search for films.

We’ll start very small with this markup:

<input type="text">
<button>Search</button>

It’s an input field, followed by a button that says “search”. We’re good to go, aren’t we? Let’s hear what VoiceOver and ChromeVox have to say:

VoiceOver: edit text blank; search button

Chromevox: edit text; search, button

Narrator: editing; search button

Yes, this may work, but close your eyes. There’s a text field that can be edited by writing something, and then a search button. But what are we supposed to be searching for? I don’t get it...

The next step is to add a placeholder:

<input type="text" placeholder="enter search term">
<button>Search</button>

That will give us:

VoiceOver: "enter search term", edit text; search button

Chromevox: "enter search term", edit text; search, button

Narrator: "enter search term", editing; search button

Yes, that’s a little bit better. But let’s add “Search movies” in front of our input field. That makes it perfectly clear, doesn’t it?

<label for="thesearch">Search movies</label>
<input type="text" placeholder="enter search term" id="thesearch">
<button>Search</button>

Well, it looks good, but looks aren’t everything. VoiceOver and ChromeVox will ignore “Search movies” because it’s just a <span>. Let’s change the <span> to a proper <label> and see what happens.

VoiceOver: "enter search term", Search movies edit text; search button

Chromevox: Search movies with hint "enter search term", edit text; search, button

Narrator: Search movies, editing; search button

We’ve added a label and established the connection between label and input by using the already known FOR and ID. Screen readers now can make sense of the text that is displayed. I for one think the way ChromeVox handles the case is very helpful. It is a real sentence we have here.

Video example