Was bedeutet: Bilder mit beschreibenden Alt-Attributen optimieren?

**Gemeint ist: Das `alt`-Attribut eines Bildes soll den Bildinhalt so beschreiben, dass Menschen mit Screenreader und Suchmaschinen verstehen, was auf dem Bild zu sehen ist. Ein guter Alt-Text ersetzt das Bild inhaltlich – er stopft nicht einfach Keywords hinein.** ## Was ein Alt-Text konkret macht Der Alt-Text ist eine kurze Bildbeschreibung im HTML, zum Beispiel: ```html <img src="rote-laufschuhe.jpg" alt="Rote Laufschuhe mit weißer Sohle auf Holzuntergrund"> ``` Wenn das Bild nicht lädt oder ein Screenreader genutzt wird, wird dieser Text statt des Bildes ausgegeben. Die praktische Folge: Deine Seite wird barriereärmer und der Bildinhalt bleibt verständlich. ## Was „beschreibend optimieren“ bedeutet Gemeint ist nicht, möglichst viele Suchbegriffe unterzubringen. Gemeint ist: - das Bild präzise beschreiben - den Kontext der Seite berücksichtigen - unnötige Wörter wie „Bild von“ oder „Foto zeigt“ weglassen - nur dann leer lassen, wenn das Bild rein dekorativ ist Schlecht: - `alt="schuhe laufschuhe sportschuhe günstig kaufen"` Besser: - `alt="Schwarze Herren-Laufschuhe mit atmungsaktiver Mesh-Oberfläche"` Der Unterschied ist wichtig: Der zweite Text hilft echten Nutzern, der erste wirkt wie SEO-Spam. ## Wann Alt-Texte leer sein sollten Wenn ein Bild keinen eigenen Informationswert hat, sollte das Alt-Attribut leer sein: ```html <img src="trenner.png" alt=""> ``` Das gilt zum Beispiel für: - rein dekorative Icons - Hintergrundgrafiken - visuelle Trennelemente Dann ignorieren Screenreader das Bild, was die Seite angenehmer nutzbar macht. ## Die einfache Regel Schreib als Alt-Text das, was jemand am Telefon verstehen müsste, wenn er das Bild nicht sehen kann. Ein Produktbild braucht meist eine konkrete Beschreibung, ein dekoratives Designelement keinen Text. Genau das ist mit „Bilder mit beschreibenden Alt-Attributen optimieren“ gemeint.