Accessibility

Accessibility

Keep these considerations in mind if you're modifying the design system or creating a custom component.

Use a descriptive label

Provide a clear and descriptive label for the search box using the <label> element. Use the for attribute to link the label to the id attribute of the search input field. This makes the search box accessible for screen reader users and provides necessary context (WCAG 1.1.1, 1.3.1, 3.3.2).

Include a search button

Add a search button with a clear call-to-action, such as "Search" or a magnifying glass icon. Ensure that the button is accessible and includes a descriptive aria-label if using an icon (WCAG 1.1.1, 4.1.2).

Use appropriate input types and attributes

Use the type="search" attribute for the search input field, as this provides appropriate input controls for different devices and helps with accessibility (WCAG 1.3.1, 4.1.2).

Offer search suggestions with proper ARIA roles

If providing auto-suggestions or auto-completion, use appropriate ARIA roles (such as role="listbox" for the suggestion list container and role="option" for each suggestion) and manage ARIA attributes (aria-activedescendant, aria-expanded, aria-haspopup) to ensure the search suggestions are accessible (WCAG 1.3.1, 4.1.2).