Votre image n'est probablement pas décorative

L'attribut alt de l'élément img peut être "nul", c'est-à-dire le fait de le définir sur une chaîne vide au lieu d'une description textuelle. La suppression d'une description alternative signifie qu'il n'y a aucune information entre les guillemets ouvrants et fermants. S'il y a un espace vide, il ne sera pas considéré comme nul :

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

Que signifie « décoratif » ?

La suppression d'une image indique qu'elle est uniquement à des fins décoratives.

Dans ce contexte, décoratif signifie que l'image ne communique pas visuellement des informations importantes pour comprendre l'objectif de la page ou de la vue, et pourquoi l'image en fait partie.

Décoratif ne signifie pas que l'image contient du contenu considéré comme de la décoration.

"

Par exemple, un site Web qui vend du papier peint voudra avoir des descriptions alternatives pour les échantillons de papier peint :

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Un autre exemple pourrait être un site Web de musée, où la présentation d'une pièce de leur collection pourrait bénéficier à la fois d'une description alternative et d'une légende :

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Assurez-vous que votre description alternative inclut également la ponctuation !

Pourquoi voudriez-vous rendre une image décorative ?

La technologie d'assistance ignorera les images annulées et n'annoncera pas leur présence. Les raisons de vouloir faire cela sont pour la plupart historiques.

Anciennes techniques de mise en page

Les premières techniques de développement Web reposaient sur des images pour les aider à garantir une mise en page cohérente sur différents systèmes d'exploitation, navigateurs et versions de navigateur. L'exemple le plus courant était un spacer.gif , un pixel transparent 1 × 1 qui était étiré à différentes tailles pour mettre le contenu en place.

Cette technique utilise généralement de nombreuses images d'espacement pour créer une conception visuelle. Sans moyen de faire taire leur présence, ces images encombreraient ce que la technologie d'assistance annonce et rendrait confuse et fastidieuse la navigation et l'action sur le contenu Web.

Anciennes techniques de conception

Avant qu'il n'y ait des propriétés CSS telles que box-shadow , les développeurs devaient utiliser des techniques qui coupaient le style décoratif pour le faire fonctionner avec un contenu de hauteur ou de largeur indéterminée. Cette technique s'appelait la mise à l'échelle en 9 tranches, un terme qui fait référence aux 9 sections de contenu que vous auriez besoin de créer.

Tout comme les images d'espacement, la mise à l'échelle en 9 tranches utilisait plusieurs images pour créer l'effet visuel souhaité. Et, tout comme les images d'espacement, la seule façon de supprimer l'encombrement créé par ces images était de les marquer comme décoratives.

Annonces redondantes

Il existe un scénario rare où une image est répétée sur une page ou une vue, et ses emplacements répétés ne fournissent aucun contexte supplémentaire. Vous devez être prudent lorsque vous marquez une image décorative dans cette situation, car l'absence d'annonce pour une image visible peut être déroutante pour une personne malvoyante qui utilise un lecteur d'écran.

Icônes supplémentaires

Les liens et les boutons qui utilisent des icônes doivent toujours avoir un nom accessible qui communique la fonctionnalité. Si le dessin incorpore également une icône, le dessin de l'icône n'a pas besoin d'être communiqué.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Si le composant utilise uniquement une icône, l'image elle-même doit être utilisée pour créer le nom accessible :

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Notez qu'une étiquette de texte visible est la technique préférée. Une étiquette de texte visible peut être traduite et communique le but plus directement.

Utilisation contemporaine

Les techniques modernes de mise en page et de style CSS signifient que le placement des images est désormais hautement intentionnel. Cela signifie que si une image est utilisée, elle nécessitera très probablement une autre description.

Les descriptions alternatives doivent communiquer l'objectif de l'image . Cela inclut le contenu de l'image, mais peut également inclure la raison pour laquelle elle est incluse dans le contexte de la page ou de la vue dans laquelle elle a été incluse. C'est l'une des raisons pour lesquelles les descriptions d'image alternatives ne pourront jamais être entièrement automatisées.

Autres façons d'afficher des images

Il existe plusieurs autres façons d'afficher une image sur une page ou une vue. Il est important de s'assurer qu'une autre description est fournie si l'image contient un contenu significatif , quelle que soit la technique utilisée.

L'élément picture

L'élément picture n'a pas de rôle implicite, ce qui signifie que sa présence ne communique aucun objectif à la technologie d'assistance. Cela signifie qu'il ne peut pas être utilisé pour décrire sémantiquement la présence d'une "image".

L'élément picture est un conteneur pour les éléments source et img . Utilisez l'attribut alt de l'élément img pour fournir une autre description de l'élément picture parent.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Images d'arrière-plan

Nous pouvons utiliser CSS pour déclarer une image comme arrière-plan sur un élément HTML. Ceci est le plus souvent utilisé pour ajouter une sensation de texture à un dessin.

Cependant, une autre technique populaire consiste à utiliser une background-image pour placer une image de manière à ce que le développeur n'ait pas de contrôle sur la taille de l'image que quelqu'un télécharge. background-image , combinée à d'autres propriétés telles que background-size garantira que le contenu d'une taille inconnue est affiché sans casser la conception.

Dans un scénario comme celui-ci, notre vieil ami spacer.gif pourrait à nouveau être utile !

SVG intégré

SVG peut être affiché soit en le liant via l'attribut src dans un élément img , soit en plaçant le code SVG en ligne dans la page ou la vue.

Si vous utilisez du SVG en ligne, vous devez utiliser l'élément title (et potentiellement desc ) de SVG à la place d'un attribut alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Expérience équivalente

Dans la conception et le développement Web modernes, l'affichage d'une image est un acte hautement intentionnel. Les descriptions alternatives nous permettent d'expliquer le contenu de l'image et, ce faisant, de communiquer pourquoi elle vaut la peine d'être incluse .

Ce n'est pas parce qu'une image affiche quelque chose de fantaisiste qu'elle ne vaut pas la peine d'être décrite. L'annonce de sa présence garantit que n'importe qui, quelles que soient ses capacités ou ses circonstances, peut pleinement comprendre votre expérience numérique.

Lectures complémentaires sur SmashingMag :

• Accessibilité dans Chrome DevTools
• Un guide complet des outils d'accessibilité
• Des images accessibles quand elles comptent le plus
• SVG accessibles : modèles parfaits pour les utilisateurs de lecteurs d'écran
• Concevoir avec un mouvement réduit pour les sensibilités au mouvement
• Lisez plus d'articles sur l'accessibilité, la convivialité et l'expérience utilisateur.