jQuery: Accessible search toggle

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):

2 comments on “jQuery: Accessible search toggle”

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.