@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -1,39 +1,390 @@
-import {Meta} from '@storybook/addon-docs/blocks';
+import {Meta} from '@storybook/blocks';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Tanaguru"/>
 
-# Tanaguru
+<style>
+  {`
+    /* Variables CSS */
+    :root {
+      --primary-color: #0C419A;
+      --secondary-color: #006386;
+      --accent-color: #00a5df;
+      --dark-color: #111212;
+      --light-color: #bbbcbd;
+      --success-color: #004439;
+      --warning-color: #60480e;
+      --info-color: #0c419a;
+      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
+      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+      --border-radius-sm: 4px;
+      --border-radius-md: 8px;
+      --border-radius-lg: 12px;
+      --transition-fast: 0.2s ease;
+      --transition-normal: 0.3s ease;
+    }
+    
+    /* Styles globaux */
+    .tanaguru-page {
+      font-family: 'Roboto', sans-serif;
+      color: #333;
+      line-height: 1.6;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    
+    /* Header avec effet glassmorphism */
+    .tanaguru-header {
+      border-radius: var(--border-radius-lg);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      position: relative;
+      overflow: hidden;
+      box-shadow: var(--shadow-lg);
+    }
+    
+    .tanaguru-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgzMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSI+PC9yZWN0Pjwvc3ZnPg==');
+      opacity: 0.1;
+      z-index: 0;
+    }
+    
+    .tanaguru-header h1 {
+      font-size: 3rem;
+      margin: 0;
+      position: relative;
+      z-index: 1;
+      font-weight: 700;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    
+    .tanaguru-header p {
+      font-size: 1.2rem;
+      margin-top: 1rem;
+      position: relative;
+      z-index: 1;
+      max-width: 800px;
+    }
+    
+    /* Sections */
+    .tanaguru-section {
+      margin-bottom: 3rem;
+      background: white;
+      border-radius: var(--border-radius-lg);
+      padding: 2rem;
+      box-shadow: var(--shadow-md);
+      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+    }
+    
+    .tanaguru-section:hover {
+      transform: translateY(-5px);
+      box-shadow: var(--shadow-lg);
+    }
+    
+    .tanaguru-section h2 {
+      color: var(--primary-color);
+      font-size: 2rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 3px solid #f2f6ff;
+      position: relative;
+    }
+    
+    .tanaguru-section h2::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 80px;
+      height: 3px;
+            
 
-## Qu'est-ce que Tanaguru ?
+    }
+    
+    /* Images */
+    .tanaguru-image {
+      border-radius: var(--border-radius-md);
+      overflow: hidden;
+      margin: 1.5rem 0;
+      box-shadow: var(--shadow-md);
+      transition: transform var(--transition-normal);
+      max-width: 100%;
+    }
+    
+    .tanaguru-image:hover {
+      transform: scale(1.02);
+    }
+    
+    .tanaguru-image img {
+      width: 100%;
+      display: block;
+      padding: 0 !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+    
+    /* Étapes */
+    .tanaguru-step {
+      margin-bottom: 2rem;
+      padding-left: 3rem;
+      position: relative;
+    }
+    
+    .tanaguru-step-number {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 2.5rem;
+      height: 2.5rem;
+      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 1.2rem;
+      box-shadow: var(--shadow-sm);
+    }
+    
+    .tanaguru-step h3 {
+      margin-top: 0;
+      color: var(--primary-color);
+      font-size: 1.3rem;
+    }
+    
+    /* Info box */
+    .tanaguru-info {
+      background: #f2f6ff;
+      border-left: 4px solid var(--info-color);
+      padding: 1.5rem;
+      margin: 1.5rem 0;
+      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
+      position: relative;
+    }
+    
+    .tanaguru-info::before {
+      content: "ℹ️";
+      position: absolute;
+      left: -12px;
+      top: -12px;
+      background: var(--info-color);
+      color: white;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+    
+    /* Liens */
+    .tanaguru-link {
+      color: var(--primary-color);
+      text-decoration: none;
+      font-weight: 500;
+      position: relative;
+      transition: color var(--transition-normal);
+    }
+    
+    .tanaguru-link::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, var(--primary-color), transparent);
+      transform: scaleX(0);
+      transform-origin: left;
+      transition: transform var(--transition-normal);
+    }
+    
+    .tanaguru-link:hover {
+      color: var(--secondary-color);
+    }
+    
+    .tanaguru-link:hover::after {
+      transform: scaleX(1);
+    }
+    
+    /* Responsive */
+    @media (max-width: 768px) {
+      .tanaguru-header {
+        padding: 1.5rem;
+      }
+      
+      .tanaguru-header h1 {
+        font-size: 2rem;
+      }
+      
+      .tanaguru-section {
+        padding: 1.5rem;
+      }
+      
+      .tanaguru-step {
+        padding-left: 2.5rem;
+      }
+    }
+    
+    /* Accessibilité */
+    @media (prefers-reduced-motion: reduce) {
+      .tanaguru-section,
+      .tanaguru-image,
+      .tanaguru-link::after {
+        transition: none;
+      }
+      
+      .tanaguru-section:hover,
+      .tanaguru-image:hover {
+        transform: none;
+      }
+    }
+  `}
+</style>
 
-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.
+<div className="tanaguru-page">
+  <div className="tanaguru-header">
+    <h1>Tanaguru</h1>
+    <p>Un outil d'audit d'accessibilité puissant pour évaluer la conformité RGAA de vos sites web</p>
+  </div>
 
