@cnamts/synapse 1.0.25 → 1.0.26

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

@@ -14,15 +14,12 @@ import '../../styles/shared.css';
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .section-container {
-    margin: 2rem 0;
     padding: 1.5rem;
     background-color: #fff;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .section-container h2 {
@@ -43,48 +40,25 @@ import '../../styles/shared.css';
     
     border-radius: 3px;
   }
-  
-  .pages-list {
-    background-color: #f0f7ff;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin: 1.5rem 0;
-  }
-  
-  .pages-list h3 {
-    margin-top: 0;
-    color: #0c419a;
-    position: relative;
-    padding-bottom: 0.75rem;
-  }
-  
-  .pages-list h3::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 0;
-    width: 80px;
-    height: 4px;
-    
-    border-radius: 3px;
-  }
+
   
   .pages-list ul {
-    padding-left: 1.5rem;
-    margin-bottom: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
   }
   
   .pages-list li {
-    margin-bottom: 0.5rem;
-    position: relative;
+    padding: 0.4rem 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
+    line-height: 1.5;
+    list-style: none;
   }
-  
-  .exemption-card {
-    background-color: #f8f9fa;
-    border-left: 4px solid #0c419a;
-    padding: 1.5rem;
-    margin: 1.5rem 0;
-    border-radius: 4px;
+
+  .pages-list li strong {
+    font-size: 0.95rem;
+    margin-right: 0.25rem;
   }
   
   .exemption-item {
@@ -97,7 +71,8 @@ import '../../styles/shared.css';
     background-color: #e3e8f2;
     border-left: 4px solid #0c419a;
     padding: 1rem 1.5rem;
-    margin: 1.5rem 0;
+    margin-bottom:1.5rem;
+    margin-top:0.5rem;
     border-radius: 4px;
   }
   
@@ -108,18 +83,62 @@ import '../../styles/shared.css';
     font-weight: 500;
   }
   
+  .exemption-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  .exemption-card {
+    background-color: #fff;
+    border-radius: 8px;
+    border: 1px solid #eaeaea;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .exemption-card strong {
+    display: block;
+    color: #0c419a;
+    margin-bottom: 0.4rem;
+    font-size: 0.95rem;
+  }
+
+  .exemption-card p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
+  }
+
   .derogation-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin-top: 1.5rem;
   }
-  
+
+  .derogation-card--full {
+    grid-column: 1 / -1;
+  }
+
   .derogation-card {
-    background-color: white;
+    background-color: #fff;
     border-radius: 8px;
-    padding: 1.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #eaeaea;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .derogation-card h4 {
+    color: #0c419a;
+    margin-top: 0;
+    margin-bottom: 0.4rem;
+    font-size: 0.95rem;
+  }
+
+  .derogation-card p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
   }
 
   h2 {
@@ -127,6 +146,34 @@ import '../../styles/shared.css';
     color: #0c419a !important;
     font-size: 1.6rem !important;
   }
