UI & interface design

UI Design WCAG Accessibility Compliance Prompt

Generate comprehensive UI design specifications that meet WCAG accessibility standards and ensure inclusive digital experiences. This prompt helps designers, developers, and product teams create user interfaces compliant with Web Content Accessibility Guidelines at various conformance levels.

7 blanks to fill in · Added December 2025 · ui-design · accessibility · wcag · inclusive-design · compliance

The prompt

7 blanks

You are an expert UI/UX designer specializing in accessibility compliance and inclusive design principles. Your task is to create a comprehensive UI design specification that fully adheres to WCAG [CONFORMANCE LEVEL] standards for [PROJECT NAME OR TYPE].

Project Context:
- Target users: [USER DEMOGRAPHICS AND ACCESSIBILITY NEEDS]
- Platform: [WEB/MOBILE/DESKTOP APPLICATION]
- Key features: [MAIN FUNCTIONALITY AND USER INTERACTIONS]
- Current accessibility challenges: [EXISTING BARRIERS OR PAIN POINTS]
- Compliance requirements: [LEGAL OR ORGANIZATIONAL MANDATES]

Generate a detailed accessibility-compliant UI design specification that includes:

1. WCAG Compliance Analysis
- Map design elements to WCAG 2.2 principles: Perceivable, Operable, Understandable, and Robust
- Identify specific success criteria applicable to this interface
- Document conformance level targets and rationale

2. Accessible Design Components
- Color and contrast specifications meeting minimum ratios
- Typography standards for readability
- Interactive element design with proper focus indicators
- Keyboard navigation patterns and shortcuts
- Touch target sizing for mobile interfaces
- Form design with clear labels and error handling

3. Assistive Technology Support
- Screen reader compatibility requirements
- ARIA roles and semantic HTML implementation
- Alternative text strategies for images and media
- Audio descriptions and captions for multimedia content

4. User Testing and Validation
- Accessibility testing methodology
- Assistive technology testing checklist
- User testing protocols with people with disabilities
- Automated testing tool recommendations

5. Implementation Guidelines
- Developer handoff documentation
- Code snippets for accessible patterns
- Third-party component accessibility requirements
- Ongoing maintenance and audit procedures

For each design element, explicitly state which WCAG success criteria it satisfies and provide implementation guidance that ensures compliance while maintaining aesthetic quality and user experience excellence.

Open in ChatGPT

Blanks: Conformance level · Project name or type · User demographics and accessibility needs · Web/mobile/desktop application · Main functionality and user interactions · Existing barriers or pain points · Legal or organizational mandates

How to use it

This prompt is designed for UI/UX designers, product managers, and development teams working on digital products that must meet accessibility standards. Fill in the bracketed placeholders with your specific project details, desired WCAG conformance level (A, AA, or AAA), and any particular accessibility challenges your users face. The prompt generates comprehensive specifications that balance compliance requirements with excellent user experience.

Tips

Start with Level AA compliance as it represents the legally required standard in most jurisdictions and covers the majority of accessibility needs without requiring extreme measures
Test your designs with actual assistive technologies early and often rather than relying solely on automated checkers, as many accessibility issues require human judgment to evaluate properly
Involve users with disabilities in your design and testing process to gain authentic insights into accessibility barriers and usability challenges that specifications alone cannot reveal
Create accessible color palettes upfront by testing all color combinations for sufficient contrast ratios, saving significant rework later in the design process
Document accessibility decisions and rationale in your design files to help developers understand the intent behind specifications and maintain compliance during implementation
Consider accessibility as an enhancement to overall usability that benefits all users, not just those with disabilities, by creating clearer interfaces with better keyboard support and more predictable behavior

Understanding WCAG Conformance Levels

WCAG defines three conformance levels: Level A addresses the most critical accessibility barriers and is the minimum legal requirement in many jurisdictions. Level AA is the recommended standard for most websites and applications, covering broader accessibility needs including color contrast and text resizing. Level AAA represents the highest accessibility standard with stringent requirements, though full AAA compliance is not always feasible for all content. When using this prompt, specify AA conformance for general commercial applications, as it balances comprehensive accessibility with practical implementation.

Key Design Considerations

Successful accessible UI design requires attention to multiple dimensions simultaneously. Color contrast ratios must meet minimum standards of 4.5:1 for normal text and 3:1 for large text at Level AA. All interactive elements must be keyboard accessible and have visible focus indicators. Touch targets should be at least 44x44 pixels for mobile interfaces. Forms must have properly associated labels and provide clear error messages. Consider how screen readers will interpret your interface by using semantic HTML and appropriate ARIA labels where needed.

Testing and Validation Framework

Accessibility compliance requires rigorous testing beyond automated tools. Use automated accessibility checkers like axe or WAVE as a first pass to catch obvious issues, but supplement with manual testing using actual assistive technologies including NVDA, JAWS, or VoiceOver screen readers. Conduct user testing with people who have various disabilities to identify real-world usability barriers. Document all testing results and remediation efforts to demonstrate compliance and continuous improvement.

Integration with Design Systems

Build accessibility into your design system from the ground up rather than retrofitting it later. Create reusable accessible components with built-in compliance features like proper color contrast, keyboard support, and ARIA patterns. Document accessibility specifications for each component including required markup, supported interactions, and testing procedures. This systematic approach ensures consistency across your product and reduces the burden on individual designers and developers.