Search Engine Accessibility and Section 508
Search engine pages have several common elements such as forms, scripting languages, and images that can affect accessibility. NASA has developed a useful web accessibility checklist that addresses elements that affect visual ability to use search engines. Below are items from the accessibility checklist that are key to the development of a search page and the accessibility issues of each.
Style Sheets
Guideline: Organize documents so that they are readable without requiring an associated style sheet.
Style sheets may be used for color, indentation , and other presentation effects, but a web page should still be understandable (even if less visually appealing) when the style sheet is turned off. A good way to ensure the page is readable when the style sheet is off, is to place page text in a logical order within the HTML code so that when the style sheet is not available, the user can still read the text in the same order that it is visually presented in the styled version.
- When Styling is Inaccessible
Inaccessible CSS
Skipping Repetitive Navigation
Guideline: Provide a method that permits users to skip repetitive navigation links.
Offer skip to navigation commands such as " skip to search box" or " skip to search results." To help users of PDAs and other non-PC devices, make these links small but visible to the user.
When the search results page is first retrieved, the focus of a screen reader will move to the top of the page, and not to the search results. Sighted users will often look directly at search results. To provide similar access to users of screen readers, you can provide a skip link that allows the user to skip to the search results, or you could force the focus of the search results page to the results portion of the page, starting with the text indicating the search conducted, number of results found, etc.
- Skip Navigation Links
Jim Thatcher's tutorial on skip navigation links
Scripting Languages
Guideline: Identify scripting language with functional text so it can be read by assistive technology.
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script will be identified with functional text that can be read by assistive technology.
All scripts (e.g., JavaScript pop-up menus) need to be directly accessible to assistive technologies (keyboard accessibility is a good measure of this), or an alternative method of accessing equivalent functionality should be provided (e.g., a standard HTML link). A web page containing scripting language will typically be fully accessible if the functionality of the script is device independent (does not require only a mouse or only a keyboard) and the information (content) is available to assistive technologies.
- Creating Accessible JavaScript
WebAIM article on accessible scripts
Forms
Guideline: Design forms that are to be completed on–line so that users of assistive technology can access all the information, including directions, cues, field elements, and functionality required to complete and submit the form.
When 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.
Search is most often conducted via a web-based form. Users with assistive devices need cues to fill out the form. Ask these questions when designing an on-line form:
- Is there a label attribute for each field element to tell the user what the field contains?
- Are controls logically ordered in the source code? Screen readers and the tab key follow the order of the source code.
- Are there text references associated with multiple input elements that do not accommodate assistive technology?
- Creating Accessible Forms
WebAIM's article on forms - University of Texas at Austin Accessibility Institute - How-tos and Demos (Excellent section on creating accessible forms)
University of Texas' Guidelines for Forms
Conveyed With Color
Guideline: Design web pages so that all information conveyed with color also is available without color, for example from context or markup.
If color is used to convey important information, use an alternative indicator, such as placing the word " required" next to the field name or an asterisk (*) or other symbol. Make sure that the contrast between text and the background or an image is distinctive enough to read the text.
Some websites indicate relevancy of a search engine listing by using a color bar, number of stars, percentage, etc. If relevancy is indicated purely by visual means (stars, color bars, etc.), users of assistive devices will not be able to access this. The best ways to indicate relevancy of search results is either with text, such as a percentage figure. If you use a color bar or other visual indicator of relevancy, show relevancy via an alt text on the image indicating the percent in text.
A good example of conveying relevancy with text along with a color bar:
In this example of a search of "Traveltrain Holidays," the relevancy is indicated by a color bar and an alt tag telling the screen reader the percentage of relevancy.
Timed Responses
Guideline: When a timed response is required, alert the user and give the user sufficient time to indicate that more time is required.
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
- Redirects and Other Timed Responses
Article on redirects
Text Equivalent Images, Buttons, Applets, and Scripts
Guideline: Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content).
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Alt descriptions for images used as links need to be descriptive of the link destination. Decorative graphics with no other function should always have an empty alt descriptions (alt= "").
The alt descriptions should succinctly describe the purpose of the objects, without being too verbose (for simple objects) or too vague (for complex objects). Help the user by providing cues to repetitive images. For instance, if there are buttons that follow the main search button, label each button with a description and let the user know there are additional buttons following by also indicating "1 of 4", "2 of 4", etc.
- Creating Accessible Images
WebAIM's guidance for accessible images - Radio buttons with <fieldset>, <legend>, and <label>
University of Texas' article on marking up radio buttons
Resources
- Considering the User Perspective: A Summary of Design Issues
WebAIM's article on design considerations - Dive Into Accessibility
30 days to a more accessible website. Day 29: Making everything searchable
Searchable content - Optimizing Your Chances with Accessibility
How accessibility benefits search ranking - The secret benefit of accessibility part 2: A higher search engine ranking
Webcredible article on accessibility and search ranking
Page Updated or Reviewed: March 13, 2007
