Search box
An input that allows users to enter a keyword to search a website for specific content.
import { ... } from '@ag.ds-next/react/search-box';Learn more about how to meet WCAG success criteria when implementing search boxes. This makes them accessible and inclusive for users of all abilities and situations.
The Search box component passed accessibility testing in 2022 and 2024.
Clear labels and instructions
Requirements
- Clear and descriptive
aria-labelis used on<SearchBox>. - Clear and descriptive
labelis used on<SearchBoxInput>. - The purpose of the search box is understood and conveyed by assistive technology, regardless of whether the text label or
iconOnlyversion is used.
Benefits
- Search box purpose is communicated to all users, including those using assistive technologies.
- Reduces the cognitive load for all users.
- Supports users with cognitive disabilities through clear labelling.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 3.3.2 Labels or instructions
Name, role, value
Requirements
- All components have appropriate names, roles and values that are understood and conveyed by assistive technology.
- Clear label identifying the search box.
Benefits
- Assistive technology users have equal access to information on the state of the component.
- Improves usability for voice control software users.
- Helps users with cognitive challenges understand component functionality.
- Makes automation and testing more reliable.