A placeholder is no label; search forms in WordPress can do better

WordPress developers can do better when building search forms. If it looks OK for me, it works OK for everyone? That point of view only counts when you can see properly.

The best HTML construction, in it’s basic form:

<form method=”get” action=”url-here”>
<label for=”search-id”>Search for:</label>
<input name=”search” type=”text” value=”” placeholder=”placeholder text” id=”search-id”>
<input type=”submit”  value=”Search”>
</form>

A label needs a for=”id-name” that relates to the id=”id-name” of the corresponding input field. Every input field needs a label. The id’s must be unique for your web page. Read more about label-form relation on WAI Web Accessibility Tutorials.

Why is a good label so important?

Not everyobody reads a webpage with his or her eyes. Blind people need a screen reader or a braille line too read the web. A label tells screen readers what an input field is all about. Don’t make it more complicated for them to use the web,  it can be solved by just adding some code.

Take a look at this search form on WordPress.org

<form action=”//wordpress.org/search/do-search.php” method=”get”>
<input class=”text” name=”search” type=”text” value=”” maxlength=”150″ placeholder=”Search WordPress.org“>
<input type=”submit” class=”button” value=””>
</form>

The only indication of what’s going on, is the placeholder “Search WordPress.org”. There is no label element to tell what the input is about and the submit button has no value.

Or the default search widget in WordPress core

<form role=”search” method=”get” class=”search-form” action=”url-here”>
<label>
<span class=”screen-reader-text”>Search for:</span>
<input type=”search” class=”search-field” placeholder=”Search …” value=”” name=”s” title=”Search for:”>
</label>
<input type=”submit” class=”search-submit screen-reader-text” value=”Search”>
</form>

The submit button has value=”Search”, which is good. The label is placed around the input field. The input field has a title=”Search for:”. This sort of works but it’s not pretty and it’s discouraged by W3C.

Or the search widget of the Genesis framework

<form method=”get” class=”search-form” action=”url-here” role=”search”>
<input type=”search” name=”s” placeholder=”Search this website…”>
<input type=”submit” value=”Search”>
</form>

No label, only a placeholder. There is a filter for the Genesis search form that should add a label, but it adds just text in the form, and no <label> element.

So, how to do a search form for WordPress?

Like this:

<form role=”search” method=”get” class=”search-form” action=”url-here”>
<label for=”search-id” class=”screen-reader-text” >Search this website…</label>
<input name=”search” type=”text” value=”” placeholder=”Search this website…” id=”search-id”>
<input type=”submit”  value=”Search”>
</form>

But wait! There’s a catch!

What if you want two search widgets on a page? That would mean two identical id’s, and on an HTML page each id should be unique.

For the plugin Genesis accessible, I solved this by adding a unique number to the id of each search form.

<form method=”get” class=”search-form” action=”http://genesis-accessible.org/” role=”search”>
<label for=”searchform-545cdbc7c1e35″ class=”screen-reader-text”>Search this website…</label>
<input type=”search” name=”s” id=”searchform-545cdbc7c1e35” placeholder=”Search this website…”>
<input type=”submit” value=”Search”>
</form>

You can find this code on the GitHub of RRWD.
Feel free to add your own idea’s.