Search, and ye shall fail
It must be the best solution, mustn’t it, if all these sites use similar techniques?
The objective of my affection
If we step back for a moment, to examine the user’s needs, we can see two objectives for the average searcher: find something and  make it of this type.
The ‘something’ for which the user is searching is, in their mind, the foremost concern. Everything else is secondary. When searching, a user’s first instinct will almost always be to enter their search terms (and why should it be otherwise?). Everything about a search interface is geared toward this: the keyword input has the most visual weight on the screen – on a typical search index page – and the most prominent position – either near dead-centre or in the head of the page, depending on the type of page.
The accepted solution, happily, cedes to this under all circumstances.
The second objective, then, is the type of results that will satisfy the search. The introduction of this second objective is where user behaviour will begin to deviate: depending on their priorities and personal inclinations, users’ execution of this may take place before, after, or even during the steps to meet the primary objective. Unlike the emphasis placed on the keyword input, the type of results to return should be – and, typically, are – de-emphasised where possible, but be present – and have their presence known – should the user require them (either to confirm their beliefs or to make a change).
The humble radio-button.
So I did.
That’s what you can see in action on the new Yahoo! UK and Ireland TV (along with France, Germany, Italy, and Spain).
As noted above, the main components of the form are a list of
radio-buttons, a textbox, and a submit button. Of particular note is the
way the radio-buttons are scripted and styled, and the structure of the
radio-button labels relative to the form’s
implementing the search this way requires that the server-side script be
able to handle the new field being passed its way appropriately.
For all users, the core functionality of the radio-buttons is available,
with these styled as an inline list for users with CSS enabled. The
list, along with an extra
<span> to allow styling of the labels in
accordance with the design. When the radio-buttons receive focus the
‘selected’ class is moved to the new selection. This activity takes
place on focus, mark you, and not click: click events fire on the
originating control which, when navigating with the keyboard, will
mean the previously selected radio-button.
<legend> in its own life-time
It was brought to my attention that a form’s
<legend> will, by
default, be announced before each and every form field by screen
readers. To make this as unobtrusive as possible, each radio-button’s
<label> is worded such that it makes the most possible sense when
preceded by the legend text. In English, for example, the radio-buttons
will be announced as ‘Search… the web’, ‘Search… for images’, and so
forth (where ‘Search’ is the form’s
The radio-buttons’ full text, though, would not make sense in a visual
context: they should be presented as tabs titled ‘Web’, ‘Images’, and so
on. To achieve this, the visually inappropriate portions of the
<label> are wrapped in
<span>s and positioned outside the browser’s
viewport – along with the form’s legend and the radio-buttons
themselves – such that they may still be accessed by screen readers and
Furthermore, because the radio-buttons are still present in the content of the page, keyboard users may navigate the form fully through the keyboard (using arrow keys to move between items radio-buttons in a collection).
I can by no means take full responsibility for the successful implementation of this concept, though: I’d particularly like to thank Norm!, Mike Davies, Alex Lee (our designer), Tim Huegdon, and Ann McMeekin (of the RNIB) for all their help, advice, and patience (particularly when I got things working and made lots of excited noises at them), and this wouldn’t have ever been a reality on Yahoo! TV for Europe if it hadn’t been for the receptive, responsive attitude of the engineers working on Yahoo! Search for Europe.