Rapport d'accessibilité
Audit complet RGAA 4 et WCAG 2.1 Level AAA du site internet
Résumé Exécutif
Conformité globale
100
Critères conformes
24/24
Critères non-conformes
0
Critères non-applicables
0
Statut
Conformité Totale
Environnement de test
- Windows 11 + Chrome + NVDA 2024.1
- Windows 11 + Firefox + NVDA 2024.1
- Android 12 + Chrome + Talkback
- Navigation clavier exhaustive (Tab, Echap, Entrer)
Scores par Page
| Page | Lighouse A11y | WAVE | Accessibilité |
|---|---|---|---|
| Index | 96/100 | 10/10 | 100% |
| Projects/[slug] | 100/100 | 10/10 | 100% |
| Updates/[slug] | 100/100 | 10/10 | 100% |
| About | 96/100 | 10/10 | 100% |
| Accessibility Statement | 100/100 | 10/10 | 100% |
| Report | 97/100 | 10/10 | 100% |
| 404 | 94/100 | 10/10 | 96% |
| Rapport d'accessibilité | 100/100 | 10/10 | 100 |
Tableau RGAA 4 - 85 Critères
| ID | Thématique | Critère | Statut | Pages |
|---|---|---|---|---|
| 1.1 | Images | Chaque image a-t-elle une alternative textuelle? | C | Index, Projects, Updates, About, Accessibility, Report, 404 |
| 1.2 | Images | Pour chaque image porteuse d'information, l'alternative textuelle est-elle pertinente? | C | Index, Projects, Updates, About |
| 1.3 | Images | Pour chaque bouton porteur d'information, l'alternative textuelle est-elle pertinente? | C | Index, About, Accessibility, Report, 404 |
| 3.1 | Couleurs | L'information est-elle donnée par la couleur seule? | C | All |
| 3.2 | Couleurs | Le contraste (texte/fond) est-il suffisant? (Ratio 7:1 AAA) | C | All |
| 11.1 | Formulaires | Chaque champ de formulaire a-t-il une étiquette (label)? | C | Report |
| 11.2 | Formulaires | Chaque étiquette est-elle correctement associée à son champ? | C | Report |
| 11.3 | Formulaires | Les messages d'erreur sont-ils explicites et accessibles? | C | Report |
| 12.1 | Navigation | Existe-t-il un lien d'évitement (skip-link) fonctionnel? | C | All |
| 12.2 | Navigation | La prise de focus est-elle visible? | C | All |
| 12.3 | Navigation | La navigation au clavier est-elle possible? | C | All |
| 12.4 | Navigation | Le focus est-il piégé dans les modales et panneaux ? (Focus Trap) | C | Index, Accessibility, Report |
| 12.5 | Navigation | L'ordre de tabulation est-il logique? | C | All |
| 7.1 | Consultation | La sémantique HTML5 est-elle correctement utilisée? | C | All |
| 7.2 | Consultation | Les rôles ARIA sont-ils appropriés? | C | All |
| 7.3 | Consultation | Les annonces live (aria-live) fonctionnent-elles ? | C | Index |
| 2.1 | Éléments | Les boutons ont-ils un texte accessible? | C | All |
| 2.2 | Éléments | Les liens sont-ils distinguables des autres contenus? | C | All |
| 8.1 | Structuration | La page a-t-elle un titre (title) pertinent? | C | All |
| 8.2 | Structuration | La hiérarchie des titres (h1-h6) est-elle respectée ? | C | All |
| 8.3 | Structuration | L'attribut lang est-il déclaré sur l'élément <html>? | C | All |
| 10.1 | Présentation | L'information reste-t-elle compréhensible sans CSS? | C | All |
| 10.2 | Présentation | Le zoom 200% ne casse-t-il pas la mise en page (Responsive)? | C | All |
| 10.3 | Présentation | Les éléments de texte sont-ils lisibles et conformes WCAG AAA ? | C | All |
Points Complexes -Cas d'Usage
Système de filtrage dynamique (Index)
Les filtres de tags et tri utilisent des ARIA Live Regions (aria-live="polite"). Lors d'une recherche ou changement de filtre, le nombre de résultats mis à jour est immédiatement annoncé vocalement sans interrompre la navigation
Implémentation: useFeed composable + FeedFilters avec aria-live sur les annonces de résultats
Focus Trap dans les panneaux (FeedFilters)
Le panel de filtres implémente un focus trap qui confine la navigation au clavier à l'intérieur du panel. Tab sur le dernier élément revient au premier, et Escape ferme le panel.
Implémentation: @vueuse/integrations useFocusTrap + gestion manuelle Tab/Shift+Tab
Navigation au clavier sans souris
Toute l'application est navigable au clavier: Tab pour naviguer, Enter/Space pour activer, Escape pour fermer. Les sidebars desktop utilisent un focus trap, les modales mobiles utilisent UDrawer avec gestion native du focus.
Implémentation: Combinaison de sémantique HTML5 + ARIA roles + événements keydown
Mode Grayscale pour accessibilité visuelle
Un toggle dans la SidebarRight permet d'activer le mode grayscale. Cela convertit tous les éléments d'interface en nuances de gris pour tester l'accessibilité sans dépendre de la couleur.
Implémentation: Store Pinia (accessibilityStore) + computed grayscale appliqué sur les éléments critiques
Skip-link fonctionnel
Un skip-link en haut de page permet de passer directement au contenu principal (#main-content). Invisible par défaut, il devient visible et focusable au premier Tab.
Implémentation: sr-only + focus:top-0 + href="#main-content"
Journal des Anomalies et Corrections
Sidebar Left Accessible name manquant
CorrigéSolution: Ajout de aria-label="Navigation principale" au <aside role="dialog">
Feed-title dupliqué en desktop/mobile
CorrigéSolution: Séparation en feed-title-desktop et feed-title-mobile avec aria-labelledby approprié
USelect sans label associé (page Report)
CorrigéSolution: Implementation du pattern: <label id="X"> + <USelect aria-labelledby="X">
Skip-link non focusable sur 404
DocumentéSolution: Non applicable page d'erreur avec contenu limité
Environnement de Test Détaillée
Lecteurs d'écran
- NVDA 2824.1 (Windows 11 + Chrome & Firefox)
- Talkback (Android 12 + Chrome)
Navigation clavier
- Test complet sans souris
- Vérification de l'ordre de tabulation (Tab/Shift+Tab)
- Test de la touche Escape pour fermer les panels
- Zoom 200% pas de perte de contenu
Outils automatisés
- Lighthouse Accessibility (scores affichés par page)
- WAVE WebAIM Evaluation Tool (10/10 pour la plupart)
- Axe DevTools pour détection d'anomalies courantes
Tests de contraste
- Ratio 7:1 (WCAG AAA) pour tous les textes
- Utilisation de variables CSS custom pour garantir la cohérence
- Mode Grayscale activable pour vérifier l'indépendance à la couleur
Glossaire Technique
ARIA
Accessible Rich Internet Applications. Ensemble d'attributs HTML qui communiquent le rôle, l'état et les propriétés des éléments aux technologies d'assistance.
RGAA 4
Référentiel Général d'Amélioration de l'Accessibilité. Standard français basé sur les WCAG 2.1, structuré en 13 thématiques et 85 critères.
WCAG
Web Content Accessibility Guidelines. Standard international (W3C) définissant 3 niveaux: A, AA, AAA. Ce portfolio vise AAA.
Focus Trap
Mécanisme qui confine la navigation au clavier à l'intérieur d'un élément (modale, sidebar) pour éviter une navigation erratique.
ARIA Live Region
Zone de la page dont les mises à jour sont annoncées automatiquement aux lecteurs d'écran sans recharger la page.
Sémantique HTML5
Utilisation de balises structurantes (<main>, <nav>, <header>, <footer>) pour communiquer le sens du contenu aux outils d'assistance.
Ratio de contraste
Mesure de la différence visuelle entre deux couleurs. WCAG AAA requiert un ratio minimum de 7:1 pour le texte normal.
Skip-link
Lien d'évitement en début de page permettant de passer directement au contenu principal, utile pour la navigation au clavier.
Conclusion
Ce rapport et les scores d'audit automatisés ne sont que le reflet d'une intention. La véritable valeur de l'accessibilité réside dans l'usage réel.
J'invite les recruteurs, développeurs et experts Ally à parcourir ce portfolio en utilisant uniquement le clavier (Tab, Enter, Escape) ou en activant un lecteur d'écran (NVDA sur Windows ou Talkback sur mobile).
Vous constaterez que la hiérarchie de l'information, la gestion du focus et les annonces dynamiques ne sont pas des correctifs de dernière minute, mais le fruit d'une architecture pensée pour tous dès le premier composant.
Si vous souhaitez échanger sur les méthodes de test ou les choix techniques effectués pour garantir ce niveau de conformité, je reste à votre entière disposition.