W3docs
de
Anmelden

HTML alt-Attribut

Das alt-Attribut gibt einen alternativen Text für Bilder an. Erfahre, wie du guten Alt-Text schreibst und auf welchen Elementen das Attribut gilt.

Das HTML-Attribut alt liefert eine Textalternative für ein Bild (oder ein bildähnliches Element). Es wird von Screenreadern vorgelesen und anstelle des Bildes angezeigt, wenn das Bild nicht geladen werden kann. Diese Seite erklärt, wie guter Alternativtext aussieht, wie sich alt bei den einzelnen unterstützenden Elementen verhält und welche häufigen Fehler zu vermeiden sind.

Das alt-Attribut kann auf folgenden Elementen verwendet werden: <area>, <img> und <input type="image">.

Warum Alt-Text wichtig ist

Das alt-Attribut erfüllt gleichzeitig drei Aufgaben:

  • Barrierefreiheit. Screenreader-Nutzer können das Bild nicht sehen, daher ist der alt-Text für sie das Bild. Eine treffende Beschreibung des Inhalts ermöglicht es ihnen, der Seite zu folgen. Ein sinnvoller alt-Text macht ein Bild überhaupt erst zugänglich.
  • Fallback bei defekten Bildern. Fehlt die Bilddatei, ist der Pfad falsch oder die Verbindung langsam, zeigt der Browser den alt-Text an Stelle des Bildes anstelle eines leeren Rahmens. Das hält die Seite nutzbar.
  • SEO (ein kleiner Bonus). Suchmaschinen können alt-Text lesen, um zu verstehen, was ein Bild zeigt — das hilft bei der Bildsuche. Betrachte dies als kleinen Nebeneffekt — schreibe alt zuerst für Menschen, nicht um Keywords einzustopfen.
Gefahr

Für das <img>-Element ist das alt-Attribut erforderlich. Es ganz wegzulassen ist ein Barrierefreiheitsverstoß: Ein Screenreader fällt dann auf die Ankündigung des Dateinamens zurück, was selten hilfreich ist. Ein leeres alt="" ist eine bewusste, gültige Wahl für dekorative Bilder — es ist nicht dasselbe wie das Weglassen von alt.

Guten Alt-Text schreiben

Beschreibe das Bild so, wie du es jemandem beschreiben würdest, der es nicht sehen kann — im Kontext des umgebenden Inhalts.

  • Sei beschreibend und konkret, aber prägnant — ungefähr 125 Zeichen oder weniger. Screenreader können bei sehr langem Alternativtext schlecht pausieren.
  • Beginne nicht mit „Bild von" oder „Foto von". Screenreader kündigen bereits an, dass es sich um ein Bild handelt, das Präfix ist daher überflüssig.
  • Vermittle die Funktion oder den Inhalt, der im Kontext relevant ist, nicht jedes visuelle Detail.
  • Lasse den Alt-Text bei rein dekorativen Bildern weg, indem du alt="" verwendest (siehe unten).

Guter vs. schlechter Alt-Text

Für dasselbe Foto eines Golden Retrievers, der eine Frisbee in einem Park fängt:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Dekorative Bilder: leeres alt verwenden

Wenn ein Bild keine Information hinzufügt — ein Trennzeichen, ein dekoratives Element, ein Symbol neben Text, der bereits dasselbe aussagt — gib ihm ein leeres alt="". Das weist Screenreader an, das Bild vollständig zu überspringen, anstatt einen Dateinamen anzukündigen.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Info

Merke dir den Unterschied: alt="" = „Dieses Bild ist dekorativ, überspringen." Kein alt überhaupt = ein Fehler, der Screenreader-Nutzer ohne jede Alternative zurücklässt.

Syntax

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

Das alt-Attribut bei <area>

In einer Bildkarte wirkt jeder anklickbare <area>-Bereich wie ein Link, daher sollte sein alt beschreiben, wohin dieser Bereich führt — genauso wie du Linktext schreiben würdest. Jedes <area> benötigt ein eigenes, eindeutiges alt; denselben Wert für verschiedene Ziele zu wiederholen lässt Nutzer nicht unterscheiden, welcher Bereich wohin führt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Probier es selbst »

Das alt-Attribut bei <img>

Dies ist die häufigste Verwendung. Beschreibe, was das Bild im Kontext der Seite zeigt. Wenn das Bild auch eine sichtbare Bildunterschrift hat, erwäge, es mit <figure> und einem <figcaption> zu umschließen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Probier es selbst »

Das alt-Attribut bei <input type="image">

Ein <input type="image"> ist ein grafischer Absenden-Button. Hier muss alt die Aktion des Buttons beschreiben, nicht das Bild — zum Beispiel alt="Submit" oder alt="Search" — denn das ist es, was ein Nutzer wissen muss, wenn das Bild nicht lädt. Das alt-Attribut ist bei <input> nur gültig, wenn type="image" gesetzt ist.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Probier es selbst »

Übungen

Übung
Was ist der Zweck des 'alt'-Attributs in HTML?
Was ist der Zweck des 'alt'-Attributs in HTML?

Verwandte Themen

Was this page helpful?