PhpBB Lab Académie

Ajouter une image dans une page avec l’élément img, comprendre le rôle des attributs src et alt, distinguer une image informative d’une image décorative et rédiger un texte alternatif utile aux personnes qui ne peuvent pas voir l’image.

Nous allons ajouter notre première image sans oublier son sens

Votre page contient maintenant :

- des titres ;
- des paragraphes ;
- des listes ;
- des liens.

Nous allons aujourd’hui ajouter un autre type de contenu très courant :

une image

Mais ajouter une image correctement ne consiste pas seulement à la faire apparaître à l’écran.

Nous devons également prévoir ce qui se passe lorsqu’une personne ne peut pas la voir.

Cela peut concerner notamment :

- une personne utilisant un lecteur d’écran ;
- une image qui ne se charge pas ;
- un utilisateur pour lequel les images sont désactivées.

Nous allons donc apprendre deux choses en même temps parce qu’elles font partie du même élément HTML :

src = où se trouve l’image
alt = quelle information textuelle doit la remplacer

1. Préparer un fichier image

Pour cet exercice, placez une image dans le même dossier que votre fichier :

index.html

Votre dossier pourra par exemple contenir :

mon-premier-site

index.html
ordinateur.jpg

Dans les exemples de cette leçon, nous utiliserons le nom :

ordinateur.jpg

Vous pouvez utiliser une autre image si vous le souhaitez, mais son nom devra alors être adapté dans votre code.

Un point important :

le nom écrit dans le code doit correspondre exactement au nom réel du fichier

Si votre fichier s’appelle :

ordinateur.jpg

n’écrivez pas :

ordinateur.jpeg

ou :

Ordinateur.jpg

Nous garderons aujourd’hui l’image dans le même dossier que

index.html

afin de ne pas ajouter une difficulté inutile.

2. L’élément img

En HTML, une image est ajoutée avec l’élément :

img

Un premier exemple est :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un bureau">

Vous remarquez immédiatement une différence avec :

p

ou :

a

Il n’y a pas de balise :

</img>

L’élément

img

est un élément vide.

Vous avez déjà rencontré ce principe avec :

<meta charset="utf-8">

L’élément est complet dans une seule balise.

3. Le rôle de src

Dans :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un bureau">

l’attribut :

src

indique la source de l’image.

Sa valeur est ici :

ordinateur.jpg

Comme le fichier image se trouve dans le même dossier que

index.html

, le nom du fichier suffit pour notre exemple.

Retenez :

src = indique quel fichier image le navigateur doit charger

4. Que se passe-t-il si src est incorrect ?

Imaginons que le fichier réel soit :

ordinateur.jpg

mais que vous écriviez :

<img src="ordinateur.png" alt="Ordinateur portable ouvert sur un bureau">

Le navigateur cherchera :

ordinateur.png

Comme ce fichier n’existe pas dans notre dossier, l’image ne pourra pas être chargée correctement.

Si une image ne s’affiche pas, vérifiez donc d’abord :

1. le nom du fichier ;
2. son extension ;
3. l’emplacement du fichier ;
4. la valeur de

src

.

5. Le rôle de alt

L’autre attribut essentiel de notre exemple est :

alt

Dans :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un bureau">

la valeur de

alt

est :

Ordinateur portable ouvert sur un bureau

On appelle cette valeur le texte alternatif.

Son rôle est de fournir une alternative textuelle lorsque l’image ne peut pas être perçue visuellement.

Un lecteur d’écran peut notamment annoncer ce texte à la place de l’information visuelle portée par l’image.

6. Le texte alternatif ne décrit pas forcément chaque détail

Une erreur fréquente consiste à penser que

alt

doit toujours décrire absolument tout ce qui apparaît dans l’image.

Ce n’est pas le bon principe.

Le texte alternatif doit surtout transmettre l’information utile que l’image apporte dans son contexte.

Imaginez une photo montrant :

- un ordinateur portable ;
- une tasse ;
- un carnet ;
- une fenêtre ;
- une plante.

Si la page parle simplement du matériel nécessaire pour apprendre HTML, le texte alternatif peut être :

Ordinateur portable utilisé pour travailler sur une page HTML

Il n’est pas nécessaire de décrire la couleur de la tasse ou la plante si ces détails n’apportent aucune information utile au contenu.

7. Se demander pourquoi l’image est présente

Avant d’écrire un texte alternatif, posez-vous cette question :

Quelle information cette image apporte-t-elle ici ?

Cette question est plus utile que :

Qu’est-ce que je vois exactement dans l’image ?

Prenons la même photo dans deux contextes différents.

