Web Accessibility: The Search Form

As the Internet constantly evolves with technology, speed and the desire to provide a stimulating experience, it is not always easily adaptable to those who search only occasionally or have disabilities through hearing, eyesight, technology or others. It is important to remember the need to create and post content with all searchers in mind, regardless whether we feel they will be potential customers or followers of our content.

WebAxe, a blog and podcast on web accessibility, answers it this way:

An accessible web page makes all pertinent content available to any human user who wants it regardless of browsing technology. Web accessibility benefits more than people with a disability; keep in mind that a user may be temporarily disabled or using older technology.

The W3C’s definition says:

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

The search form is a critical aspect of a website’s functionality, easily allowing the visitor to search the site for information. According to the W3C’s specifications on search forms:

…providing a search function that searches your Web pages is a design strategy that offers users a way to find content. Users can locate content by searching for specific words or phrases, without needing to understand or navigate through the structure of the Web site. This can be a quicker or easier way to find content, particularly on large sites.

…Implementing a search function that will spell-check the terms, include different endings for the terms (stemming), and allow for the use of different terminology (synonyms) will further increase the accessibility of the search function.

The search functionality is added by either including a simple form on the Web page, usually a text field for the search term and a button to trigger the search or by adding a link to a page that includes a search form. The search form itself must be accessible, of course.

The WebAIM: Section 508 Checklist list the specifications for forms:

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

<input>, <textarea>, and <select> elements have descriptive labels. There is no association between the form element and its label.

Scripting of form elements does not interfere with assistive technologies or keyboard.

Scripting makes parts of the form unavailable to assistive technologies or keyboard users.

Examples of Effective Search Form Designs

The most recognizable and recommended placement of a search form is close to the right top corner of the page, though the top of the sidebar is also equally popular.

The colors, designs, and structure of the search form must be clearly visible on the website such as the following example featuring a visibly clear push button to initiate the search per the specifications.

The alternative text for the form elements such as the textarea and buttons must clearly state the intentions and actions of their purpose. In an example on accessible forms by Jim Thatcher, he illustrates how not to set the ALT text for the form per the example in the lawsuit against the department store Target for non-compliance with web accessibility.

Remember, if the button has text, use that text for the alt-text. Doing otherwise is not a critical error or violation of the guidelines but it can cause confusion. For example, the button below from target.com had alt=”Proceed to Checkout” at the time that NFB brought suit against the Target Corporation. Imagine a telephone conversation between a sighted support person and a blind customer, with the support person saying “click on the Continue Checkout button”; the customer responding, “there is no Continue Checkout button” because the screen reader reads it as “Proceed to Checkout.”