État désactivé expliqué

Désactive temporairement tout un groupe natif et relie une explication visible, sans faire passer cet état pour une erreur.

Objectifs de la leçon

  • Construire un état indisponible compréhensible avec un élément HTML adapté.
  • Ajouter les attributs qui rendent la structure testable.
  • Expliquer l'impact utilisateur de la décision prise.

Rendre les états perceptibles

L'aide, l'erreur, le chargement et la réussite ne doivent pas être communiqués uniquement par la couleur ou la position. Ils doivent être reliés au bon contrôle et annoncés au bon moment.

« État désactivé expliqué » sert ici à rendre un état indisponible compréhensible explicite dans le document.

Décision de feedback

Utilise d'abord un texte visible et une relation explicite. Réserve les régions live aux changements dynamiques et choisis leur niveau d'urgence selon l'action attendue.

Évite de traiter un état indisponible compréhensible comme un simple détail visuel : le choix doit rester compréhensible dans le DOM et justifiable en revue de code.

Test avec technologie d'assistance

Déclenche chaque état dans l'ordre réel d'utilisation. Vérifie le focus, la relation avec le champ et l'absence d'annonces répétées ou prématurées.

Pour html-07-disabled-state, commence par le premier test en échec et relie son message à l'élément, l'attribut ou la relation concernée.

Vocabulaire lié

  • fieldset — Groupe de champs liés.
  • legend — Nom d'un groupe de champs.
  • aria-describedby — Relation vers une aide ou erreur.
  • aria-live — Annonce de changement dynamique.
  • alert — Message urgent annoncé immédiatement.

Validation

  • Je sais expliquer pourquoi un état indisponible compréhensible améliore PulsaConf.
  • Je peux relier chaque test à une exigence utilisateur.
  • Je garde une structure compréhensible sans style CSS.

Ouvrir la leçon interactive