Search

A search field is a text input enhanced for finding results. It can be used alone or with a typeahead menu of list items. 

Use Cases

Interaction and Style

Relevant WCAG Requirements

  • Non-text Content

    Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.

    WCAG 2.1 Understanding 1.1.1
  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1
  • Meaningful Sequence

    Present content in a meaningful order. This ensures that the content makes sense when read by a screen reader or other assistive technology, even when styles are turned off.

    WCAG 2.1 Understanding 1.3.2
  • Use of Color

    Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    WCAG 2.1 Understanding 1.4.1
  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1
  • Focus Order

    If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

    WCAG 2.1 Understanding 2.4.3
  • Focus Visible

    Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

    WCAG 2.1 Understanding 2.4.7
  • Label in Name

    For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

    WCAG 2.1 Understanding 2.5.3
  • Target Size

    The size of the target for pointer inputs is at least 44 by 44px.

    WCAG 2.1 Understanding 2.5.5
  • Error Identification

    If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. This helps users understand what they need to correct when they've made an error.

    WCAG 2.1 Understanding 3.3.1
  • Labels or Instructions

    Labels or instructions are provided when content requires user input.

    WCAG 2.1 Understanding 3.3.2
  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2
  • Status Messages

    In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. This allows users to understand the status of the system without losing their place.

    WCAG 2.1 Understanding 4.1.3

Keyboard Navigation

KeyAction
TabFocuses on the search field.
EnterSubmits the search query.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.