+
+      .alert {
+      background-color: #e3e8f2;
+      border-left: 4px solid #0c419a;
+      padding: 1rem 1.5rem;
+      margin: 1.5rem 0;
+      border-radius: 4px;
+    }
+.official-doc-box {
+  background-color: #fff8e5;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 4px;
+}
+
+.official-doc-box p {
+  margin: 0.5rem 0;
+  color: #3d3d3d;
+  font-size: 0.95rem;
+}
+
+.official-doc-box a {
+  color: #0c419a;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
 `
 }
 </style>
@@ -137,17 +184,16 @@ import '../../styles/shared.css';
 Si vous êtes au démarrage de votre projet, il est difficile d'établir l'échantillonnage. Utilisez donc le kit de pré-audit de manière systématique sur chaque nouveau développement afin d'éviter une dette d'accessibilité lors de l'échantillonnage. </p>
 </div>
 
-<div className="info-card">
+<div className="alert">
   <p><span className="highlight">Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></span> 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.</p>
   
   <p><strong>L'objectif est donc que vous déterminiez quelles pages seront concernées par l'audit (et ce pré-audit).</strong></p>
 </div>
 
 <div className="section-container">
-  <h2>📝 Pages à auditer</h2>
+  <h2>Pages obligatoires à auditer</h2>
   
   <div className="pages-list">
-    <h3>Pages obligatoires</h3>
     <ul>
       <li><strong>Accueil</strong> - Point d'entrée principal du service</li>
       <li><strong>Contact</strong> - Informations permettant de contacter l'organisme</li>
@@ -160,43 +206,87 @@ Si vous êtes au démarrage de votre projet, il est difficile d'établir l'écha
       <li><strong>Documents téléchargeables</strong> - Au moins 1 document pertinent</li>
       <li><strong>Processus complets</strong> - L'ensemble des pages constituant un processus (ex: un formulaire sur plusieurs pages)</li>
       <li><strong>Pages distinctes</strong> - Des exemples de pages ayant un aspect sensiblement distinct ou présentant un type de contenu différent (ex : page contenant des tableaux de données, des éléments multimédias, des illustrations, des formulaires, etc.)</li>
+      <li><strong>Enfin, s’ajoutent des pages sélectionnées au hasard représentant au moins 10 % des pages de l’échantillon</strong>.</li>
     </ul>
   </div>
 </div>
+<div className="note-box">
+  <p><strong>Conseil d'échantillonnage :</strong> Le nombre de visiteurs par page ainsi que l'importance metier peuvent être pris en compte lors de la constitution des 10 %  des pages sélectionnées au hasard de l'échantillon.</p>
+</div>
 
-<div className="section-container">
-  <h2>🚫 Exemptions</h2>
-  
-  <div className="exemption-card">
-    <p><strong>Contenus exemptés de l'obligation d'accessibilité :</strong></p>
-    
-    <div className="exemption-item"><strong>Fichiers bureautiques anciens</strong> - Formats publiés avant le 23 septembre 2018, sauf s'ils sont nécessaires à l'accomplissement d'une démarche administrative.</div>
-    
-    <div className="exemption-item"><strong>Contenus audio/vidéo préenregistrés</strong> - Y compris ceux comprenant des composants interactifs, publiés avant le 23 septembre 2020.</div>
-    
-    <div className="exemption-item"><strong>Contenus audio/vidéo en direct</strong> - Y compris ceux comprenant des composants interactifs.</div>
-    
-    <div className="exemption-item"><strong>Cartes et services de cartographie</strong> - Sous réserve que les informations essentielles soient fournies sous une forme numérique accessible pour les cartes de localisation ou d'itinéraire.</div>
-    
-    <div className="exemption-item"><strong>Contenus de tiers</strong> - Qui ne sont ni financés ni développés par l'organisme concerné et qui ne sont pas sous son contrôle.</div>
-    
-    <div className="exemption-item"><strong>Collections patrimoniales</strong> - Qui ne peuvent être rendues totalement accessibles en raison :</div>
-    <div className="exemption-item" style={{paddingLeft: '2.5rem'}}>• De l'incompatibilité des exigences avec la préservation ou l'authenticité de la reproduction.</div>
-    <div className="exemption-item" style={{paddingLeft: '2.5rem'}}>• De l'indisponibilité de solutions automatisées et économiques pour la transcription.</div>
-    
-    <div className="exemption-item"><strong>Intranets et extranets anciens</strong> - Publiés avant le 23 septembre 2019, jusqu'à révision en profondeur.</div>
-    
-    <div className="exemption-item"><strong>Contenus non essentiels ou archivés</strong> - Sites et applications qui ne sont ni nécessaires à l'accomplissement d'une démarche administrative active ni mis à jour après le 23 septembre 2019.</div>
-  </div>
+<div className="official-doc-box">
+  <p>
+    <strong>Référence officielle :</strong> les contenus exemptés de l'obligation
+    d'accessibilité et les dérogations pour charge disproportionnée sont définis
+    dans le champ d'application du RGAA.
+  </p>
+
+  <p>
+    Les éléments présentés ci-dessous sont fournis à titre d'exemples et d'aide
+    à l'analyse dans le cadre du pré-audit. Ils ne remplacent pas la documentation
+    officielle, qui reste la source de référence.
+  </p>
+
+  <p>
+    Consulter la documentation officielle :{' '}
+    <a
+      href="https://accessibilite.numerique.gouv.fr/obligations/champ-application/"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Champ d'application du RGAA — contenus exemptés et dérogations
+    </a>
+  </p>
 </div>
 
-<div className="note-box">
-  <p>💡 <strong>Conseil d'échantillonnage :</strong> Le nombre de visiteurs par page peut être pris en compte lors de la constitution de l'échantillon.</p>
-  <p>Ajoutez à votre sélection des pages choisies au hasard représentant <span className="highlight">au moins 10% de l'échantillon total</span>.</p>
+<div>
+  <h2>Contenus exemptés de l'obligation d'accessibilité :</h2>
+  
+  <div className="exemption-grid">
+    <div className="exemption-card">
+      <strong>📄 Fichiers bureautiques anciens</strong>
+      <p>Formats publiés avant le 23 septembre 2018, sauf s'ils sont nécessaires à l'accomplissement d'une démarche administrative.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🎬 Contenus audio/vidéo préenregistrés</strong>
+      <p>Y compris ceux comprenant des composants interactifs, publiés avant le 23 septembre 2020.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>📡 Contenus audio/vidéo en direct</strong>
+      <p>Y compris ceux comprenant des composants interactifs.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🗺️ Cartes et services de cartographie</strong>
+      <p>Sous réserve que les informations essentielles soient fournies sous une forme numérique accessible pour les cartes de localisation ou d'itinéraire.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🤝 Contenus de tiers</strong>
+      <p>Qui ne sont ni financés ni développés par l'organisme concerné et qui ne sont pas sous son contrôle.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🏛️ Collections patrimoniales</strong>
+      <p>Qui ne peuvent être rendues totalement accessibles en raison de l'incompatibilité des exigences avec la préservation ou l'authenticité de la reproduction, ou de l'indisponibilité de solutions automatisées et économiques pour la transcription.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🏢 Intranets et extranets anciens</strong>
+      <p>Publiés avant le 23 septembre 2019, jusqu'à révision en profondeur.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>📦 Contenus non essentiels ou archivés</strong>
+      <p>Sites et applications qui ne sont ni nécessaires à l'accomplissement d'une démarche administrative active ni mis à jour après le 23 septembre 2019.</p>
+    </div>
+  </div>
 </div>
 
 <div className="section-container">
-  <h2>⚖️ Dérogations</h2>
+  <h2>Dérogations</h2>
   
   <p>Il existe un système de dérogation dans la mise en conformité d'un service numérique : <span className="highlight">la charge disproportionnée</span>.</p>
   
@@ -211,9 +301,9 @@ Si vous êtes au démarrage de votre projet, il est difficile d'établir l'écha
       <p>L'absence de priorité, le manque de temps ou de connaissance <strong>ne sont pas</strong> des circonstances légitimes de dérogations.</p>
     </div>
     
-    <div className="derogation-card">
+    <div className="derogation-card derogation-card--full">
       <h4>✅ Procédure</h4>
-      <p>Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de l'accessibilité numérique (en attendant sa création, c'est la Filière Digital qui en a le mandat).</p>
+      <p>Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de l'accessibilité numérique (en attendant sa création, c'est le Studio Design qui en a le mandat).</p>
       <p>Des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.</p>
     </div>
   </div>

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

@@ -42,7 +42,7 @@ import '../../styles/shared.css';
   
   .resources-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin: 2rem 0;
   }
@@ -141,6 +141,13 @@ import '../../styles/shared.css';
     height: 3px;
     border-radius: 3px;
   }
+
+  h2 {
+    margin-top: 2rem;
+    color: #0c419a !important;
+    font-weight: bold !important;
+    font-size: 1.5rem !important;
+  }
 `
 }
 </style>
