Personnaliser une image manquante

Introduction

Vous avez certainement déjà eu l'occasion, ne serait-ce qu'en tant que simple utilisateur, de tomber sur un site où au lieu d'une image se substitue une icône (pouvant varier selon le navigateur). S'affiche également à la place de l'image manquante un texte. Il s'agit du texte à l'intérieur de l'attribut HTML [alt] qui décrit, s'il est renseigné bien entendu, l'image en question.

C'est une omission assez fréquente qu'une illustration ne possède pas un texte alternatif. Sachez, dans un premier temps, que l'attribut [alt] est obligatoire dans l'élément img, sans cela votre document ne sera pas valide. Dans un second temps, si jamais le lien de l'image est mort, le texte présent dans l'attribut peut donner des renseignements à l'utilisateur, plus particulièrement pour les lecteurs d'écran qui pourront restituer le texte vocalement. C'est donc un point essentiel pour l'accessibilité.

D'autre part, plus le texte est détaillé, meilleur il sera pour le référencement. En effet, les moteurs de recherche se servent des informations présentes dans l'attribut [alt] pour associer l'image à un site.

Il existe une solution toute simple en CSS pour améliorer l'expérience de l'utilisateur sur ce problème d'image manquante.

Les pseudo-éléments à la rescousse :

Si vous ne connaissez pas les pseudo-éléments, je vous invite à vous renseigner sur ce blog.

Normalement, nous ne pouvons pas appliquer de pseudo-éléments à un élément remplacé. L’élément img fait partie des éléments remplacés. Ce sont tout simplement des éléments dont la taille et l'apparence sont gérés par l'agent utilisateur (le navigateur). A l'instar de l'élément img, il existe l'élément canvas, button, input...

Néanmoins, si l'image n’est pas chargée, alors dans ce cas, les pseudo-éléments peuvent s'appliquer.

Les solutions

Plusieurs solutions s'offrent alors à vous. Vous pouvez indiquer un message d'erreur comme ceci, tout en laissant le texte de l'attribut [alt] :

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

img {
	
display: flex;   
max-width: 100%;

	
}

img:after {  
   
content: "L'image n'a pas pu être chargée ";    
    
}  

Si l'icône vous gêne, vous avez la possibilité de mettre une image de votre choix à la place. Il suffit de recouvrir la partie visible avec la propriété background.

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

img{

position: relative

}
	
	
img:after { 

content: "😞" attr(alt);
position: absolute;
top: 0;
left: 0;
background: white

}

Vous pouvez également placer une image comme arrière-plan :

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

img{
position: relative;
display: block;	
max-width: 100%
	
	}
	
img:after { 

content:'';
background: url("../../images/jpg/placeholder-img.jpg") no-repeat center/cover ;/*vous pouvez mettre l'arriere-plan que vous voulez*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

}