Accessibilité (a) Règles - 3

Images

Il ne s'agit pas seulement d'ajouter du texte alternatif à une image ; c'est bien plus que ça.

Images décoratives

• Si une image n'ajoute pas de contexte ou d'informations supplémentaires (image décorative) permettant à l'utilisateur de mieux comprendre le contexte, elle doit être masquée des technologies d'assistance (TA), telles qu'un lecteur d'écran.

• Utilisez l'une de ces méthodes pour masquer les images d'AT :

  • Une alternative de texte vide ou nul (alt)
  • Application d'ARIA
  • Ajouter l'image comme arrière-plan CSS

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

• En cas de doute, ajoutez des descriptions aux images.

Alt vide ou nul

• Ne définissez pas l'attribut alt de l'image sur "" sauf si l'image est purement décorative.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

Images informatives

• Si une image véhicule un concept, une idée ou une émotion, vous devez inclure un texte alternatif programmatique décrivant le but de l'image.

• Ajoutez une description très détaillée de l'image dans la mesure du possible.

par exemple

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• Si l'image est une (en ligne), ajoutez role="img".

• Étant donné que les éléments ne prennent pas en charge l'attribut alt, utilisez des méthodes de codage alternatives pour fournir une description.

Method	Use Case	Pros	Cons