Sur une page consacrée au matériel informatique :

alt="Ordinateur portable ouvert sur un éditeur de code"

peut être pertinent.

Sur une page consacrée à l’aménagement d’un bureau, l’information importante pourrait être différente.

Le bon texte alternatif dépend donc du rôle de l’image dans la page.

8. Éviter les textes alternatifs inutiles

Évitez des valeurs comme :

alt="image"
alt="photo"
alt="image ordinateur.jpg"

Elles apportent très peu d’information.

Évitez également de recopier simplement le nom du fichier :

alt="ordinateur.jpg"

Le nom technique du fichier n’explique pas ce que l’image apporte à l’utilisateur.

9. Faut-il écrire « image de » ou « photo de » ?

Dans de nombreux cas, il n’est pas nécessaire de commencer le texte alternatif par :

Image de...
Photo de...

La technologie d’assistance peut déjà indiquer qu’il s’agit d’une image.

Nous préférerons donc souvent :

alt="Ordinateur portable ouvert sur un éditeur de code"

plutôt que :

alt="Image d’un ordinateur portable ouvert sur un éditeur de code"

Il existe des cas où le fait qu’il s’agisse d’une photo, d’un dessin ou d’un graphique est lui-même important. Dans ce cas, cette information peut naturellement faire partie du texte.

10. Ajouter l’image à notre page

Reprenez :

index.html

Ajoutez une nouvelle grande section dans

body

:

<h2>Mon espace de travail</h2>
<p>J’utilise un ordinateur pour écrire et tester mes pages HTML.</p>
<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

Enregistrez puis actualisez la page.

Si le fichier

ordinateur.jpg

se trouve bien dans le même dossier, l’image doit apparaître.

Avec un lecteur d’écran, placez-vous sur l’image et vérifiez que le texte alternatif fournit une information compréhensible.

11. Une image décorative n’a pas le même rôle

Toutes les images ne transmettent pas une information.

Certaines servent uniquement à la décoration.

Imaginez un petit motif graphique placé entre deux sections uniquement pour embellir la page.

Si ce motif n’apporte aucune information et qu’il n’est pas interactif, nous ne voulons pas obliger un utilisateur de lecteur d’écran à entendre une description inutile comme :

petite ligne bleue décorative avec trois points

Pour une image purement décorative, nous pouvons utiliser :

alt=""

Exemple :

<img src="separateur.png" alt="">

Le texte alternatif est volontairement vide.

12. alt vide ne signifie pas alt absent

Comparez :

<img src="separateur.png" alt="">

et :

<img src="separateur.png">

Ce n’est pas la même intention.

Dans le premier cas :

alt=""

indique explicitement que l’image ne doit pas fournir d’information textuelle parce qu’elle est décorative dans ce contexte.

Dans le deuxième cas, l’attribut

alt

est absent.

Pour les images que nous ajoutons dans ce cours, nous prendrons donc l’habitude de réfléchir au texte alternatif au lieu d’oublier l’attribut.

13. Image informative ou décorative ?

Avant d’écrire

alt

, posez-vous deux questions :

1. L’image apporte-t-elle une information utile ?
2. Cette information existe-t-elle déjà exactement dans le texte voisin ?

Si l’image transmet une information nécessaire :

écrivez un texte alternatif adapté

Si elle est réellement décorative et n’ajoute aucune information :

utilisez alt=""

Le choix dépend donc du rôle de l’image, pas de sa beauté ou de sa taille.

14. Éviter les répétitions inutiles

Imaginons :

<p>Voici le logo de mon club : un cercle vert contenant une montagne blanche.</p>
<img src="logo.png" alt="Logo du club : cercle vert contenant une montagne blanche">

Le même contenu est presque répété immédiatement.

Selon le rôle de l’image, il peut être préférable d’éviter cette répétition.

Le texte alternatif doit compléter l’expérience, pas faire entendre deux fois la même information sans raison.

Nous apprendrons avec la pratique à choisir la bonne quantité d’information.

15. Ne pas utiliser alt pour ajouter des informations invisibles

Le texte alternatif doit remplacer l’information portée par l’image.

Il ne doit pas servir à cacher des informations supplémentaires destinées uniquement aux lecteurs d’écran.

Par exemple, si une information est importante pour tout le monde, placez-la dans le contenu normal de la page.

Le principe est :

alt remplace l’information de l’image
alt n’est pas une zone de texte secrète

16. Construire une section complète

Votre nouvelle section peut maintenant être :

<h2>Mon espace de travail</h2>
<p>J’utilise un ordinateur pour écrire et tester mes pages HTML.</p>
<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

