Accessibility Design Checklist

The accessibility-design-checklist skill provides a structured framework for AI agents to audit digital interfaces against established WCAG guidelines. It enables automated identification of contrast issues, missing alt text, and keyboard navigation failures within design mockups or codebases.

When to use it

• Validating new UI components before they enter the development pipeline.
• Auditing existing websites for compliance with legal accessibility standards.
• Generating remediation reports highlighting specific WCAG violations in design files.
• Ensuring inclusive design practices are met during the prototyping phase.

Key capabilities

• Evaluates color contrast ratios against WCAG AA and AAA thresholds.
• Detects missing alternative text for images and non-text content.
• Assesses keyboard navigability and focus order in interface designs.
• Identifies semantic HTML errors that hinder screen reader usage.

Example prompts

• "Run an accessibility audit on this Figma design file and list all WCAG 2.1 violations."
• "Check the provided React component code for missing ARIA labels and low contrast issues."
• "Generate a remediation plan to fix the keyboard navigation gaps found in this landing page mockup."

Tips & gotchas

This skill relies on visual analysis or code parsing; it cannot physically test live interactions with screen readers. For production environments, always pair these automated checks with manual testing by users who rely on assistive technologies.