@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/stories/Accessibilite/Aculturation/AuditDesignSystem.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Aculturation/Audit du Design System"/>
+
+# Audit du Design System
+
+## Objectifs
+
+Le Design System Synapse offre de nombreux avantages en matière d'accessibilité pour les services qui l'adoptent. En veillant à ce que les composants respectent les normes d'accessibilité, il assure une conformité optimale avec les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> pour les produits. Cela simplifie la mise en œuvre de l'accessibilité à grande échelle sur les services numériques, réduisant ainsi les erreurs humaines et améliorant l'expérience utilisateur pour tous, et pas seulement pour les personnes en situation de handicap.
+
+Nous réalisons actuellement un audit d'accessibilité du Design System afin d’évaluer sa conformité au <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Cet audit vise à identifier les points d'amélioration pour garantir que tous les composants sont accessibles.
+
+## Couverture des critères
+
+Le Design System ne garantit pas à lui seul l'accessibilité des services qui l'implémente, car il ne couvre pas l'ensemble des critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. En effet, le Design System se concentre sur l'aspect visuel et interactif des composants (comme les couleurs, la typographie, les interactions avec l'interface, etc.), tandis que le service doit respecter des critères plus larges. Par exemple, il doit veiller à la structure sémantique des contenus, aux alternatives textuelles, à la gestion des erreurs de formulaire, à l'accessibilité des contenus multimédia, etc. Le Design System facilite l'intégration des bonnes pratiques d’accessibilité, mais pour une conformité totale, des ajustements et une validation supplémentaires sont nécessaires au niveau du design, du contenu et de la mise en œuvre technique.
+
+## Documentation et rapports
+
+Chaque composant possède une page "Accessibilité" qui vous renseignera sur les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> remontées par l'audit Tanaguru ainsi qu'un rapport complet d'un audit manuel. Vous pourrez ainsi suivre les correctifs réalisés et identifier la méthodologie appliquée.
+
+<figure>
+  <img
+    src={"/capture-page-accessibilite-composant.png"}
+    aria-labelledby="capture-page-accessibilite-alt"
+    style={{ marginTop: '20px', padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}}
+  />
+  <figcaption id="capture-page-accessibilite-alt" class={'text-caption text-center'}>Capture d'écran de la page Accessibilité du composant NotificationBar.<br/>Celle-ci donne des éléments sur les audits Tanaguru et manuels.</figcaption>
+</figure>

package/src/stories/Accessibilite/Aculturation/SensibilisationAccessibilite.mdx

@@ -3,7 +3,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 <Meta title="Accessibilité/Aculturation/Sensibilisation à l’accessibilité numérique"/>
 
 # 1. L’accessibilité concerne tout le monde
-## **1.1 La CNAM doit respecter le RGAA**
+## **1.1 La CNAM doit respecter le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>**
 
 En tant que personne morale de droit public, nous avons l'obligation légale de concevoir les composants de notre Design System en respectant les enjeux d’accessibilité. En conformité avec la Direction Interministérielle du Numérique (DINUM), il est demandé de respecter le   Référentiel Général d'Amélioration de l'Accessibilité (RGAA) pour le desktop et Référentiel d’Accessibilité des Applications Mobiles (RAAM) pour le mobile. 
 #
@@ -45,7 +45,7 @@ Etre accessible est un travail en continu qui s’intègre à plusieurs niveaux
 
 ## 2.2 Vous pouvez pré-auditer un service
 
-Un pré-audit est une évaluation préparatoire réalisée par les équipes-produits pour vérifier la conformité d'un produit aux critères du RGAA. À l'aide d’outil et de méthodologie, ces équipes peuvent identifier la moitié des critères requis avant un audit complet. Ces équipes peuvent compter sur un accompagnement pour la prise en main de cet outil ainsi que du conseil pour la résolution des défauts constatés. L’objectif premier du pré-audit est de réduire la quantité de correctif relevée par l’audit complet en donnant un meilleur contrôle aux produits sur leur gestion de projet.
+Un pré-audit est une évaluation préparatoire réalisée par les équipes-produits pour vérifier la conformité d'un produit aux critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. À l'aide d’outil et de méthodologie, ces équipes peuvent identifier la moitié des critères requis avant un audit complet. Ces équipes peuvent compter sur un accompagnement pour la prise en main de cet outil ainsi que du conseil pour la résolution des défauts constatés. L’objectif premier du pré-audit est de réduire la quantité de correctif relevée par l’audit complet en donnant un meilleur contrôle aux produits sur leur gestion de projet.
 
 **[Guide du pré-audit](/docs/accessibilité-kit-de-pré-audit-pré-audit--docs)**
 

package/src/stories/Accessibilite/Audit/RGAA.mdx

@@ -2,9 +2,9 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 <Meta title="Accessibilité/Audit/RGAA"/>
 
-## Le RGAA, le référentiel français d’accessibilité numérique
+## Le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>, le référentiel français d’accessibilité numérique
 
-Le RGAA est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...). Basé sur les travaux du W3C Web Accessibility Initiative (WAI) il vise à garantir quatre indices de performance : **la bonne perceptibilité de l'information**, une **manipulation efficiente dans la navigation**, une **bonne compréhension** et une **robustesse efficace** dans l'usage des produits numériques. Actuellement le RGAA (version 4) est constitué de 106 critères répartis dans 13 catégories
+Le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...). Basé sur les travaux du W3C Web Accessibility Initiative (WAI) il vise à garantir quatre indices de performance : **la bonne perceptibilité de l'information**, une **manipulation efficiente dans la navigation**, une **bonne compréhension** et une **robustesse efficace** dans l'usage des produits numériques. Actuellement le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> (version 4) est constitué de 106 critères répartis dans 13 catégories
 
 [En savoir plus sur le RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu)
 
