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.
This video shows "the evolution" of a search input. All the steps will be read out by Window's Narrator.