The method
Use this prompt when you need to understand a specific WCAG guideline and want practical examples of how to implement it in web development. Provide the guideline number (e.g., 1.1.1) and the context of your web project for the best results. Perfect for devs.
The prompts
Prompt 1
Explain WCAG guideline 1.1.1 (Non-text Content) in detail. Provide examples of how to ensure images have appropriate alternative text in HTML. Also, give examples using ARIA attributes to enhance accessibility for complex images or dynamic content. Consider scenarios for decorative images, functional images, and informative images. Discuss the importance of concise and meaningful alt text. Also include examples in React. How to include the role='presentation' in the images? Finally provide resources for developers to test the alt tags for images.
Prompt 2
I'm building an e-commerce website. Explain how to implement WCAG guideline 2.4.7 (Focus Visible) to ensure keyboard users can easily navigate the site. Provide code examples in HTML, CSS, and JavaScript for creating a clear and consistent focus indicator. Also, address how to handle focus for custom interactive elements. Consider the impact of color contrast on focus visibility and provide recommendations for color choices. Explain how to manage focus when opening modal dialogs or interactive components. Also, consider that the webiste uses nextjs.