@cnamts/synapse 1.0.15 → 1.0.16

package/src/stories/Accessibilite/Audit/Exemptions-derogations.mdx

@@ -0,0 +1,241 @@
+import {Meta} from '@storybook/blocks';
+import '../../styles/shared.css';
+
+<Meta title="Accessibilité/Audit/Exemptions – dérogations"/>
+
+<style>
+{
+  `
+    /* Variables CSS basées sur les couleurs exactes du thème CNAM */
+    :root {
+      --primary-color: #0c419a; /* primary: cnamColorsTokens.blue.base */
+      --primary-light: #3d67ae; /* blue.lighten20 */
+      --secondary-color: #006386; /* secondary: cnamColorsTokens.cyan.darken40 */
+      --accent-color: #00a5df; /* accent: cnamColorsTokens.cyan.base */
+      --error-color: #b33f2e; /* error: cnamColorsTokens.orange.darken20 */
+      --info-color: #0c419a; /* info: cnamColorsTokens.blue.base */
+      --success-color: #004439; /* success: cnamColorsTokens.turquoise.darken60 */
+      --warning-color: #906b15; /* warning: cnamColorsTokens.yellow.darken60 */
+      --text-color: #020d1f; /* blue.darken80 */
+      --background-light: #f8f9fc; /* blue.lighten97 */
+      --card-shadow: 0 4px 12px rgba(12, 65, 154, 0.05);
+      --transition-speed: 0.3s;
+      --border-radius: 8px;
+    }
+    
+    /* Styles globaux */
+    .rgaa-container {
+      font-family: 'Roboto', sans-serif;
+      color: var(--text-color);
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1rem;
+    }
+    
+    .section-title {
+      color: var(--primary-color);
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid rgba(12, 65, 154, 0.2);
+    }
+    
+    .info-box {
+      background-color: var(--background-light);
+      border-radius: var(--border-radius);
+      padding: 1.5rem;
+      margin: 1.5rem 0;
+      box-shadow: var(--card-shadow);
+    }
+
+    .info-box h3 {
+      color: var(--primary-color);
+      margin-top: 0;
+    }
+
+    .highlight-list {
+      margin: 1rem 0;
+      padding-left: 1.2rem;
+    }
+
+    .highlight-list li {
+      margin-bottom: 0.5rem;
+    }
+
+    .link-card {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      margin: 0.5rem 0.5rem 0.5rem 0;
+      background-color: var(--primary-color);
+      color: white;
+      text-decoration: none;
+      border-radius: var(--border-radius);
+      transition: all var(--transition-speed) ease;
+      box-shadow: var(--card-shadow);
+    }
+
+    .link-buttons {
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+    }
+  `
+}
+</style>
+
+<div className="rgaa-container">
+  <div className="header">
+    <h1>Exemptions et dérogations dans un audit RGAA</h1>
+    <p>Comprendre les cas prévus par le référentiel et leurs bonnes pratiques d'application</p>
+  </div>
+
+  <div className="info-box">
+    <h3>🔍 Contexte</h3>
+    <p>
+      Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> fixe les
+      obligations d'accessibilité des sites et services en ligne des organismes publics et de
+      certains organismes privés.
+    </p>
+    <p>
+      Le référentiel prévoit des cas d'exemption et de dérogation (par exemple pour certains
+      contenus de tiers ou en cas de charge disproportionnée). Dans la pratique, ces possibilités
+      sont cependant souvent mal comprises ou utilisées de manière trop large, ce qui fausse la
+      perception réelle du niveau d'accessibilité d'un service.
+    </p>
+  </div>
+
+  <h2 className="section-title">Exemptions « contenus de tiers » : ce que dit le RGAA</h2>
+  <p>
+    Le RGAA prévoit une exemption possible pour certains contenus dits « de tiers ». Cette
+    exemption est strictement encadrée&nbsp;:
+  </p>
+  <ul className="highlight-list">
+    <li>
+      <strong>Seuls sont exemptés</strong> les contenus ni financés, ni développés par l'organisme
+      concerné, et qui ne sont pas sous son contrôle.
+    </li>
+    <li>
+      Concrètement, l'organisme ne doit ni avoir payé pour ce contenu, ni pouvoir décider de son
+      intégration ou non sur le site.
+    </li>
+  </ul>
+  <p>
+    Dès lors qu'un organisme commande, achète, intègre ou peut retirer un contenu tiers de son
+    service, ce contenu ne peut plus être considéré comme totalement extérieur à sa sphère de
+    responsabilité et l'exemption ne s'applique plus.
+  </p>
+
+  <h2 className="section-title">Problèmes observés : erreurs et abus d'interprétation</h2>
+  <div className="info-box">
+    <p>
+      Dans de nombreux audits et déclarations d'accessibilité, on observe des usages trop larges ou
+      erronés de cette exemption « contenus de tiers », avec plusieurs cas récurrents&nbsp;:
+    </p>
+    <ul className="highlight-list">
+      <li>
+        Des composants achetés à des tiers (widgets, solutions clés en main, etc.) sont déclarés
+        comme « contenus de tiers » alors qu'ils sont <strong>financés</strong> par l'organisme, ce
+        qui va à l'encontre du texte du RGAA.
+      </li>
+      <li>
+        Des éléments que l'organisme peut choisir de ne pas intégrer sont présentés comme
+        « hors de contrôle »&nbsp;: gestionnaires de cookies (par exemple certaines bannières ou
+        scripts), formulaires, chatbots, lecteurs vidéo, solutions d'analytics, etc. Dans ces cas,
+        l'organisme a pourtant la main sur l'intégration ou non de ces fonctionnalités.
+      </li>
+      <li>
+        Plus largement, tout contenu ou composant que l'organisme décide d'intégrer à son site,
+        même fourni par un prestataire externe, reste sous sa responsabilité du point de vue de
+        l'accessibilité.
+      </li>
+    </ul>
+    <p>
+      Ces interprétations trop larges conduisent à exclure artificiellement une partie significative
+      du périmètre réel de l'audit, et peuvent donner un <strong>taux de conformité trompeur</strong>
+      par rapport à l'expérience vécue par les personnes en situation de handicap.
+    </p>
+  </div>
+
+  <h2 className="section-title">Dérogation pour « charge disproportionnée »</h2>
+  <p>
+    Le RGAA prévoit également la possibilité d'invoquer une
+    <strong>dérogation pour charge disproportionnée</strong>
+    lorsque rendre accessible un contenu ou une fonctionnalité serait manifestement trop coûteux
+    ou compromettrait la mission de l'organisme.
+  </p>
+  <p>Cette dérogation est toutefois encadrée par plusieurs exigences fortes&nbsp;:</p>
+  <ul className="highlight-list">
+    <li>
+      La dérogation doit être <strong>justifiée de manière documentée</strong> (ressources
+      disponibles, coûts, bénéfices attendus, fréquence d'utilisation du contenu, etc.).
+    </li>
+    <li>
+      Lorsque certains contenus ne sont pas rendus accessibles, une
+      <strong>alternative accessible</strong>
+      doit être prévue et clairement indiquée.
+    </li>
+    <li>
+      La dérogation ne doit pas devenir une solution de facilité pour laisser de côté des contenus
+      importants ou très utilisés.
+    </li>
+  </ul>
+  <div className="info-box">
+    <p>
+      Dans les audits observés, les justifications de charge disproportionnée sont souvent trop
+      vagues (« de nombreux contenus inaccessibles », « coût trop élevé »…) et ne précisent ni
+      l'analyse coût/bénéfice, ni les alternatives proposées aux usagers. Le risque est alors de
+      sous-estimer l'impact réel sur l'accessibilité du service.
+    </p>
+  </div>
+
+  <h2 className="section-title">Qui est concerné et quelles bonnes pratiques adopter&nbsp;?</h2>
+  <p>
+    La bonne application des exemptions et dérogations engage l'ensemble des acteurs de la chaîne
+    numérique&nbsp;:
+  </p>
+  <ul className="highlight-list">
+    <li>
+      <strong>Organismes publics et privés soumis au RGAA</strong>&nbsp;: accepter un taux de
+      conformité <em>sincère</em>, même s'il n'est pas maximal, plutôt que de chercher à le « gonfler
+      » en excluant abusivement des contenus tiers ou en multipliant les dérogations.
+    </li>
+    <li>
+      <strong>Sociétés spécialisées en accessibilité et auditeurs</strong>&nbsp;: appliquer
+      strictement les règles du RGAA, expliciter clairement le périmètre de l'audit, et documenter
+      les cas d'exemption ou de dérogation.
+    </li>
+    <li>
+      <strong>DINUM et instances de coordination</strong>&nbsp;: diffuser des recommandations
+      partagées permettant d'harmoniser les pratiques entre auditeurs, notamment sur la notion de
+      contenu de tiers et sur l'évaluation de la charge disproportionnée.
+    </li>
+    <li>
+      <strong>Pouvoirs publics</strong> (Gouvernement, Parlement, autorités de contrôle)&nbsp;:
+      renforcer les dispositifs de suivi, de contrôle et, le cas échéant, de sanction, pour
+      encourager une mise en conformité effective des services numériques.
+    </li>
+  </ul>
+
+  <h2 className="section-title">Conclusion</h2>
+  <div className="info-box">
+    <p>
+      Les exemptions et dérogations prévues par le RGAA répondent à des cas précis et doivent
+      rester l'exception. Mal appliquées, elles permettent d'afficher des taux de conformité élevés
+      sans garantir une accessibilité réelle pour les personnes handicapées.
+    </p>
+    <p>
+      Une démarche rigoureuse, transparente et honnête consiste à&nbsp;:
+    </p>
+    <ul className="highlight-list">
+      <li>assumer le périmètre réel de l'audit&nbsp;;</li>
+      <li>exiger l'accessibilité des composants intégrés, y compris lorsqu'ils proviennent de tiers&nbsp;;</li>
+      <li>motiver sérieusement toute dérogation pour charge disproportionnée&nbsp;;</li>
+      <li>prévoir et documenter des alternatives accessibles lorsque nécessaire.</li>
+    </ul>
+    <p>
+      Utilisées de cette façon, les exemptions et dérogations restent compatibles avec l'objectif
+      central du RGAA&nbsp;: garantir à toutes et tous un accès effectif aux services numériques
+      publics et aux services privés concernés.
+    </p>
+  </div>
+</div>
+

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

@@ -132,18 +132,25 @@ import '../../styles/shared.css';
 
 <div className="info-section">
   <h2>🌟 Objectif</h2>
-  <p>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.</p>
-  
+  <p>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>, sans viser l'exhaustivité ni un score parfait. La procédure se fait en autonomie par l'équipe de développement du produit. Le relevé des non-conformités relève de la responsabilité de l’équipe de développement, ce kit étant conçu pour guider l’auto-évaluation.</p>
+
   <p>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.</p>
-  
+
+  <p>Les résultats observés par le pré-audit sont souvent partiels et doivent être considérés comme un point de départ et non comme une évaluation finale. Lors d'un audit suivi du pré-audit, nous observons un taux minimum compris entre 30% et 50%. Un contre-audit pourra être proposé après application des correctifs relevés par l'audit.</p>
+
+  <p>L'enjeu est d'identifier un maximum de non conformités en phase pré-audit afin de réduire le nombre de correctifs en phase audit. Ce kit met aussi à disposition des outils et des tutoriels pour vous accompagner dans cette démarche.</p>
+
   <div className="alert">
-    <p><strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.</p>
+    <p><strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités, relevées par Tanaguru en phase automatique ou par l'équipe en phase manuelle.</p>
   </div>
 </div>
 
 <div className="section-container">
   <h2>Environnement de test</h2>
-  
+  <p>Il est important de tester votre service dans un environnement similaire à celui utilisé par les utilisateurs finaux. L'environnement de test sera le même pour chacune des phrases (pré-audit, audit, contre-audit) et devra être stable. Aucune nouvelle fonctionnalité ne doit être développée entre chaque phase. Seules les corrections liées aux écarts d’accessibilité identifiés doivent être réalisées, afin de garantir la cohérence et la comparabilité des résultats.</p>
+
+  <p>Le produit devra mettre à disposition un environnement adéquat pour l'audit qui, selon le public ciblé par le produit, pourra être un environnement de bureau ou mobile.</p>
+
   <div className="environment-grid">
     <div className="resource-card">
       <h3>💻 Environnement principal</h3>
@@ -154,7 +161,7 @@ import '../../styles/shared.css';
         <li>Lecteur d'écran : NVDA (dernière version)</li>
       </ul>
     </div>
-    
+
     <div className="resource-card">
       <h3>📱 Environnement mobile</h3>
       <p>Si l'outil cible un public utilisant des terminaux mobile :</p>
@@ -169,7 +176,7 @@ import '../../styles/shared.css';
 
 <div className="section-container">
   <h2>Livrable</h2>
-  
+
   <p> A l'issue du pré-audit, nous attendons les éléments suivants :</p>
 
   <div className="resources-grid">
@@ -177,12 +184,12 @@ import '../../styles/shared.css';
     <h3>Contexte du projet</h3>
     <p>Détails sur les responsabilités et les parties prenantes.</p>
   </div>
-  
+
   <div className="resource-card">
     <h3>Résultat de l'échantillon de test</h3>
     <p>Analyse des pages testées.</p>
   </div>
-  
+
   <div className="resource-card">
     <h3>Résultat du pré-audit manuel</h3>
     <p>Complété avec un onglet par page.</p>
@@ -193,5 +200,5 @@ import '../../styles/shared.css';
   <h2>Annexes</h2>
     <p>Pour chaque page testée, il sera demandé de restituer un rapport Tanaguru complet.</p>
 </div>
-  
+
 </div>

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

@@ -418,6 +418,22 @@ import '../../../styles/shared.css';
       </a>
     </div>
   </div>
+
+  <div className="tool-card">
+    <div className="tool-card-content">
+      <h3 className="tool-card-title">
+        <span className="tool-card-icon" role="img" aria-hidden="true">🇭</span>
+        HeadingsMap
+      </h3>
+      <p className="tool-card-description">
+        Extension Firefox qui analyse la structure des titres (h1 à h6) d’une page web afin d’en vérifier la hiérarchie. Elle permet de s’assurer que l’organisation des contenus est compréhensible pour les technologies d’assistance.
+      </p>
+      <a href="https://addons.mozilla.org/fr/firefox/addon/headingsmap/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
+        Télécharger l'extension
+        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
+      </a>
+    </div>
+  </div>
   
   <div className="tool-card">
     <div className="tool-card-content">