# Chat with AI Steward

Component documentation for Chat with AI Steward — Accessibility.

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.chat-with-ai-steward.accessibility"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"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":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"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"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"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"}}]} />

## 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.