Caridy Patiño, the principal frontend engineer for Yahoo! Search Direct, just wrote an article for the Yahoo! User Interface blog on what went into creating an accessible, dynamic search box: Making Search Direct Accessible.
Caridy worked with Victor Tsaran, of the Yahoo! Accessibility Lab, to fine tune the experience of screen reader users typing a search query and being notified of potential results.
Read the complete article to find out how they approached the best user experience solutions and how it was programmed.Accessibility features
In the quest for making Search Direct accessible, we looked at the implementation of Search Assistant, a technology that Yahoo! pioneered a few years back, as well as the native accessibility features of YUI.
After this investigation, three primary accessibility features were proposed for Search Direct:
- Using the YUI Internationalization utility to serve localized content.
- Setting role and aria-* attributes on elements within the autocomplete widget, that need to be identified and processed by screen readers.
- Using a hidden div that represents a live region (aria-live) to notify the user when something happens. E.g., the number of available suggestions, the selected suggestion, etc.
The plan was to notify the user of any changes in the Search Direct interface, and provide a set of keyboard shortcuts to navigate the following visual components:
- Searchbox
- Submit button
- Suggestion list
- Rich panel
Making Search Direct Accessible