Mode sombre

Démo : CodePen

Description technique

Structure HTML accessible

La structure HTML doit être sémantique et inclure des attributs ARIA pour une meilleure compréhension par les technologies d’assistance.

• Bouton (<button>) : Utilisé pour déclencher le changement de mode.
• Attributs ARIA :
  • aria-label pour décrire l'action du bouton, par exemple, "Activer le mode sombre" ou "Activer le mode clair".
  • aria-live="polite" sur un élément contenant le nom du mode actuel pour informer les utilisateurs des changements.

Comportement javascript accessible

• Gestion des Événements : Le bouton doit écouter les événements de clic pour basculer entre les modes.
• Mise à Jour des Attributs ARIA : Mettre à jour dynamiquement le aria-label du bouton en fonction du mode actif.
• Stockage des Préférences : Utiliser le localStorage pour mémoriser la préférence de l'utilisateur et appliquer le mode choisi lors des visites ultérieures.

Bonnes pratiques d’accessibilité

• Respect des standards :
  • Suivre les directives WCAG 2.1, notamment le critère 1.4.3 sur le contraste des couleurs.
• Messages visuels et auditifs :
  • Fournir des retours visuels clairs lors du changement de mode, comme une transition douce entre les thèmes.
• Compatibilité multi-appareils :
  • Tester le sélecteur sur différents appareils et navigateurs pour garantir une expérience uniforme.

Recommandations supplémentaires

• Amélioration de l’expérience utilisateur :
  • Ajouter des transitions CSS pour adoucir le changement de mode.
  • Permettre la détection automatique du mode préféré de l'utilisateur via le media query prefers-color-scheme.

Exemple de code accessible

<button id="mode-toggle" aria-label="Activer le mode sombre">Changer de mode</button>

<script>
  const toggleButton = document.getElementById('mode-toggle');
  const currentMode = localStorage.getItem('color-mode') || 'light';

  document.body.classList.add(currentMode);

  toggleButton.setAttribute('aria-label', currentMode === 'light' ? 'Activer le mode sombre' : 'Activer le mode clair');

  toggleButton.addEventListener('click', () => {
    const newMode = document.body.classList.contains('light') ? 'dark' : 'light';
    document.body.classList.remove('light', 'dark');
    document.body.classList.add(newMode);
    localStorage.setItem('color-mode', newMode);
    toggleButton.setAttribute('aria-label', newMode === 'light' ? 'Activer le mode sombre' : 'Activer le mode clair');
  });
</script>

<style>
  body.light {
    background-color: #ffffff;
    color: #000000;
  }
  body.dark {
    background-color: #000000;
    color: #ffffff;
  }
  button {
    margin: 20px;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>