@@ -15,11 +15,11 @@ Le RGAA est un outil méthodologique de certification permettant d'assurer par l
 ### Résultats
 
  
-La conduite d'une évaluation pour attester de la conformité du produit numérique avec le RGAA peut être menée par un audit en auto-évaluation ou par un organisme tiers. Au terme de cette évaluation vous recevez un score et des informations complémentaires permettant de définir l'état de conformité de votre produit. Il existe 3 états:
+La conduite d'une évaluation pour attester de la conformité du produit numérique avec le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> peut être menée par un audit en auto-évaluation ou par un organisme tiers. Au terme de cette évaluation vous recevez un score et des informations complémentaires permettant de définir l'état de conformité de votre produit. Il existe 3 états:
 
-- **Conformité totale :** si tous les critères de contrôle du RGAA sont respectés
-- **Conformité partielle :** si au moins 50 % des critères de contrôle du RGAA sont respectés
-- **Non-conformité :** s'il n'existe aucun résultat d'audit en cours de validité permettant de mesurer le respect des critères ou si moins de 50 % des critères de contrôle du RGAA sont respectés
+- **Conformité totale :** si tous les critères de contrôle du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> sont respectés
+- **Conformité partielle :** si au moins 50 % des critères de contrôle du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> sont respectés
+- **Non-conformité :** s'il n'existe aucun résultat d'audit en cours de validité permettant de mesurer le respect des critères ou si moins de 50 % des critères de contrôle du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> sont respectés
 
 Vous garantissant d'un respect de ces critères, l'usage sans modification de notre Design System vous assure d'abord un gain de temps dans le développement mais surtout une augmentation du pourcentage de succès dans l'évaluation de votre produit.
 

package/src/stories/Accessibilite/Introduction.mdx

@@ -21,7 +21,8 @@ Si vous avez besoin d’un accompagnement sur le sujet, merci de prendre contact
 
 Vous trouverez dans ce dossier 3 principales rubriques :
 