-## Utilisation de Tanaguru
+  <div className="tanaguru-section">
+    <h2>Qu'est-ce que Tanaguru ?</h2>
+    <p>
+      Appelée <a href="https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/" className="tanaguru-link" target="_blank" rel="noopener noreferrer">
+        <strong>Tanaguru webext RGAA (Extension Firefox)</strong>
+      </a>, il s'agit d'une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le <strong>Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</strong>. 
+    </p>
+    <p>
+      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 :
+    </p>
+    <ul>
+      <li>Les contrastes insuffisants</li>
+      <li>Les alternatives textuelles manquantes</li>
+      <li>La structure des balises HTML</li>
+      <li>Et bien d'autres aspects techniques</li>
+    </ul>
+    <p>
+      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.
+    </p>
+    
+    <div className="tanaguru-info">
+      <p>
+        <strong>Attention</strong>, ce service ne permet pas d'évaluer l'ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisables. 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.
+      </p>
+    </div>
+  </div>
 
-**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)**
+    <div className="tanaguru-section">
+    <h2>Utilisation de Tanaguru</h2>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">1</div>
+      <h3>Analyse d'une page d'ameli.fr</h3>
+      <p>
+        Commencez par accéder à la page que vous souhaitez analyser, par exemple : 
+        <a 
+          href="https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation" 
+          className="tanaguru-link" 
+          target="_blank" 
+          rel="noopener noreferrer"
+        >
+          https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation
+        </a>
+      </p>
+      <div className="tanaguru-image">
+        <img alt="UtilisationTanaguruEtape1" src={'tanaguruetape1.png'} />
+      </div>
+    </div>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">2</div>
+      <h3>Installation de l'extension de navigateur</h3>
+      <p>
+        Installez l'extension <strong>Tanaguru webext</strong> depuis le magasin d'extensions de Firefox.
+      </p>
+    </div>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">3</div>
+      <h3>Ouvrir les outils de développement</h3>
+      <p>
+        Appuyez sur <kbd>F12</kbd> pour ouvrir les outils de développement, puis naviguez jusqu'à l'onglet <strong>Tanaguru webtext RGAA4</strong>
+      </p>
+      <div className="tanaguru-image">
+        <img alt="UtilisationTanaguruEtape2" src={'/tanaguruetape2.png'} />
+      </div>
+    </div>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">4</div>
+      <h3>Configuration et lancement de l'analyse</h3>
+      <p>
+        Par défaut, laissez les éléments tels quels, et cochez la case <strong>Statuts invalidés</strong>.
+      </p>
+      <p>
+        Cliquez ensuite sur <strong>Analyser cette page</strong>
+      </p>
+      <div className="tanaguru-image">
+        <img alt="UtilisationTanaguruEtape3" src={'/tanaguruetape3.png'} />
+      </div>
+    </div>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">5</div>
+      <h3>Comprendre les résultats</h3>
+      <p>
+        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>
+      </p>
+      <div className="tanaguru-image">
+        <img style={{width: '50%', height: '50%'}} alt="UtilisationTanaguruEtape4" src={'/tanaguruetape4.png'} />
+      </div>
+    </div>
+    
+    <div className="tanaguru-step">
+      <div className="tanaguru-step-number">6</div>
+      <h3>Exemple d'analyse d'erreur</h3>
+      <p>
+        Exemple: <strong>Eléments obligatoires</strong> 3 erreurs qui correspondent à plusieurs éléments dans notre page. Dont l'erreur est "<strong>propriété ARIA non autorisées sur leur élément</strong>".
+      </p>
+      <p>
+        On va chercher dans la thématique <strong>Eléments obligatoires</strong> 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.
+      </p>
+      <div className="tanaguru-image">
+        <img alt="UtilisationTanaguruEtape5" src={'/tanaguruetape5.png'} />
+      </div>
+      <ol>
+        <li>La loupe permet de localiser le problème dans le code (<strong>/!</strong>) cet élément n'est pas toujours accessible.</li>
+        <li>Bout de code où on retrouve généralement les propriétés ou les éléments en erreur.</li>
+      </ol>
+    </div>
+  </div>
+  
+  <div className="tanaguru-section">
+    <h2>Bonnes pratiques d'utilisation</h2>
+    
+    <div className="tanaguru-info">
+      <p>
+        <strong>Rappel important :</strong> Tanaguru est un excellent outil pour détecter rapidement certains problèmes d'accessibilité, mais il ne remplace pas une analyse manuelle complète. Utilisez-le comme point de départ pour identifier les problèmes les plus évidents, puis complétez avec une évaluation humaine.
+      </p>
+    </div>
+    
+    <h3>Conseils pour une utilisation efficace</h3>
+    <ul>
+      <li>Analysez chaque page importante de votre site individuellement</li>
+      <li>Vérifiez les erreurs signalées dans leur contexte avant de les corriger</li>
+      <li>Utilisez les résultats comme guide pour approfondir votre compréhension du RGAA</li>
+      <li>Complétez avec d'autres outils comme les lecteurs d'écran pour une évaluation plus complète</li>
+    </ul>
+  </div>
+</div>
 
-<img alt="UtilisationTanaguruEtape1" src={'tanaguruetape1.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
-
-**2. Installation de l’extension de navigateur **Tanaguru webext.****
-
-**3. Ouvrir les outils de développement ou faire F12, et aller jusqu’à l’onglet **Tanaguru webtext RGAA4****
-
-<img alt="UtilisationTanaguruEtape2" src={'/tanaguruetape2.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
-
-**4. Par défaut, laisser les éléments tel quel, et cochez la case **Statuts invalidés**.**
-
-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 <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 <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).
-2. Bou de code ou on retrouve généralement les propriétés ou les éléments en erreur.