# Error state

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

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

<ComponentTabs component={"error-state"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"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":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"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":"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":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"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":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"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"}}]} />

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