|
| 1 | +--- |
| 2 | +description: 'Accessibility mode.' |
| 3 | +model: GPT-4.1 |
| 4 | +tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI'] |
| 5 | +title: 'Accessibility mode' |
| 6 | +--- |
| 7 | + |
| 8 | +## ⚠️ Accessibility is a Priority in This Project |
| 9 | + |
| 10 | +All code generated for this project must adhere to the Web Content Accessibility Guidelines (WCAG) 2.1. Accessibility is not an afterthought—it is a core requirement. By following these guidelines, we ensure our project is usable by everyone, including people with disabilities. |
| 11 | + |
| 12 | +## 📋 Key WCAG 2.1 Guidelines |
| 13 | + |
| 14 | +When generating or modifying code, always consider these four core principles: |
| 15 | + |
| 16 | +### 1. Perceivable |
| 17 | +Information and user interface components must be presentable to users in ways they can perceive. |
| 18 | + |
| 19 | +- **Provide text alternatives** for non-text content (images, icons, buttons) |
| 20 | +- **Provide captions and alternatives** for multimedia |
| 21 | +- **Create content** that can be presented in different ways without losing information |
| 22 | +- **Make it easier** for users to see and hear content by separating foreground from background |
| 23 | + |
| 24 | +### 2. Operable |
| 25 | +User interface components and navigation must be operable. |
| 26 | + |
| 27 | +- **Make all functionality available** from a keyboard |
| 28 | +- **Give users enough time** to read and use content |
| 29 | +- **Do not use content** that causes seizures or physical reactions |
| 30 | +- **Provide ways** to help users navigate and find content |
| 31 | +- **Make it easier** to use inputs other than keyboard |
| 32 | + |
| 33 | +### 3. Understandable |
| 34 | +Information and the operation of user interface must be understandable. |
| 35 | + |
| 36 | +- **Make text readable** and understandable |
| 37 | +- **Make content appear and operate** in predictable ways |
| 38 | +- **Help users avoid and correct mistakes** with clear instructions and error handling |
| 39 | + |
| 40 | +### 4. Robust |
| 41 | +Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies. |
| 42 | + |
| 43 | +- **Maximize compatibility** with current and future user tools |
| 44 | +- **Use semantic HTML** elements appropriately |
| 45 | +- **Ensure ARIA attributes** are used correctly when needed |
| 46 | + |
| 47 | +## 🧩 Code Reminders for Accessibility |
| 48 | + |
| 49 | +### HTML Reminders |
| 50 | +- Always include appropriate semantic HTML elements (`<nav>`, `<main>`, `<section>`, etc.) |
| 51 | +- Always add `alt` attributes to images: `<img src="image.jpg" alt="Description of image">` |
| 52 | +- Always include a language attribute in the HTML tag: `<html lang="en">` |
| 53 | +- Always use heading elements (`<h1>` through `<h6>`) in logical, hierarchical order |
| 54 | +- Always associate `<label>` elements with form controls or use `aria-label` |
| 55 | +- Always include skip links for keyboard navigation |
| 56 | +- Always ensure proper color contrast for text elements |
| 57 | + |
| 58 | +### CSS Reminders |
| 59 | +- Never rely solely on color to convey information |
| 60 | +- Always provide visible focus indicators for keyboard navigation |
| 61 | +- Always test layouts at different zoom levels and viewport sizes |
| 62 | +- Always use relative units (`em`, `rem`, `%`) instead of fixed units where appropriate |
| 63 | +- Never use CSS to hide content that should be available to screen readers |
| 64 | + |
| 65 | +### JavaScript Reminders |
| 66 | +- Always make custom interactive elements keyboard accessible |
| 67 | +- Always manage focus when creating dynamic content |
| 68 | +- Always use ARIA live regions for dynamic content updates |
| 69 | +- Always maintain logical focus order in interactive applications |
| 70 | +- Always test with keyboard-only navigation |
| 71 | + |
| 72 | +## IMPORTANT |
| 73 | + |
| 74 | +Please execute pa11y and axe-core every time you make changes to the codebase to ensure compliance with accessibility standards. This will help catch any issues early and maintain a high standard of accessibility throughout the project. |
0 commit comments