In France, RGAA 4.1 mandates 95% compliance for public sites. In Senegal, Law 2024-13 on digital accessibility of public services entered force in June 2024. Ivory Coast is preparing its equivalent. For an administration redoing its site in 2026, it's non-negotiable.
TL;DR
- WCAG 2.2 AA + RGAA = practical equivalents.
- Top 10 criteria covering 80% of problems: alt images, contrast, visible focus, keyboard nav, form labels, heading structure, language, captions, proper ARIA, text resize.
- Testing: combine axe-core (CI) + Wave (manual) + audit by users with disabilities.
Why accessibility
Beyond legal compliance, accessibility touches:
- 15% of world population with disability (WHO)
- 70% of temporary use cases (busy hands, noise, fatigue)
- 100% of slow/3G situations (performance is accessibility)
- Google SEO prioritizes accessibility
An institutional site excluding 15% of citizens violates its mission.
Top 10 criteria covering 80% of issues
1. Text alternatives (1.1.1)
Functional images need alt:
`html
`
2. Contrast (1.4.3)
Normal text: ratio ≥4.5:1 (AA), ≥7:1 (AAA).
Large text (18px bold or 24px): ratio ≥3:1.
`css
/* BAD: 2.5:1 ratio */
.warning { color: #ff9999; background: #fff; }
/* GOOD: 4.6:1 ratio */
.warning { color: #d32f2f; background: #fff; }
`
Tools: Contrast Checker WebAIM, Stark Figma plugin.
3. Visible focus (2.4.7)
Every focusable element needs visible focus:
`css
/* BAD: invisible focus */
*:focus { outline: none; }
/* GOOD: contrasted focus */
*:focus-visible {
outline: 3px solid #1976d2;
outline-offset: 2px;
}
`
4. Keyboard navigation (2.1.1)
Every mouse interaction must work via keyboard. Tab to navigate, Enter/Space to activate, Esc to close modal.
`tsx
'use client';
import { useEffect, useRef } from 'react';
export function Modal({ isOpen, onClose, children }) {
const ref = useRef
useEffect(() => {
if (isOpen) {
ref.current?.focus();
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}
}, [isOpen, onClose]);
if (!isOpen) return null;
return (
{children}Confirmation
);
}
`
5. Form labels (3.3.2)
Every field needs an associated label:
`html
aria-describedby="phone-help">
Format: +221 XX XXX XX XX
`
6. Heading structure (1.3.1)
h1 → h2 → h3 hierarchy without skipping. Single h1 per page.
`html
Ministry of Health
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 2 minutes.
Programs
Ministry of Health
National programs
Malaria program
Tuberculosis program
News
`
7. lang attribute (3.1.1)
`html
As they say in Wolof: jamm rekk
`
8. Video captions (1.2.2)
All videos with speech need synchronized captions. Tools: Whisper (auto), then manual correction.
`html
`
9. Proper ARIA (4.1.2)
Use ARIA only when native HTML is insufficient.
`html
`
10. Text resize (1.4.4)
Text must zoom 200% without functional loss.
`css
/* BAD: hard-coded px sizes */
body { font-size: 14px; }
/* GOOD: rem sizes, configurable root */
:root { font-size: 100%; }
body { font-size: 1rem; line-height: 1.5; }
`
Automated tests (CI)
`ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const PAGES = ['/', '/services', '/news', '/contact'];
PAGES.forEach(pathname => {
test(A11y: ${pathname}, async ({ page }) => {
await page.goto(pathname);
const { violations } = await new AxeBuilder({ page })
.withTags(['wcag2aa', 'wcag22aa'])
.analyze();
expect(violations).toEqual([]);
});
});
`
Wire into GitHub Actions / GitLab CI. Fails PR on violations.
Essential manual tests
axe-core only catches ~30-40% of problems. Complement with:
- Keyboard-only test: unplug mouse, complete a service request or purchase end-to-end.
- Screen reader test: NVDA (Windows, free), VoiceOver (Mac/iOS), TalkBack (Android).
- Zoom test: 200%, verify nothing truncates.
- Windows high-contrast mode test.
- Disabled-user audit: 1 blind + 1 visually impaired + 1 deaf + 1 cognitively impaired person. Test on real tasks. ~150-300K XOF for 1 day.
Accessibility statement
Mandatory RGAA /accessibility-statement page:
`
Compliance state: non-compliant / partially / compliant
Test results (audit date + auditor)
3-year multiyear accessibility scheme
Annual action plan
Contact to report difficulties
Appeal: supervisory authority
`
Real case — Dakar city hall site (before/after)
Before audit (June 2025):
- 47% WCAG 2.1 AA compliance
- 312 detected errors (axe-core)
- Citizen complaints: "can't navigate by keyboard"
After remediation (3 months, 8M XOF):
- 96% WCAG 2.2 AA compliance
- 8 residual errors (all documented)
- +21% traffic (SEO boost) + accessibility complaints down to 0
FAQ
Q: Must I be 100% compliant?
A: RGAA requires 95%, WCAG aims 100% theoretically. The accessibility statement documents residual gaps + action plan.
Q: Are private sites concerned?
A: In Senegal, Law 2024-13 targets public sector + entities above certain size (to be specified by decree). Best practices recommended everywhere.
Q: Compliance cost?
A: On existing site: 5-15M XOF per initial state. On a well-designed new site: marginal markup (~10% total budget).
Conclusion
Accessibility isn't a bonus or extra cost — it's a fundamental property of a clean institutional site. Improves SEO, image, performance, usability for ALL users. Legal penalty growing yearly. Best strategy: bake it in from design, not at the end.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.
