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

<Meta title="Accessibilité/Kit de pré-audit/Outils/Lecteurs d'écran"/>

<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 */
    .screen-reader-page {
      font-family: 'Roboto', sans-serif;
      color: #333;
      line-height: 1.6;
      max-width: 1200px;
      margin: 0 auto;
    }
    
          
    
    /* Sections */
    .screen-reader-section {
      background: white;
      border-radius: var(--border-radius-lg);
      padding: 2rem;
    }
    
    
    .screen-reader-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;
    }
    
    .screen-reader-section h2::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 80px;
      height: 3px;
    }
    
    .screen-reader-section h3 {
      color: var(--primary-color);
      font-size: 1.5rem;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      position: relative;
      padding-bottom: 0.75rem;
    }
    
    .screen-reader-section h3::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 80px;
      height: 4px;
      border-radius: 3px;
    }
    
    /* Info box */
    .screen-reader-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 */
    .screen-reader-link {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 500;
      position: relative;
    }
    
    .screen-reader-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
    }
    
    .screen-reader-link:hover {
      color: var(--secondary-color);
    }
    
    .screen-reader-link:hover::after {
      transform: scaleX(1);
    }
    
    /* Cards */
    .screen-reader-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .screen-reader-card {
      background: white;
      border-radius: var(--border-radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      margin-bottom: 2rem;
    }
  
    
    .screen-reader-card-header {
      padding: 1.5rem;
      background: var(--primary-color);
      color: white;
    }
    
    .screen-reader-card-header h3 {
      margin: 0;
      color: white;
      position: relative;
    }
    
    .screen-reader-card-body {
      padding: 1.5rem;
      flex-grow: 1;
    }
    
    .screen-reader-card-footer {
      padding: 1rem 1.5rem;
      background: #f8f9fa;
      border-top: 1px solid #eee;
    }
    
    /* Shortcuts */
    .shortcut-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 0.75rem;
      margin: 1rem 0;
      padding: 0;
    }
    
    .shortcut-item {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 0.4rem;
      padding: 0.85rem 1rem;
      background-color: #fff;
      border: 1px solid #eaeaea;
      border-radius: 8px;
    }
    
    .shortcut-key {
      background: #eee;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 0.25rem 0.5rem;
      font-family: monospace;
      margin-right: 1rem;
      min-width: 100px;
      text-align: center;
      font-weight: bold;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    .shortcut-desc {
      flex-grow: 1;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .screen-reader-header {
        padding: 1.5rem;
      }
      
      .screen-reader-header h1 {
        font-size: 2rem;
      }
      
      .screen-reader-section {
        padding: 1.5rem;
      }
      
      .screen-reader-cards {
        grid-template-columns: 1fr;
      }
    }
    
    /* Accessibilité */
    @media (prefers-reduced-motion: reduce) {
      .screen-reader-section,
      .screen-reader-card,
      .screen-reader-link::after {
        transition: none;
      }
      
      .screen-reader-section:hover,
      .screen-reader-card:hover {
        transform: none;
      }
    }
  `}
</style>

<div className="screen-reader-page">
  <div className="header">
    <h1>Guide lecteurs d'écran</h1>
    <p>Comprendre et utiliser les lecteurs d'écran pour tester l'accessibilité de vos interfaces</p>
  </div>

  <div className="screen-reader-section">
    <h2>Introduction</h2>
    <p>
      Ce guide ne vise pas à vous former à l'utilisation quotidienne d'un lecteur d'écran, mais à vous fournir les informations nécessaires pour évaluer l'accessibilité des composants intégrés dans votre service.
    </p>
    
    <div className="screen-reader-info">
      <p>
        <strong>Rappel important :</strong> Les lecteurs d'écran sont des outils essentiels pour les personnes en situation de handicap visuel. Comprendre leur fonctionnement est crucial pour créer des interfaces véritablement accessibles.
      </p>
    </div>
  </div>
  <div className="screen-reader-section">
    <h2>Qu'est-ce qu'un lecteur d'écran ?</h2>
    
    <div className="screen-reader-cards">
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>Définition</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>
            Un lecteur d'écran est un logiciel d'assistance technique destiné aux personnes « empêchées de lire » (aveugles, malvoyantes, dyslexiques, dyspraxiques…) en transformant le contenu affiché à l'écran en synthèse vocale ou braille.
          </p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>Fonctionnement</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>
            Il permet de naviguer dans le système d'exploitation et les applications en restituant le contenu textuel et sa structure, à condition que cette information soit correctement fournie par le logiciel (par exemple, le navigateur web).
          </p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>Limitations</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>
            Il ne peut pas interpréter des éléments non textuels comme des images ou des graphiques. C'est pourquoi le respect des normes d'accessibilité est important afin que la restitution puisse se faire correctement (ex : ajout d'un texte alternatif à une image).
          </p>
        </div>
      </div>
    </div>
    
    <p>
      Le lecteur d'écran bureau se pilote principalement au clavier tandis que c'est essentiellement avec des gestes pour la version mobile.
    </p>
    
    <p>
      Il n'existe pas de lecteur d'écran unique et ils different en fonction du système d'exploitation. Ce guide se concentrera sur NVDA pour Windows et TalkBack pour Android.
    </p>
  </div>

  <div className="screen-reader-section">
    <h2>Utilité d'un lecteur d'écran</h2>
    
    <p>
      Un lecteur d'écran est essentiel pour un audit d'accessibilité car il permet de simuler l'expérience d'un utilisateur aveugle ou malvoyant. Il aide à :
    </p>
    
    <div className="screen-reader-cards">
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>1. Vérifier la structure</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>Tester la logique de navigation (titres, sections, éléments interactifs).</p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>2. Tester l'interactivité</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>S'assurer que les éléments sont accessibles via le clavier et correctement annoncés.</p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>3. Vérifier les mises à jour</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>S'assurer que les changements de contenu dynamiques sont bien signalés.</p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>4. Contrôler le balisage</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>Vérifier l'utilisation correcte des balises HTML et ARIA pour une navigation fluide.</p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>5. Accessibilité multimédia</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>Vérifier que les images et vidéos sont correctement décrites.</p>
        </div>
      </div>
    </div>
    
    <div className="screen-reader-info">
      <p>
        Cela garantit que l'interface est réellement accessible, permettant une navigation autonome pour les utilisateurs en situation de handicap visuel. N'oubliez pas de consulter les manuels officiels pour des informations détaillées sur l'utilisation de chaque outil.
      </p>
    </div>
  </div>
  <div className="screen-reader-section">
    <h2>NVDA (Windows)</h2>
    
    <div className="screen-reader-card" style={{ maxWidth: "100%" }}>
      <div className="screen-reader-card-header">
        <h3>Présentation</h3>
      </div>
      <div className="screen-reader-card-body">
        <p>
          NVDA est un lecteur d'écran pour Windows, principalement utilisé pour l'audit d'accessibilité de sites web et d'applications bureautiques.
        </p>
        <p>
          Il restitue l'information sous 2 modes : le mode navigation et le mode formulaire.
        </p>
      </div>
    </div>
    
    <div className="screen-reader-cards">
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>Mode navigation</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>
            Le mode de navigation permet de se déplacer dans le contenu d'une page (titres, liens, paragraphes, etc.)
          </p>
          <p>
            Il fournit des informations supplémentaires lors de la vocalisation. Par exemple, il annoncera "liste de x éléments" pour une liste à puces ou encore le niveau des titres, comme "titre de niveau 2", suivi de leur intitulé.
          </p>
        </div>
      </div>
      
      <div className="screen-reader-card">
        <div className="screen-reader-card-header">
          <h3>Mode formulaire</h3>
        </div>
        <div className="screen-reader-card-body">
          <p>
            Le mode formulaire est utilisé pour interagir avec des éléments de formulaire (champs de texte, cases à cocher, boutons, etc.) et y entrer des données. Le lecteur d'écran passe sur ce mode automatiquement lorsqu'il se trouve être sur un composant interactif. Les "raccourcis lettre" ne fonctionnent alors plus puisqu'ils servent à insérer du texte.
          </p>
        </div>
      </div>
    </div>
    
    <h3>Principaux raccourcis</h3>
          <p>
        Pour plus de détails, consultez <a href="https://www.nvda.fr/doc.php" className="screen-reader-link" target="_blank" rel="noopener noreferrer">le manuel officiel NVDA</a> ainsi que <a href="https://www.tanaguru.com/guide-et-raccourcis-nvda-pour-les-tests-daccessibilite/" className="screen-reader-link" target="_blank" rel="noopener noreferrer">le guide de Tanaguru</a>.
      </p>
    
    <div className="shortcut-list">
      <div className="shortcut-item">
        <span className="shortcut-key">CTRL + ALT + n</span>
        <span className="shortcut-desc">Activer NVDA</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">NVDA + q</span>
        <span className="shortcut-desc">Quitter NVDA</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">CTRL</span>
        <span className="shortcut-desc">Arrêt de la parole</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Flèche bas</span>
        <span className="shortcut-desc">Élément suivant</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Flèche haut</span>
        <span className="shortcut-desc">Élément précédent</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Tab</span>
        <span className="shortcut-desc">Élément focusable suivant</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Maj + Tab</span>
        <span className="shortcut-desc">Élément focusable précédent</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">h</span>
        <span className="shortcut-desc">Titre suivant</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">f</span>
        <span className="shortcut-desc">Champ de formulaire suivant</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">k</span>
        <span className="shortcut-desc">Lien suivant</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">d</span>
        <span className="shortcut-desc">Région suivante</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">MAJ + lettre</span>
        <span className="shortcut-desc">Revenir en arrière</span>
      </div>
    </div>
    
  </div>

  <div className="screen-reader-section">
    <h2>TalkBack (Android)</h2>
    
    <div className="screen-reader-card" style={{ maxWidth: "100%" }}>
      <div className="screen-reader-card-header">
        <h3>Présentation</h3>
      </div>
      <div className="screen-reader-card-body">
        <p>
          TalkBack est un lecteur d'écran pour Android, directement embarqué.
        </p>
        <p>
          Pour l'activer ou le désactiver, il suffit de se rendre dans les paramètres de votre appareil puis dans le menu "Accessibilité". Un tutoriel d'utilisation vous sera alors proposé au démarrage. C'est à cet endroit que vous pouvez personnaliser l'outil tel que la vitesse de la parole, la tonalité, les gestes, etc.
        </p>
      </div>
    </div>
    
    <h3>Principaux gestes</h3>
    <p>Ce lecteur d'écran utilise des gestes spécifiques pour naviguer dans l'interface. Voici les principaux gestes :</p>
          <p>
        Pour plus de détails, consultez <a href="https://support.google.com/accessibility/android/answer/6283677?hl=fr" className="screen-reader-link" target="_blank" rel="noopener noreferrer">le manuel officiel TalkBack</a>.
      </p>
    <div className="shortcut-list">
      <div className="shortcut-item">
        <span className="shortcut-key">Glisser 1 doigt</span>
        <span className="shortcut-desc">Déplacer le focus entre les éléments à l'écran</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Toucher + Double-tap</span>
        <span className="shortcut-desc">Sélectionner un élément (toucher pour entendre sa description, puis double-taper pour l'activer)</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Balayer 2 doigts</span>
        <span className="shortcut-desc">Faire défiler l'écran vers le haut ou vers le bas</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Glisser 3 doigts</span>
        <span className="shortcut-desc">Revenir en arrière</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Double-tap + maintenir</span>
        <span className="shortcut-desc">Ouvrir le menu contextuel des options (copier, coller, etc.)</span>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-key">Appuyer avec 2 doigts</span>
        <span className="shortcut-desc">Suspendre ou reprendre la lecture</span>
      </div>
    </div>
    

  </div>
</div>
