10 Schritte: Alttexte für Handwerkerwebsites mit Beispieltexten

10 Schritte: Alttexte für Handwerkerwebsites mit Beispieltexten

Schreiben Sie beschreibende Alt-Texte für jede Referenzaufnahme auf Ihrer Website und kennzeichnen Sie rein dekorative Bilder explizit mit einem leeren alt-Attribut. Priorisieren Sie als ersten Schritt Ihre wichtigsten Portfoliofotos und formulieren Sie neue Alt-Texte mit Material, Ort und Ergebnis. Der Hintergrund dafür ist nicht nur guter Stil, sondern das Barrierefreiheitsstärkungsgesetz und die WCAG-Richtlinien, welche für viele Betriebswebsites inzwischen verbindlich sind.

Kurz gesagt:

• Für Referenzfotos sollten Alt-Texte das Ergebnis, Material und den Ort kurz, präzise und ohne Werbesprache beschreiben, idealerweise innerhalb von 150 bis 200 Zeichen.
• Relevante Bilder wie Logos, Teamfotos und CTA-Elemente benötigen funktionale Alt-Texte, während rein dekorative Elemente ein leeres alt-Attribut erhalten sollten.
• Ein schnelles Website-Audit durch einen Accessibility-Checker hilft, fehlende oder unzureichende Alt-Texte zu identifizieren und den Pflegeprozess zu starten.
• Automatisierte KI-Generatoren können beim Erstellen von Alt-Texten unterstützen, ersetzen aber keine redaktionelle Nachbearbeitung für branchenspezifische Details.
• Die Einhaltung der WCAG- und EN 301 549-Standards durch klare Alt-Texte stärkt sowohl Barrierefreiheit als auch SEO-Reichweite handwerklicher Websites.

Inhaltsverzeichnis

• Warum Alt-Texte für Barrierefreiheit und SEO relevant sind
• Konkrete Regeln: So formulieren Sie Alt-Texte für Handwerksbilder
• Praxisbeispiele: Vorher-Nachher-Alt-Texte für typische Handwerkerbilder
• Technische Einbindung: Alt-Text im HTML und im CMS korrekt pflegen
• Priorisierung & Workflow: Audit, Reihenfolge und laufende Pflege für kleine Betriebe
• Tools & Automatisierung: Accessibility-Checker, KI-Generatoren und Browser-Addons
• BFSG / WCAG: Kurz erklärt, was Handwerker wirklich beachten müssen
• Sofort-Checkliste: 10 Schritte, die Sie diese Woche umsetzen können
• Erfahrungen von Netivoo bei der Umsetzung von Alt-Texten für Handwerker
• Wie Netivoo Handwerksbetriebe bei der Umsetzung unterstützt
• Quellen
• FAQ

Warum Alt-Texte für Barrierefreiheit und SEO relevant sind

Ein Alt-Text ist die einzige Beschreibung, die ein Screenreader von einem Bild vorlesen kann. Für Menschen mit Sehbehinderung entscheidet dieser Text, ob ein renoviertes Bad auf Ihrer Referenzseite überhaupt wahrnehmbar wird oder als bloße Lücke im Text verschwindet. Genau darauf zielen die WCAG-Richtlinien des W3C ab: Sie legen fest, wie Textalternativen für nicht textuelle Inhalte gestaltet sein müssen, damit assistive Technologien sie sinnvoll verarbeiten können.

Suchmaschinen lesen Bilder nicht, sie lesen Kontext. Der Alt-Text ist neben Dateiname und Umgebungstext eines der wenigen Signale, das Google zur Einordnung eines Bildes nutzt. Für einen Elektrobetrieb bedeutet das: Ein Bild mit dem Alt-Text „Neue Zählerschrank-Installation in Einfamilienhaus, unterputz, TÜV-abgenommen“ liefert der Suchmaschine handfeste Anhaltspunkte für Bildersuche und Seitenrelevanz. Ein Alt-Text wie „IMG_2931“ liefert gar nichts.

Für Handwerksbetriebe wiegt das doppelt, weil die Referenzgalerie meist das Herzstück der Website ist. Kunden entscheiden sich für einen Dachdecker oder Tischler oft anhand von Vorher-Nachher-Fotos, nicht anhand von Fließtext. Wer diese Bilder nur mit generischen Dateinamen versieht, verschenkt Sichtbarkeit in der Bildersuche und schließt gleichzeitig eine ganze Nutzergruppe aus.

