Search Best Practice

Search

Last Updated: 12/15/2011

Search is a basic function employed by a user to find elements within a document or web site.

Challenges disabled users face when running a search are:

Keyboard access to the search box
Knowing when they're in the search box
Understanding how many search results were found
Hearing any instructional text associated with the search results

Keyboard access is provided to search field
Use the accesskey attribute to allow for keyboard access to search field's input box:

default.htm (excerpt)
```
<input accesskey="s" id="searchBox" type="text" … />
```
Instructional Text is properly associated with the search field
Use a <label> tag to associate text with the search field:

default.htm (excerpt)
```
<label for="searchBox">Search:</label>
<input id="searchBox" type="text" … />
```
If no label text exists OR if there's additional instructional text you want to attach to the search use the title attribute:

default.htm (excerpt)
```
<input id="searchBox" type="text" title="Search: Enter the word test and press enter" … />
```
Search field is highlighted when the user has focus on it
Use the :focus, :hover and :active pseudo-classes in CSS to highlight form fields:

default.htm (excerpt)
```
/* CSS Highlight Effect for Form Fields */
input:focus, input:hover, input:active { 
    outline:1px solid #0066FF;
}
```
NOTE: IE 7 will not show the "highlight effect" due to its flaky support of CSS.

Search information is properly associated with the search results

Modify page's title tag to indicate number of results found:

default.htm (excerpt)

<title>3 matches found | Search Example</title>

Provide a search container to indicate the search term and how many results were found and, if possible, use JavaScript to move focus to that container:

default.htm (excerpt)

<div id="searchDisplayResults">
    <h4 tabindex="0" id="searchResultsHeader" role="alert">
    Results on search for test: (3 Matches Found)
    </h4>
    <!-- Search Results -->
    <p><a aria-describedby="r1Desc" href="#1">Test 1</a></p>
    <p id="r1Desc">This application shows the general…</p>
    <hr/>
    <p><a aria-describedby="r2Desc" href="#2">Test 2</a></p>
    <p id="r2Desc">This application shows the intermediate…</p>
    <hr/>
    <p><a aria-describedby="r3Desc" href="#3">Test 3</a></p>
    <p id="r3Desc">This application shows the advanced…</p>
</div><!-- end #searchDisplayResults -->

search.js (excerpt)

/* Shift focus to Search Results Header */
$("#searchResultsHeader").focus();

Let's break this code down:

Make a search container to hold the results:

<div … id="searchDisplayResults">
</div><!-- end #searchDisplayResults -->

Use a <h4> tag to mark off the number of results found:

<h4 id="searchResultsHeader">Results on search for test: (3 Matches Found)</h4>

Add a tabindex attribute to the <h4> so that focus can be shifted through JavaScript:

<h4 tabindex="0" id="searchResultsHeader">Results on search for test: (3 Matches Found)</h4>

/* Shift focus to Search Results Header */
$("#searchResultsHeader").focus();

Add ARIA's role attribute to the <h4> so that it will be read by the assistive software:
```
<h4 … role="alert">Results on search for test: (3 Matches Found)</h4>
```

Add ARIA's describedby attribute to associate search links with their description text:

<!-- Search Results -->		
<p><a aria-describedby="r1Desc" …>Test 1</a></p>
<p id="r1Desc">This application shows the general…</p>
<hr/>
<p><a aria-describedby="r2Desc" …>Test 2</a></p>
<p id="r2Desc">This application shows the intermediate…</p>
<hr/>
<p><a aria-describedby="r3Desc" …>Test 3</a></p>
<p id="r3Desc">This application shows the advanced…</p>

SSA Accessibility Best Practices Library

Search

Example

Download

New Window

Keyboard

Mouse

Keyboard

Keyboard

NO TEST METHOD...

Search

Example Download New Window

NO TEST METHOD...

Example

Download

New Window