Like.com forgot the basics

Like.com logo
Turn off javascript and try to do a search on the newly launched Like.com (Scoble and TechCrunch have more on the release). What do you get? Nothing. This is a move sure to fire up accessibility advocates everywhere. You may say “But who really ever turns off javascript?”, well I say why on earth do you need to write a series of javascript functions, have 15 javascript file includes, and wire up event handlers to submit your search form? Why not keep it simple and let HTML and HTTP do a little work for you?

In looking at the source, I see they’re trying to set two things, a category to search within and the search query text. Let’s find a much simpler way to do this that still keeps the form accessible.

Like.com version (minus some layout/styling markup and all of the javascript necessary to process it):

<form class="searchform" id="form1">
    <input name="mainSearchField" id="mainSearchField" type="text"
        class="textareafont" value="" onkeypress="return searchEnter(event)">
    <a href="javascript:search()"><img src="pictures/searchbutton.gif"
        width="81" height="26" align="middle" border="0"><a>
</form>

What I would do (no javascript necessary to get the default action):

<form action="search" method="GET" class="searchform" id="form1">
    <input name="btnSearch" type="hidden" value="all">
    <input name="searchText" type="text" class="textareafont" value="">
    <input type="image" src="pictures/searchbutton.gif" width="81"
        height="26" align="middle" border="0" >
</form>

Now the form works for everybody out of the gate and a user without javascript gets a search in the “all” category. Add some javascript to set the hidden “btnSearch” field (which identifies the category) when the user clicks on one of the other categories (and optionally submits the form if there is a query already there). The requirements may be more involved, but this is my 10-minute clean up.

Leave a Reply

Your email address will not be published. Required fields are marked *