Collegamento con un'immagine: sfondo vs <img>

8

Che cosa è considerata la migliore pratica (semanticamente) quando si utilizza il testo con un'immagine per collegarsi a una pagina o categoria interna?

opzione 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>

opzione 2

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

dove è definito il CSS:

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

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

Dovrei usare uno sfondo stilizzato per il collegamento o un <img>elemento di ancoraggio interno?

links images html5

— Petrus Theron
fonte

2

Se hai del testo all'interno del link e l'immagine supporta semplicemente il link, l' opzione due semanticamente sarebbe migliore.

Se non avessi il testo, l'opzione 1 - con un altattributo appropriato sulle immagini - sarebbe semanticamente migliore.

*modificare*

Per una migliore accessibilità (che è simile, ma diversa dal markup semantico), si desidera includere anche gli titleattributi sugli <a>elementi di ancoraggio in entrambe le opzioni.

— ajcw
fonte

1

L'opzione due non ha un tag immagine per supportare un attributo alt?

— Petrus Theron,

@FreshCode Whoops, ho sbagliato le opzioni nel modo sbagliato - grazie!

— ajcw,

Non dimenticare il tag del titolo su entrambe le opzioni.

— Digital Essence

1

Uso quasi sempre un approccio "Opzione 2" in questi tipi di scenari, nel tentativo di mantenere separati la mia presentazione e i miei contenuti .

È buona norma mantenere eventuali fronzoli o aspetti decorativi del tuo sito Web nei CSS, se possibile. L'HTML dovrebbe essere usato per contrassegnare i contenuti e non per aggiungere angoli arrotondati o altri aspetti visivi della tua pagina web. Se le immagini dei tuoi cuccioli e cuccioli stanno solo aggiungendo un'estetica alla tua pagina, mantenere le immagini nel tuo CSS è la strada da percorrere .

C'è almeno uno scenario in cui non credo che sia così, comunque; gallerie di immagini. Una galleria di immagini sarebbe un ottimo uso di "Opzione 1", perché in quel caso le miniature delle immagini sono il contenuto.

— Jacob Hume
fonte