L'attribut alt en HTML - Tutoriel

Introduction

L'attribut "alt" est utilisé dans HTML pour fournir un texte alternatif à une image. Cela améliore l'accessibilité en permettant aux lecteurs d'écran de décrire le contenu de l'image. Ce tutoriel explore comment utiliser correctement l'attribut "alt".

Exemples

Exemple 1 : Utilisation de l'Attribut "alt"

Utilisation de l'attribut "alt" pour décrire le contenu d'une image :

       <img src="chemin_de_l_image.jpg" alt="Description de l'image">

Exemple 2 : Image Décorative sans Attribut "alt"

Utilisation d'une image décorative sans besoin d'une description précise :

       <img src="decoration.jpg" alt="">

Exercices avec Corrections

Exercice 1 : Attribut "alt" pour l'Accessibilité

Ajoutez un texte alternatif à une image pour améliorer l'accessibilité :

       <img src="mon_logo.png" alt="Logo de l'entreprise XYZ">

Questions à Choix Multiple (QCM)

  1. Quel est le but de l'attribut "alt" dans une balise d'image?
    • A. Définir la source de l'image
    • B. Ajouter un text
    • C. Améliorer l'accessibilité en fournissant une description alternative

    Réponse correcte : C

Questions & Réponses

Question : Pourquoi est-il important d'utiliser l'attribut "alt" avec les images?

Réponse : L'attribut "alt" améliore l'accessibilité en fournissant un texte descriptif aux lecteurs d'écran et en cas d'échec de chargement de l'image.

Études de Cas

Cas d'utilisation : Image Importante pour la Navigation

Ajoutez un attribut "alt" significatif à une image utilisée pour la navigation :

       <img src="icone_menu.png" alt="Icône de menu de navigation">

Éléments à Retenir

  • L'attribut "alt" en HTML est utilisé pour fournir une description alternative aux images.
  • C'est crucial pour améliorer l'accessibilité et fournir une expérience utilisateur inclusive.
  • Utilisez des descriptions significatives dans l'attribut "alt" pour chaque image.

Proposition d'un Examen avec Correction

  1. Quel est le but de l'attribut "alt" dans une balise d'image?
    • A. Définir la source de l'image
    • B. Ajouter un text
    • C. Améliorer l'accessibilité en fournissant une description alternative

    Correction : C

L'attribut alt en HTML

L'attribut alt est un attribut HTML utilisé pour définir un texte alternatif pour une image. Il est toujours défini dans l'élément ouvrant <img>, entre des guillemets doubles.

Valeurs de l'attribut alt

La valeur de l'attribut alt est une chaîne de caractères. Elle définit un texte alternatif qui sera affiché à la place de l'image si l'image ne peut pas être chargée ou si l'utilisateur utilise un lecteur d'écran.

Exemples de valeurs de l'attribut alt

Voici quelques exemples de valeurs de l'attribut alt :

  • "Une image de chat"
  • "Logo de la société"
  • "Graphique représentant les ventes"

Utilisation de l'attribut alt

L'attribut alt est utilisé pour améliorer l'accessibilité des pages web. Il permet aux utilisateurs qui ne peuvent pas voir les images de comprendre le contenu de la page.

Exemples plus détaillés

Voici quelques exemples plus détaillés de l'utilisation de l'attribut alt :

  • Insérer une image avec un texte alternatif
<img src="image.jpg" alt="Une image de chat">

Ce code insère l'image image.jpg sur la page web et définit un texte alternatif "Une image de chat".

  • Insérer une image avec un texte alternatif descriptif
<img src="image.jpg" alt="Un chat noir assis sur un canapé">

Ce code insère l'image image.jpg sur la page web et définit un texte alternatif plus descriptif "Un chat noir assis sur un canapé".

  • Insérer une image avec un texte alternatif informatif
<img src="image.jpg" alt="Logo de la société Acme">

Ce code insère l'image image.jpg sur la page web et définit un texte alternatif informatif "Logo de la société Acme".

Conclusion

L'attribut alt est un outil important pour améliorer l'accessibilité des pages web. En comprenant comment utiliser cet attribut, vous pouvez créer des pages web plus accessibles à un public plus large.

Remarques

  • L'attribut alt est facultatif, mais il est fortement recommandé de l'utiliser pour toutes les images.
  • La valeur de l'attribut alt doit être descriptive et informative.
  • La valeur de l'attribut alt doit être courte et concise.