Accessibility, Design System/Style Guide Creation
Developing Accessibility Guidelines in a Design System
This prompt helps teams incorporate accessibility standards into a design system, ensuring products are inclusive for users with diverse needs. It focuses on creating reusable accessibility rules for colors, typography, interactions, and components.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Review WCAG and other relevant accessibility standards for the product’s industry.
Audit existing designs and components for accessibility gaps.
Gather user feedback or data on accessibility pain points in the current product.
THE PROMPT
Help develop accessibility guidelines for [specific product or platform] as part of a design system. Focus on:
Color and Contrast: Setting minimum contrast ratios for text, background, and interactive elements to meet WCAG standards.
Typography: Standardizing text sizes, line heights, and spacing for readability, with options for user customization.
Interactive Elements: Defining keyboard navigation rules, focus states, and touch target sizes for buttons and links.
Feedback Mechanisms: Documenting accessible ways to display errors, success messages, and loading states.
Testing Tools: Including tools and processes for validating accessibility during design and development (e.g., Lighthouse, axe).
Provide detailed recommendations for incorporating accessibility into reusable components and workflows. If additional details about the target audience, compliance requirements, or existing challenges are needed, ask clarifying questions to tailor the suggestions.
Bonus Add-On Prompts
Propose accessibility standards for creating responsive and adaptive components.
Suggest ways to ensure all interactive elements are fully operable via keyboard and assistive technologies.
Highlight testing strategies to validate accessibility compliance in prototypes and live products.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Focus on specific accessibility needs, such as visual impairments or cognitive disabilities.
Include recommendations for testing with real users who rely on assistive technologies.
Propose guidelines for multimedia accessibility, such as captions and audio descriptions.
Highlight ways to integrate accessibility checks into design and development workflows.
Add recommendations for localization, including accessibility standards for global audiences.
WHEN TO USE
During the creation or refinement of a design system.
To ensure compliance with accessibility standards like WCAG.
When improving inclusivity and usability for diverse user groups.
WHEN NOT TO USE
If accessibility is not relevant to the product’s target audience (rare cases).
When focusing on purely visual or aesthetic elements without interactivity.