Profi-Tipp: Prüfen Sie stichprobenhaft drei bis vier Bilder Ihrer Referenzseite. Wenn Sie den Alt-Text nicht laut vorlesen könnten, ohne zu erklären, was eigentlich abgebildet ist, muss er überarbeitet werden.

Das Zusammenspiel aus Barrierefreiheit und Sichtbarkeit ist kein Zufall. Das Barrierefreiheitsstärkungsgesetz verweist bei den technischen Vorgaben direkt auf EN 301 549 und damit auf dieselben WCAG-Kriterien, die auch für gute Bildersuche-Ergebnisse sorgen. Wer sich an diesen Standard hält, bedient beide Ziele mit derselben Arbeit.

Konkrete Regeln: So formulieren Sie Alt-Texte für Handwerksbilder

Ein guter Alt-Text ist kurz, beschreibend und funktional. Er erklärt, was zu sehen ist, ohne Werbesprache oder aneinandergereihte Suchbegriffe. Keyword-Stuffing im Alt-Text („Dachdecker Dachdecker Oldenburg Dachsanierung günstig“) wird von Suchmaschinen inzwischen als Spam-Signal gewertet und hilft niemandem, der wirklich einen Screenreader nutzt.

Als Orientierung für die Länge empfiehlt ein Praxisleitfaden der HWK Halle etwa 150 bis 200 Zeichen. Das reicht für Material, Ort und Ergebnis, ohne in epische Bildbeschreibungen abzudriften.

Diese Grundregeln helfen bei der täglichen Praxis:

• Nennen Sie das Ergebnis zuerst, dann Material und Kontext: „Neu verlegter Eichenparkett im Wohnzimmer, matte Oberfläche, 90 Quadratmeter“ statt „boden.jpg“.
• Vermeiden Sie Füllphrasen wie „Bild von“ oder „Foto zeigt“ — der Screenreader kündigt bereits an, dass ein Bild folgt.
• Bei Logos reicht der Firmenname plus Zusatz, etwa „Logo Schreinerei Meyer, Firmensignet in Blau“.
• Teamfotos brauchen Funktion statt Namen ohne Kontext: „Zwei Elektriker bei der Verkabelung eines Neubaus, Arbeitsschutzkleidung“.
• Infografiken benötigen eine kurze inhaltliche Zusammenfassung, nicht nur „Grafik“ oder „Diagramm“.
• Rein dekorative Elemente wie Trennlinien oder Hintergrundmuster erhalten ein leeres alt=“”, damit Screenreader sie überspringen.

Ein Fehler, den man häufig auf Handwerker-Websites sieht: Referenzfotos mit technischen Details vollzustopfen, die kein Kunde interessieren. Die Kamerabrennweite oder das Aufnahmedatum gehören nicht in den Alt-Text. Relevant ist, was der Kunde sehen würde, wenn er selbst vor Ort stünde.

Praxisbeispiele: Vorher-Nachher-Alt-Texte für typische Handwerkerbilder

Am schnellsten lernt man an fertigen Beispielen. Diese Muster lassen sich direkt auf eigene Fotos übertragen und je nach Gewerk anpassen.

1. Referenzbild Badsanierung: Statt „bad3.jpg“ schreiben Sie „Komplett renoviertes Familienbad, ebenerdige Dusche, matte Feinsteinzeugfliesen in Anthrazit“.
2. Baustellenfoto Dach: Statt „baustelle.png“ schreiben Sie „Dachsanierung im Rohbau, neue Lattung und Dampfbremse vor Eindeckung“.
3. Prozessfoto Tischlerei: Statt „werkstatt2024.jpg“ schreiben Sie „Handwerker beim Schleifen einer Massivholzplatte in der Werkstatt“.
4. Angebots- oder CTA-Bild: Statt „button.png“ schreiben Sie „Kostenlose Erstberatung für Heizungsmodernisierung anfragen“.
5. Icon oder Symbolgrafik: Statt „icon-notdienst.svg“ schreiben Sie „Notdienst-Symbol, 24 Stunden erreichbar“ oder, falls das Icon rein gestalterisch ist, ein leeres alt=“”.

