Catégories
accessibilité Technologie

WCAG : Combiner les images et textes adjacent dans le même lien

Technique de base pour réaliser un site accessible, quand vous avez une image et un lien l’un à coté de l’autre pointant vers la même page, il est bon de les mettre ensemble dans le lien.

On peut alors s’abstenir de fournir une alternative textuelle à l’image, car le texte du lien parle de lui même. Cela donne :
<a href="products.html">
<img src="icon.gif" alt="" />
Products page
</a>

Une autre solution non cité par le W3C et que je trouve sympathique dans la mesure ou l’image n’est pas indispensable, c’est de mettre l’image à posteriori en CSS :
<style>.icon {background:url(icon.gif) center left no-repeat;padding-left:20px;}</style>
<a href="products.html" class="icon">Products page</a>

Information à retrouver sur la recommandation du W3C.

Par Nathanaël Martel

Développeur Web, défenseur de la culture libre et du revenu de base