-- [Sensibilisation à l'accessibilité numérique](/docs/accessibilité-aculturation-sensibilisation-à-l-accessibilité-numérique--docs)
+- [Aculturation - Sensibilisation à l'accessibilité numérique](/docs/accessibilité-aculturation-sensibilisation-à-l-accessibilité-numérique--docs)
 - [Kit du Pré-Audit](/docs/accessibilité-kit-de-pré-audit-introduction--docs)
 - [Audit](/docs/accessibilité-audit-rgaa--docs)
 
+Le Design System Synapse réalise un audit de conformité au <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> facilitant la prise en compte de l'accessibilité dans vos produits. Pour en savoir plus, vous pouvez consulter [la page dédiée à l'audit d'accessibilité du Design System](/docs/accessibilité-aculturation-audit-du-design-system--docs).

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 # Échantillonnage
 
-Le RGAA exige que l’audit d’accessibilité soit effectué sur un ensemble représentatif de pages et des fonctionnalités de votre service. Il serait difficile et très chronophage de tester l’intégralité des contenus. La définition d’un périmètre est un compromis pertinent pour auditer efficacement un service et respecter les exigences légales.
+Le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> exige que l’audit d’accessibilité soit effectué sur un ensemble représentatif de pages et des fonctionnalités de votre service. Il serait difficile et très chronophage de tester l’intégralité des contenus. La définition d’un périmètre est un compromis pertinent pour auditer efficacement un service et respecter les exigences légales.
 
 L’objectif est donc de que vous déterminiez quels pages seront concernées par l’audit (et ce pré-audit).
 

package/src/stories/Accessibilite/KitDePreAudit/Introduction.mdx

@@ -6,7 +6,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 ## Objectif
 
-L’objectif du pré-audit est d’obtenir un premier avis sur le taux de conformité de votre service web avant de convenir d’un réel audit RGAA. La procédure se fait en autonomie par l’équipe de développement.
+L’objectif du pré-audit est d’obtenir un premier avis sur le taux de conformité de votre service web avant de convenir d’un réel audit <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. La procédure se fait en autonomie par l’équipe de développement.
 #
 La restitution consiste à s’assurer que toutes les exigences du pré-audit sont remplies et que vous ayez un minimum d’erreur en lançant les tests automatisés avec Tanaguru.
 Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.

package/src/stories/Accessibilite/KitDePreAudit/Outils/Introduction.mdx

@@ -6,19 +6,16 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 Dans le cadre du pré-audit et de l’audit, il existe des outils automatisés pour vérifier certains critères de conformité en matière d'accessibilité.
 
-<b>Voici les outils requis pour le pré-audit :</b>
+L'outil principal requis pour le pré-audit est [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/). Il s'agit d'une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. **Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable**. Un audit d'accessibilité ne peut pas se reposer uniquement sur des outils automatisés car ces derniers ne détectent qu'un nombre limité de problèmes techniques. De nombreux critères d'accessibilité nécessitent une évaluation manuelle, tenant compte de la perception humaine et du contexte d’utilisation. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés. Nous avons mis en place [un guide d'utilisation de Tanaguru webext RGAA](/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs) afin de vous aider à le prendre en main.
 
-1. [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/) :
-Tanaguru Webext RGAA est une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés.
-2. [**PDF Accessibility Checker (PAC)**](https://pac.pdf-accessibility.org/en) :
-PDF Accessibility Checker (PAC) est un logiciel Windows dédié à l'audit de l'accessibilité des documents PDF. Il permet de vérifier la conformité d'un fichier PDF aux normes d'accessibilité, telles que les WCAG et les directives PDF/UA (PDF Universal Accessibility). PAC analyse la structure du document, y compris les titres, les balises, les liens, les tables et les éléments multimédia, pour s'assurer que le contenu est correctement organisé et peut être interprété par des technologies d'assistance comme les lecteurs d'écran.
-3. [**NVDA (NonVisual Desktop Access)**](https://www.nvda.fr/c2) :
-Lecteur d’écran bureau - NVDA est un lecteur d'écran open-source conçu pour les personnes malvoyantes ou aveugles. Il permet de rendre accessibles les interfaces graphiques des ordinateurs Windows en lisant à haute voix les éléments affichés à l'écran. NVDA prend en charge plusieurs applications et navigateurs web, et il est utilisé pour tester la compatibilité des sites web et des applications avec les technologies d'assistance. Cet outil est particulièrement apprécié pour son accessibilité gratuite et sa capacité à détecter des erreurs de conception qui peuvent nuire à l'expérience des utilisateurs ayant des déficiences visuelles.
-4. (Si pré-audit sur mobile) [**TalkBack**](https://www.notion.so/Pr-audit-web-conformit-l-accessibilit-18c4ee4a529d80e2ab27cadba4829e37?pvs=21) :
-Lecteur d’écran mobile - TalkBack est une fonctionnalité d'accessibilité déjà intégrée aux appareils Android qui fournit des retours vocaux sur les éléments affichés à l'écran. Ce lecteur d'écran permet à l'utilisateur d'interagir avec son appareil sans avoir besoin de visionner l'écran. En utilisant des gestes tactiles spécifiques, l'utilisateur peut naviguer à travers les applications, lire des messages, envoyer des e-mails ou encore interagir avec des contenus multimédia. TalkBack offre également des options de personnalisation pour ajuster la vitesse de la voix, le volume et d'autres paramètres en fonction des besoins de l'utilisateur. Il prend en charge une large gamme de contenus accessibles et est régulièrement mis à jour pour améliorer son efficacité et sa compatibilité avec les dernières versions d'Android. Cet outil est essentiel pour garantir que les utilisateurs en situation de handicap visuel peuvent utiliser pleinement leurs appareils Android.
-
-En complément, voici d’autres outils optionnels qui pourraient vous être utiles :
+Si vous souhaitez aller plus loin dans le pré-audit ou dans vos développements au quotidien, voici d'autres outils qui pourraient vous être utiles :
 
+- [**PDF Accessibility Checker (PAC)**](https://pac.pdf-accessibility.org/en) :
+PDF Accessibility Checker (PAC) est un logiciel Windows dédié à l'audit de l'accessibilité des documents PDF. Il permet de vérifier la conformité d'un fichier PDF aux normes d'accessibilité, telles que les WCAG et les directives PDF/UA (PDF Universal Accessibility). PAC analyse la structure du document, y compris les titres, les balises, les liens, les tables et les éléments multimédia, pour s'assurer que le contenu est correctement organisé et peut être interprété par des technologies d'assistance comme les lecteurs d'écran.
+- [**NVDA (NonVisual Desktop Access)**](https://www.nvda.fr/c2) :
+Lecteur d’écran bureau - NVDA est un lecteur d'écran open-source conçu pour les personnes malvoyantes ou aveugles. Il permet de rendre accessibles les interfaces graphiques des ordinateurs Windows en lisant à haute voix les éléments affichés à l'écran. NVDA prend en charge plusieurs applications et navigateurs web, et il est utilisé pour tester la compatibilité des sites web et des applications avec les technologies d'assistance. Cet outil est particulièrement apprécié pour son accessibilité gratuite et sa capacité à détecter des erreurs de conception qui peuvent nuire à l'expérience des utilisateurs ayant des déficiences visuelles. Afin d'en savoir plus, nous avons mis en place [un guide rapide de NVDA](/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#nvda-windows).
+- [**TalkBack**](https://www.notion.so/Pr-audit-web-conformit-l-accessibilit-18c4ee4a529d80e2ab27cadba4829e37?pvs=21) (Si pré-audit sur mobile) :
+Lecteur d’écran mobile - TalkBack est un outil d'accessibilité déjà intégré aux appareils Android qui fournit des retours vocaux sur les éléments affichés à l'écran. Ce lecteur d'écran permet à l'utilisateur d'interagir avec son appareil sans avoir besoin de visionner l'écran. En utilisant des gestes tactiles spécifiques, l'utilisateur peut naviguer à travers les applications, lire des messages, envoyer des e-mails ou encore interagir avec des contenus multimédia. TalkBack offre également des options de personnalisation pour ajuster la vitesse de la voix, le volume et d'autres paramètres en fonction des besoins de l'utilisateur. Il prend en charge une large gamme de contenus accessibles et est régulièrement mis à jour pour améliorer son efficacité et sa compatibilité avec les dernières versions d'Android. Cet outil est essentiel pour garantir que les utilisateurs en situation de handicap visuel peuvent utiliser pleinement leurs appareils Android. Afin d'en savoir plus, nous avons mis en place [un guide rapide de Talkback](/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#talkback-android).
 - [**Assistant RGAA (extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/assistant-rgaa/) :
 L'Assistant RGAA est un outil français destiné à vérifier la conformité des sites web aux critères d’accessibilité définis par le Référentiel Général d'Amélioration de l'Accessibilité (RGAA). Il permet d’effectuer des audits sur des sites en ligne pour identifier et corriger les problèmes d'accessibilité.
 - [**WAVE (extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) :

package/src/stories/Accessibilite/KitDePreAudit/Outils/LecteursDEcran.mdx

@@ -0,0 +1,77 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Kit de pré-audit/Outils/Lecteurs d'écran"/>
+
+# Guide lecteurs d'écran
+
+Ce guide ne vise pas à vous former à l'utilisation quotidienne d'un lecteur d'écran, mais à vous fournir les informations nécessaires pour évaluer l'accessibilité des composants intégrés dans votre service.
+
+## Qu’est-ce qu’un lecteur d’écran ?
+
+Un lecteur d'écran est un logiciel d’assistance technique destiné aux personnes « empêchées de lire » (aveugles, malvoyantes, dyslexiques, dyspraxiques…) en transformant le contenu affiché à l'écran en synthèse vocale ou braille. Il permet de naviguer dans le système d'exploitation et les applications en restituant le contenu textuel et sa structure, à condition que cette information soit correctement fournie par le logiciel (par exemple, le navigateur web). Il ne peut pas interpréter des éléments non textuels comme des images ou des graphiques. C’est pourquoi le respect des normes d’accessibilité est important afin que la restitution puisse se faire correctement (ex : ajout d’un texte alternatif à une image).
+
+Le lecteur d'écran bureau se pilote principalement au clavier tandis que c’est essentiellement avec des gestes pour la version mobile.
+
+Il n'existe pas de lecteur d'écran unique et ils different en fonction du système d’exploitation. Ce guide se concentrera sur NVDA pour Windows et TalkBack pour Android.
+
+## Utilité d’un lecteur d’écran
+
+Un lecteur d'écran est essentiel pour un audit d'accessibilité car il permet de simuler l'expérience d'un utilisateur aveugle ou malvoyant. Il aide à :
+
+1. **Vérifier la structure** : Tester la logique de navigation (titres, sections, éléments interactifs).
+2. **Tester l'interactivité** : S'assurer que les éléments sont accessibles via le clavier et correctement annoncés.
+3. **Vérifier les mises à jour dynamiques** : S'assurer que les changements de contenu sont bien signalés.
+4. **Contrôler le balisage** : Vérifier l'utilisation correcte des balises HTML et ARIA pour une navigation fluide.
+5. **Accessibilité multimédia** : Vérifier que les images et vidéos sont correctement décrites.
+
+Cela garantit que l'interface est réellement accessible, permettant une navigation autonome pour les utilisateurs en situation de handicap visuel. N'oubliez pas de consulter les manuels officiels pour des informations détaillées sur l'utilisation de chaque outil.
+
+## NVDA (Windows)
+
+NVDA est un lecteur d'écran pour Windows, principalement utilisé pour l'audit d'accessibilité de sites web et d'applications bureautiques.
+
+Il restitue l’information sous 2 modes : le mode navigation et le mode formulaire.
+
+### Mode navigation
+
+Le mode de navigation permet de se déplacer dans le contenu d'une page (titres, liens, paragraphes, etc.)
+
+Il fournit des informations supplémentaires lors de la vocalisation. Par exemple, il annoncera "liste de x éléments" pour une liste à puces ou encore le niveau des titres, comme "titre de niveau 2", suivi de leur intitulé.
+
+### Mode formulaire
+
+Le mode formulaire est utilisé pour interagir avec des éléments de formulaire (champs de texte, cases à cocher, boutons, etc.) et y entrer des données. Le lecteur d’écran passe sur ce mode automatiquement lorsqu’il se trouve être sur un composant interactif. Les “raccourcis lettre” ne fonctionnent alors plus puisqu’ils servent à insérer du texte.
+
+Principaux raccourcis :
+
+- CTRL + ALT + n : Activer NVDA
+- NVDA + q : Quitter NVDA
+- CTRL : Arrêt de la parole
+- Flèche bas : Élément suivant
+- Flèche haut : Élément précédent
+- Tab : Élément focusable suivant
+- Maj + Tab : Élément focusable précédent
+- h : Titre suivant
+- f : Champ de formulaire suivant
+- k : Lien suivant
+- d : Région suivante
+- MAJ + lettre : Revenir en arrière
+
+Pour plus de détails, consultez [le manuel officiel NVDA](https://www.nvda.fr/doc.php) ainsi que [le guide de Tanaguru](https://www.tanaguru.com/guide-et-raccourcis-nvda-pour-les-tests-daccessibilite/).
+
+## TalkBack (Android)
+
+TalkBack est un lecteur d'écran pour Android, directement embarqué.
+
+Pour l’activer ou le désactiver, il suffit de se rendre dans les paramètres de votre appareil puis dans le menu “Accessibilité”. Un tutoriel d’utilisation vous sera alors proposé au démarrage. C’est à cet endroit que vous pouvez personnaliser l’outil tel que la vitesse de la parole, la tonalité, les gestes, etc.
+
+Ce lecteur d’écran utilise des gestes spécifiques pour naviguer dans l’interface. Voici les principaux gestes :
+
+- **Déplacer le focus** : Faites glisser un doigt vers la gauche ou vers la droite pour déplacer le focus entre les éléments à l'écran.
+- **Sélectionner un élément** : Touchez un élément à l'écran avec un seul doigt pour entendre sa description, puis double-tapez pour l'activer.
+- **Faire défiler** : Balayez deux doigts vers le haut ou vers le bas pour faire défiler l'écran.
+- **Retour** : Faites glisser trois doigts vers la gauche pour revenir en arrière.
+- **Accéder au menu d'options** : Touchez deux fois et maintenez pour ouvrir le menu contextuel des options (comme le copier, coller, etc.).
+- **Suspendre ou reprendre la lecture :** Appuyez avec deux doigts
+
+Pour plus de détails, consultez [le manuel officiel TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=fr).

package/src/stories/Accessibilite/KitDePreAudit/Outils/Tanaguru.mdx

@@ -2,7 +2,13 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Tanaguru"/>
 
-# Utilisation de Tanaguru
+# Tanaguru
+
+## Qu'est-ce que Tanaguru ?
+
+Appelée [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/), il s'agit d'une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. **Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable**. Un audit d'accessibilité ne peut pas se reposer uniquement sur des outils automatisés car ces derniers ne détectent qu'un nombre limité de problèmes techniques. De nombreux critères d'accessibilité nécessitent une évaluation manuelle, tenant compte de la perception humaine et du contexte d’utilisation. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés.
+
+## Utilisation de Tanaguru
 
 **1. Analyse d’une page d’ameli.fr , [https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation](https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation)**
 
@@ -20,13 +26,13 @@ Cliquez ensuite sur **Analyser cette page**
 
 <img alt="UtilisationTanaguruEtape3" src={'/tanaguruetape3.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 
-**5. Les éléments sur la gauche, correspondent aux thématiques du RGAA**
+**5. Les éléments sur la gauche, correspondent aux thématiques du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>**
 
 <img alt="UtilisationTanaguruEtape4" src={'/tanaguruetape4.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 
 **6. Exemple: **Eléments obligatoires** 3 erreurs qui correspondent a plusieurs éléments dans notre page. Dont l’erreur est “**propriété ARIA non autorisées sur leur élément**”.**
 
-On va chercher dans la thématique **Eléments obligatoires** du RGAA, les critères qui pourraient correspondre à l’erreur de Tanaguru.
+On va chercher dans la thématique **Eléments obligatoires** du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>, les critères qui pourraient correspondre à l’erreur de Tanaguru.
 
 <img alt="UtilisationTanaguruEtape5" src={'/tanaguruetape5.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 1. La loupe permet de localiser le problème dans le code ( /!\ cet élément n’est pas toujours accessible).

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 # Pré-audit
 
-L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit RGAA. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
+L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
 
 Pour demander un audit merci de contacter [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr). L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.
 
@@ -14,7 +14,7 @@ Pour rappel, avant de lancer votre pré-audit vous devez définir l'échantillon
 
 Lancer Tanaguru sur chaque page de l’échantillon de test. Vous pouvez retrouver une documentation d’utilisation de Tanaguru [ici](/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-outils-tanaguru--docs).
 
-L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du RGAA. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
+L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
 
 ## Vérification manuelle
 

package/src/stories/Demarrer/Introduction.stories.ts

@@ -104,7 +104,7 @@ export const Panels: StoryObj = {
 			template: `
               <div>
                <v-expansion-panels>
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title style="display: inline-grid;">
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Le design system CNAM</p> 
                       <p>Un référentiel centralisé de nos styles et composants pour garantir une expérience utilisateur cohérente et harmonieuse sur toutes nos plateformes.</p>
@@ -120,12 +120,12 @@ export const Panels: StoryObj = {
 						<p style="margin-bottom:10px;">Lorsqu'une nouvelle fonctionnalité ou un nouveau produit est ajouté, l'équipe produit peut facilement l'intégrer au système existant, en utilisant les composants et règles déjà en place. Cela garantit une croissance rapide sans sacrifier la qualité ou la cohérence.</p>
 						<p style="margin-bottom:5px;font-weight:bold;">→ Profiter de standards de qualité et d’accessibilité.</p>
 						<p style="margin-bottom:10px;">Standards de qualité : Avec ses composants validés et testés, le design system vous assure que la qualité soit maintenue à travers toutes les interfaces, qu'il s'agisse d'éléments visuels, d'interactions ou de fonctionnalités.</p>
-						<p style="margin-bottom:20px;">Standards d’accessibilité : </p>
+						<p style="margin-bottom:20px;">Standards d’accessibilité : Grâce à des audits et à des bonnes pratiques intégrées, le design system garantit que chaque composant respecte les critères d'accessibilité, offrant ainsi une expérience inclusive pour tous les utilisateurs, y compris ceux en situation de handicap.</p>
         				 </v-expansion-panel-text>
                     </v-expansion-panel>
 			   </v-expansion-panels>
 				<v-expansion-panels style="margin-top:20px;">
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title>
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Pour aller plus loin sur le fonctionnement et l’utilisation du design system</p>
                       </v-expansion-panel-title>

package/src/stories/Demarrer/Releases.mdx

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ReleasesStories from './Releases.stories.ts';
+
+<Meta of={ReleasesStories}/>
+
+# Releases
+
+<Story of={ReleasesStories.List}/>

package/src/stories/Demarrer/Releases.stories.ts

@@ -0,0 +1,66 @@
+import axios from 'axios'
+import { onMounted, ref } from 'vue'
+import * as marked from 'marked'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+
+export default {
+	title: 'Démarrer/Releases',
+	component: SyAlert,
+}
+export const List = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				const releases = ref([])
+				const errorMessage = ref('')
+
+				const fetchReleases = async () => {
+					try {
+						const { data } = await axios.get('https://api.github.com/repos/assurance-maladie-digital/design-system-v3/releases')
+						releases.value = data
+					}
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					catch (error) {
+						errorMessage.value = 'Une erreur est survenue lors de la récupération des releases.'
+					}
+				}
+
+				const formatDate = (date: string | number | Date) => {
+					return new Date(date).toLocaleDateString()
+				}
+
+				const formatMarkdown = (markdown: string) => {
+					return marked.parse(markdown)
+				}
+
+				onMounted(() => {
+					fetchReleases().then(r => r)
+				})
+
+				return {
+					releases,
+					errorMessage,
+					formatDate,
+					formatMarkdown,
+				}
+			},
+			template: `
+				<div class="releases">
+					<SyAlert type="info" variant="tonal" :closable="false">
+						<template #default>Nous faisons des nouvelles release (correction de bugs ou nouvelles fonctionnalités) régulièrement. Vous pouvez retrouver la liste des dernières releases ci-dessous.</template>
+					</SyAlert>
+					<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+					<div v-else>
+						<div v-for="release in releases" :key="release.id">
+							<h2>{{ release.name }} ({{ formatDate(release.published_at) }})</h2>
+							<div v-html="formatMarkdown(release.body)"></div>
+							<hr>
+						</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/DesignTokens/ColorDisplay.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VContainer, VRow, VCol, VCard, VCardTitle, VCardSubtitle } from 'vuetify/components'
+
+	interface Props {
+		colorCategory: string
+		cnamColors: Record<string, string>
+		paColors: Record<string, string>
+	}
+
+	const props = defineProps<Props>()
+
+	const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+	const displayColors = computed(() => theme.value === 'cnam' ? props.cnamColors : props.paColors)
+
+	const isEmptyObject = (obj: Record<string, string>) => {
+		return Object.keys(obj).length === 0
+	}
+</script>
+
+<template>
+	<VContainer>
+		<VRow v-if="!isEmptyObject(displayColors)">
+			<VCol
+				v-for="(color, name) in displayColors"
+				:key="name"
+				cols="6"
+				md="3"
+				sm="4"
+			>
+				<VCard color="grey-lighten-4">
+					<VCardTitle style="font-size: medium;">
+						{{ name }}
+					</VCardTitle>
+					<VCardSubtitle>{{ color }}</VCardSubtitle>
+					<VCard
+						height="70px"
+						class="color"
+					>
+						<div :style="{ backgroundColor: color, height: '100%', width: '100%' }" />
+					</VCard>
+				</VCard>
+			</VCol>
+		</VRow>
+		<div
+			v-else
+			class="text-grey"
+		>
+			Couleurs en cours définition.
+		</div>
+	</VContainer>
+</template>
+
+<style lang="scss" scoped>
+	.v-card--variant-elevated.color {
+		background: transparent !important;
+	}
+</style>