القائمة
Ensures digital accessibility for all users (WCAG 2.1 AA compliance, French RGAA 4.1.2 standard)
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Guide users through creating custom VS Code agents with specialized capabilities, tool restrictions, and subagent workflows. Use when users want to create agent modes, define specialized workflows with context isolation, or build multi-stage agent systems with different tool access per stage. Provides structured interview process for comprehensive agent development.
Technology-agnostic, referential-agnostic orchestration framework for all compliance standards (RGAA, RGESN, RGS, RGPD, RGI, W3C-WSG)
Ensures eco-responsible IT practices and minimizes environmental impact
Ensures system interoperability via open standards, documented APIs, and standardized data exchange
Ensures personal data protection and privacy rights according to GDPR/RGPD
Ensures information security and compliance with French security standards
| name | compliance-rgaa |
| description | Ensures digital accessibility for all users (WCAG 2.1 AA compliance, French RGAA 4.1.2 standard) |
| category | Accessibility |
| keywords | accessibility, WCAG, RGAA, ARIA, keyboard-navigation, screen-readers, inclusive-design |
| license | MIT |
Référentiel Général d'Amélioration de l'Accessibilité (General Accessibility Improvement Framework)
Ensuring images are accessible via text alternatives, descriptions, and proper handling of decorative imagery.
Labeling and identification of frame/iframe elements.
Ensuring information is not conveyed by color alone and sufficient contrast is maintained.
Accessibility of audio, video, and interactive media.
Proper structure, headers, and accessibility of data tables.
Clear, explicit link text that conveys purpose.
Browser script compatibility with assistive technologies and keyboard control.
Foundational HTML attributes and requirements.
Logical heading hierarchy and document outline.
CSS-based design, text sizing, focus visibility, and responsive layout.
Form field labeling, grouping, validation, and user control.
Multiple navigation methods, consistent placement, keyboard operability, and logical tab order.
Timeouts, window control, downloadable documents, and gesture alternatives.
All 106 criteria with questions, test methods, WCAG references, and exceptions are defined in:
📁 criteria.json — Machine-readable structure for tools/scripts
Quick navigation:
{
"themes": [
{"id": "1", "name": "Images", "criteria": [...]},
{"id": "2", "name": "Cadres", "criteria": [...]},
...
{"id": "13", "name": "Consultation", "criteria": [...]}
]
}
| Area | Key Test | Tool |
|---|---|---|
| Images | Alt text presence & relevance | DevTools, manual |
| Colors | Contrast ratio ≥ WCAG AA | Contrast Ratio tool, Lighthouse |
| Forms | Labels correctly associated | Screen reader, DevTools |
| Navigation | Keyboard operability, tab order | Keyboard only |
| Scripts | Dynamic content AT compatibility | Screen reader |
| Tables | Headers associated with cells | DevTools, screen reader |
| Media | Captions, transcripts, controls | Manual inspection |
The RGAA applies universally, but implementation varies by technology:
Automated:
# HTML/ARIA validation (e.g., JavaScript project)
npm install --save-dev axe-core jest-axe
# CSS color contrast (npm/yarn)
npm install --save-dev axe-core-web
Manual:
// Example: Automated axe test in test suite
import { axe } from 'jest-axe'
test('homepage is accessible', async () => {
const { container } = render(<Homepage />)
const results = await axe(container)
expect(results).toHaveNoViolations()
})
<!-- ✅ Use semantic elements -->
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main>
<article>
<h1>Article Title</h1>
<p>Content here...</p>
</article>
</main>
<footer>
<p>© 2024 Company</p>
</footer>
<!-- ❌ Avoid generic divs for structure -->
<div class="nav">...</div>
<div class="content">...</div>
<!-- ✅ Labels properly associated -->
<label for="email">Email:</label>
<input id="email" type="email" name="email" autocomplete="email" />
<!-- Grouped fields -->
<fieldset>
<legend>Preferences</legend>
<label><input type="radio" name="theme" /> Light</label>
<label><input type="radio" name="theme" /> Dark</label>
</fieldset>
<!-- ❌ Missing label association -->
<input type="email" placeholder="Email" />
/* ✅ WCAG AA compliant (4.5:1 for normal text) */
color: #333333; /* Dark gray on white = 11.56:1 ratio */
background-color: #ffffff;
/* ❌ Insufficient contrast */
color: #999999; /* Light gray on white = 3.99:1 ratio */
background-color: #ffffff;
// ✅ All interactive elements keyboard accessible
<button onClick={handleClick} onKeyDown={handleKeyDown}>
Click me
</button>
// ❌ Click-only, not keyboard operable
<div onClick={handleClick}>Click me</div>
<!-- ✅ Use semantic HTML first -->
<button>Save</button>
<nav aria-label="Breadcrumb">...</nav>
<!-- ARIA only when semantic HTML unavailable -->
<div role="button" tabindex="0" onClick="{...}" onKeyDown="{...}">Save</div>
Before considering work complete, verify:
For implementation examples specific to your technology stack:
docs/compliance/RGAA-IMPLEMENTATION.md for a React + NestJS case study (optional reference)