# Search filters

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-filters.accessibility"
  source="components/dist/registries/dskit.json#search-filters"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search-filters"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.