/* ❌ Mauvais contraste */
.text-secondary {
  color: #999999; /* Contraste 2.85:1 sur blanc */
}

/* ✅ Bon contraste */
.text-secondary {
  color: #666666; /* Contraste 4.54:1 sur blanc */
}

/* Variables CSS pour cohérence */
:root {
  --text-primary: #1a1a1a;     /* 16.04:1 */
  --text-secondary: #4a4a4a;   /* 8.17:1 */
  --text-muted: #666666;       /* 4.54:1 */
  
  /* Dark mode */
  --bg-dark: #1a1a1a;
  --text-dark-primary: #ffffff;   /* 16.04:1 */
  --text-dark-secondary: #cccccc; /* 7.73:1 */
}

// Extension automatique avec Axe-core
import axe from '@axe-core/react';

if (process.env.NODE_ENV === 'development') {
  axe(React, ReactDOM, 1000);
}

// Test Playwright pour CI/CD
import { test, expect } from '@playwright/test';

test('should have good color contrast', async ({ page }) => {
  await page.goto('/');
  const violations = await page.evaluate(() => {
    return axe.run({ tags: ['wcag2aa'] });
  });
  
  expect(violations.violations).toHaveLength(0);
});

<!-- ❌ Navigation illogique -->
<nav>
  <a href="/home" tabindex="3">Accueil</a>
  <a href="/about" tabindex="1">À propos</a>
  <a href="/contact" tabindex="2">Contact</a>
</nav>

<!-- ✅ Navigation naturelle -->
<nav>
  <a href="/home">Accueil</a>
  <a href="/about">À propos</a>
  <a href="/contact">Contact</a>
</nav>

/* Supprimer l'outline par défaut SEULEMENT si on en recrée un */
:focus {
  outline: none; /* ❌ Jamais seul ! */
}

/* ✅ Focus visible moderne */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus pour éléments interactifs */
.button:focus-visible,
.link:focus-visible {
  box-shadow: 
    0 0 0 2px var(--background),
    0 0 0 4px var(--color-primary);
}

/* Focus pour inputs */
input:focus-visible,
textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

<!-- Skip link en première position -->
<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

<nav aria-label="Navigation principale">
  <!-- Navigation -->
</nav>

<main id="main-content">
  <!-- Contenu principal -->
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

<!-- ❌ Alt générique -->
<img src="chart.png" alt="graphique" />

<!-- ✅ Alt descriptif -->
<img 
  src="sales-chart.png" 
  alt="Évolution des ventes 2024 : croissance constante de 15% par trimestre, pic en décembre à 245k€"
/>

<!-- ❌ Alt inutile sur image décorative -->
<img src="decoration.jpg" alt="image décorative" />

<!-- ✅ Alt vide pour décoration -->
<img src="decoration.jpg" alt="" role="presentation" />

<!-- ✅ Alt contextuel pour liens -->
<a href="/rapport-2024.pdf">
  <img src="pdf-icon.png" alt="Télécharger le rapport 2024 (PDF, 2.3 MB)" />
</a>

<!-- Graphique complexe avec description détaillée -->
<img 
  src="complex-chart.png" 
  alt="Répartition budget marketing 2024 par canal"
  longdesc="#chart-description"
/>

<div id="chart-description" class="sr-only">
  <h3>Description détaillée du graphique</h3>
  <ul>
    <li>SEO : 45% (180k€)</li>
    <li>Social Media : 25% (100k€)</li>
    <li>Email : 20% (80k€)</li>
    <li>Print : 10% (40k€)</li>
  </ul>
</div>

<!-- ❌ Placeholder comme label -->
<input type="email" placeholder="Votre email" />

<!-- ✅ Label explicite -->
<label for="email">Adresse email</label>
<input 
  type="email" 
  id="email" 
  name="email"
  required
  aria-describedby="email-help"
/>
<small id="email-help">
  Nous ne partagerons jamais votre email
</small>

<!-- ✅ Champs obligatoires indiqués -->
<label for="name">
  Nom complet <span aria-label="obligatoire">*</span>
</label>
<input 
  type="text" 
  id="name" 
  required 
  aria-required="true"
/>

<!-- Erreurs liées aux champs -->
<label for="password">Mot de passe</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-error"
  aria-invalid="true"
  class="input-error"
/>
<div id="password-error" role="alert" class="error-message">
  Le mot de passe doit contenir au moins 8 caractères
</div>

/* Styles d'erreur accessibles */
.input-error {
  border: 2px solid var(--color-error);
}

.error-message {
  color: var(--color-error);
  font-size: 14px;
  margin-top: 4px;
}

/* Assurer le contraste pour les erreurs */
:root {
  --color-error: #dc2626; /* Contraste 5.9:1 sur blanc */
}

<!-- ❌ Hiérarchie cassée -->
<h1>Page d'accueil</h1>
<h3>Nos services</h3>
<h2>À propos</h2>

<!-- ✅ Hiérarchie logique -->
<h1>Page d'accueil</h1>
  <h2>Nos services</h2>
    <h3>Développement web</h3>
    <h3>Consulting</h3>
  <h2>À propos</h2>
    <h3>Notre histoire</h3>

<header role="banner">
  <nav aria-label="Navigation principale">
    <!-- Menu principal -->
  </nav>
