jQuery: Accessible search toggle

This is an update to a post I wrote four years ago to make an accessible search toggle using Javascript. Since then Javascript libraries such as jQuery have become popular, so it makes sense to bring this post up-to-date.

Solid foundations

Progressive enhancement is what you should strive to achieve when building a web page. Begin by writing your page in plain HTML and CSS to make sure all your content is available to the user. Once this is in place you can then begin to add Javascript to enhance the user’s experience.

HTML toggle via radio buttons

This example describes a common bit of form functionality to show a list of sections only when the user chooses to refine their search.

To start, I suggest laying out the HTML as you want it to display when Javascript is disabled (I have left out the form code):

<input type="radio" name="section" checked="checked" id="all" /> 
<label for="all">Search all sections</label>

<input type="radio" name="section" id="sections" /> 
<label for="sections">Search chosen sections</label>

<ul id="section-options">
    <li><input type="checkbox" id="section1" />
        <label for="section1">Section 1</label>
    </li>
    <li><input type="checkbox" id="section2" />
        <label for="section2">Section 2</label>
    </li>
    <li><input type="checkbox" id="section3" />
        <label for="section3">Section 3</label>
    </li>
    <li><input type="checkbox" id="section4" />
        <label for="section4">Section 4</label>
    </li>
    <li><input type="checkbox" id="section5" />
        <label for="section5">Section 5</label>
    </li>
</ul>

<input type="submit" name="submit" value="Search" />

Label tags must be added to improve usability and to allow screen readers to associate the correct label with it’s input.

Enhancing with jQuery

In the previous incarnation of this article I used plain Javascript to add the enhancements, this time I’m going to use the jQuery library which makes the code much easier to understand.

First think about the initial state of the page, which is to show the search box and the two main options (search all sections and search chosen sections) and to hide the list of sections:

$('#section-options').hide();

The next step is to show the list of sections when the user clicks on the “Search chosen sections” radio button:

$('#sections').click(function() {
    $('#section-options').show();
});

The final step is to hide the list if the user clicks “Search all groups”.

$('#all').click(function() {
    $('#section-options').hide();
});

Putting it all together

$(function() {
    $('#section-options').hide();

    $('#sections').click(function() {
        $('#section-options').show();
    });

    $('#all').click(function() {
        $('#section-options').hide();
    });
});

You can see the finished script in action.

It’s pretty basic stuff, but the idea of enhancing a component that already works in order to improve usability is what you’re looking for here.

2 comments on “jQuery: Accessible search toggle”

  1. Just one minor criticism, you’ve correctly used the same NAME attribute value for the radio buttons but you haven’t done the same with the checkboxes – e.g. “section_name” – which will (AFAIK) negatively impact the way that screenreaders and other assistive technologies can interact with the fields.

Add your comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>