Images Maps SEO et Accessibilité
Ma question du jour concerne les cartes illustrées et l'accessibilité.
Je comprends maintenant que chaque fois que vous utilisez une balise alt dans une balise img, vous décrivez l'image, ce qui améliore l'expérience utilisateur pour les aveugles ou simplement pour les personnes qui viennent de désactiver le rendu des images pour une raison ou pour plusieurs.
Maintenant, cette logique ne semble pas fonctionner avec Image Maps dont je vais vous donner un exemple.
<img alt="Image Map of Bits and Bobs" usemap="#imgmap" src="bits-and-bobs">
<map name="imgmap">
<area shape="poly" coords="" href="" alt="Spanner" title="Guitars Repairs"/>
<area shape="poly" coords="" href="" alt="Dollar" title="Guitars for Sale"/>
<area shape="poly" coords="" href="" alt="eLearning" title="Learning about Guitars"/>
<area shape="poly" coords="" href="" alt="String" title="How to tune a Guitar"/>
</map>
Les Href et Coords valides ont été supprimés pour une visualisation plus facile ...
Donc, comme vous pouvez le voir dans l'image ci-dessus, je décris la zone de l'image plutôt que le résultat s'il clique sur l'image. Donc ma question est simple ....
Dans une carte-image contenant des liens, décrivez-vous le résultat du lien plutôt que de décrire l'image ... Par exemple, une image de chaînes utilisant des chaînes n'indiquerait pas que c'est un lien sur la façon d'accorder une guitare, mais la balise de titre le fait.
En général, si un lien ne contient qu’une image, l’attribut alt de cette image ne devrait pas décrire l’image mais le lien cible .
Avec les cartes d’image, c’est la même chose.
L'attribut alt de l'élément img devrait décrire toute l'image (car l'image elle-même n'est pas liée).
L'attribut alt de l'élément area devrait décrire son objectif (étant donné que cette zone d'image est liée, le lien est donc important et non l'image).
Référence: HTML5 (CR du 2013-08-06): area → alt :
Il [ l'attribut
alt] spécifie le texte du lien hypertexte. Sa valeur doit être un texte qui, lorsqu'il est présenté avec les textes spécifiés pour les autres hyperliens de la carte-image, et avec le texte alternatif de l'image, mais sans l'image elle-même, offre à l'utilisateur le même type de choix que ne le ferait l'hyperlien. lorsqu'il est utilisé sans son texte mais avec sa forme appliquée à l'image.
FWIW, technique H37 du WCAG (informatif, non normatif) a un exemple pour la img-alt qui inclut également une instruction permettant de sélectionner une zone:
Une image sur un site Web représente le plan d'un bâtiment. L'image est une carte d'image avec chaque pièce une zone de carte interactive. Le texte alternatif est "Plan de l'immeuble. Sélectionnez une pièce pour plus d'informations sur l'objectif ou le contenu de la pièce". L'instruction de "sélectionner une pièce" indique que l'image est interactive.
Personnellement, je ne suis pas si sûr de ça. Je pense que si une telle instruction était nécessaire, elle devrait faire partie du texte de prosa situé à proximité de la carte.
Donc, dans votre exemple, vous devriez utiliser le contenu des attributs title comme contenu alt (et probablement supprimer les attributs title pour ne pas répéter ce contenu).
Comme je n’ai pas vu votre image, je ne peux que deviner, mais je suppose que l’image est composée de 4 icônes sans étiquette textuelle. Si tel est le cas, le guide pour l’image d’icône peut s’appliquer ici:
Une icône est généralement une simple image représentant un programme, une action, un fichier de données ou un concept.
Dans ce cas, la img-alt ne devrait pas décrire la (beauté des) icônes mais ce qu’elles représentent .
Si mon hypothèse est correcte, cela ne semble pas être le candidat idéal pour une carte d’image, mais bon, clients .