R513-Economie-durable-et-num-rique/src/pages/Accessibility.jsx

import React from 'react'
import './SharedPages.css'

function Accessibility() {
  return (
    <div className="shared-page">
      <header className="page-header">
        <i className="fas fa-universal-access"></i>
        <h1>Principes de l'Accessibilité Web</h1>
        <p className="subtitle">Vers un numérique inclusif</p>
      </header>

      <section className="content-section">
        <h2><i className="fas fa-question-circle"></i> Qu'est-ce que l'accessibilité numérique ?</h2>
        <p>
          L'accessibilité numérique consiste à rendre les sites web et applications utilisables par tous, 
          <strong> y compris les personnes en situation de handicap</strong>. Cela englobe les handicaps visuels, 
          auditifs, moteurs, cognitifs et temporaires.
        </p>
        <div className="stats-grid" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', marginTop: '2rem'}}>
          <div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--primary), var(--secondary))', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>15%</div>
            <div>de la population mondiale vit avec un handicap</div>
          </div>
          <div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--info), #52b788)', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>1 Md</div>
            <div>de personnes dans le monde</div>
          </div>
          <div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--warning), #ffc107)', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>70%</div>
            <div>des sites ne sont pas accessibles</div>
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-users"></i> Types de handicaps concernés</h2>
        <div className="disabilities-grid" style={{display: 'grid', gap: '1.5rem'}}>
          {[
            {
              type: 'Handicap visuel',
              icon: 'fa-eye-slash',
              examples: 'Cécité, malvoyance, daltonisme',
              needs: 'Lecteurs d\'écran, contrastes élevés, alternatives textuelles',
              color: '#2d6a4f'
            },
            {
              type: 'Handicap auditif',
              icon: 'fa-deaf',
              examples: 'Surdité, malentendance',
              needs: 'Sous-titres, transcriptions textuelles, langue des signes',
              color: '#52b788'
            },
            {
              type: 'Handicap moteur',
              icon: 'fa-wheelchair',
              examples: 'Mobilité réduite, tremblements, paralysie',
              needs: 'Navigation au clavier, zones cliquables larges, commandes vocales',
              color: '#74c69d'
            },
            {
              type: 'Handicap cognitif',
              icon: 'fa-brain',
              examples: 'Dyslexie, TDAH, troubles de la mémoire',
              needs: 'Langage simple, navigation claire, temps de lecture adaptable',
              color: '#95d5b2'
            },
            {
              type: 'Handicap temporaire',
              icon: 'fa-band-aid',
              examples: 'Bras cassé, conjonctivite, environnement bruyant',
              needs: 'Adaptabilité, multi-modalité',
              color: '#b7e4c7'
            }
          ].map((disability, index) => (
            <div key={index} style={{
              padding: '1.5rem',
              background: 'var(--bg)',
              borderRadius: '8px',
              borderLeft: `4px solid ${disability.color}`,
              display: 'grid',
              gap: '0.75rem'
            }}>
              <h3 style={{margin: 0, display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--primary-dark)'}}>
                <i className={`fas ${disability.icon}`} style={{color: disability.color}}></i>
                {disability.type}
              </h3>
              <div>
                <strong>Exemples :</strong> {disability.examples}
              </div>
              <div>
                <strong>Besoins :</strong> {disability.needs}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-balance-scale"></i> WCAG : Les 4 principes fondamentaux</h2>
        <p style={{marginBottom: '2rem'}}>
          Les <strong>Web Content Accessibility Guidelines (WCAG)</strong> définissent 4 principes universels pour l'accessibilité web, 
          repris par le RGAA français :
        </p>
        
        <div className="principles-grid" style={{display: 'grid', gap: '2rem'}}>
          <div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #2d6a4f'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'linear-gradient(135deg, #2d6a4f, #52b788)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: '1.5rem',
                fontWeight: 'bold'
              }}>1</div>
              <h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Perceptible</h3>
            </div>
            <p><strong>Les utilisateurs doivent pouvoir percevoir l'information</strong></p>
            <ul>
              <li>Fournir des alternatives textuelles aux contenus non textuels (images, vidéos)</li>
              <li>Assurer des contrastes suffisants (au moins 4.5:1 pour le texte)</li>
              <li>Ne pas se fier uniquement à la couleur pour transmettre l'information</li>
              <li>Rendre le contenu adaptable (responsive, redimensionnable)</li>
            </ul>
            <div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
              <strong>Exemple :</strong> Une image doit avoir un attribut <code>alt</code> descriptif pour les lecteurs d'écran.
            </div>
          </div>

          <div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #52b788'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'linear-gradient(135deg, #52b788, #74c69d)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: '1.5rem',
                fontWeight: 'bold'
              }}>2</div>
              <h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Utilisable</h3>
            </div>
            <p><strong>Les utilisateurs doivent pouvoir utiliser l'interface</strong></p>
            <ul>
              <li>Toutes les fonctionnalités accessibles au clavier (sans souris)</li>
              <li>Laisser suffisamment de temps pour lire et utiliser le contenu</li>
              <li>Ne pas utiliser d'éléments susceptibles de provoquer des crises (flashs)</li>
              <li>Fournir des aides à la navigation (menu, fil d'Ariane, liens d'évitement)</li>
            </ul>
            <div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
              <strong>Exemple :</strong> Un menu déroulant doit être navigable avec les flèches du clavier et la touche Entrée.
            </div>
          </div>

          <div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #74c69d'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'linear-gradient(135deg, #74c69d, #95d5b2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: '1.5rem',
                fontWeight: 'bold'
              }}>3</div>
              <h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Compréhensible</h3>
            </div>
            <p><strong>Les utilisateurs doivent pouvoir comprendre l'information et l'interface</strong></p>
            <ul>
              <li>Rendre le texte lisible et compréhensible (langage simple, abréviations expliquées)</li>
              <li>Faire en sorte que les pages fonctionnent de manière prévisible</li>
              <li>Aider les utilisateurs à éviter et corriger les erreurs (validation de formulaires claire)</li>
              <li>Fournir des instructions claires et des labels explicites</li>
            </ul>
            <div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
              <strong>Exemple :</strong> Un message d'erreur de formulaire doit expliquer clairement le problème et comment le corriger.
            </div>
          </div>

          <div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #95d5b2'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'linear-gradient(135deg, #95d5b2, #b7e4c7)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: '1.5rem',
                fontWeight: 'bold'
              }}>4</div>
              <h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Robuste</h3>
            </div>
            <p><strong>Le contenu doit être compatible avec les technologies actuelles et futures</strong></p>
            <ul>
              <li>Utiliser du HTML valide et sémantique</li>
              <li>Assurer la compatibilité avec les technologies d'assistance (lecteurs d'écran)</li>
              <li>Utiliser ARIA (Accessible Rich Internet Applications) quand nécessaire</li>
              <li>Tester avec différents navigateurs et technologies d'assistance</li>
            </ul>
            <div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
              <strong>Exemple :</strong> Utiliser les balises sémantiques <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code> plutôt que des <code>&lt;div&gt;</code> génériques.
            </div>
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-flag-checkered"></i> Le RGAA : Référentiel français</h2>
        <div className="info-card">
          <div className="info-row">
            <strong>Nom complet:</strong>
            <span>Référentiel Général d'Amélioration de l'Accessibilité</span>
          </div>
          <div className="info-row">
            <strong>Créé par:</strong>
            <span>DINUM (Direction Interministérielle du Numérique)</span>
          </div>
          <div className="info-row">
            <strong>Base:</strong>
            <span>WCAG 2.1 (adapté au contexte français)</span>
          </div>
          <div className="info-row">
            <strong>Version actuelle:</strong>
            <span>RGAA 4.1 (2021)</span>
          </div>
          <div className="info-row">
            <strong>Obligation légale:</strong>
            <span>Services publics, entreprises > 250M€ CA</span>
          </div>
        </div>

        <div style={{marginTop: '2rem'}}>
          <h3>Les 13 thèmes du RGAA</h3>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '0.75rem', marginTop: '1rem'}}>
            {[
              'Images', 'Cadres', 'Couleurs', 'Multimédia', 'Tableaux', 'Liens',
              'Scripts', 'Éléments obligatoires', 'Structuration', 'Présentation',
              'Formulaires', 'Navigation', 'Consultation'
            ].map((theme, index) => (
              <div key={index} style={{
                padding: '0.75rem',
                background: 'var(--primary)',
                color: 'white',
                borderRadius: '4px',
                textAlign: 'center',
                fontSize: '0.9rem',
                fontWeight: '500'
              }}>
                {theme}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-hands-helping"></i> Bénéfices de l'accessibilité</h2>
        <div className="benefits-grid" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem'}}>
          <div style={{padding: '1.5rem', background: '#d4edda', borderRadius: '8px', borderLeft: '4px solid var(--success)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-users"></i> Social & Éthique
            </h4>
            <ul style={{marginBottom: 0}}>
              <li>Inclusion de tous les utilisateurs</li>
              <li>Respect des droits fondamentaux</li>
              <li>Image responsable</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: '#cfe2ff', borderRadius: '8px', borderLeft: '4px solid var(--info)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-chart-line"></i> Business
            </h4>
            <ul style={{marginBottom: 0}}>
              <li>Élargissement de l'audience (+15%)</li>
              <li>Amélioration du SEO</li>
              <li>Réduction du taux de rebond</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: '#fff3cd', borderRadius: '8px', borderLeft: '4px solid var(--warning)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-gavel"></i> Légal
            </h4>
            <ul style={{marginBottom: 0}}>
              <li>Conformité réglementaire</li>
              <li>Éviter les sanctions</li>
              <li>Anticipation des obligations</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: '#d1ecf1', borderRadius: '8px', borderLeft: '4px solid #0dcaf0'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-code"></i> Technique
            </h4>
            <ul style={{marginBottom: 0}}>
              <li>Code plus robuste et maintenable</li>
              <li>Meilleure compatibilité</li>
              <li>Performance améliorée</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-tools"></i> Bonnes pratiques essentielles</h2>
        <div className="best-practices" style={{display: 'grid', gap: '1rem'}}>
          {[
            {
              practice: 'Ajouter des attributs alt aux images',
              code: '<img src="logo.png" alt="Logo de l\'organisation">',
              impact: 'Essentiel pour les lecteurs d\'écran'
            },
            {
              practice: 'Assurer un contraste suffisant',
              code: 'Ratio minimum 4.5:1 pour texte normal, 3:1 pour texte large',
              impact: 'Lisibilité pour malvoyants et daltoniens'
            },
            {
              practice: 'Structurer avec des titres hiérarchiques',
              code: '<h1>, <h2>, <h3>... sans sauter de niveau',
              impact: 'Navigation et compréhension de la structure'
            },
            {
              practice: 'Rendre les formulaires accessibles',
              code: '<label for="email">Email</label><input id="email" type="email">',
              impact: 'Association claire label/champ'
            },
            {
              practice: 'Navigation au clavier',
              code: 'tabindex, focus visible, touches Entrée/Échap fonctionnelles',
              impact: 'Utilisateurs sans souris'
            },
            {
              practice: 'Utiliser ARIA avec prudence',
              code: 'role="navigation", aria-label="Menu principal"',
              impact: 'Enrichir la sémantique pour technologies d\'assistance'
            }
          ].map((item, index) => (
            <div key={index} style={{
              padding: '1.5rem',
              background: 'var(--bg)',
              borderRadius: '8px',
              borderLeft: '4px solid var(--primary)'
            }}>
              <h4 style={{marginTop: 0, color: 'var(--primary-dark)'}}>{item.practice}</h4>
              <div className="formula">
                <code>{item.code}</code>
              </div>
              <p style={{margin: '0.5rem 0 0 0', color: 'var(--text-light)', fontSize: '0.9rem'}}>
                <strong>Impact :</strong> {item.impact}
              </p>
            </div>
          ))}
        </div>
      </section>

      <div className="conclusion-banner">
        <i className="fas fa-check-circle"></i>
        <div>
          <strong>L'accessibilité, c'est pour tout le monde</strong>
          <p>Un site accessible est plus utilisable, plus performant, mieux référencé et conforme à la loi. 
          L'accessibilité n'est pas une contrainte, c'est une opportunité d'améliorer l'expérience de tous les utilisateurs.</p>
        </div>
      </div>
    </div>
  )
}

export default Accessibility