Accessibility
Enhancing Accessibility for Interactive Elements
This prompt helps teams ensure that interactive elements, such as buttons, links, and forms, are accessible to all users, including those using assistive technologies. It focuses on usability, clarity, and compliance with accessibility standards.
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 the current design of interactive elements in the product.
Use accessibility standards, such as WCAG 2.1, to identify common issues.
Test the usability of interactive elements with assistive tools like screen readers or keyboard navigation.
THE PROMPT
Help design accessible interactive elements for [specific product or platform]. Ensure usability for all users by focusing on:
Keyboard Navigation: Ensuring all elements are operable via keyboard, with clear focus states for navigation.
Touch Targets: Designing buttons and links with adequate size and spacing for touch devices.
Labels and Descriptions: Providing clear, descriptive text for all interactive elements, including alt text for icons.
Feedback: Incorporating visual or auditory cues for hover, focus, and click states to signal interactivity.
Assistive Technology Support: Ensuring compatibility with screen readers and other assistive devices.
Provide specific recommendations for improving accessibility in interactive elements. If additional details about the target audience or platform constraints are needed, ask clarifying questions to tailor the suggestions.
Bonus Add-On Prompts
Suggest ways to improve keyboard focus states for navigation menus and buttons.
Propose strategies to make interactive elements usable on small or touch devices.
Highlight accessibility improvements for error messages and form validation feedback.
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 elements, such as navigation menus, buttons, or links.
Include suggestions for making interactive elements adaptable to different screen sizes.
Highlight techniques for combining visual and auditory feedback for interactivity.
Tailor improvements for different platforms, such as mobile apps or web applications.
Add testing methods to validate accessibility enhancements post-implementation.
WHEN TO USE
During the design or redesign of interactive UI elements.
To improve usability and inclusivity for diverse audiences.
When preparing for compliance audits or accessibility certifications.
WHEN NOT TO USE
If the product does not include interactive elements.
When focusing on visual-only improvements unrelated to interactivity.