Create detailed accessibility annotations for design handoffs ensuring WCAG compliance
Create accessibility annotations for [DESIGN/SCREEN]. Design Context: - Design type: [WEB/MOBILE/DESKTOP] - Screen/component: [DESCRIPTION] - Target WCAG level: [AA/AAA] - Users to consider: [SPECIFIC ACCESSIBILITY NEEDS] Generate comprehensive accessibility annotations: **1. Document Structure** - Heading hierarchy (H1, H2, etc.) - Landmark regions - Skip links needed - Reading order **2. Navigation Annotations** | Element | Focus Order | Keyboard Interaction | Notes | |---------|-------------|---------------------|-------| **3. Interactive Element Labels** | Element | Visible Label | Accessible Name | ARIA Role | Notes | |---------|---------------|-----------------|-----------|-------| | [Button] | | | | | | [Link] | | | | | | [Input] | | | | | | [Icon button] | | | | | **4. Form Accessibility** - Label associations - Required field indication (visual + programmatic) - Error message associations - Help text associations - Fieldset/legend groupings **5. Dynamic Content** | Change | Announcement Type | ARIA Live Region | Timing | |--------|------------------|------------------|--------| | Loading | | | | | Error | | | | | Success | | | | | Update | | | | **6. Color & Contrast** | Element | Foreground | Background | Ratio | Pass/Fail | |---------|------------|------------|-------|----------| - Non-color indicators needed - High contrast mode considerations **7. Images & Media** | Image | Type | Alt Text | Long Description | |-------|------|----------|------------------| | [Image] | Informative/Decorative | | | - Video caption requirements - Audio description needs **8. Touch Targets** | Element | Current Size | Required Size | Pass/Fail | |---------|--------------|---------------|----------| **9. Motion & Animation** - Reducible motion elements - Auto-playing content - Pause/stop controls needed - Prefers-reduced-motion implementation **10. Responsive Accessibility** - Zoom behavior (up to 200%) - Reflow requirements - Mobile-specific considerations **11. Screen Reader Flow** [Annotated reading order description] **12. Testing Checklist** - Keyboard navigation test points - Screen reader test points - Voice control test points - Magnification test points
Create accessibility annotations for [DESIGN/SCREEN]. Design Context: - Design type: [WEB/MOBILE/DESKTOP] - Screen/component: [DESCRIPTION] - Target WCAG level: [AA/AAA] - Users to consider: [SPECIFIC ACCESSIBILITY NEEDS] Generate comprehensive accessibility annotations: **1. Document Structure** - Heading hierarchy (H1, H2, etc.) - Landmark regions - Skip links needed - Reading order **2. Navigation Annotations** | Element | Focus Order | Keyboard Interaction | Notes | |---------|-------------|---------------------|-------| **3. Interactive Element Labels** | Element | Visible Label | Accessible Name | ARIA Role | Notes | |---------|---------------|-----------------|-----------|-------| | [Button] | | | | | | [Link] | | | | | | [Input] | | | | | | [Icon button] | | | | | **4. Form Accessibility** - Label associations - Required field indication (visual + programmatic) - Error message associations - Help text associations - Fieldset/legend groupings **5. Dynamic Content** | Change | Announcement Type | ARIA Live Region | Timing | |--------|------------------|------------------|--------| | Loading | | | | | Error | | | | | Success | | | | | Update | | | | **6. Color & Contrast** | Element | Foreground | Background | Ratio | Pass/Fail | |---------|------------|------------|-------|----------| - Non-color indicators needed - High contrast mode considerations **7. Images & Media** | Image | Type | Alt Text | Long Description | |-------|------|----------|------------------| | [Image] | Informative/Decorative | | | - Video caption requirements - Audio description needs **8. Touch Targets** | Element | Current Size | Required Size | Pass/Fail | |---------|--------------|---------------|----------| **9. Motion & Animation** - Reducible motion elements - Auto-playing content - Pause/stop controls needed - Prefers-reduced-motion implementation **10. Responsive Accessibility** - Zoom behavior (up to 200%) - Reflow requirements - Mobile-specific considerations **11. Screen Reader Flow** [Annotated reading order description] **12. Testing Checklist** - Keyboard navigation test points - Screen reader test points - Voice control test points - Magnification test points
This prompt is released under CC0 (Public Domain). You are free to use it for any purpose without attribution.
Explore similar prompts based on category and tags
Analyze UI layouts for hierarchy, balance, accessibility, and provide actionable improvements
Generate color palettes with theory explanations, accessibility compliance, and usage guidelines
Get expert typography pairing recommendations with scales, usage guidelines, and accessibility notes
Write comprehensive motion design specifications for consistent, performant animations