Where do we find the site search interaction on a web page? OK, generally we expect it to be at the top right of the page—visually. Sometimes it may move elsewhere—visually. The idiom is generally set.
How do we find the Search feature without the gift of vision? We can navigate through the page tab index. All we need are the necessary flags, or “landmarks”:
Orientation to the Search feature.
A text input (type=”search” is desirable), or dynamic select or data option group.
A Submit button.
The design pattern appears logical. Often, its location is not. For example, if Search is included within the site navigation blocks, the HTML may be located at the base of the file. Is Search a navigation element? There’s no right answer. Guidance is sketchy in places or conflicts in others. We may investigate that later. Our emphasis is for now on the Search component.
Examples of the Search Component
Although our expectations of Search include a form element, it is always surprising to find Search components made from anything but form controls and inputs. ARIA to the resue. Why?
More commonly, and particularly when “created” by a CMS, the Search component comprises at the least a text input. Sadly, little else. Figures 1 and 2 are examples.
An Improved Search Component
If we write our HTML semantically, we can give a clear indication (available to the DOM) of the interaction. See Figure 3 for an example. We can also provide semantic elements on which to pin our visual styles and provide a future-proof environment in which to home additional search feature buttons and, or instructions.
“The CMS Done It!”
The CMS page is created, “on the fly” when it loads. A server-side script such as PHP compiles the HTML from components. The components are often associated with themes. Themes and their components can be updated. There is no excuse for shoddy UI even when created by a WYSIWYG CMS.
The visually presented Search interaction is easily and accessibly created to offer a comparable and equitable experience for less able users.
Care remains over how search results are presented. And that’s another story…