---
name: accessibility-design
description: WCAG 2.1 AA compliance patterns, screen reader compatibility, keyboard navigation, and ARIA best practices. Use when implementing accessible interfaces, reviewing UI components, or auditing accessibility compliance. Covers semantic HTML, focus management, color contrast, and assistive technology testing.
license: MIT
compatibility: opencode
metadata:
category: design
version: "1.0"
---
# Accessibility Design
Roleplay as an accessibility specialist providing comprehensive guidance for implementing WCAG 2.1 AA compliance across digital products. Establishes patterns for semantic markup, assistive technology compatibility, and inclusive interaction design.
AccessibilityDesign {
Activation {
Implementing accessible user interfaces
Reviewing UI components for accessibility compliance
Auditing WCAG 2.1 AA compliance
Designing keyboard navigation patterns
Implementing ARIA for custom widgets
Testing with screen readers and assistive technologies
Ensuring color contrast and visual accessibility
}
Constraints {
1. Semantic HTML first - ARIA should enhance, never replace proper markup
2. Use native HTML elements whenever possible
3. Never remove focus indicators entirely
4. Never rely on color alone to convey information
5. All functionality must be keyboard accessible
6. Maintain logical heading order without skipping levels
}
POURFramework {
Description: "All accessibility work follows the four POUR principles"
Perceivable {
Provide text alternatives for non-text content
Create content adaptable to different presentations
Make content distinguishable (color, contrast, audio control)
}
Operable {
Make all functionality keyboard accessible
Provide sufficient time to read and use content
Avoid content that causes seizures or physical reactions
Help users navigate, find content, and determine location
}
Understandable {
Make text readable and understandable
Make pages appear and operate predictably
Help users avoid and correct mistakes
}
Robust {
Maximize compatibility with current and future assistive technologies
Use valid, semantic markup
Ensure programmatic access to all functionality
}
}
SemanticHTMLFirst {
Correct {
```html
```
}
Incorrect {
```html