Was ist das `alt-` und warum ist es wichtig?

Das alt- Attribut (für Alternativtext ) beschreibt den Inhalt eines Bildes im HTML-Code:

Bei Darstellungsproblemen erscheint dieser Text anstelle des Bildes. Er ist wichtig, da er von assistiven Technologien (Bildschirmleseprogrammen) vorgelesen wird und Suchmaschinen als semantisches Signal dient. Gut formuliert verbessert er die Barrierefreiheit, die Benutzerfreundlichkeit und die Suchmaschinenoptimierung.

Barrierefreiheit: Bilder bedeutungsvoll gestalten

Bildschirmleseprogramme : Alternativtext ist die gesprochene Beschreibung eines Bildes. Ohne ihn nimmt der Benutzer lediglich ein bedeutungsloses „Bild…“ wahr.
Inhaltsverständnis : Ein guter Alternativtext ordnet das Bild in den redaktionellen Kontext ein, nicht in einem absoluten Sinne.
Navigation : Es vermeidet Sackgassen (insbesondere bei Bildlinks oder Schaltflächensymbolen).

Wann verwendet man `alt=""` (leer)?

Dekorative Bilder , die keine Informationen liefern (Merkmale, Hintergründe, Muster):

<img src="ornament.svg" alt="" aria-hidden="true">

Sie werden stummgeschaltet , um das Leseerlebnis nicht zu stören.

SEO: ein relevantes Signal, das jedoch mit Vorsicht behandelt werden sollte

Suchmaschinen „sehen“ keine Pixel; sie interpretieren, was Sie angeben. Ein Alt-Attribut :

Bietet Kontextinformationen zur Seite und zum Bild (nützlich für Google Bilder).
Die Gesamtrelevanz wird erhöht, wenn die Begriffe des Themas auf natürliche Weise einbezogen werden.
Vermeiden Sie Keyword-Stuffing : Bleiben Sie natürlich, präzise und kurz.

Gute Schreibpraktiken

Beschreiben Sie, was das Bild zeigt und welche Absicht auf der Seite verfolgt wird.
Schlecht: alt="Bild eines Schuhs"
Gut: alt="Schwarze spitze Pumps aus Leder, Winterkollektion 2025"
Fassen Sie sich kurz : 5 bis 15 Wörter (oder gegebenenfalls ~80–140 Zeichen).
Vermeiden Sie unnötige Präfixe : kein „Foto von“, „Bild von“, „visuelle Darstellung von“ (der Bildschirmleser kündigt bereits an, dass es sich um ein Bild handelt).
Sich der Rolle des Bildes anpassen :
- Funktional (Bildlink/Schaltfläche): Beschreiben Sie die Aktion, nicht das Bild.
  
  <a href="/cart">img <" src = " cart.svg alt = " Warenkorb ansehen " > a >
- Logo : Verwenden Sie den Namen der Organisation.
  
  <img src="logo.svg" alt="Maison Dupont">
- Infografik/Grafik : Alternativtext + Bildunterschrift oder detaillierte Beschreibung in der Nähe (<figcaption>(Link „Mehr erfahren“).
  
  <figure>img <src = "sales-2024.png" alt = " DetaillierteUmsatztrends 2020–2024, Aufwärtstrend" > <figcaption> Zahlen in der folgenden Tabelle . >
Sprache und Präzision : Verwenden Sie die Sprache des Textes, klare Begriffe, vermeiden Sie unnötigen Fachjargon.
Bilder mit Text : Wenn der Text unerlässlich ist (z. B. bei einem Poster), fügen Sie ihn in den Alternativtext oder, noch besser, in die barrierefreie Bildunterschrift ein.

Häufige Sonderfälle

Dekorative Symbole in Schaltflächen mit bereits vorhandenem Text :

<button>Leitfadens <img src = "download.svg" alt = "" aria-hidden = " true" >Schaltfläche zum Herunterladen des </img> </button>
SVG inline : bevorzugen <title> pour l’accessibilité, et role="img" si nécessaire.
Variable Produktbilder : Dynamisch einen aussagekräftigen Alternativtext generieren : „Seiden-Midikleid, Mitternachtsblau, Größe 38“.

Häufige Fehler, die es zu vermeiden gilt

Das Vergessen des Attributs : Es handelt sich um einen Mangel in der Barrierefreiheit und eine verpasste SEO-Chance.
Unpräzise Beschreibungen : „Bild“, „Foto“, „Banner“.
Texte, die zu lang sind oder werbliche Inhalte enthalten („das Beste auf dem Markt, unglaublich…“): Bleiben Sie bei den Fakten.
Keyword-Stuffing wie „Luxustasche“, „Luxus-Damentasche“, „Luxus-Ledertasche“ erschwert das Verständnis.

Konkrete Beispiele

Gute Praxis

<img src="plage-coucher-soleil.jpg" alt="Sonnenuntergang an einem Sandstrand mit Palmen">
Schlechte Praxis

<img src="plage.jpg" alt="Strandbild">
Bildlink

<a href="/lookbook-ete">img <src = " vignette-lookbook.jpg" alt = " Öffnen Sie das Sommer- Lookbook " > a >

Redaktionelle Integration und Prozess

Checkliste im CMS : Alt- , kontextbezogene Hilfe mit Beispielen.
Teamtraining : Designer, Texter, Integratoren – jeder muss die Regel „Beschreiben Sie die Absicht“ kennen.
Regelmäßige Überprüfung : Barrierefreiheits-/SEO-Tools zur Identifizierung von Bildern ohne Alt-Text oder mit irrelevantem Alt-Text
Governance : Festlegen, wer schreibt, wer überprüft und zu welchem Zeitpunkt (z. B. während der Qualitätssicherung vor der Veröffentlichung).

Mini-Check-up in 7 Fragen

Ist das Bild informativ oder rein dekorativ?
Beschreibt der Alternativtext, was im Kontext der Seite nützlich ist?
Ist es prägnant, natürlich und kommt ohne ein „Bild von / Foto von“ aus?
Beschreibt der Alternativtext eines Bildlinks die Handlung ?
Habe ich dem Diagramm eine Legende oder einen Link zu den Daten ?
Sind Sprache, Rechtschreibung und Terminologie korrekt?
Verhindert Alternativtext Keyword - Stuffing ?

Wichtige Punkte, die Sie sich merken sollten

Das Alt- ist ein kleines Detail mit großer Wirkung: Es macht Ihre Inhalte für Menschen zugänglich, die keine Bilder sehen können, es verdeutlicht Ihre Botschaft für Suchmaschinenund es verbessert die Gesamtqualität Ihrer Website.

Setzen Sie auf einen einfachen Ansatz: Beschreiben Sie die Absicht, fassen Sie sich kurz, unterscheiden Sie zwischen informativen und dekorativen Bildern und führen Sie einen Prüfprozess ein. Dadurch verbessern Sie die Zugänglichkeit, profitieren von Ihrer Suchmaschinenoptimierung und gestalten die Benutzererfahrung übersichtlicher.

Quelle: Lesen Sie den Originalartikel