| 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 |
SKILL: RGAA 4.1.2 — Generic Accessibility Referential
Référentiel Général d'Amélioration de l'Accessibilité (General Accessibility Improvement Framework)
📋 Overview
🏗️ The 13 Thematic Areas
1. Images (9 criteria)
Ensuring images are accessible via text alternatives, descriptions, and proper handling of decorative imagery.
- Image alternatives (alt text)
- Image descriptions (long descriptions)
- Decorative image treatment
- CAPTCHA accessibility
2. Frames/Iframes (2 criteria)
Labeling and identification of frame/iframe elements.
- Frame title presence
- Frame title relevance
3. Colors (3 criteria)
Ensuring information is not conveyed by color alone and sufficient contrast is maintained.
- Information vs. color dependency
- Text contrast ratios (WCAG AA: 4.5:1 normal, 3:1 large)
- UI component contrast
4. Multimedia (13 criteria)
Accessibility of audio, video, and interactive media.
- Transcripts and audio descriptions
- Captions for synchronized media
- Media player keyboard/pointer control
- Automatic sounds control
5. Tables (8 criteria)
Proper structure, headers, and accessibility of data tables.
- Table headers (th, scope)
- Data cell-header association
- Table summaries and titles
- Distinction between data and layout tables
6. Links (2 criteria)
Clear, explicit link text that conveys purpose.
- Link text clarity and context
- Screen reader accessible link names
7. Scripts (5 criteria)
Browser script compatibility with assistive technologies and keyboard control.
- Script/JavaScript AT compatibility
- Keyboard operability of dynamic content
- Context change management
- Status messages to AT
8. Essential Elements (10 criteria)
Foundational HTML attributes and requirements.
- DOCTYPE declaration
- HTML validity
- Language declaration (lang attribute)
- Page title presence and relevance
- Language changes marked (lang on elements)
9. Information Structure (4 criteria)
Logical heading hierarchy and document outline.
- Heading hierarchy (h1-h6 proper nesting)
- Document structure coherence
- List structure (ul, ol, li)
- Quotations properly marked
10. Information Presentation (14 criteria)
CSS-based design, text sizing, focus visibility, and responsive layout.
- CSS usage for presentation
- Content visibility without CSS
- Text zoom support (200% minimum)
- Focus indicators on all interactive elements
- Responsive design (256px height, 320px width viewports)
- Text spacing customization (line-height, letter-spacing)
- Visible hover/focus content
11. Forms (13 criteria)
Form field labeling, grouping, validation, and user control.
- Field labels (label element or aria-label)
- Consistent field labels across pages
- Label-field proximity
- Field grouping (fieldset/legend)
- Button text clarity
- Input validation and error messages
- Error recovery suggestions
- Autocomplete field purpose detection
12. Navigation (11 criteria)
Multiple navigation methods, consistent placement, keyboard operability, and logical tab order.
- Multiple navigation systems (menu + search/sitemap)
- Consistent navigation placement
- Sitemap presence and accessibility
- Landmark regions (header, main, footer)
- Skip links to main content
- Logical tab order
- Keyboard traps prevention
- Single-key shortcut control
13. Consultation (12 criteria)
Timeouts, window control, downloadable documents, and gesture alternatives.
- Session timeout control
- No unsolicited window.open()
- Accessible document downloads (PDF, Office docs)
- Cryptic content alternatives (ASCII art, emojis)
- Flash/luminosity hazards
- Motion and animation control
- Orientation support (portrait/landscape)
- Device gesture alternatives
📊 Detailed Criteria & Test Methods
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": [...]}
]
}
🔍 Testing Methodologies
Automated Testing
- Browser DevTools: Lighthouse, WebAIM, Axe
- Color Contrast: Contrast Ratio checkers (WCAG AA/AAA)
- HTML Validation: W3C Validator, Axe, Jest-axe
- Dynamic Content: Check AT announcements (aria-live, role=status)
Manual Testing
- Keyboard Navigation: Tab through entire page → all interactive elements reachable?
- Screen Reader: NVDA (Windows), JAWS, Apple VoiceOver (Mac/iOS)
- Visual Inspection: Focus indicators, color-only cues, text alternatives
- Responsive Testing: 256px height, 320px width viewports
- Disable CSS: Ensure content readable without styles
Specific Area Tests
| 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 |
🛠️ Integration in Your Project
Step 1: Understand Your Stack
The RGAA applies universally, but implementation varies by technology:
- Static Sites: HTML/CSS/JS fundamentals
- SPAs: Focus on dynamic content, ARIA, focus management
- Backend APIs: Consider document formats (PDFs), error responses
- Mobile: Gesture alternatives, orientation handling
Step 2: Choose Testing Tools
Automated:
npm install --save-dev axe-core jest-axe
npm install --save-dev axe-core-web
Manual:
- Keyboard-only navigation (disable mouse)
- Screen reader testing (NVDA, VoiceOver)
- Browser zoom to 200%
- Mobile device orientation
Step 3: Assess Criteria by Theme
- Review applicable criteria for your project type
- Test against test methods in criteria.json
- Document exceptions and justifications
- Create implementation-specific guidelines (see docs/compliance/ for examples)
Step 4: Integrate into CI/CD
import { axe } from 'jest-axe'
test('homepage is accessible', async () => {
const { container } = render(<Homepage />)
const results = await axe(container)
expect(results).toHaveNoViolations()
})
📚 Resources & References
Official Documents
Tools & Standards
Assistive Technologies (for testing)
🚀 Common Patterns & Best Practices
Semantic HTML
<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>
<div class="nav">...</div>
<div class="content">...</div>
Form Accessibility
<label for="email">Email:</label>
<input id="email" type="email" name="email" autocomplete="email" />
<fieldset>
<legend>Preferences</legend>
<label><input type="radio" name="theme" /> Light</label>
<label><input type="radio" name="theme" /> Dark</label>
</fieldset>
<input type="email" placeholder="Email" />
Color & Contrast
color: #333333;
background-color: #ffffff;
color: #999999;
background-color: #ffffff;
Keyboard Navigation
<button onClick={handleClick} onKeyDown={handleKeyDown}>
Click me
</button>
<div onClick={handleClick}>Click me</div>
ARIA (when semantic HTML isn't enough)
<button>Save</button>
<nav aria-label="Breadcrumb">...</nav>
<div role="button" tabindex="0" onClick="{...}" onKeyDown="{...}">Save</div>
📋 Verification Checklist
Before considering work complete, verify:
🔗 Project-Specific Implementation
For implementation examples specific to your technology stack:
- See
docs/compliance/RGAA-IMPLEMENTATION.md for a React + NestJS case study (optional reference)
- Each project should create its own implementation guide based on this generic RGAA referential
📞 Support & Questions
