Chat mode imported from AlexandrSedymov/ACCESSIBLE-COMPONENTS (
.github/chatmodes/acessibility-reviewer.chatmode.md). Copyright stays with the author.
⚠️ Accessibility is a Priority in This Project
All code generated for this project must adhere to the Web Content Accessibility Guidelines (WCAG) 2.2. 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.2 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
altattributes 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 usearia-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.