spectra-accessibility

name	spectra-accessibility
description	Check UI for accessibility. Use when building or reviewing any interactive UI — contrast, focus, keyboard operability, semantic elements, reduced motion — to meet Astronomer's WCAG 2.1 AA policy.

spectra-accessibility

Astronomer policy is WCAG 2.1 Level AA. These are requirements, not enhancements.

Contrast

• Normal text ≥ 4.5:1; large text (18pt+/14pt bold) ≥ 3:1; UI components and meaningful icons ≥ 3:1.
• Semantic tokens are designed to meet this — hardcoded colors bypass the guarantee. The generated DESIGN.md lint also flags contrast failures.

Focus

• Never remove a focus outline without a visible, equivalent replacement (focusOutlineColor token).
• Focus order matches visual order. On form submit, move focus to the first error.
• In scroll containers (overflow: auto), reserve room so focus outlines aren't clipped.

Keyboard & semantics

• Actions are buttons; navigation is links — never a plain box/div with a click handler.
• Everything operable by mouse is operable by keyboard. Hover-revealed content has a keyboard-reachable equivalent.
• Headings form a hierarchy without skipping levels; landmarks (nav/main/aside) are marked as such.
• Icon-only controls get an accessible label; don't add a label when visible text already describes the control.
• Link text is descriptive ("View deployment details"), never "click here" / "learn more."

Motion

• Honor prefers-reduced-motion. Animate transform/opacity only. Motion must be interruptible.

Framework notes

• React/Chakra — as="nav"/"main"/"aside" for landmarks; aria-label on icon-only buttons; run /ui-accessibility for a full audit.
• Svelte — get focus/keyboard/ARIA from a headless primitive (Melt/Bits UI) rather than hand-rolling; drive dark mode via data-theme / prefers-color-scheme.

Source: design-rules.mdc (Semantic HTML & Accessibility), Astronomer UX direction.