Skip to content

Latest commit

 

History

History
214 lines (147 loc) · 10.9 KB

9-images.md

File metadata and controls

214 lines (147 loc) · 10.9 KB
Raw

Guide de l'intégrateur

Fiche 9 : Images

Introduction - cas utilisateurs

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.

Synthèse

  • Définir un alt sur toutes les images <img />.
  • Définir un alt="" sur les images <img /> de décoration.
  • Définir une alternative conforme et pertinente en fonction du type d'image lorsqu'elle est porteuse d'information.
  • Éviter au maximum les images textes.

Alternative obligatoire

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 :

  • les images <img> ;
  • les zones réactives <area> ;
  • les champs de formulaire <input type="image">.

Image de décoration : alternative vide

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.

Cas des images <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 :

  • l’alternative textuelle entre les balises ouvrantes et fermantes (<object> et </object>, ou <canvas> et </canvas>) est vide ;
  • la balise (<object> ou <canvas>), ou l’un des ses enfants, est dépourvue de rôle, 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).

Cas des images svg

Dans le cas des images vectorielles, vous devez ajouter la propriété aria-hidden="true" et vous assurer qu'aucun attribut ou aucune balise ne sont présents afin de labelliser l'image :

  • les balises <title> et <desc> sont absentes ou vides ;
  • la balise <svg>, ou l’un de ses enfants, est dépourvue d’attribut title ;
  • la balise <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 aria-hidden="true">
</svg>

Image porteuse d'information : alternative renseignée

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.

Images vectorielles

Pour les images vectorielles, vous devez :

  • ajouter un role="img" sur la balise <svg> ;
  • ajouter une propriété aria-label contenant l'alternative de l'image ;
  • ajouter une balise <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>.

Images <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 :

  • faire suivre l'image d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
  • proposer un mécanisme qui permet à l'utilisateur de remplacer l'image par un texte alternatif pertinent ;
  • ou proposer un mécanisme qui permet à l'utilisateur de remplacer l'image par une image possédant une alternative pertinente.

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 :

  • ajouter la propriété aria-label qui contient le texte permettant de donner l'alternative pertinente de l'image ;
  • ou ajouter la propriété 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.

Compatibilité avec les technologies d'assistance

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.

Images textes

Lorsque des images textes peuvent être reproduites en HTML et CSS, vous ne devez pas utiliser d'image. Ceci est tout à fait possible :

  • lorsque les polices utilisées ne sont pas des polices complexes,
  • lorsque l'image ne joue pas sur une déformation de la police,
  • ou encore, lorsque la police n'est pas une police qu'il serait compliqué à reproduire.

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.

Captcha

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.

Image légendée

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.

Voir la démonstration d'images légendées

Voir ailleurs / Ressources

Critères RGAA

  • 1.1 [A]
  • 1.2 [A]
  • 1.3 [A]
  • 1.4 [A]
  • 1.5 [A]
  • 1.8 [AA]
  • 1.9 [AAA]
  • 1.10 [A]

Sommaire du guide de l'intégrateur