Verknüpfung mit einem Bild: Hintergrund vs <img>

8

Was wird als Best Practice (semantisch) angesehen, wenn Text mit einem Bild zum Verknüpfen mit einer internen Seite oder Kategorie verwendet wird?

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>

wo das CSS definiert ist:

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

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

Sollte ich einen gestalteten Hintergrund für den Link oder einen <img>innerhalb des Ankerelements verwenden?

links images html5

— Petrus Theron
quelle

2

Wenn der Link Text enthält und das Bild lediglich den Link unterstützt, ist Option zwei semantisch besser.

Wenn Sie den Text nicht hätten, wäre Option eins - mit einem entsprechenden altAttribut für die Bilder - semantisch besser.

*bearbeiten*

Um die Zugänglichkeit zu verbessern (ähnlich, aber anders als beim semantischen Markup), möchten Sie in beiden Optionen auch titleAttribute für die Ankerelemente <a>einfügen.

— ajcw
quelle

1

Option zwei hat kein Image-Tag zur Unterstützung eines Alt-Attributs?

— Petrus Theron

@FreshCode Whoops, habe die Optionen falsch herum bekommen - danke!

— Ajcw

Vergessen Sie nicht das Titel-Tag bei beiden Optionen.

— Digitale Essenz

1

Ich verwende in solchen Szenarien fast immer einen "Option 2" -Ansatz, um meine Präsentation und meinen Inhalt getrennt zu halten .

Es wird empfohlen, Schnickschnack oder dekorative Aspekte Ihrer Website nach Möglichkeit in CSS zu belassen. HTML sollte zum Markieren von Inhalten verwendet werden und nicht zum Hinzufügen abgerundeter Ecken oder anderer visueller Aspekte Ihrer Webseite. Wenn Ihre Kätzchen- und Welpenbilder Ihrer Seite nur Ästhetik verleihen, ist es der richtige Weg, die Bilder in Ihrem CSS zu behalten .

Es gibt jedoch mindestens ein Szenario, in dem ich nicht glaube, dass dies der Fall ist. Bildergalerien. Eine Bildgalerie wäre eine hervorragende Verwendung von „Option 1“ sein, da in diesem Fall der Bildminiaturen sind der Inhalt.

— Jacob Hume
quelle