Les images véhiculent parfois une information non textuelle. Cette information, qui peut aider à comprendre le contenu auquel elle se rapporte, doit être accessible à tous.
Fournir une alternative est indispensable pour les utilisateurs qui ne perçoivent pas le contenu visuel. Un lecteur d'écran ou une loupe vocalisée vont pouvoir accéder à cette alternative et la restituer à l'utilisateur ou bien l'information sera affichée si l'utilisateur désactive les images.
Toutes les images doivent avoir un attribut alt. Cette obligation tient au fait qu'en l'absence de cet attribut, un lecteur d'écran restitue le chemin ou le nom du fichier source, ce qui n'a pas de sens pour l'utilisateur.
Les éléments concernés sont :
<img> ;<area> ;<input type="image">.Si l'image ne véhicule aucune information, l'image n'a pas vocation à être restituée. Son alternative doit alors être vide. De plus, elle ne doit pas posséder d'attribut title.
<img src="url.png" alt="" />Nous vous renvoyons à la fiche « Quand une image vaut mille mots » du guide « Contribuer sur le web de manière accessible » pour de plus amples informations sur les différences entre les images de décoration et les images porteuses d'information.
svgDans le cas des images vectorielles, vous devez ajouter la propriété aria-hidden="true" et vous assurez qu'aucun attribut ou aucune balise ne sont présents afin de labelliser l'image :
<title> et <desc> sont absentes ou vides ;<svg>, ou l’un de ses enfants, est dépourvue d’attribut title ;<svg>, ou l’un de ses enfants, est dépourvue de rôle, propriété ou état ARIA visant à labelliser l’image vectorielle (aria-label, aria-describedby, aria-labelledby par exemple).En résumé, une image vectorielle de décoration devrait ressembler à ceci :
<svg role="img">
</svg><object>, <canvas> et <embed>Dans le cas des images <object> ou <canvas>, vous devez ajouter la propriété aria-hidden="true" et vous devez vous assurer qu'aucun attribut ou aucune balise ne sont présents afin de labelliser l'image :
<object> et </object>, ou <canvas> et </canvas>) est vide ;<object> ou <canvas>), ou l’un des ses enfants, est dépourvue de role, propriété ou état ARIA visant à labelliser l’image (aria-label, aria-describedby, aria-labelledby par exemple).Concernant la balise <embed>, elle doit posséder un attribut aria-hidden="true" et elle, ou l’un des ses enfants, doit être dépourvue de rôle, propriété ou état ARIA visant à labelliser l’image (aria-label, aria-describedby, aria-labelledby par exemple).
Une image porteuse d'information apporte une information par elle-même ou essentielle à la compréhension du contenu auquel elle est associée. L'alternative doit être courte et suffisante pour que les utilisateurs qui ne peuvent pas voir l'image comprennent l'information véhiculée.
Pour les images (img, input type="image", area), vous devez renseigner l'attribut alt.
S'il est présent, le contenu de l'attribut title est égal au contenu de l'attribut alt.
Pour les images vectorielles, vous devez :
role="img" sur la balise <svg> ;aria-label contenant l'alternative de l'image ;<desc> qui contient un passage de texte identique à la propriété aria-label.Attention, s'il est présent, l'attribut title doit être équivalent à aria-label et <desc>.
Si ces implémentations ne sont pas possibles, vous pouvez créer un lien adjacent à l'image qui mène vers une alternative pertinente et identique au contenu de la balise <desc>.
<object type="image">, <canvas> et <embed type="image">Pour ce type d'images, vous pouvez soit labelliser l'image directement, soit mettre en place une alternative.
Si vous souhaitez mettre en place une alternative, vous devez :
Note : dans le cas des images <canvas>, l'alternative peut être donnée par un texte présent entre les balises <canvas> et </canvas>.
Si vous souhaitez labelliser l'image :
aria-label qui contient le texte permettant de donner l'alternative pertinente de l'image ;
aria-labelledby qui référence un passage de texte pertinent.
Attention, s'il est présent, l'attribut title doit être équivalent à aria-label ou aria-labelledby selon l'implémentation choisie.
Pour les implémentations d'images avec les éléments <svg> et <canvas>, assurez-vous de la restitution des alternatives avec les lecteurs d'écran et navigateurs de la base de référence. En effet, les implémentations, notamment ARIA, étant très changeantes dans les navigateurs et lecteurs d'écran, l'important, au-delà de respecter le balisage, est de vous assurer de leur restitution par un lecteur d'écran.
Lorsque des images textes peuvent être reproduites en HTML et CSS, vous ne devez pas utiliser d'image. Ceci est tout à fait possible :
Dans tous les autres cas, les textes doivent être réalisés en HTML et CSS, afin de permettre aux utilisateurs qui en ont besoin d’adapter leur lisibilité (agrandissement des caractères, modification des couleurs, des polices…).
Il est également possible de conserver les images textes et de fournir à l'utilisateur un mécanisme de remplacement qui lui permet, avec un bouton par exemple, de remplacer toutes les images textes en textes stylés.
Dans le cas des images tests (Captcha), il faut renseigner l'alternative de manière à permettre à l'utilisateur de comprendre la nature et le rôle de l'image.
Par exemple, alt="saisir le code présent dans l'image".
Ce mécanisme devra être complété par une méthode alternative permettant à l'utilisateur de récupérer le code pour pouvoir poursuivre.
HTML5 introduit les balises figure et figcaption afin de pouvoir associer une légende à une image.
Il est important de le faire lorsque la légende contient des informations sur l'image, par exemple un copyright, qu'un utilisateur aveugle pourrait mal interpréter en pensant que l'information de la légende concerne le texte associé.
L'utilisation de figure et figcaption réclame certaines adaptions pour combler le manque de support éventuel par les technologies d'assistance.
<figure role="group">
<img alt="illustration" src="img.png"/>
<figcaption>
Illustration - copyright 2016 Simon Jérémi
</figcaption>
</figure>Le texte « illustration » dans l'alternative de l'image crée une liaison sémantique entre l'image et sa légende, dans le cas où l'élément figure ne serait pas restitué par les lecteurs d'écran. Le texte « illustration » est repris dans la légende pour établir la liaison sémantique.