Rapport d'accessibilité - Audit complet RGAA 4 et WCAG 2.1 Level AAA du site internet
Résumé Exécutif
Conformité globale
87
Critères conformes
27/31
Critères non-conformes
1
Critères non-applicables
3
Statut
Conformité Partielle
Technologies utilisées pour le site
- HTML5 / CSS3 / JavaScript / TypeScript
- Framework: Nuxt 4.5, Pinia, i18n
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, Feed, Projects, Updates, Clients, Landing, About, Accessibility, Accessibility-report, Report, Terms, Legal Notices |
| 1.2 | Images | Pour chaque image porteuse d'information, l'alternative textuelle est-elle pertinente? | C | Index, Feed, Projects, Updates, Clients, Landing, About, Accessibility, Accessibility-report, Report, Terms, Legal Notices |
| 1.3 | Images | Pour chaque bouton porteur d'information, l'alternative textuelle est-elle pertinente? | C | All |
| 1.4 | Images | Chaque image texte porteuse d'informations a t-elle une alternative ? | C | All |
| 2.1 | Cadres & Multimédia | Chaque cadre a-t-il un titre de cadre ? | NA | |
| 2.2 | Cadres & Multimédia | Les liens sont-ils distinguables des autres contenus ? | C | All |
| 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 |
| 4.1 | Contenus temporels | Chaque média temporel a t-il une transcription ou audiodescription ? | NA | |
| 5.1 | Éléments | Chaque tableau de données a-t-il un titre sémantique (caption) ? | C | Accessibility-report |
| 5.2 | Éléments | Chaque en-tête de tableau est-il correctement identifié via scope ? | C | Accessibility-report |
| 6.1 | Liens et navigation | Chaque lien est-il explicite et structuré ? | C | All |
| 7.1 | Scripts | La sémantique HTML5 est-elle correctement utilisée pour les scripts ? | C | All |
| 7.2 | Scripts | Les rôles ARIA appliqués aux scripts sont-ils appropriés ? | C | All |
| 7.3 | Scripts | Les annonces live (aria-live) fonctionnent-elles ? | C | Feed |
| 8.1 | Éléments obligatoires | La page a-t-elle un titre (title) pertinent ? | C | All |
| 8.2 | Éléments obligatoires | La hiérarchie des titres (h1-h6) est-elle respectée ? | C | All |
| 8.3 | Éléments obligatoires | L'attribut lang est-il déclaré sur l'élément <html> ? | C | All |
| 9.1 | Navigation | Les balises de structure HTML5 son-elles bien exploitées ? | 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) ? | NC | All |
| 10.3 | Présentation | Les éléments de texte sont-ils lisibles et conformes WCAG AAA ? | C | All |
| 11.1 | Formulaires | Chaque champ de formulaire a-t-il une étiquette (label)? | C | Contact Modal, Report |
| 11.2 | Formulaires | Chaque étiquette est-elle correctement associée à son champ ? | C | Contact Modal, Report |
| 11.3 | Formulaires | Les messages d'erreur sont-ils explicites et accessibles ? | C | Contact Modal, Report |
| 12.1 | Navigation & Langue | Existe-t-il un lien d'évitement (skip-link) fonctionnel ? | C | All |
| 12.2 | Navigation & Langue | La prise de focus est-elle visible ? | C | All |
| 12.3 | Navigation & Langue | La navigation au clavier est-elle possible ? | C | All |
| 12.4 | Navigation & Langue | Le focus est-il piégé dans les modales et panneaux (Focus Trap) ? | C | Index, Accessibility, Report |
| 12.5 | Navigation & Langue | L'ordre de tabulation est-il logique ? | C | All |
| 13.1 | Consultation | Chaque document en téléchargement (PDF) est-il accessible ? | NA |
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
SidebarLeft mobile inutilisable sur desktop
CorrigéSolution: Ajout d'une nouvelle sidebar nommé SidebarLeftDesktop utilisant un aside pour desktop et utilisant SidebarLeftMobile uniquement pour téléphone
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
- Micosoft Accessibility Insights for Web
- IBM Equal Access Accessibility Checker
- Tanagaru Contrast Checker
- W3C Contrast Checker
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.