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

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

<style>
{
`
      
  
  .key-element {
    background-color: #f8f9fa;
    border-left: 4px solid #0c419a;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .key-element h3 {
    color: #0c419a;
    margin-top: 0;
  }
  
  .info-section {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 8px;
  }
  
  .info-section h2 {
    padding-bottom: 0.5rem;
    margin-top: 0;
  }
  
  .contact-card {
    background-color: #f0f7ff;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
  }
  
  .resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .resource-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .resource-card h3 {
    margin-top: 0;
    color: #0c419a;
  }
  
  .resource-card a {
    margin-top: auto;
    text-decoration: none;
    font-weight: 500;
    color: #0c419a;
  }
  
  .alert {
    background-color: #e3e8f2;
    border-left: 4px solid #0c419a;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
  }
  
  .alert-title {
    color: #0c419a;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
  }
  
  .process-steps {
    counter-reset: step;
    margin: 2rem 0;
  }
  
  .process-step {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
  }
  
  .environment-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1.5rem;
    margin: 2rem 0;
  }

      .info-section h2::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 80px;
      height: 4px;
      border-radius: 3px;
    }

    .section-container h2::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 80px;
      height: 4px;
      
      border-radius: 3px;
    }

      .info-section h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-top: 0;
    color: #0c419a;
    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;
  }

  h2 {
    margin-top: 2rem;
    color: #0c419a !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
  }
`
}
</style>

<div className="header">
  <h1>Pré-audit à l'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>Le kit de pré-audit peut être utilisé de deux façons :</p>

<ul>
  <li>
    <strong>Préparer un audit :</strong> en identifiant en amont un maximum de non-conformités. Il permet d’obtenir un premier niveau d’évaluation de l’accessibilité de votre service web avant la réalisation d’un audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>, sans viser l’exhaustivité ni un score final de conformité.
  </li>
  <li>
    <strong>Vérifier en continu :</strong> s'assurer tout au long du développement, qu’un niveau intermédiaire d’accessibilité est bien respecté, réduisant ainsi le risque de non-conformité lors de l'audit officiel.
  </li>
</ul>

  <p>
    La démarche est réalisée <b>en autonomie par l’équipe de développement</b>. Le kit guide l’auto-évaluation et permet d'identifier les anomalies. La correction doit être effectuée par l'équipe.
  </p>

  <p>
    Une fois les corrections apportées, l'équipe doit restituer la bonne conformité dans le rapport de pré-audit. Le rapport de pré-audit ne détermine pas de score puisque seul l'audit peut le faire. Néanmoins, par hypothèse, nous estimons qu'un projet peut atteindre le seuil de conformité partielle du RGAA {'>'}50%.
  </p>

  <p>
    Dans le cadre d'un objectif de conformité totale (100%) du RGAA, un processus d'audit peut être engagé. Le Kit de pré-audit ne permet pas seul d'atteindre le 100%.
  </p>
  <p>
    L’enjeu est d’identifier le plus tôt possible un maximum de non-conformités afin de réduire le volume de correctifs à traiter lors de l’audit. Le kit met également à disposition <b>des outils et des tutoriels pour vous accompagner dans cette démarche</b>.
  </p>

  <div className="alert">
    <p>
      <strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques dans la résolution des non-conformités relevées, que ce soit par Tanaguru lors des tests automatiques ou par l’équipe lors des vérifications manuelles.
    </p>
  </div>
</div>

<div className="section-container">
  <h2>Environnement de test (pré-audit, audit, contre-audit)</h2>
  <p>Il est important de tester votre service dans un environnement similaire à celui utilisé par les utilisateurs finaux. <b>L'environnement de test sera le même pour chacune des phases (pré-audit, audit, contre-audit) et devra être stable. Aucune nouvelle fonctionnalité ne doit être développée entre chaque phase.</b> 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>
      <p>Si l'outil cible un public utilisant des terminaux de bureau :</p>
      <ul>
        <li>Système d'exploitation : Windows</li>
        <li>Navigateur : Firefox (mentionner la version)</li>
        <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>
      <ul>
        <li>Système d'exploitation : Android</li>
        <li>Navigateur : Chrome (mentionner la version)</li>
        <li>Lecteur d'écran : TalkBack (dernière version)</li>
      </ul>
    </div>
  </div>
</div>

<div className="section-container">
  <h2>Livrables</h2>

  <p> A l'issue du pré-audit, nous attendons les éléments suivants :</p>

  <div className="resources-grid">
    <div className="resource-card">
      <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>
    </div>

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