Bei Referenzfotos lohnt sich immer ein Blick auf den Kontext der Seite. Ein Bild derselben Fliese sieht auf einer Leistungsseite für Badsanierung anders aus als in einer allgemeinen Galerie, und der Alt-Text sollte diesen Unterschied spiegeln, statt überall denselben Text zu kopieren.

Was Sie konsequent weglassen sollten: Dateinamen-Reste, Kamerainformationen, GPS-Koordinaten oder Datumsstempel aus den EXIF-Daten. Diese Angaben haben für Screenreader-Nutzer und für Suchmaschinen keinen Wert und blähen den Alt-Text nur unnötig auf.

Technische Einbindung: Alt-Text im HTML und im CMS korrekt pflegen

Im HTML sitzt der Alt-Text als alt-Attribut direkt im img-Tag, etwa <img src="bad-sanierung.jpg" alt="Komplett renoviertes Familienbad mit ebenerdiger Dusche">. Das title-Attribut ist etwas anderes: Es erzeugt einen Tooltipp beim Überfahren mit der Maus und wird von den meisten Screenreadern gar nicht oder nur inkonsequent vorgelesen. Für Barrierefreiheit zählt allein das alt-Attribut.

In WordPress tragen Sie den Alt-Text in der Mediathek bei jedem hochgeladenen Bild ein, im Feld „Alternativtext“, getrennt vom Titel und von der Bildbeschreibung. Bei Elementor und ähnlichen Baukästen findet sich dasselbe Feld direkt im Bild-Widget, wenn Sie ein Bild auswählen.

Ein paar technische Punkte werden häufig übersehen:

• SVG-Grafiken brauchen entweder ein alt-Attribut, wenn sie als img eingebunden sind, oder ein aria-label, wenn sie direkt als Inline-SVG im Code liegen.
• Komplexe Grafiken mit viel Information (etwa Preistabellen als Bild) sollten eine längere Beschreibung im Fließtext daneben erhalten, da ein kurzer Alt-Text allein nicht reicht.
• Lazy Loading und responsive Bilder mit srcset ändern nichts am Alt-Text: Er muss bei jeder Bildvariante identisch erhalten bleiben, auch wenn das CMS automatisch mehrere Bildgrößen erzeugt.
• Prüfen Sie nach jedem Theme- oder Plugin-Wechsel stichprobenhaft, ob Alt-Texte beim Neu-Rendern der Galerie verloren gegangen sind. Das passiert öfter, als man denkt.

Priorisierung & Workflow: Audit, Reihenfolge und laufende Pflege für kleine Betriebe

Ein vollständiger Alt-Text-Umbau der gesamten Website an einem Wochenende ist für die meisten Betriebe unrealistisch. Sinnvoller ist ein kurzer, wiederholbarer Ablauf.

1. Schnell-Audit durchführen: Ein Accessibility-Checker wie WAVE zeigt in wenigen Minuten, welche Bilder komplett ohne Alt-Text sind, und liefert damit die erste grobe Liste.
2. Portfolio zuerst bearbeiten: Referenzfotos und Leistungsseiten haben die höchste Priorität, weil sie am meisten Traffic aus der Bildersuche bekommen.
3. Kontakt- und CTA-Bilder folgen: Buttons und Notdienst-Hinweise sind kurz, aber wichtig für Konversion und Barrierefreiheit gleichzeitig.
4. Restliche Bilder schrittweise nacharbeiten: Teamfotos, Blogbilder und Icons können über mehrere Wochen verteilt ergänzt werden.
5. Pflege dokumentieren: Ein einfaches Tabellenblatt mit Bildname, Status und Datum reicht für kleine Teams völlig aus.

Ein Praxisleitfaden der HWK Halle bestätigt diesen Ansatz: Für kleine Teams ist eine Auswahl der wichtigsten Schlüsselfotos zu Beginn effektiver als der Versuch einer sofortigen Komplettumsetzung.

Profi-Tipp: Legen Sie ein Alt-Text-Template pro Bildkategorie an, etwa für Referenzfotos, Teamfotos und Icons. Das spart bei jedem neuen Upload Zeit und sorgt für einheitliche Formulierungen.