Nous avons ici :

- un

h2

qui annonce la section ;
- un

p

qui explique l’idée ;
- un

img

qui ajoute un contenu visuel ;
-

src

qui indique le fichier à charger ;
-

alt

qui fournit une alternative textuelle.

17. Tester comme un développeur

Pour vérifier votre image :

1. enregistrez

index.html

;
2. actualisez la page ;
3. vérifiez que l’image se charge ;
4. vérifiez que le texte alternatif est pertinent ;
5. modifiez temporairement le nom dans

src

pour constater ce qui se passe lorsque l’image ne peut pas être chargée ;
6. remettez ensuite le bon nom de fichier.

Cette petite expérience vous permet de comprendre que l’image et son alternative sont deux parties différentes du même élément.

18. Ce que nous ne faisons pas encore

Vous trouverez rapidement des exemples utilisant :

width
height
figure
figcaption
picture
srcset

Ces éléments et attributs ont leur utilité, mais les ajouter maintenant détournerait l’attention de l’objectif principal.

Aujourd’hui, vous devez maîtriser :

<img src="fichier.jpg" alt="Texte alternatif adapté">

et comprendre pourquoi

alt

change selon le rôle de l’image.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- le rôle de

img

;
- pourquoi

img

n’utilise pas

</img>

;
- le rôle de

src

;
- le rôle de

alt

;
- pourquoi un texte alternatif doit dépendre du contexte ;
- pourquoi

alt="image"

est insuffisant ;
- quand utiliser

alt=""

;
- pourquoi un attribut

alt

vide pour une image décorative n’est pas la même chose qu’un attribut oublié.

Dans la prochaine leçon, nous utiliserons les liens que vous connaissez déjà pour relier plusieurs pages HTML de notre propre petit site.

Imaginons une page présentant un refuge de montagne.

L’image montre le refuge devant les montagnes.

Si cette image sert à montrer le bâtiment dont parle la page, nous pouvons écrire :

<img src="refuge.jpg" alt="Refuge en pierre situé au pied des montagnes">

Le texte alternatif transmet l’information principale apportée par l’image.

Imaginons maintenant un petit motif de montagne utilisé uniquement comme décoration entre deux sections :

<img src="motif-montagne.png" alt="">

Dans ce deuxième cas, l’image n’apporte aucune information nécessaire au contenu.

Le texte alternatif est donc volontairement vide.

La décision ne dépend pas du fichier lui-même.

Elle dépend du rôle de l’image dans la page.

Reprenez votre fichier

index.html

.

Pour cet exercice, placez une image dans le même dossier que

index.html

.

Dans la correction, nous supposerons que le fichier s’appelle :

ordinateur.jpg

1. Ajoutez une nouvelle grande section intitulée :

Mon espace de travail

2. Ajoutez un paragraphe expliquant que vous utilisez un ordinateur pour apprendre HTML.

3. Ajoutez l’image avec l’élément :

img

4. Utilisez :

src="ordinateur.jpg"

5. Rédigez un texte alternatif qui explique l’information utile apportée par l’image.

Vous pouvez utiliser :

Ordinateur portable ouvert sur un éditeur de code

6. Enregistrez puis actualisez la page.

7. Vérifiez que l’image se charge.

8. Avec votre lecteur d’écran si vous en utilisez un, vérifiez que le texte alternatif est compréhensible.

9. Remplacez temporairement le texte alternatif par :

image

Comparez la quantité d’information obtenue.

10. Remettez ensuite le texte alternatif pertinent.

11. Imaginez enfin que cette même image ne soit présente que pour décorer la page, sans apporter aucune information. Quelle valeur donneriez-vous alors à

alt

?

Pour terminer, expliquez avec vos propres mots la différence entre :

src

et :

alt

Une image HTML est ajoutée avec :

img

Exemple :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

L’élément

img

est un élément vide : il n’utilise pas de balise

</img>

.

L’attribut :

src

indique quel fichier image charger.

L’attribut :

alt

fournit une alternative textuelle à l’information portée par l’image.

Un bon texte alternatif dépend du contexte et du rôle de l’image.

Évitez les textes peu utiles comme :

alt="image"
alt="photo"
alt="ordinateur.jpg"

Pour une image informative, écrivez une alternative concise qui transmet l’information nécessaire.

Pour une image réellement décorative, utilisez :

alt=""

Un attribut

alt

volontairement vide pour une image décorative n’a pas le même sens qu’un attribut oublié.

Dans la prochaine leçon, nous apprendrons à relier plusieurs fichiers HTML de notre propre site avec des liens.