</header>

<main role="main">
  <section aria-labelledby="services-title">
    <h2 id="services-title">Nos services</h2>
    <!-- Contenu services -->
  </section>
  
  <aside aria-label="Articles connexes">
    <!-- Sidebar -->
  </aside>
</main>

<footer role="contentinfo">
  <nav aria-label="Navigation pied de page">
    <!-- Liens footer -->
  </nav>
</footer>

// Bouton avec état
const ToggleButton = ({ pressed, onToggle }) => (
  <button
    aria-pressed={pressed}
    onClick={onToggle}
    className={pressed ? 'active' : ''}
  >
    {pressed ? 'Activé' : 'Désactivé'}
  </button>
);

// Menu déroulant
const Dropdown = ({ isOpen, onToggle }) => (
  <div className="dropdown">
    <button
      aria-expanded={isOpen}
      aria-haspopup="menu"
      onClick={onToggle}
    >
      Options
    </button>
    {isOpen && (
      <ul role="menu" aria-label="Options du menu">
        <li role="menuitem">
          <a href="/option1">Option 1</a>
        </li>
      </ul>
    )}
  </div>
);

const SearchResults = ({ results, loading, error }) => {
  const announceResults = () => {
    if (loading) return 'Recherche en cours...';
    if (error) return 'Erreur lors de la recherche';
    return `${results.length} résultats trouvés`;
  };

  return (
    <div>
      <div 
        aria-live="polite" 
        aria-atomic="true"
        className="sr-only"
      >
        {announceResults()}
      </div>
      
      <div role="region" aria-label="Résultats de recherche">
        {results.map(result => (
          <article key={result.id}>
            {/* Résultat */}
          </article>
        ))}
      </div>
    </div>
  );
};

/* Boutons et liens touchables */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Icônes cliquables */
.icon-button {
  width: 44px;
  height: 44px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Espacement entre éléments tactiles */
.nav-list li {
  margin-bottom: 8px; /* Espacement minimum */
}

// Test automatisé des tailles de cible
const checkTouchTargets = async (page) => {
  const smallTargets = await page.$eval('button, a, [role="button"]', elements => {
    return elements.filter(el => {
      const rect = el.getBoundingClientRect();
      return rect.width < 44 || rect.height < 44;
    }).length;
  });
  
  expect(smallTargets).toBe(0);
};

const PasswordInput = () => {
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState([]);

  const validatePassword = (value) => {
    const newErrors = [];
    if (value.length < 8) {
      newErrors.push('Au moins 8 caractères');
    }
    if (!/[A-Z]/.test(value)) {
      newErrors.push('Au moins une majuscule');
    }
    if (!/[0-9]/.test(value)) {
      newErrors.push('Au moins un chiffre');
    }
    setErrors(newErrors);
  };

  return (
    <div>
      <label htmlFor="password">Mot de passe</label>
      <input
        type="password"
        id="password"
        value={password}
        onChange={(e) => {
          setPassword(e.target.value);
          validatePassword(e.target.value);
        }}
        aria-describedby="password-requirements password-errors"
        aria-invalid={errors.length > 0}
      />
      
      <div id="password-requirements">
        Le mot de passe doit contenir :
        <ul>
          <li>Au moins 8 caractères</li>
          <li>Une majuscule</li>
          <li>Un chiffre</li>
        </ul>
      </div>
      
      {errors.length > 0 && (
        <div id="password-errors" role="alert">
          <strong>Erreurs :</strong>
          <ul>
            {errors.map((error, i) => (
              <li key={i}>{error}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <track 
    kind="captions" 
    src="captions.vtt" 
    srclang="fr" 
    label="Français"
    default
  >
  <track 
    kind="descriptions" 
    src="descriptions.vtt" 
    srclang="fr" 
    label="Audio descriptions"
  >
  Votre navigateur ne supporte pas la vidéo HTML5.
</video>

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <p>
    Votre navigateur ne supporte pas l'audio HTML5.
    <a href="podcast.mp3">Télécharger le fichier audio</a>
  </p>
</audio>

<details>
  <summary>Transcription du podcast</summary>
  <div class="transcript">
    <p><strong>00:00</strong> Bonjour et bienvenue...</p>
    <p><strong>01:30</strong> Aujourd'hui nous parlons...</p>
  </div>
</details>

// Jest + testing-library
import { render, screen } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('should be accessible', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

// Cypress
cy.injectAxe();
cy.checkA11y();

// Playwright
import { injectAxe, checkA11y } from 'axe-playwright';

test('accessibility check', async ({ page }) => {
  await page.goto('/');
  await injectAxe(page);
  await checkA11y(page);
});

// Monitoring en production avec web-vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

// Monitoring accessibilité personnalisé
const trackA11yMetrics = () => {
  // Contraste
  const lowContrastElements = document.querySelectorAll('[data-low-contrast]');
  
  // Focus management
  let focusTraps = 0;
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Tab' && !document.activeElement) {
      focusTraps++;
    }
  });
  
  // Envoyer métriques
  analytics.track('a11y_metrics', {
    low_contrast_elements: lowContrastElements.length,
    focus_traps: focusTraps,
    timestamp: Date.now()
  });
};