Tools & Automatisierung: Accessibility-Checker, KI-Generatoren und Browser-Addons

Accessibility-Checker wie WAVE eignen sich gut für den ersten Überblick und zeigen fehlende oder leere Alt-Attribute direkt im Browser an. Browser-Addons erlauben dieselbe Prüfung schnell auf einzelnen Seiten, ohne ein separates Tool zu öffnen.

KI-gestützte Alt-Text-Generatoren sparen Zeit bei großen Bildmengen, erkennen aber selten branchenspezifische Details wie Fliesenart, Holzsorte oder das konkrete Gewerk. Eine automatisch erzeugte Beschreibung wie „Person bei Bauarbeiten“ ersetzt keine Aussage wie „Dachdecker bei der Eindeckung mit Tonziegeln“. Automatisierte Alt-Texte sind ein guter Startpunkt, aber keine fertige Lösung — die redaktionelle Nachbearbeitung bleibt bei Referenzfotos aus dem eigenen Gewerk nötig, wie auch Bau betont.

Für die laufende Pflege lohnen sich CMS-Plugins, die fehlende Alt-Texte in der Mediathek sammeln und Massenbearbeitung erlauben. Automatisierung liefert hier den Vorsprung, die letzte Prüfung durch einen Menschen bleibt aber Pflicht.

BFSG / WCAG: Kurz erklärt, was Handwerker wirklich beachten müssen

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für bestimmte digitale Angebote, darunter B2C-Onlineshops und Websites mit Online-Buchungsfunktionen. Ein Handwerksbetrieb, der online Termine bucht oder Produkte direkt verkauft, fällt damit potenziell unter das Gesetz, eine reine Referenzwebsite ohne Buchungs- oder Kauffunktion ist rechtlich anders einzuordnen.

Als technische Umsetzungsgrundlage nennt das Gesetz EN 301 549, die wiederum auf die WCAG-Kriterien des W3C verweist. Für sehr kleine Betriebe gibt es Ausnahmeregelungen, die konkrete Einordnung ist jedoch fallabhängig. Offizielle Antworten dazu liefert die Bundesfachstelle Barrierefreiheit mit FAQs und Webinaren.

Wer unsicher ist, ob die eigene Website betroffen ist, sollte die eigene Einordnung dokumentieren und im Zweifel eine kurze Barrierefreiheitserklärung auf der Website veröffentlichen. Das schafft Klarheit gegenüber Kunden und Behörden gleichermaßen.

Sofort-Checkliste: 10 Schritte, die Sie diese Woche umsetzen können

1. Führen Sie einen Schnell-Audit mit einem Accessibility-Checker durch (30 Minuten).
2. Listen Sie die zehn wichtigsten Referenzbilder Ihrer Website auf (15 Minuten).
3. Formulieren Sie für diese Bilder neue, beschreibende Alt-Texte (1 Stunde).
4. Kennzeichnen Sie dekorative Icons und Trennlinien mit leerem alt=“” (30 Minuten).
5. Prüfen Sie Logo und Teamfotos auf sinnvolle Alt-Texte (20 Minuten).
6. Kontrollieren Sie CTA- und Kontaktbuttons auf fehlende Alt-Texte (15 Minuten).
7. Ergänzen Sie fehlende Alt-Texte auf Leistungsseiten (1 Stunde).
8. Richten Sie ein einfaches Pflege-Dokument für neue Uploads ein (20 Minuten).
9. Prüfen Sie SVG-Grafiken auf korrekte aria-Labels (20 Minuten).
10. Holen Sie sich bei technischen Fragen Unterstützung, etwa über Netivoo.

Erfahrungen von Netivoo bei der Umsetzung von Alt-Texten für Handwerker

Handwerker-Websites entstehen innerhalb kurzer Zeit, inklusive strukturierter Referenzgalerien und direkter Ansprechpartner statt anonymer Ticket-Systeme. Sauber formulierte Alt-Texte gehören dabei von Anfang an zum Aufbau der Portfolioseiten, nicht zu einer nachträglichen Korrekturschleife. Gut präsentierte Referenzfotos können direkt zu mehr Anfragen führen, weil Kunden sich schneller ein klares Bild von der Arbeit machen können.

