Simply Accessible

Search Results Page Layout

When we use systems that include searching capability such as back end administration tools, we often see search forms presented both on the page that you search from and the page that displays the search results. This can be very useful for both the user and the programmer:

• the user doesn’t have to go “back” to search again or refine their search
• the programmer gets to keep their code modularized and reuse the same bit of code over again by maintaining one page instead of two.

However, this does cause some problems for visually impaired users, and (I’ll freely admit) sometimes throws me off for a number of reasons:

• the search form is presented first and, depending on its complexity, pushes the search results below the fold
• there is often no indication that anything has changed – a screen reader user or screen magnifier user are presented with what looks like the same page. On several occasions I’ve been asked in user testing “didn’t I just fill that form out?”
• a keyboard user is required to go through the entire page and search form before getting to the results.

View a typical search and results page that demonstrate these problems.

Fortunately there are a number of things that can be done to improve this functionality.

First, we can change the action of the form to include a fragment identifier/named anchor for the results page.

<form method="post"
       action="whatever-page.php#results >
   ... form elements here ... 
</form>

Next, we create that element within the results page, and use that element to do two things: 1) provide a statement about how many results were found, and 2) link that statement to another node within the page.

Found <a id="results" href="#details">25 results for keyword</a>

This accomplishes two things:

1. including the statement itself lets any user know right away that something has changed on the page
2. posting directly to that node places the focus where it is most relevant
3. linking the statement is very clear, and acts as a very precise link that “skips over the form” without actually being called a skip link.

In my final example, I’ve also included a link after the search results that submits back to the form itself to make it easier to “Search again.”

View the improved search and results page

Other considerations

You might also consider it useful to change the page’s <title>...</title> to indicate that you are viewing the results page as well as the number of results found, or which ones you are displaying.

It may be useful when this is implemented within a template to actually submit to a named anchor or ID that is just above the desired target so that the target isn’t right at the very top of the viewport.

Providing some other visual cue to draw attention that particular node/link would likely provide benefit as well.

This technique could be applied to any form on a page that submits to itself.

Permalink to this article