@@ -151,7 +158,7 @@ import '../../styles/shared.css';
 </div>
 
 <div className="info-section">
-  <h2>🌟 Objectif</h2>
+  <h2>Objectif</h2>
 
 <p>Le kit de pré-audit peut être utilisé de deux façons :</p>
 
@@ -235,10 +242,10 @@ import '../../styles/shared.css';
       <h3>Résultat du pré-audit manuel</h3>
       <p>Complété avec un onglet par page.</p>
     </div>
-  </div>
 
-  <div className="info-section">
-    <h3>Annexes</h3>
-      <p>Pour chaque page testée, il sera demandé de restituer un rapport Tanaguru complet.</p>
+    <div className="resource-card">
+      <h3>Annexes</h3>
+      <p>Pour chaque page testée, il sera demandé de constituer un rapport des non conformitees.</p>
+    </div>
   </div>
 </div>

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

@@ -68,6 +68,8 @@ import '../../../styles/shared.css';
       padding: 1.5rem;
       position: relative;
       overflow: hidden;
+      border: 1px solid #ccc;
+      border-radius: var(--border-radius-md);
     }
     
     .tool-card::before {
@@ -113,9 +115,50 @@ import '../../../styles/shared.css';
       border-radius: 3px;
     }
 
-    .tool-card-title-tanaguru p {
-      font-size: 1.2rem !important;
-      font-weight: bold !important;
+    .tool-card-title-tanaguru {
+      color: #0c419a;
+      font-size: 1.15rem;
+      font-weight: 700;
+      margin-top: 0;
+      margin-bottom: 0.75rem;
+    }
+
+    .tanaguru-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+      align-items: start;
+    }
+
+    .tanaguru-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 0.75rem;
+    }
+
+    .tanaguru-chip {
+      background-color: #eef3fb;
+      color: #0c419a;
+      font-size: 0.8rem;
+      font-weight: 500;
+      padding: 0.3rem 0.75rem;
+      border-radius: 20px;
+      border: 1px solid #c7d8f5;
+    }
+
+    .tanaguru-note {
+      background-color: #fff8ee;
+      border-left: 3px solid #b45309;
+      padding: 0.85rem 1rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      color: #3d3d3d;
+      line-height: 1.5;
+    }
+
+    .tanaguru-note strong {
+      color: #b45309;
     }
     
     .tool-card-icon {
@@ -290,49 +333,27 @@ import '../../../styles/shared.css';
 <section className="section">
   <h2 className="section-title">Outil principal</h2>
   
-  <div className="tool-card">
+  <div className="">
     <div className="tool-card-content">
-      <h3 className="tool-card-title-tanaguru">
-        Tanaguru webext RGAA
-      </h3>
-      
-      <p className="tool-card-description">
-        Extension Firefox 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>. Elle permet de vérifier, directement depuis votre navigateur, la conformité de pages web aux critères d'accessibilité.
-      </p>
-      
-      <div className="info-box">
-        <p>
-          <strong>Fonctionnalités principales :</strong>
-        </p>
-        <ul className="modern-list">
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Évaluation rapide des problèmes d'accessibilité (contrastes, alternatives textuelles, structure HTML)</span>
-          </li>
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Affichage direct des erreurs avec suggestions d'amélioration</span>
-          </li>
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Audit instantané pour développeurs et testeurs d'accessibilité</span>
-          </li>
-        </ul>
-      </div>
-      
-      <div className="warning-box">
-        <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.
-        </p>
-        <p>
-          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>
+      <h3 className="tool-card-title-tanaguru">Tanaguru webext RGAA</h3>
+
+      <div className="tanaguru-layout">
+        <div>
+          <p className="tool-card-description">Extension Firefox pour vérifier la conformité de vos pages aux critères du <strong>RGAA</strong>, directement depuis le navigateur.</p>
+          <div className="tanaguru-chips">
+            <span className="tanaguru-chip">Contrastes</span>
+            <span className="tanaguru-chip">Alternatives textuelles</span>
+            <span className="tanaguru-chip">Structure HTML</span>
+            <span className="tanaguru-chip">158 tests sur 258</span>
+          </div>
+          <a href="/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs" className="tool-card-link" style={{marginTop: '1.25rem'}}>
+            Guide d'utilisation →
+          </a>
+        </div>
+        <div className="tanaguru-note">
+          <strong>Limite :</strong> Tanaguru couvre uniquement les critères automatisables. Les critères restants nécessitent une vérification manuelle — un audit ne peut pas reposer uniquement sur des outils automatisés.
+        </div>
       </div>
-      
-      <a href="/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs" className="tool-card-link">
-        Guide d'utilisation de Tanaguru
-        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
-      </a>
     </div>
   </div>
 </section>
@@ -494,7 +515,7 @@ import '../../../styles/shared.css';
     <div className="tool-card-content">
       <h3 className="tool-card-title">
         <span className="tool-card-icon" role="img" aria-hidden="true">✅</span>
-        Check-list du designer
+        rapport de pre-audit du designer
       </h3>
       <p className="tool-card-description">
         Checklist d'accessibilité disponible sur le site Design Accessible. Propose une liste de critères à vérifier pour garantir l'accessibilité des sites web.