Liaison avec une image: Contexte vs <img>

8

Qu'est-ce qui est considéré comme la meilleure pratique (sémantiquement) lors de l'utilisation de texte avec une image pour créer un lien vers une page ou une catégorie interne?

Option 1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

Option 2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

où le CSS est défini:

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

Dois-je utiliser un arrière-plan stylisé pour le lien ou l' <img>intérieur de l'élément d'ancrage?

links images html5

— Petrus Theron
source

2

Si vous avez du texte dans le lien et que l'image prend simplement en charge le lien, l' option sémantique deux serait préférable.

Si vous n'aviez pas le texte, la première option - avec un altattribut approprié sur les images - serait sémantiquement meilleure.

*Éditer*

Pour une meilleure accessibilité (qui est similaire, mais différente du balisage sémantique), vous souhaiterez également inclure des titleattributs sur les <a>éléments d' ancrage dans les deux options.

— ajcw
source

1

L'option deux n'a pas de balise d'image pour prendre en charge un attribut alt?

— Petrus Theron

@FreshCode Oups, les options ont été inversées - merci!

— ajcw

N'oubliez pas la balise de titre sur les deux options.

— Digital Essence

1

J'utilise presque toujours une approche «Option 2» dans ces types de scénarios, dans un effort pour garder ma présentation et mon contenu séparés.

Il est recommandé de conserver les fioritures ou les aspects décoratifs de votre site Web dans CSS si possible. Le HTML doit être utilisé pour baliser le contenu, et non pour ajouter des coins arrondis ou d'autres aspects visuels de votre page Web. Si vos images de chaton et de chiot ajoutent simplement de l'esthétique à votre page, il est préférable de conserver les images dans votre CSS .

Il y a au moins un scénario où je ne pense pas que ce soit le cas, cependant; galeries d'images. Une galerie d'images serait une excellente utilisation de "l'option 1", car dans ce cas, les miniatures des images sont le contenu.

— Jacob Hume
source