Accessibilité
Engagement
Kimoun s’engage à rendre son site accessible aux personnes en situation de handicap, conformément aux Règles pour l’accessibilité des contenus Web (WCAG) 2.1, niveau AA.
Ce document décrit les tests réalisés, les corrections apportées et les limitations connues au moment de sa rédaction (mai 2026).
Périmètre audité
L’audit couvre l’ensemble du site public kimoun.com, incluant :
- la page d’accueil et les pages de services (landing pages)
- les composants réutilisables : navigation, formulaires, accordéons, grilles, cartes, bannière de consentement
- la section blog : liste des articles, pages d’articles, éléments éditoriaux (alertes, listes, extraits de code, notes de bas de page)
Tests réalisés
Analyse automatisée
Les pages ont été auditées avec axe-core 4.9.1 (moteur d’accessibilité WCAG) via injection directe dans le navigateur. Les tests couvrent les violations de niveau A et AA.
Analyse manuelle au clavier
Un parcours au clavier complet a été réalisé sur la page de référence des composants (/components-reference/) :
- navigation Tab / Shift+Tab entre tous les éléments interactifs
- activation des boutons, liens, accordéons FAQ avec Entrée et Espace
- fermeture de la modale de consentement avec Échap
- vérification de l’ordre de tabulation et de la visibilité du focus à chaque étape
Tests de non-régression visuels
30 captures d’écran Playwright (bureau 1280 px, tablette 768 px, mobile 375 px) ont été prises avant et après chaque série de corrections, couvrant l’ensemble des gabarits : accueil, landing types, liste blog, articles de blog, page formulaire.
Corrections apportées
Navigation et composants (passe 2 — fixing-accessibility)
| Correction | Description |
|---|---|
| Focus ring global | Indicateur de focus visible sur tous les liens, via :focus-visible — couleur petrol-700 (rapport 4,87:1 sur blanc) |
| Focus ring formulaires | Bordure et ombre petrol sur les champs de saisie au focus clavier |
| Focus ring accordéon FAQ | Indicateur ajouté sur le bouton toggle .kb-faq__button |
| Bannière de consentement | Attribut inert sur le contenu de la page au chargement — empêche le focus de traverser le fond |
| Modale de consentement | Trap focus actif pendant l’ouverture de la modale ; focus restitué à l’élément déclencheur à la fermeture |
| Hero | aria-labelledby dynamique lié au <h1> de la section |
| Grille de services | Correction d’un mismatch aria-labelledby entre la section et son titre |
| Bande de logos | aria-labelledby conditionnel selon la présence d’un titre |
| Images carrousel et bande de logos | Dimensions width/height explicites sur les images de remplacement (réduction du CLS) |
Contenu éditorial — articles de blog (passe 6 — EA)
| Correction | Description |
|---|---|
| Alertes GitHub Markdown | Couleur du texte de titre renforcée par type : note petrol-700, tip #166534, warning #92400e, caution brick-700 |
| Catégories et étiquettes | Couleur portée de brick-500 à brick-700 (rapport 5,1:1 sur blanc) |
| Blocs de code | Ajout de color: inherit pour ne pas écraser les couleurs de coloration syntaxique Chroma |
| Dates des cartes d’article | Remplacement d’une opacité (0,6) par une couleur explicite neutral-500 (rapport 5,9:1 sur blanc) |
| Cases à cocher de tâches | Attribut aria-hidden="true" ajouté programmatiquement — ces cases sont purement décoratives dans les articles |
Non-conformités connues
Les éléments suivants présentent des limitations résiduelles. Une correction n’a pas été appliquée car elle sort du périmètre de la passe en cours ou dépend d’un système tiers.
| Élément | Type | Raison |
|---|---|---|
Composant process_steps | aria-allowed-role | Le composant Bookshop utilise un rôle ARIA non autorisé sur son conteneur. Correction différée — modification de structure Bookshop hors périmètre des passes CSS. |
| Bouton WhatsApp flottant | Landmark region | Le bouton fait partie du shell global (hors composition Bookshop). La correction impliquerait une modification du partial shell ; différée à une passe dédiée. |
| Couleurs de la coloration syntaxique Chroma | Contraste variable | Chroma génère des styles inline produits par le moteur Hugo. Ces couleurs ne peuvent pas être surchargées par le CSS projet sans casser la lisibilité du code. Non corrigé — tiers. |
Résultats Lighthouse Accessibilité
Score mesuré après les corrections (Lighthouse, mode bureau) :
- Accueil : 95 / 100
- Pages de services : 95 / 100
- Articles de blog : 95 / 100
Contact
Pour signaler un problème d’accessibilité ou demander une adaptation :
- Email : contact@kimoun.com
- Téléphone : +590 690 49 73 01
Nous nous engageons à répondre dans un délai de 5 jours ouvrés.