Images fonctionnelles

Bon exemple : Image liée

Dans l’exemple ci-dessous, le logo Canada.ca de la bannière renvoie à la page d’accueil Canada.ca. <img> L’élément est imbriqué dans le lien. Le texte de remplacement « Page d’accueil du gouvernement du Canada » fournit le texte du lien.

HTML

Début du code

<a href="https://www.canada.ca/en.html">
   <img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Page d’accueil du gouvernement du Canada">
</a>

Fin du code

Bon exemple : Icône avec texte de remplacement utile imbriqué dans le texte du lien

Dans cet exemple, une icône avec le texte de remplacement utile « S’ouvre dans une nouvelle fenêtre » est imbriquée dans le lien avec le texte de lien « Page d’accueil du W3C ». Les utilisateurs du lecteur d’écran entendront « Page d’accueil du W3C, s’ouvre dans une nouvelle fenêtre ».

HTML

Début du code

<a href="https://www.w3.org/" target="_blank"> 
   Page d’accueil du W3C 
   <img src="new-window.png" alt="S’ouvre dans une nouvelle fenêtre">
</a>

Fin du code

Remarque : Cette technique est souvent utilisée avec des icônes pour indiquer différents formats de fichier comme AVI, ODF, MP3, PDF, Word, etc. Dans ce cas, l’équivalent textuel doit transmettre le format représenté par chaque icône.

Bon exemple : Icône fonctionnelle

Dans cet exemple, une icône cliquable représentant une imprimante indique une fonction d’impression. Son équivalent textuel est « Imprimer cette page » plutôt que le mot littéral «Imprimante», car le but est d’activer la boîte de dialogue d’impression.

HTML

Début du code

<a href="javascript:print()">
   <img src="print.png" alt="Imprimer cette page">
</a>

Fin du code

Bon exemple : Image utilisée dans un bouton

L’image suivante est utilisée pour donner au bouton un style distinct. Dans ce cas, il s’agit du bouton permettant de lancer une demande de recherche, et l’icône imbriquée est une loupe. L’équivalent textuel de l’image est « Recherche », pour indiquer la fonction du bouton, plutôt que « loupe ».

HTML

Début du code

<input type="image" src="searchbutton.png" alt="Recherche">

Fin du code

Bon exemple : Image redondante dans le texte du lien

Dans cet exemple, le logo de la société XYZ accompagne un lien texte qui mène à la page d’accueil de la société XYZ. L’image ne représente pas une fonctionnalité différente et ne transmet pas d’autres renseignements que ceux déjà fournis dans le texte du lien. En fait, l’image est une simple aide visuelle associée au texte du lien. Une valeur alt nulle (vide) est appliquée, (alt=""), pour éviter la redondance et la répétition.

HTML

Début du code

<a href="https://www.CompanyXYZ.ca/">   
   <img src="logo.png" alt="">
   Page d’accueil de la compagnie XYZ
</a>

Fin du code

Bon exemple : Nommer une image fonctionnelle à l’aide de l’attribut aria-label

Dans cet exemple, un attribut aria-label nomme le bouton plutôt que l’attribut alt de l’élément enfant <img>. L’attribut alt est réglé sur null (vide) : alt="".

HTML

Début du code

<button aria-label="Suivant">
   <img src="images/next.png" alt="">
</button>

Fin du code

Bon exemple : Nommer des images fonctionnelles à l’aide des attributs aria-label et aria-labelled

Dans cet exemple, chacun des deux boutons de formatage du texte est accompagné d’un bouton « More » (Lire la suite) identique. Les boutons de formatage sont nommés avec l’attribut aria-label. Les boutons « More » (Lire la suite) sont nommés avec l’attribut aria-labelledby, pointant vers les valeurs id des éléments contenant les fragments d’étiquette souhaités : « Lire la suite » + soit « Bullets » (Puces) soit « Text alignment » (Alignement du texte). L’attribut alt de chaque élément de bouton <img> est réglé sur null (vide) : alt=””.

HTML

Début du code

<button id="bullets" aria-label="Puces">
   <img src="images/bullets.png" alt="">
</button>
<button id="more-1" aria-label="Lire la suite" aria-labelledby="more-1 bullets">
   <img src="images/down-arrow.png" alt="">
</button>
<button id="text-align" aria-label="Alignement du texte">
   <img src="images/text-align.png" alt="">
</button>
<button id="more-2" aria-label="Lire la suite" aria-labelledby="more-2 text-align">
   <img src="images/down-arrow.png" alt="">
</button>

Fin du code

Stratégie alternative : Une seule instance de l’étiquette de texte « More »

Lorsqu’ils utilisent l’attribut aria-labelledby, les développeurs peuvent préférer cibler une valeur unique d’attribut id cible pour le nom d’une icône répétitive.

Cette stratégie permet d’attribuer une valeur d’attribut id à une instance définissant le texte « More » et de régler l’affichage des feuilles de style en cascades à « aucun ». L’attribut aria-labellearia-describedbyode>aria-describedby) peut cibler un élément dont l’affichage est établi à « aucun ». L’attribut aria-labelledby concatène un nom en pointant les valeurs d’attribut id de l’instance qui définit et le bouton partenaire, ce qui donne les étiquettes « More Bullets » et « More Text alignment ».

Contrairement à la première stratégie, les boutons « More » n’ont pas besoin d’attributs id ou aria-label, car ils ne contribuent pas à l’étiquette concaténée.

HTML

Début du code

<span id="more" style="display:none">Lire la suite</span>

<button id="bullets" aria-label="Puces">
   <img src="icons/bullets.png" alt="">
</button>
<button aria-labelledby="more bullets">
   <img src="icons/down-arrow.png" alt="">
</button>
<button id="text-align" aria-label="Alignement du texte">
   <img src="icons/text-align.png" alt="">
</button>
<button aria-labelledby="more text-align">
   <img src="icons/down-arrow.png" alt="">
</button>

Fin du code