Accessibility
Compliance checks that ensure user interfaces are perceivable, operable, understandable, and robust for all users, including those who rely on assistive technologies. These checks align with WCAG guidelines and platform-specific accessibility standards.
Applicability
All recipes with a user interface. Guidelines covering UI patterns, interaction design, or visual presentation.
Checks
screen-reader-support
All interactive elements MUST be accessible to screen readers with meaningful labels.
Applies when: a component renders interactive UI elements (buttons, links, form controls, custom widgets).
Guidelines:
keyboard-navigable
All functionality MUST be operable via keyboard or equivalent non-pointer input.
Applies when: a component provides interactive functionality.
Guidelines:
dynamic-type-support
Text MUST scale with system font size settings on all platforms.
Applies when: a component displays text content.
Guidelines:
contrast-ratio
Text and interactive elements MUST meet WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text).
Applies when: a component renders text or interactive elements with foreground/background color combinations.
Guidelines:
touch-target-size
Touch and click targets MUST be at least 44x44pt (Apple) or 48x48dp (Android).
Applies when: a component renders tappable or clickable elements.
Guidelines:
reduced-motion
Animations MUST respect the system reduced-motion preference.
Applies when: a component uses animation or motion effects.
Guidelines:
focus-management
Focus MUST be managed logically; modal content MUST trap focus appropriately.
Applies when: a component manages focus order, presents modal dialogs, or uses overlays.
Guidelines:
semantic-markup
Web components MUST use correct ARIA roles, states, and properties.
Applies when: a component renders web-based UI using HTML/ARIA.
Guidelines: