import {Meta} from '@storybook/blocks';
import '../../styles/shared.css';

<Meta title="Accessibilité/Kit de pré-audit/Pré-audit"/>

<style>
{
`
  :root {
    --primary: #0c419a;
    --primary-light: rgba(0, 120, 212, 0.1);
    --primary-dark: #005a9e;
    --secondary: #0c419a;
    --secondary-light: #e3e8f2;
    --secondary-dark: #0c419a;
    --neutral-100: #ffffff;
    --neutral-200: #f8f9fa;
    --neutral-300: #eaeaea;
    --neutral-400: #d1d1d1;
    --neutral-500: #a0a0a0;
    --neutral-600: #6e6e6e;
    --neutral-700: #3d3d3d;
    --neutral-800: #1f1f1f;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
  }

        
  
  .info-section {
    margin: 2.5rem 0;
    background-color: var(--neutral-100);
    border-radius: var(--radius-md);
    transition: var(--transition);
  }
  
  .info-section h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-top: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .info-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    border-radius: 3px;
  }
  
  .alert {
    background-color: var(--secondary-light);
    border-left: 4px solid var(--secondary);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--radius-sm);
    position: relative;
  }
  
  .alert strong {
    color: var(--secondary-dark);
  }
  
  .verification-card {
    padding: 1.75rem;
    margin-bottom: 2rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
  }
  
  
  .verification-card h2 {
    color: var(--primary);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1.4rem;
  }
  
  .verification-steps {
    padding-left: 1.75rem;
  }
  
  .verification-steps h5 {
    color: var(--primary-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
  }
  
  .verification-steps li {
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 0.5rem;
  }
  
  .verification-steps li::before {
    color: var(--primary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  .highlight {
    background-color: var(--primary-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    color: var(--primary-dark);
  }
  
  .contact-info {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin: 1rem 0;
    border: 1px solid #d9e8ff;
    position: relative;
  }
  
  .contact-info h2 {
    color: var(--primary-dark);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  code {
    background-color: var(--neutral-200);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    color: var(--primary-dark);
    border: 1px solid var(--neutral-300);
  }

  h4 {
     font-weight: bold !important;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
  }
  
  a:hover {
    color: var(--primary-dark);
    border-bottom: 1px solid var(--primary);
  }
`
}
</style>

<div className="header">
  <h1>Pré-audit d'accessibilité</h1>
  <p>Vérifiez la conformité de votre service web avant l'audit officiel ou pendant les phases de développement.</p>
</div>

<div className="info-section">
  <h2>Objectif:</h2>
  <p>L'Objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d'un réel audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. 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>Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle.</p>

  <p>Les tests ci dessous permettent aussi de vérifier tout au long des phases de développement, qu’un niveau intermédiaire d’accessibilité est bien respecté.</p>
</div>

<div className="contact-info">
  <h2>Contact et assistance</h2>
  <p>Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a> (cette adresse évoluera prochainement).</p>
  
  <p>Pour demander un audit, contactez également cette adresse. L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.</p>
</div>

<div className="alert">
  <p><strong>Rappel important :</strong> Avant de lancer votre pré-audit, vous devez définir l'échantillon de votre audit. Vous trouverez toutes les informations associées <a href="/?path=/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-%C3%A9chantillonnage--docs">ici</a>.</p>
</div>

<div className="info-section">
  <h2>Vérification assistée des outils automatisés</h2>
  
  <div className="verification-card">
    <h2>Utilisation de Tanaguru</h2>
    <p>Lancez Tanaguru sur chaque page de l'échantillon de test. Vous pouvez retrouver une documentation d'utilisation de Tanaguru <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-tanaguru-utilisation--docs">ici</a>.</p>
    
    <div className="alert">
      <p><strong>Capacité de l'outil :</strong> Tanaguru peut contrôler <span className="highlight">158 tests sur les 258</span> du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
    </div>
    
    <p>Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d'erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Pour être considéré comme conforme au pré-audit, le projet doit corriger les tests invalidés et contrôler les tests indéterminés. Ce dernier type de test doit faire l'objet d'un contrôle manuel par un opérateur humain puisqu'il relève généralement d'une notion d'interprétation (ex : subjectivité, ordre de tabulation, pertinence du contenu éditorial). Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit.</p>
  </div>
</div>

<div className="info-section">
  <h2>Vérification manuelle</h2>

  <p>L'Objectif est de vérifier chacun des 8 points suivants pour chaque page de l'échantillon de test. Nous recommandons vivement, au préalable, de naviguer sur la totalité de la page via le lecteur d'écran car il s'agit d'un moyen concret de vérifier si le code sémantique et la navigation au clavier sont réellement conformes. Vous pouvez consulter notre <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs">mode d'emploi sur les lecteurs d'écran</a>.</p>

  <div className="alert">
    <p><strong>Notation :</strong> Au sein de la rapport de pre-audit, il faudra choisir entre <span className="highlight">"Conforme"</span>, <span className="highlight">"Non conforme"</span>, <span className="highlight">"Non applicable"</span>, <span className="highlight">"Dérogé"</span> ou <span className="highlight">"Non testé"</span> pour chacun des critères.</p>
    <p>Il est possible d'ajouter un commentaire pour expliciter les erreurs relevées, des recommandations ou d'éventuelles questions.</p>
  </div>
</div>

<div className="verification-card">
  <h2>1. Navigation au clavier</h2>

  <h4>Objectif:</h4>
  <p>S'assurer que toutes les parties sont entièrement navigables au clavier</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Naviguer via la touche Tab pour se déplacer, Shift+Tab pour revenir en arrière, Entrée/Espace/Flèches/etc. en fonction des composants.</li>
    <li>Tester tous les éléments interactifs : menus, menus déroulants, formulaires, liens, boutons, carrousels, fenêtres modales, etc. Concernant le comportement clavier pour les composants d'interface, se renseigner via les <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">patterns du W3C</a>.</li>
    <li>S'assurer que l'ordre de tabulation est cohérent.</li>
    <li>S'assurer que le focus du clavier reste visible et possède un contraste minimum de 3:1.</li>
    <li>Vérifier qu'aucun piège au clavier n'existe (boucle, etc.).</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Aucun</p>

  <div className="alert">
    <p><strong>Exemple :</strong> </p>
    <ul>
      <li>Vérifiez si un utilisateur peut remplir un formulaire de contact en utilisant uniquement les touches de tabulation.</li>
      <li>S'assurer que la navigation via les touches de tabulation reste uniquement au sein de la boîte de dialogue.</li>
    </ul>
  </div>
</div>

<div className="verification-card">
  <h2>2. Éléments visuels et déclenchements automatiques</h2>

  <h4>Objectif:</h4>
  <p>Vérifier que les animations, transitions et autres éléments visuels peuvent être arrêtés, mis en pause ou désactivés par l'utilisateur.</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Identifier tous les éléments animés, qui clignotent ou se mettent à jour automatiquement sur votre site.</li>
    <li>Vérifier que ces éléments peuvent être arrêtés ou mis en pause par l'utilisateur.</li>
    <li>S'assurer que la durée du mouvement est inférieure ou égale à 5 secondes s'il n'existe aucun moyen d'arrêter ou de masquer le contenu.</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Aucun</p>

  <div className="alert">
    <p><strong>Exemple :</strong> Un carrousel d'images doit pouvoir être arrêté par l'utilisateur.</p>
  </div>
</div>

<div className="verification-card">
  <h2>3. Pertinence des libellés et textes alternatifs</h2>

  <h4>Objectif:</h4>
  <p>Les libellés et textes alternatifs des images, liens, boutons doivent être explicite, clair et contextuel, en évitant les termes génériques comme "Logo", "Cliquez ici" ou "En savoir plus".</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Inspecter les images porteuses d'information et s'assurer qu'elles contiennent un alt pertinent (ou legend pour les balises picture)</li>
    <li>À l'inverse, s'assurer que seules les images de décoration sont ignorées par les technologies d'assistance (ex: aria-hidden="true")</li>
    <li>Vérifier que chaque lien ou bouton a un intitulé qui décrit clairement sa fonction ou sa destination.</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Pour les images, le plugin Assistant RGAA permet de mettre en évidence les images considérées avec ou sans alternative textuelle (catégorie 1). La catégorie 6 du même plugin permet de mettre en évidence les liens et liens images.</p>

  <div className="alert">
    <p><strong>Exemple :</strong></p>
    <ul>
      <li>Au lieu de "Cliquez ici", préférer "Télécharger le formulaire d'inscription (PDF, 1,2 Mo)"</li>
      <li>Pour une image d'un graphique présentant des données, l'attribut alt pourrait être : <code>alt="Graphique montrant l'évolution des ventes de 2019 à 2023 avec une augmentation de 20% en 2023"</code></li>
      <li>Ajouter un <code>`<span class="sr-only">Fermer le panier</span>`</code> au sein du bouton de l'icône croix de la boîte de dialogue.</li>
    </ul>
  </div>
</div>

<div className="verification-card">
  <h2>4. Formulaires</h2>

  <h4>Objectif:</h4>
  <p>Assurez-vous que tous les éléments d'un formulaire sont accessibles et compréhensibles pour les utilisateurs, y compris ceux qui utilisent des technologies d'assistance (lecteurs d'écran, commandes vocales, etc.).</p>

  <h4>Méthode de test: :</h4>

  <div className="verification-steps">
    <h5>1. Labels associés aux champs</h5>
    <ol>
      <li>Vérifier que chaque champ de formulaire a un label explicite et associé correctement, en utilisant les balises <code>&lt;label&gt;</code> avec l'attribut <code>for</code> correspondant à l'<code>id</code> du champ de saisie. Ce label ne devra pas disparaître au remplissage.</li>
      <li>Consulter <a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2">le critère RGAA 11.2</a> pour en savoir plus sur la pertinence d'une étiquette associée à un champ de formulaire.</li>
      <li>S'assurer que les étiquettes de champ sont accolées au champ, immédiatement au-dessous ou à droite pour les champ de type `checkbox` ou `radio`, immédiatement au-dessus ou à gauche pour les autres (cas d'un sens de lecture de langue de gauche à droite).</li>
    </ol>
    <div className="alert">
      <p><strong>Exemple :</strong> Pour un champ de saisie de nom, assurez-vous qu'il est bien associé à un label : <code>&lt;label for="nom"&gt;Nom :&lt;/label&gt; &lt;input type="text" id="nom"&gt;</code>.</p>
    </div>

    <h5>2. Aide à la saisie, messages d'erreur et validation</h5>
    <ol>
      <li>S'assurer que l'indication de champ obligatoire est visible et qu'il existe un attribut `required` (ou `aria-requied="true"`).</li>
      <li>Vérifier que les aides à la saisie et messages d'erreur sont clairement associés aux champs en cas de saisie incorrecte (annoncé au lecteur d'écran via un `aria-describedby` + ajout de la balise `aria-invalid="true"`).</li>
      <li>Tester que ces messages d'erreur sont visibles, compréhensibles et bien positionnés. Si nécessaire, le message d'erreur devra posséder une suggestion.</li>
    </ol>

    <h5>3. Groupes de champs</h5>
    <ol>
      <li>Vérifier que les champs de même nature sont regroupés via un `fieldset` ou un `role="group"` (par exemple, champs de type `checkbox` ou `radio`, numéro de sécurité social en 2 champs, etc.)</li>
      <li>S'assurer qu'une légende existe et est pertinente (`legend` si `fielset`; `aria-label` ou `aria-describedby` si `role="group"`).</li>
    </ol>

    <h5>4. Retour après soumission du formulaire</h5>
    <ol>
      <li>Tester la soumission du formulaire et vérifier le comportement en cas de succès. L'utilisateur doit être informé (changement de page, message de statut, etc.).</li>
      <li>Tester la soumission du formulaire et vérifier le comportement en cas d'erreur. L'utilisateur devra être redirigé, soit vers le premier champ en erreur, soit sur un message d'erreur global situé tout en haut du formulaire.</li>
    </ol>

    <h5>5. Remplissage automatique</h5>
    <ol>
      <li>Inspecter les champs de formulaire afin de vérifier la présence de l'attribut `autocomplete` et sa pertinence (s'appuyer sur la <a href="https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete">liste des valeurs possibles pour l’attribut autocomplete du site officiel <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></a>)</li>
      <li>Tester la soumission du formulaire et vérifier le comportement en cas d'erreur. L'utilisateur devra être redirigé, soit vers le premier champ en erreur, soit sur un message d'erreur global situé tout en haut du formulaire.</li>
    </ol>
  </div>

  <h4>Outil éventuel:</h4>
  <p>Utilisation du lecteur d'écran pour vérifier la navigation et l'accessibilité des formulaires, tel que l'indication du caractère obligatoire du champ, la liaison du champ aux aides à la saisie ainsi qu'aux messages d'erreurs, le comportement à la soumission du formulaire, etc.</p>

   <h4>Ressources</h4>
   <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module6/forms-concepts-fr.html">Concepts des formulaires</a></p>
</div>

<div className="verification-card">
  <h2>5. Tableaux</h2>

  <h4>Objectif:</h4>
  <p>Vérifier que les tableaux de données sont bien structurés</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>S'assurer que les titres des tableaux de données sont sémantiquement rattachés au tableau et sont pertinents.</li>
    <li>S'assurer que tableaux de données complexes (en-têtes n'étant pas qu'en une seule ligne ou une seule colonne) possèdent un résumé pertinent.</li>
    <li>Vérifiez que les cellules d'en-tête sont correctement déclarées avec des balises <code>&lt;th&gt;</code> et non des balises <code>&lt;td&gt;</code> stylisées.</li>
    <li>Assurez-vous que les tableaux complexes ont des attributs <code>scope</code> ou des associations entre cellules d'en-tête et cellules de données.</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Inspecteur de code</p>

  <div className="alert">
    <p><strong>Exemple :</strong> </p>
    <ul>
      <li>Le tableau a un titre visible pertinent "Effectif et densité de professionnels de santé libéraux par région - 2016 à 2023" qui est rattaché sémantiquement au tableau via la balise `caption` (ou l'attribut `aria-labelledby`).</li>
      <li>Les en-têtes de colonnes des tableaux utilisent des balises `th` avec l'attribut `scope="col"`.</li>
    </ul>
  </div>
  <h4>Ressources</h4>
   <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module4/tables-concepts-fr.html">Concepts des tableaux</a></p>
</div>

<div className="verification-card">
  <h2>6. Langue</h2>
  <h4>Objectif:</h4>
  <p>Permettre aux lecteurs d’écran d’utiliser la bonne prononciation.</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Inspectez le code source de la page (clic droit > "Inspecter" dans le navigateur) et vérifiez que l’attribut `lang="fr"` (ou la langue correspondante) est bien présent dans l’élément `<html>`. S’il s’agit d’une autre langue, elle doit être pertinente ([voir documentation MDN sur l’attribut lang](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/lang))</li>
    <li>Repérer les mots/phrases dans une autre langue au sein de la page et vérifier l'existence et la valeur de l’attribut <code>lang</code>.</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Inspecteur de code</p>

  <div className="alert">
    <p><strong>Exemple :</strong> Si votre site est en français, l'élément `<html>` devrait être : `<html lang="fr">`.</p>
  </div>
</div>

<div className="verification-card">
  <h2>7. Titre de la page et hiérarchie des titres</h2>

  <h4>Objectif:</h4>
  <p>Vérifier que la page possède un titre descriptif, unique et pertinent. De plus, s'assurer que la structure des titres au sein de la page est cohérente.</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Identifier si le titre affiché dans l'onglet du navigateur est pertinent.</li>
    <li>Le contenu de la page devra avoir au moins un titre.</li>
    <li>Analyser les balises de <code>h1</code> à <code>h6</code> en vérifiant la pertinence et la structure (aucun saut de niveau).</li>
    <li>S'assurer que les titres sont sémantiquement correctes (présence d'une balise <code>hx</code> ou balises <code>role="heading" aria-level="x"</code></li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Extension HeadingsMap (<a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-introduction--docs">voir la page des outils</a>)</p>

  <div className="alert">
    <p><strong>Exemple :</strong></p>
    <ul>
      <li>Le titre de la page sur un annuaire pourrait être "Annuaire (page 1 sur 5) - [Nom du service]" et non "Page 1".</li>
      <li>Les titres "Logement", "Véhicule" et "Emploi" doivent être un sous-niveau du titre "Aides financières".</li>
    </ul>
  </div>
</div>

<div className="verification-card">
  <h2>8. Contenus multimédia</h2>

  <h4>Objectif:</h4>
  <p>Vérifier que les vidéos et autres contenus multimédia temporels possèdent, si nécessaire, une transcription textuelle, une audiodescription synchronisée et/ou des sous-titres synchronisés. Concernant les médias non temporels, s'assurer qu'ils possèdent une alternative ou sont accessibles par le clavier et tout dispositif de pointage.</p>
  <h4>Méthode de test:</h4>
  <ol>
    <li>Écouter les vidéos sans regarder l’écran et statuer sur la pertinence de l'audiodescription.</li>
    <li>Lire une vidéo avec sous-titres activés et statuer sur leur pertinence.</li>
    <li>Vérifier que toute transcription textuelle exprime tout ce qui est retranscrit oralement et suivent la chronologie du média.</li>
    <li>S'assurer que tout son déclenché automatiquement peut, soit être stoppé, soit contrôlé indépendemment du volume, soit possède une durée inféreure ou égale à 3 secondes.</li>
  </ol>
  <h4>Outil éventuel:</h4>
  <p>Aucun</p>
  <h4>Ressources</h4>
  <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module9/introduction-fr.html">Concepts des contenus multimédia</a></p>
</div>

<div className="info-section">
  <h2>Conclusion</h2>

  <p>En suivant ces vérifications manuelles et automatisées, vous pourrez atteindre un premier niveau de conformité d'accessibilité pour votre service web. N'hésitez pas à documenter vos résultats et à solliciter de l'aide si nécessaire.</p>

  <div className="alert">
    <p><strong>Rappel :</strong> Complétez <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">le fichier de rapport de pre-audit</a> pour chaque page de votre échantillon afin de prouver votre niveau de conformité.</p>
  </div>
</div>