WebLion logo and website header

Penn State’s Policy AD54 requires that search elements on web pages include the following:

  • Local Site
  • Penn State Web
  • Penn State People
  • Penn State Departments

Building a search functionality that addresses all these parameters is interesting to say the least.

To save space, I created a pull-down menu. But here’s where it gets tricky: The menu needs to be accessible to everyone.

After much adjusting and testing, I was able to create a search menu that works in all of these situations:

  • On text browsers, such as Lynx
  • Without JavaScript (using CSS only)
  • With accessibility tools such as JAWS
  • With keyboard commands only
  • With mouse events only

To do this, I use an unordered list within an unordered list. The form submits both the choice and the search term to a set of Python commands, which then redirect to whatever the user has chosen.  For those using systems such as Drupal or WordPress, I have successfully used PHP to accomplish the same thing.

Since JAWS accommodates JavaScript, I was able to make use of what is called a guided tour. This allows those using JAWS to tab to the search box and view its selections. You then can navigate through the selections using the arrow. Once you find the option you want, you can use the spacebar or the Enter key to select it. The interface then guides you to the search-input area, after which, you can hit Enter and go to the search results. You can use the Esc button or click anywhere outside of the search box to close it.

Those who are able to use a mouse can simply click in the input box, then type a search term or make a selection.

You can see this searchbox in action at weblion.psu.edu and view the code at https://weblion.tlt.psu.edu/FogBugz/kiln/Code/WebLion-Repository/Group/AD54Elements/Files

Tagged with →  
Share →

One Response to Building an accessible multi-search box on a Penn State-site

  1. Nicholas S Rossi says:

    Great work, Rob!

Skip to toolbar