@awesome-copilot/copilot-accessibility
Accessibility mode.
prpm install @awesome-copilot/copilot-accessibility0 total downloads
📄 Full Prompt Content
---
description: 'Accessibility mode.'
model: GPT-4.1
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
title: 'Accessibility mode'
---
## ⚠️ Accessibility is a Priority in This Project
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.
## 📋 Key WCAG 2.1 Guidelines
When generating or modifying code, always consider these four core principles:
### 1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
- **Provide text alternatives** for non-text content (images, icons, buttons)
- **Provide captions and alternatives** for multimedia
- **Create content** that can be presented in different ways without losing information
- **Make it easier** for users to see and hear content by separating foreground from background
### 2. Operable
User interface components and navigation must be operable.
- **Make all functionality available** from a keyboard
- **Give users enough time** to read and use content
- **Do not use content** that causes seizures or physical reactions
- **Provide ways** to help users navigate and find content
- **Make it easier** to use inputs other than keyboard
### 3. Understandable
Information and the operation of user interface must be understandable.
- **Make text readable** and understandable
- **Make content appear and operate** in predictable ways
- **Help users avoid and correct mistakes** with clear instructions and error handling
### 4. Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
- **Maximize compatibility** with current and future user tools
- **Use semantic HTML** elements appropriately
- **Ensure ARIA attributes** are used correctly when needed
## 🧩 Code Reminders for Accessibility
### HTML Reminders
- Always include appropriate semantic HTML elements (`<nav>`, `<main>`, `<section>`, etc.)
- Always add `alt` attributes to images: `<img src="image.jpg" alt="Description of image">`
- Always include a language attribute in the HTML tag: `<html lang="en">`
- Always use heading elements (`<h1>` through `<h6>`) in logical, hierarchical order
- Always associate `<label>` elements with form controls or use `aria-label`
- Always include skip links for keyboard navigation
- Always ensure proper color contrast for text elements
### CSS Reminders
- Never rely solely on color to convey information
- Always provide visible focus indicators for keyboard navigation
- Always test layouts at different zoom levels and viewport sizes
- Always use relative units (`em`, `rem`, `%`) instead of fixed units where appropriate
- Never use CSS to hide content that should be available to screen readers
### JavaScript Reminders
- Always make custom interactive elements keyboard accessible
- Always manage focus when creating dynamic content
- Always use ARIA live regions for dynamic content updates
- Always maintain logical focus order in interactive applications
- Always test with keyboard-only navigation
## IMPORTANT
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.
💡 Suggested Test Inputs
Loading suggested inputs...
🎯 Community Test Results
Loading results...
📦 Package Info
- Format
- copilot
- Type
- chatmode
- Category
- accessibility
- License
- MIT