@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/composables/validation/tests/useValidation.spec.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect } from 'vitest'
+import { useValidation } from '../useValidation'
+
+describe('useValidation', () => {
+	it('should initialize with empty validation state', () => {
+		const validation = useValidation()
+
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+		expect(validation.hasError.value).toBe(false)
+		expect(validation.hasWarning.value).toBe(false)
+		expect(validation.hasSuccess.value).toBe(false)
+	})
+
+	it('should handle basic validation rules', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test', rules)
+		expect(validResult.hasSuccess).toBe(true)
+		expect(validResult.state.successes).toContain('Champ valide')
+	})
+
+	it('should handle warning rules', () => {
+		const validation = useValidation()
+		const warningRules = [{
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length >= 8,
+				warningMessage: 'Le champ devrait contenir au moins 8 caractères',
+				isWarning: true,
+			},
+		}]
+
+		// Test avec une valeur courte
+		const shortResult = validation.validateField('test', [], warningRules)
+		expect(shortResult.hasWarning).toBe(true)
+		expect(shortResult.state.warnings[0]).toContain('8 caractères')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test_long', [], warningRules)
+		expect(validResult.hasWarning).toBe(false)
+		expect(validResult.state.warnings).toEqual([])
+	})
+
+	it('should handle multiple validation rules', () => {
+		const validation = useValidation()
+		const rules = [
+			{
+				type: 'required',
+				options: {
+					message: 'Ce champ est requis',
+				},
+			},
+			{
+				type: 'minLength',
+				options: {
+					length: 3,
+					message: 'Minimum 3 caractères requis',
+				},
+			},
+		]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur trop courte
+		const shortResult = validation.validateField('ab', rules)
+		expect(shortResult.hasError).toBe(true)
+		expect(shortResult.state.errors).toContain('Minimum 3 caractères requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('abc', rules)
+		expect(validResult.hasError).toBe(false)
+		expect(validResult.hasSuccess).toBe(true)
+	})
+
+	it('should respect showSuccessMessages option', () => {
+		const validation = useValidation({ showSuccessMessages: false })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		const result = validation.validateField('test', rules)
+		expect(result.hasSuccess).toBe(false)
+		expect(result.state.successes).toEqual([])
+	})
+
+	it('should use fieldIdentifier in messages', () => {
+		const validation = useValidation({ fieldIdentifier: 'Email' })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Le champ Email est requis',
+			},
+		}]
+
+		const result = validation.validateField('', rules)
+		expect(result.state.errors[0]).toContain('Email')
+	})
+
+	it('should clear validation state', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(validation.hasError.value).toBe(true)
+
+		validation.clearValidation()
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+	})
+
+	it('should validate on submit', async () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(await validation.validateOnSubmit()).toBe(false)
+
+		validation.validateField('test', rules)
+		expect(await validation.validateOnSubmit()).toBe(true)
+	})
+})

package/src/composables/validation/useValidation.ts

@@ -0,0 +1,180 @@
+import { ref, computed } from 'vue'
+import { useFieldValidation, type RuleOptions } from '../rules/useFieldValidation'
+
+export type ValidationRule = {
+	type: string
+	options: RuleOptions
+}
+
+export interface ValidationOptions {
+	showSuccessMessages?: boolean
+	fieldIdentifier?: string
+	customRules?: ValidationRule[]
+	warningRules?: ValidationRule[]
+	successRules?: ValidationRule[]
+	disableErrorHandling?: boolean
+}
+
+export interface ValidationState {
+	errors: string[]
+	warnings: string[]
+	successes: string[]
+}
+
+export interface ValidationResult {
+	hasError: boolean
+	hasWarning: boolean
+	hasSuccess: boolean
+	state: ValidationState
+}
+
+/**
+ * Composable pour gérer la validation des champs de formulaire
+ * @param options Options de configuration de la validation
+ * @returns Un objet contenant les états et méthodes de validation
+ */
+export function useValidation(options: ValidationOptions = { showSuccessMessages: true }) {
+	const errors = ref<string[]>([])
+	const warnings = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	const { generateRules } = useFieldValidation()
+
+	const hasError = computed(() => errors.value.length > 0)
+	const hasWarning = computed(() => warnings.value.length > 0)
+	const hasSuccess = computed(() =>
+		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+	)
+
+	const clearValidation = () => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+	}
+
+	const validateField = (
+		value: unknown,
+		rules: ValidationRule[] = [],
+		warningRules: ValidationRule[] = [],
+		successRules: ValidationRule[] = [],
+	): ValidationResult => {
+		clearValidation()
+
+		// Si la gestion des erreurs est désactivée, on retourne un résultat sans erreurs
+		if (options.disableErrorHandling) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		// Validation des règles normales
+		const normalRules = rules.map(rule => ({
+			type: rule.type,
+			options: {
+				...rule.options,
+				fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+			},
+		}))
+
+		const validationRules = generateRules(normalRules)
+		let hasValidationError = false
+		validationRules.forEach((validationRule) => {
+			const result = validationRule(value)
+			if (result.error) {
+				errors.value.push(result.error)
+				hasValidationError = true
+			}
+		})
+
+		// Si pas d'erreur, ajouter le message de succès ou un message par défaut
+		if (!hasValidationError && value && options.showSuccessMessages !== false) {
+			const customSuccessMessage = rules.find(rule => rule.options.successMessage)?.options.successMessage
+			if (customSuccessMessage) {
+				successes.value.push(customSuccessMessage)
+			}
+			else {
+				const defaultMessage = options.fieldIdentifier ? `Le champ ${options.fieldIdentifier} est valide.` : 'Champ valide'
+				successes.value.push(defaultMessage)
+			}
+		}
+
+		// Validation des règles d'avertissement
+		if (!hasValidationError) {
+			const warningValidationRules = generateRules(
+				warningRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isWarning: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			warningValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.warning) {
+					warnings.value.push(result.warning)
+				}
+			})
+		}
+
+		// Validation des règles de succès
+		if (!hasValidationError && !hasWarning.value) {
+			const successValidationRules = generateRules(
+				successRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isSuccess: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			successValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.success && options.showSuccessMessages !== false) {
+					successes.value.push(result.success)
+				}
+			})
+		}
+
+		return {
+			hasError: hasError.value,
+			hasWarning: hasWarning.value,
+			hasSuccess: hasSuccess.value,
+			state: {
+				errors: errors.value,
+				warnings: warnings.value,
+				successes: successes.value,
+			},
+		}
+	}
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return !hasError.value
+	}
+
+	return {
+		// États
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+
+		// Méthodes
+		validateField,
+		validateOnSubmit,
+		clearValidation,
+	}
+}

package/src/designTokens/index.ts

@@ -4,6 +4,8 @@ import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { paColorsTokens } from './tokens/pa/paColors'
+import { paSemanticTokens } from './tokens/pa/paSemantic'
+import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
 import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
@@ -14,6 +16,8 @@ export {
 	cnamLightTheme,
 	cnamDarkTheme,
 	paColorsTokens,
+	paSemanticTokens,
+	paContextualTokens,
 	paLightTheme,
 	paDarkTheme,
 }

package/src/main.ts

@@ -4,3 +4,4 @@ import '../src/assets/settings.scss'
 export * from './components'
 export * from './services'
 export * from './composables'
+export * from './utils/rules'

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).