# Alt-Tag-Verwendung: Leitfaden für Unternehmen > Alt-Tags korrekt nutzen: Schritt-für-Schritt-Anleitung für Barrierefreiheit & SEO. Für Gründer, Marketing & Produktteams. Published: 2026-04-09 · Updated: 2026-04-08 · Author: Erhan Kocabas · Source: https://bilarna.com/de/blog/alt-tag-verwendung · Markdown: https://bilarna.com/de/blog/alt-tag-verwendung.txt --- ## Was ist die "Alt-Tag-Verwendung"? Die Alt-Tag-Verwendung bezeichnet die Praxis, allen Bildern auf einer Webseite einen aussagekräftigen Alternativtext (HTML-Attribut alt) zuzuweisen. Dieser Text beschreibt den Inhalt und Zweck eines Bildes für Nutzer, die es nicht sehen können, sowie für Suchmaschinen. Viele Unternehmen unterschätzen den Aufwand einer systematischen Pflege oder sehen keinen direkten ROI, was zu verpassten Chancen in den Bereichen Barrierefreiheit, SEO und Benutzererfahrung führt. - **Alternativtext (Alt-Text)**: Eine kurze, textbasierte Beschreibung des Bildinhalts und seiner Funktion im Kontext der Seite. - **Barrierefreiheit (WCAG)**: Eine gesetzliche und ethische Verpflichtung, Inhalte für Menschen mit Sehbehinderungen zugänglich zu machen, die Screenreader nutzen. - **Bild-SEO**: Die Optimierung von Bildern für Suchmaschinen, um Traffic über die Bildersuche zu generieren und das Gesamtranking einer Seite zu unterstützen. - **Kontextrelevanz**: Der Alt-Text muss den Sinn des Bildes im umgebenden Text und auf der spezifischen Seite widerspiegeln. - **Dekorative Bilder**: Bilder ohne informativen Wert (z.B. rein gestalterliche Linien) sollten einen leeren Alt-Text (alt="") erhalten, damit Screenreader sie ignorieren. - **Funktionale Bilder**: Bilder, die als Schaltflächen oder Links dienen (z.B. ein "Warenkorb"-Icon), müssen ihre Aktion im Alt-Text beschreiben (z.B. "Zum Warenkorb"). - **Audit-Tools**: Software, die automatisch fehlende oder schlechte Alt-Texte auf einer gesamten Webseite identifiziert. - **Screenreader-Test**: Der praktische Test, wie die Seite mit einem Vorlese-Programm für blinde Nutzer klingt, um die Qualität der Alt-Texte zu überprüfen. Besonders profitieren Marketing-Teams und Produktverantwortliche, die die Auffindbarkeit und Reichweite ihrer Inhalte erhöhen müssen, sowie Legal- und Compliance-Abteilungen, die die Einhaltung von Barrierefreiheitsgesetzen wie der EU-Richtlinie (EN 301 549) sicherstellen müssen. Es löst das Problem unsichtbarer Inhalte für einen Teil der Nutzerschaft und ungenutzter SEO-Potenziale. **Kurz gesagt:** Die korrekte Alt-Tag-Verwendung macht Bildinhalte für alle Nutzer und Suchmaschinen zugänglich und ist ein wesentlicher Bestandteil einer modernen Webstrategie. ## Warum sie für Unternehmen wichtig ist Das Ignorieren von Alt-Texten führt zu rechtlichen Risiken, verschwendet Marketing-Budgets und schließt potenzielle Kunden aktiv aus. Die direkten und indirekten Kosten der Unterlassung sind oft höher als der Aufwand für eine systematische Pflege. - **Rechtliche Klagen und Abmahnungen** → Die EU-Webzugänglichkeitsrichtlinie und nationale Gesetze (wie das BGG in Deutschland) verpflichten öffentliche und viele private Stellen zur Barrierefreiheit. Fehlende Alt-Texte sind eine häufige Ursache für Abmahnungen. - **Verlust von Kunden mit Behinderungen** → Etwa 8% der Männer in Europa haben eine Form von Farbenblindheit. Ohne Alt-Texte ist Ihr Content für diese Nutzer nicht vollständig erfassbar, was zu Frustration und Abbruch führt. - **Verpasster organischer Traffic** → Bilder können über die Google-Bildersuche erheblichen Traffic generieren. Ohne beschreibende Alt-Texte indexieren Suchmaschinen Ihre Bilder nicht korrekt, und Sie verlieren diese Besucher. - **Schlechteres Seitenranking** → Alt-Texte sind ein On-Page-SEO-Signal. Ihre Qualität trägt zum Gesamtverständnis des Seiteninhalts durch Suchmaschinen bei und kann sich positiv auf das Ranking auswirken. - **Schlechte Nutzererfahrung bei langsamer Verbindung** → Wenn Bilder nicht laden, wird der Alt-Text angezeigt. Generische Texte wie "Bild001.jpg" helfen dem Nutzer nicht, den Inhalt zu verstehen, und wirken unprofessionell. - **Ineffiziente Content-Strategie** → Jedes Bild ist eine Chance, ein relevantes Keyword kontextuell zu platzieren. Diese Chance bleibt ungenutzt, wenn das Bild nicht beschrieben wird. - **Negative Markenwahrnehmung** → Ein Mangel an Barrierefreiheit wird zunehmend als Zeichen mangelnder sozialer Verantwortung und moderner Technikkompetenz gewertet. - **Probleme beim Social-Media-Sharing** → Viele Plattformen greifen beim Teilen eines Links auf den Alt-Text von Hauptbildern zurück. Ein guter Alt-Text verbessert die Darstellung und Klickrate Ihrer geteilten Links. **Kurz gesagt:** Professionelle Alt-Tag-Verwendung minimiert rechtliche Risiken, erweitert Ihre Zielgruppe, verbessert Ihre SEO und schützt Ihre Markenreputation. ## Schritt-für-Schritt-Anleitung Die größte Hürde ist oft der Überblick: Wo fange ich an, wenn meine Website Hunderte oder Tausende von Bildern hat? ### Schritt 1: Bestandsaufnahme durchführen Das Problem: Sie wissen nicht, wie viele Bilder betroffen sind oder wie schwerwiegend die Mängel sind. Nutzen Sie ein SEO-Crawling-Tool (wie Screaming Frog, Sitebulb oder ein WordPress-Plugin). Lassen Sie es Ihre gesamte Website scannen und einen Bericht über alle img-Tags erstellen, insbesondere solche mit fehlendem, zu kurzem oder überlangem Alt-Attribut. ### Schritt 2: Prioritäten setzen Nicht alle Bilder sind gleich wichtig. Konzentrieren Sie sich zuerst auf die Seiten mit dem höchsten Geschäftswert und den meisten Nutzerkontakten. - **High-Priority**: Homepage, Produkt- bzw. Dienstleistungsseiten, Landing Pages, Kontaktseite, Blog-Artikel mit hohem Traffic. - **Medium-Priority**: Blog-Archiv, Kategorieseiten, "Über uns"-Seite. - **Low-Priority** (kann automatisiert werden): Rein dekorative Bilder auf wenig besuchten Seiten, automatisch generierte Thumbnails. ### Schritt 3: Dekorative von informativen Bildern trennen Der häufigste Fehler ist, jedes Bild beschreiben zu müssen. Visuelle Elemente, die nur der Gestaltung dienen und keine Information transportieren (z.B. farbige Trennlinien, rein dekorative Hintergrundgrafiken), sollten einen leeren Alt-Text (alt="") erhalten. So signalisieren Sie Screenreadern, dieses Element zu überspringen. ### Schritt 4: Kontextrelevante Alt-Texte formulieren Schreiben Sie präzise, natürliche Beschreibungen. Stellen Sie sich vor, Sie müssten das Bild einem Kollegen am Telefon beschreiben. Vermeiden Sie Floskeln wie "Bild von..." oder "Grafik zeigt...". - **Für informative Bilder**: Beschreiben Sie das Objekt und seinen relevanten Kontext (z.B. "Mitarbeiterin erklärt einem Kunden am Laptop die Bilarna-Oberfläche" statt "Büro"). - **Für funktionale Bilder**: Beschreiben Sie die Aktion (z.B. Lupe als Such-Icon: alt="Website durchsuchen"). - **Für komplexe Grafiken (Diagramme, Infografiken)**: Fassen Sie die Kernaussage im Alt-Text zusammen und verlinken Sie auf eine separate, ausführliche Textbeschreibung. ### Schritt 5: Keywords natürlich einbinden Das Problem: Keyword-Stuffing verschlechtert die Nutzererfahrung und kann SEO-Strafen nach sich ziehen. Der Alt-Text sollte in erster Linie dem Menschen dienen. Wenn ein relevantes Hauptkeyword der Seite natürlich in die Beschreibung passt, können Sie es verwenden (z.B. auf einer Seite für "Projektmanagement-Software": alt="Team bespricht Gantt-Diagramm auf Projektmanagement-Software"). Zwingen Sie es niemals hinein. ### Schritt 6: Längen-Check und Qualitätskontrolle Alt-Texte sollten prägnant sein. Ein guter Richtwert sind 125 Zeichen oder weniger. Längere Beschreibungen können von Screenreadern abgeschnitten werden. Lassen Sie die überarbeiteten Seiten von einem Teammitglied gegenlesen oder nutzen Sie einen simplen Schnelltest: Deaktivieren Sie im Browser die Bilderanzeige. Verstehen Sie den Seiteninhalt und die Funktionalität immer noch? ### Schritt 7: Prozesse für neue Inhalte etablieren Die einmalige Bereinigung nutzt nichts, wenn neue Bilder weiterhin ohne Alt-Text hochgeladen werden. Integrieren Sie die Alt-Text-Pflege verbindlich in Ihre Redaktions- und Publishing-Workflows. Machen Sie das Alt-Text-Feld in Ihrem Content-Management-System (z.B. WordPress) zu einem Pflichtfeld für alle Bild-Uploads durch Redakteure und Agenturen. ### Schritt 8: Regelmäßig auditierten Setzen Sie einen jährlichen oder halbjährlichen Audit-Termin an. Websites wachsen, Designs ändern sich, neue Inhalte kommen hinzu. Ein regelmäßiger Check mit den Tools aus Schritt 1 stellt sicher, dass Ihre Alt-Texte aktuell und vollständig bleiben. **Kurz gesagt:** Beginnen Sie mit einer Analyse, priorisieren Sie wertvolle Seiten, formulieren Sie kontextuelle Beschreibungen und institutionalisieren Sie die Pflege in Ihren Workflows. ## Häufige Fehler und Warnsignale Diese Fehler sind weit verbreitet, weil Alt-Texte oft als technisches Nachgedanke behandelt oder an Praktikanten ohne klare Vorgaben delegiert werden. - **Generische Dateinamen als Alt-Text** → Schadet der Barrierefreiheit und SEO, da "IMG_1234.jpg" keine Information liefert. **Lösung:** Dateien vor dem Upload benennen (z.B. "blue-office-chair.jpg") und einen echten Alt-Text vergeben. - **Keyword-Stuffing** → Klingt unnatürlich, wird von Screenreadern als Spam empfunden und kann von Suchmaschinen abgewertet werden. **Lösung:** Stellen Sie die Beschreibung für den Menschen in den Vordergrund. Keywords nur verwenden, wenn sie natürlich passen. - **Überlange Alt-Texte** → Überfordern Nutzer von Screenreadern und werden oft abgeschnitten. **Lösung:** Fassen Sie sich auf das Wesentliche (max. ~125 Zeichen). Für lange Beschreibungen nutzen Sie das longdesc-Attribut oder verlinken auf einen Text. - **Vergessen dekorativer Bilder** → Screenreader lesen den Dateinamen oder "Grafik" vor, was nutzlos und störend ist. **Lösung:** Dekorative Bilder immer mit alt="" markieren. - **Beschreibung des Aussehens, nicht der Funktion** → Bei funktionalen Elementen ist die Aktion wichtiger als das Aussehen (z.B. "Drucken"-Symbol). **Lösung:** Fragen Sie: "Was passiert, wenn man darauf klickt/bedient?" - **Fehlende Kontextanpassung** → Das gleiche Bild auf zwei verschiedenen Seiten benötigt unter Umständen unterschiedliche Alt-Texte. **Lösung:** Prüfen Sie den umgebenden Text und Seitenzweck für jedes einzelne Vorkommen eines Bildes. - **Automatische Generierung ohne Prüfung** → KI-Tools für Alt-Texte können Fehler machen oder den Kontext nicht erfassen. **Lösung:** Nutzen Sie generierte Texte nur als Vorschlag und überprüfen Sie sie immer manuell. - **Alt-Text für Hintergrundbilder (CSS)** → Bilder, die per CSS eingebunden sind, sind für Screenreader standardmäßig nicht zugänglich. **Lösung:** Wichtige Informationen aus Hintergrundbildern müssen im HTML-Text der Seite redundant vorhanden sein. **Kurz gesagt:** Vermeiden Sie generische, überladene oder kontextlose Beschreibungen und stellen Sie sicher, dass jedes Bild – ob dekorativ oder informativ – korrekt behandelt wird. ## Tools und Ressourcen Die Auswahl an Hilfsmitteln ist groß; das richtige Tool hängt von Ihrer Website-Technologie und Ihrem Budget ab. - **SEO-Crawling-Tools** – Identifizieren fehlende und schwache Alt-Texte auf gesamten Websites. Ideal für die initiale Bestandsaufnahme und regelmäßige Audits (z.B. Screaming Frog, Deepcrawl). - **Browser-Erweiterungen für Barrierefreiheit** – Ermöglichen schnelle Checks einzelner Seiten. Zeigen die Alt-Texte aller Bilder an und heben Probleme visuell hervor (z.B. WAVE Evaluation Tool, axe DevTools). - **Integrierte CMS-Prüfungen** – Viele Content-Management-Systeme wie WordPress oder Shopify haben integrierte Accessibility-Checks oder Plugins, die beim Bearbeiten direkt auf fehlende Alt-Texte hinweisen. - **Screenreader-Software** – Der definitive Test. Kostenlose Optionen wie NVDA (Windows) oder VoiceOver (macOS/iOS) helfen zu verstehen, wie Ihre Seite für blinde Nutzer klingt. - **Bildanalyse-KI** – Kann als Unterstützung dienen, um automatische Vorschläge für Alt-Texte zu generieren. Ersetzt jedoch nicht die manuelle, kontextbezogene Prüfung. - **Richtlinien-Dokumentation (WCAG)** – Die offizielle Quelle für Anforderungen. Die WCAG 2.1 Richtlinie 1.1.1 "Non-text Content" ist der relevante Maßstab für Alt-Texte. - **Checklisten und Styleguides** – Interne Dokumente, die Regeln für Redakteure und Designer festhalten, z.B. "Wie beschreiben wir Produktbilder?", um Konsistenz zu gewährleisten. - **Lighthouse (Chrome DevTools)** – Das integrierte Auditing-Tool von Chrome bietet einen schnellen Accessibility-Score und listet konkrete Probleme mit Alt-Attributen auf. **Kurz gesagt:** Kombinieren Sie Crawler für die Bestandsanalyse, Browser-Tools für die Stichprobe und Screenreader für den finalen Nutzertest. ## Wie Bilarna helfen kann Die größte Herausforderung ist oft, die richtigen Experten oder Dienstleister zu finden, die Sie bei der systematischen Alt-Tag-Optimierung oder einem umfassenden Barrierefreiheits-Audit unterstützen können. Bilarna ist ein KI-gestützter B2B-Marktplatz, der Unternehmen mit verifizierten Anbietern für digitale Dienstleistungen zusammenbringt. Wenn Sie externe Unterstützung für die Umsetzung einer barrierefreien Website benötigen – sei es für ein initiales Audit, die Erstellung eines Redaktionsleitfadens oder die technische Implementierung –, können Sie auf Bilarna gezielt nach Anbietern suchen. Unser AI-Matching hilft Ihnen, Anbieter zu identifizieren, die auf Barrierefreiheit (Accessibility), On-Page-SEO oder Content-Strategie spezialisiert sind. Das verifizierte Anbieterprogramm von Bilarna bietet eine zusätzliche Sicherheitsebene durch geprüfte Unternehmensdaten und Leistungsnachweise. So können Sie Zeit bei der Suche sparen und sich auf Anbieter mit relevanter Expertise konzentrieren. ## Häufig gestellte Fragen ### F: Sind Alt-Texte gesetzlich vorgeschrieben? Ja, für viele Unternehmen in der EU. Die EU-Webzugänglichkeitsrichtlinie verpflichtet öffentliche Stellen und, je nach nationaler Umsetzung, auch bestimmte private Anbieter (z.B. von essenziellen Dienstleistungen) zur Barrierefreiheit nach WCAG-Standard. WCAG 2.1 schreibt aussagekräftige Alt-Texte explizit vor. Fehlende Alt-Texte können ein Abmahnrisiko darstellen. ### F: Wie lang sollte ein Alt-Text sein? Ein guter Richtwert sind 125 Zeichen oder weniger. Die Beschreibung sollte präzise sein. Für komplexe Grafiken, die detailliert beschrieben werden müssen, nutzen Sie eine kurze Zusammenfassung im Alt-Attribut und verlinken Sie auf eine ausführliche Beschreibung im Fließtext oder auf einer separaten Seite. ### F: Brauchen auch Banner-Bilder und Hero-Images auf der Startseite einen Alt-Text? Unbedingt. Diese Bilder sind oft zentral für die Kommunikation Ihrer Markenbotschaft. Beschreiben Sie nicht nur das Motiv, sondern auch den key message oder Call-to-Action, sofern dieser im Bild enthalten ist (z.B. "Freundliches Serviceteam am Telefon – Kontaktieren Sie uns für eine kostenlose Beratung"). ### F: Was mache ich mit sehr altbeständen von Tausenden Produktbildern? Hier ist eine pragmatische, priorisierte Vorgehensweise entscheidend: - **1. Priorisieren:** Beginnen Sie mit den Bestsellern und wichtigsten Produktkategorien. - **2. Template erstellen:** Entwickeln Sie eine Vorlage für gleichartige Produkte (z.B. "Produktname - Hauptmerkmal 1, Hauptmerkmal 2"). - **3. Teilweise automatisieren:** Prüfen Sie, ob Ihr PIM- oder Shop-System Alt-Texte aus Produktdatenfeldern beziehen kann. - **4. Prozess anpassen:** Stellen Sie sicher, dass für alle *neuen* Produktbilder sofort ein korrekter Alt-Text nach Schema angelegt wird. ### F: Kann ich für alle Bilder denselben Alt-Text verwenden, wenn sie ähnlich sind? Nein. Jedes Bild sollte individuell betrachtet werden. Selbst bei ähnlichen Produktbildern (z.B. ein Stuhl in verschiedenen Farben) muss der Alt-Text die unterscheidende Eigenschaft enthalten (z.B. "Bürostuhl Modell Avocado in blau"). Generische, duplizierte Alt-Texte sind für Nutzer nutzlos und können von Suchmaschinen als minderwertiger Content gewertet werden. --- *Published on [Bilarna](https://bilarna.com) — AI Visibility & B2B SaaS marketplace*