Image informative avec alt utile

Objectifs de la leçon

• Construire l'alternative d'une image informative avec un élément HTML adapté.
• Ajouter les attributs qui rendent la structure testable.
• Expliquer l'impact utilisateur de la décision prise.

Choisir l'expérience de remplacement

Un média peut informer, illustrer ou décorer. Sa fonction détermine l'alternative textuelle, la légende, les contrôles et la stratégie de chargement à fournir.

« Image informative avec alt utile » sert ici à rendre l'alternative d'une image informative explicite dans le document.

Décision média

Décris l'information que la personne perdrait sans le média. Si aucune information n'est perdue, rends la décoration silencieuse au lieu de répéter une description inutile.

Évite de traiter l'alternative d'une image informative comme un simple détail visuel : le choix doit rester compréhensible dans le DOM et justifiable en revue de code.

Contrôle sans image ni son

Teste la page sans charger les images puis sans écouter l'audio. Le sens, les commandes et les informations importantes doivent rester disponibles.

Pour html-04-informative-image-alt, commence par le premier test en échec et relie son message à l'élément, l'attribut ou la relation concernée.

Vocabulaire lié

• alt — Alternative textuelle d'une image informative.
• figure — Groupe média et légende.
• figcaption — Légende reliée au média.
• track — Piste de sous-titres ou captions.
• loading — Indice de chargement pour une image.

Validation

• Je sais expliquer pourquoi l'alternative d'une image informative améliore PulsaConf.
• Je peux relier chaque test à une exigence utilisateur.
• Je garde une structure compréhensible sans style CSS.