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

<Meta title="Accessibilité/Kit de pré-audit/Outils/Tanaguru/Utilisation"/>

<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;
    }
    
       
    
    /* Sections */
    .tanaguru-section {
      margin-bottom: 3rem;
      background: white;
      border-radius: var(--border-radius-lg);
      padding: 2rem;
    }
  
    
    .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;
            

    }
    
    /* Images */
    .tanaguru-image {
      border-radius: var(--border-radius-md);
      overflow: hidden;
      margin: 1.5rem 0;
      max-width: 100%;
      border: 1px solid #eaeaea;
      padding: 0.5rem;
      background-color: #fff;
    }
    
    .tanaguru-image img {
      width: 100%;
      display: block;
      padding: 2rem !important;
      border: none !important;
    }
    
    /* Étapes */
    .tanaguru-step {
      margin-bottom: 2rem;
      padding-left: 3rem;
      position: relative;
    }
    
    .tanaguru-step-number {
      position: absolute;
      left: 0;
      top: 0;
      width: 1.75rem;
      height: 1.75rem;
      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;
    }
    
    .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;
    }

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

<div className="tanaguru-page">
  <div className="header">
    <h1>Tanaguru</h1>
    <p>Un outil d'audit d'accessibilité puissant pour évaluer la conformité RGAA de vos sites web</p>
  </div>

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

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