Wie Netivoo Handwerksbetriebe bei der Umsetzung unterstützt

Viele Betriebe versuchen, Alt-Texte selbst über ein Wochenende nachzuziehen, und geben nach den ersten zwanzig Bildern auf, weil parallel noch das Tagesgeschäft läuft. Dieser Teil kann als fester Bestandteil des Website-Aufbaus übernommen werden, nicht als teure Zusatzleistung im Nachgang.

Neue Websites entstehen innerhalb kurzer Zeit, mit klar formulierten Alt-Texten für jedes Referenzfoto, transparenten Paketpreisen und einem festen Ansprechpartner, der technische Rückfragen direkt beantwortet. Statt sich durch Mediathek-Einstellungen und CMS-Optionen zu kämpfen, bekommen Sie eine mobiloptimierte Website, die Ihre Arbeit zeigt und gleichzeitig die rechtlichen Grundlagen berücksichtigt. Für Elektrobetriebe gibt es dafür eine spezialisierte Lösung, für andere Gewerke passende Pakete auf der Hauptseite für Handwerker-Webdesign. Wer in der Region Ammerland sitzt, findet zusätzliche Informationen auf der regionalen Landingpage. Wenn Sie wissen möchten, was eine neue Website für Ihren Betrieb kostet und wie der Ablauf konkret aussieht, fragen Sie unverbindlich an.

Quellen

Für die technische Vertiefung lohnt sich der direkte Blick in die WCAG-Richtlinien des W3C sowie in die FAQs der Bundesfachstelle Barrierefreiheit. Der Praxisleitfaden der HWK Halle liefert konkrete Formulierungsbeispiele für unterschiedliche Bildtypen im Handwerk. Für den schrittweisen Umsetzungsprozess bietet bau.de einen kompakten Ablaufplan. Wer sich zusätzlich mit lokaler Suchmaschinenoptimierung beschäftigen will, findet dazu einen Leitfaden zu lokalem SEO für Handwerker sowie Hintergründe zur Suchmaschinenoptimierung von Standortseiten bei Netivoo. Ergänzend liefert IT-WINGS weitere Einblicke in technische SEO-Maßnahmen.

• Bundesregierung: Barrierefreiheitsstärkungsgesetz
• HWK Halle: Leitfaden Barrierefreiheit (Leitfaden, 2025)
• Bau

FAQ

Was ist ein Alt-Text genau?

Der Alt-Text ist eine kurze Textalternative im HTML-Code eines Bildes, die Screenreadern vorgelesen wird und Suchmaschinen als Kontextsignal dient.

Wie lang sollte ein Alt-Text für Handwerkerbilder sein?

Eine gute Orientierung liegt bei etwa 150 bis 200 Zeichen, genug für Material, Ort und Ergebnis, ohne unnötige Details.

Müssen alle Bilder auf einer Handwerker-Website Alt-Texte haben?

Informative Bilder wie Referenzfotos brauchen immer einen Alt-Text, rein dekorative Elemente erhalten stattdessen ein leeres alt=“”, damit Screenreader sie überspringen.

Betrifft das BFSG jede Handwerker-Website?

Nein, betroffen sind vor allem Websites mit B2C-Verkaufs- oder Buchungsfunktionen, eine reine Referenzseite ohne solche Funktionen fällt rechtlich anders aus, laut den Angaben der Bundesregierung.

Kann ich Alt-Texte komplett per KI generieren lassen?

KI-Generatoren sparen Zeit, erkennen aber selten gewerkspezifische Details wie Materialart oder Bauteil, deshalb bleibt eine kurze redaktionelle Nachprüfung sinnvoll.

Hilft Netivoo bei der Umsetzung barrierefreier Alt-Texte?

Ja, bei Netivoo gehören durchdachte Alt-Texte für Referenzfotos zum Standardaufbau jeder neuen Website und werden nicht nachträglich ergänzt.

Empfehlungen

• Welche Inhalte gehören auf eine Tischler-Website?
• Startseite für Handwerksbetriebe: Was sie leisten muss
• Was kostet eine Website für Handwerker wirklich?
• Website für Elektriker — Webdesign für Elektrobetriebe