Sinnvoller Gebrauch des ALT-Attributs

Eigentlich ganz einfach – das Befüllen des ALT-Attributs in Bildern. Aber dem ist nur bedingt so.

Auch wenn es sich hier um einen Grundlagenartikel handelt, halte ich ihn trotzdem für sehr lesenswert: Appropriate Use of Alternative Text (WebAIM, via AccessBlog). Vor allem wird systematisch mit unterschiedlichen Beispielen klargemacht, wie das ALT-Attribut in Bildern sinnvoll genutzt werden kann:

Bilder mit Bildunterschrift

Wenn bei Bildern eine Bildunterschrift gegeben ist, dann kann das ALT-Attribut im Bild leer bleiben.

Bilder ohne Bildunterschrift

Wenn Bilder keine Bildunterschrift haben, dann muss das ALT-Attribut mit Inhalt gefüllt werden.

Bilder mit Links

Bilder, die mit einem Link versehen sind, dürfen nie ein leeres ALT-Attribut aufweisen. Es sollte im ALT-Attribut des Bildes klar werden, welche Funktion der Link hat und zu welchem Inhalt er führt. Wenn der Link selbst keine nähere Bezeichnung hat, muss das ALT-Attribut des Bildes geradezu diese Lücke füllen.

Funktionelle Grafiken

Bei Navigationsgrafiken reicht es, den Namen des Navigationspunktes als ALT-Attribut zu verwenden.
Wenn z.B. Icons auf Dateien verweisen und auch auf diese verlinkt sind, soll im ALT-Attribut des Icons klar vermerkt werden, um welche Datei es sich handelt, z.B. um eine PDF-Datei. Falls das Icon ohne erklärenden Text erscheint, muss im ALT-Attribut diese notwendige Information vermerkt werden.

Grafiken, die nur dem Layout dienen

Das ALT-Attribut dieser Grafiken muss leer bleiben. Besser wäre es, wenn diese Grafiken als Hintergrund eingebunden werden, dann gibt es im Quelltext keine Leerstände. ;-) Gleiches gilt für Grafiken, die dem Inhalt keine wesentliche Information hinzufügen, eher nur zur Illustration dienen.

Formulare: Buttons mit Grafik

In Formularen müssen alle Buttons, die eine Grafik verwenden, mit einem ALT-Attribut versehen werden, damit Funktion und Inhalt des Buttons verständlich wird.

Hintergrundbilder

Hintergrundbildern kann man ohnehin kein ALT-Attribut hinzufügen, was auch nicht sinnvoll wäre (s. oben Grafiken, die nur dem Layout dienen). Wenn ein Bild Inhalt vermitteln soll, darf es nicht als Hintergrundgrafik gesetzt werden.

5 Antworten auf „Sinnvoller Gebrauch des ALT-Attributs“

  1. Danke! :-) Aber der Dank gebührt dem englischen Orginal. Ich habe das nur ein wenig gestrafft ins Deutsche gebracht.

  2. Pingback: Tobias Otte
  3. Nun habe ich schon an anderer Stelle auf dieser Site erzählt, dass es zu Problemen führt, wenn man Bildern mit Link ein ALT-Attribut gibt, das nicht über das Bild sondern den Inhalt des Links informiert. Dadurch verschiebt sich im Google-Index alles. Es ist besser, im ALT-Attribut des Bildes über den Inhalt des Bildes zu informieren oder es leer zu lassen, wenn es nur ein Icon ist, und Informationen über den Link in ein TITLE-Attribut des Links zu schreiben:

    Hoffe, der Code wird richtig angezeigt.

    Auf diese Weise wird gruene-wiese.html mit dem Foto gruene-wiese.jpg unter dem Suchwort “Grüne Wiese” angezeigt, und nicht das Icon-GIF.

  4. Ah, Sie haben sich hier die Frage ja schon selbst beantwortet. :)

    Ja, aber es geht nicht nur um die Auffindung bei Google, sondern das ALT-Attribut von Bildern dient dazu, wenn das Bild nicht angezeigt werden kann, einen alternativen Inhalt bereit zu stellen. Geben Sie in diesem Fall dem Bild den Inhalt des Linkes, würde der Inhalt des Bildes nicht zur Verfügung stehen.

Kommentare sind geschlossen.