Creating an accessible yet sexy search box with CSS

Search boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

First things first

Lets think about what is needed. For a search box we need:

1. A form element
2. A text input
3. A submit button

Also, ideally we need a label element for accessibility reasons so that users know what purpose the input element has (you can read more about labels and accessibility at 456 Berea St).

Therefore, here is the markup we could use for our form:

<form method="post" action="page.html">
<div>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="image" src="img/search.gif" alt="Search" />
</div>
</form>

This is pretty much the way most people would do it, but Im going to challenge this for the following reasons:

1. We rarely want the label visible after styling
2. Hiding the label with display:none can cause accessibility issues (link)
3. Other methods of hiding the label can also cause issues (link)
4. I want a method that does not require hiding the label…

Therefore I have come up with the following; this may have drawbacks which I’m hoping people will discuss in the article comments, any here goes:

<form method="post" action="page.html" id="searchform">
<div>
<input type="text" name="search" id="search" />
<label for="search"><input type="image" alt="Search" src="img/search3.gif" title="Search" /></label>
</div>
</form>

My reasoning behind this is, we still get the association between label and form element, the input has alt text of ‘Search’ which means this is what (in theory) the screen reader should pick up. Because this label doubles as the submit button we also don’t have to hide it. This method is also pretty easy to style. Lets get on to that now.

Styling the form

To style my form I will use 3 images: left curve, a gradient and the submit button. I could use a 4th image and tile it for the top and bottom borders, but for this Im just going to use css borders on the input box.

Now for the css:

#searchform div {
    /* This div will have the left image as a background */
    background: url(search1.gif) no-repeat left top;
    padding: 0 10px;
    margin: 0;
    line-height: 1;
}
#searchform #search {
    /* Im going to apply a top and bottom border to this input so that it fits with my images and give it the gradient background */
    border-top:2px solid #999;
    border-bottom:2px solid #999;
    border-left:0;
    border-right:0;
    background: #fff url(search2.gif) repeat-x top;
    padding: 3px 2px 2px 0;
    height: 15px;
}
#searchform input {
    /* Some reset styles to make my form elements play nice */
    vertical-align: top;
    margin: 0 !important;
    line-height: 1;
    outline:0 !important;
}

Internet explorer plays up a bit regarding input positioning but this can be overcome with a conditional comment to add a pixel of padding to the input box:

<!--[if lte IE 7]>
<style type="text/css" media="screen">
#searchform #search {
    position:relative;
    margin-top:-1px !important;
}
</style>
<![endif]-->

Heres what it looks like: (note: i’ve added the css directly in the markup for this demo )

Mission accomplished?

It looks nice, but how accessible and semantic do you think the code is? I personally think its better than simply hiding the label but I could be wrong. Discuss below!

Found this post useful? Why not buy me a coffee!

Related Entries

• Window Resize/Mobile Browser Background Bugs
• Creating ‘Web 2.0′ Layouts using strips
• Easy jQuery Pull Quotes
• Using Image replacement techniques
• Going elastic with ems, layout techniques

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Book Review - jQuery Reference Guide