Alternativtext für Bilder schreiben: Wie geht das richtig? Mit Beispielen

Kurze Antwort
Wie schreiben Sie einen guten Alternativtext für Bilder auf Ihrer Website?
Ein Alternativtext ist die kurze Beschreibung, die ein Screenreader anstelle eines Bildes vorliest und die der Browser zeigt, wenn das Bild nicht lädt. Sie beschreiben dabei nicht das Motiv, sondern die Aufgabe des Bildes auf genau dieser Seite. Bei Links nennen Sie das Ziel, bei Dekoration bleibt das Feld leer.
In diesem Leitfaden gehen wir, Talha Aslan und Team, die Bildtypen durch, die uns auf Firmenwebsites am häufigsten begegnen. Dazu gehören Titelbilder, Logos, Icons, Produktfotos, Teamfotos, Diagramme und Werbebanner. Was ein Alternativtext grundsätzlich ist und welche Rolle er für SEO spielt, erklären wir bereits im Beitrag was ein Alttext ist und wie Sie ihn richtig schreiben. Hier geht es also konkret um das Schreiben selbst. Das heißt, Sie sollen für jedes Bild auf Ihrer Website den passenden Satz finden.
Welche Frage stellen Sie, bevor Sie schreiben?
Zunächst löst eine einzige Frage die halbe Arbeit. Was würde der Leser verpassen, wenn dieses Bild fehlte? Lautet die Antwort „nichts“, ist das Bild vermutlich dekorativ. Geht es dagegen um eine Information, ein Gefühl oder eine Handlung, muss der Text genau diese Lücke füllen.
Zum Beispiel kann ein Kaffeetassenfoto auf der Startseite eines Cafés nur Stimmung erzeugen. Dann verpasst der Leser ohne das Bild nichts. Andererseits kann dasselbe Foto den neuen Filterkaffee auf der Karte vorstellen. In diesem Fall fehlt dem Leser das Produkt. Deshalb schreiben Sie für den Kontext und nicht für die Datei.
Wenn unser Team eine bestehende Website übernimmt, stellen wir diese Frage zunächst für jedes einzelne Bild. Danach teilen wir die Bilder in drei Gruppen ein:
- Informative Bilder: Produkte, Personen, Diagramme und Screenshots.
- Funktionale Bilder: verlinkte Logos, Icons als Schaltflächen und Suchsymbole.
- Dekorative Bilder: Hintergrundmuster, Trennlinien und wiederholte Icons.
Somit ist das Schreiben kein Ratespiel mehr. Dann folgt jede Gruppe einer eigenen Regel, und die folgenden Abschnitte erklären diese Regeln.
Wie funktioniert der Entscheidungsbaum des W3C Schritt für Schritt?
Das W3C veröffentlicht einen Entscheidungsbaum für alt, der diese Wahl vereinfacht. Er stellt fünf Fragen, und jede Antwort führt zu einem Ergebnis. In unseren Projekten halten wir uns fast genau an diese Reihenfolge:
- Enthält das Bild Text? Steht derselbe Text daneben als echter Text, bleibt alt leer. Fehlt der Text sonst überall, übernehmen Sie ihn in den Alternativtext.
- Steckt das Bild in einem Link oder einer Schaltfläche? Dann beschreiben Sie das Ziel oder die Aktion.
- Trägt das Bild Bedeutung? Bei einem einfachen Foto genügt ein kurzer Satz. Bei Diagrammen liefern Sie die Details zusätzlich auf der Seite.
- Ist das Bild rein dekorativ? Dann bleibt alt leer.
- Passt nichts davon? Dann hilft der passende Abschnitt im Bildertutorial des W3C weiter.
Am wertvollsten ist dabei die Reihenfolge. Denn die Fragen zu Text und Links kommen zuerst. Also gilt bei einem Logo, das zugleich Marke und Link ist, zuerst die Linkregel.
Warum braucht dasselbe Bild manchmal zwei verschiedene Texte?
Das W3C macht die Einordnung als informativ oder dekorativ vom Grund abhängig, aus dem ein Autor das Bild einsetzt. Ein Foto kann also auf einer Seite Bedeutung tragen und auf einer anderen nur schmücken. Daher führt ein einziger Text, den Sie einmal in der Mediathek speichern, oft zum falschen Ergebnis.
Ein Beispielszenario: Ein Architekturbüro zeigt das Foto einer fertigen Villa auf der Startseite und auf einer Projektseite. Auf der Startseite vermittelt das Foto unter der Überschrift „Unsere Projekte“ einen allgemeinen Eindruck. Auf der Projektseite möchte der Leser dagegen die Fassade genau ansehen.
- Startseite: „Zweigeschossige Villa mit Steinfassade, entworfen von unserem Büro“.
- Projektseite: „Südfassade der Villa mit großen Glasflächen und Holzpergola“.
- Blogbeitrag, in dem das Foto nur schmückt: leeres alt.
Kurz gesagt beschreiben Sie die Aufgabe des Bildes auf dieser Seite, nicht das Bild an sich. Erlaubt Ihr CMS eine Anpassung pro Seite, sollten Sie diese Möglichkeit nutzen.
Was sollte der Alternativtext eines Titelbildes sagen?
Das große Titelbild (Hero) ganz oben auf der Startseite erfüllt meist eine von zwei Aufgaben. Entweder vermittelt es einen Eindruck, oder es liegt nur hinter der Überschrift. Für Bilder, die einen Eindruck oder ein Gefühl transportieren, empfiehlt das W3C, genau diesen Eindruck zu benennen.
Denken Sie zum Beispiel an ein Familienrestaurant. Ein Foto mit einer lachenden Familie am Tisch sagt: „Familien sind bei uns willkommen.“ Dann kann ein kurzer Satz diese Botschaft tragen: „Drei Generationen einer Familie beim Essen im Garten“. So erhalten auch Menschen mit Screenreader denselben Eindruck.
Allerdings steht auf dem Titelbild oft schon eine große Überschrift mit einem kurzen Text. Dann sorgt das Foto nur für Atmosphäre. In diesem Fall ist ein leeres alt meist die bessere Wahl. Sonst hört der Leser zuerst eine lange Bildbeschreibung und erst danach die Überschrift.
Bei Slidern bewerten Sie jede Folie einzeln. Steckt die Kampagnenbotschaft in der Bilddatei, müssen Sie sie im Text wiederholen. Liegt die Botschaft als echter HTML Text darüber, lassen Sie sie weg.
Wie formulieren Sie den Alternativtext für ein Logo?
Das Logo steht zudem auf fast jeder Seite und verlinkt meist auf die Startseite. Im Tutorial zu funktionalen Bildern empfiehlt das W3C, dass ein verlinktes Logo ohne weiteren Linktext das Ziel nennt. Das Wort „Logo“ allein reicht also nicht. Leser möchten nämlich wissen, wohin der Link führt, denn nur so können sie entscheiden.
Nehmen wir für ein Beispielszenario eine erfundene Marke: „Nordwerk Bau“. Verlinkt das Logo im Kopfbereich auf die Startseite, schreiben Sie „Nordwerk Bau Startseite“. Steht direkt daneben sichtbarer Linktext mit „Nordwerk Bau“, bekommt das Logo ein leeres alt. Denn sonst hört der Leser denselben Link zweimal.
Ein unverlinktes Logo im Footer braucht dagegen nur den Markennamen, also keine Zielangabe. Partnerlogos und Zertifikatslogos tragen dagegen Information. Dort nennen Sie die Organisation und, falls wichtig, die Art des Zertifikats.
- Verlinktes Logo im Kopfbereich: „Nordwerk Bau Startseite“.
- Verlinktes Logo mit sichtbarem Text daneben: leeres alt.
- Unverlinktes Logo im Footer: „Nordwerk Bau“.
- Zertifikatssiegel: Name des Zertifikats und ausstellende Stelle.
Was gehört zu verlinkten Bildern und Schaltflächen?
Sobald ein Bild klickbar ist, wird sein Text zum Linktext. Das W3C empfiehlt für eine Suchschaltfläche mit Lupe ein Wort wie „Suchen“, weil der Text die Aktion nennen soll. MDN nennt ein ähnliches Beispiel und rät zu „nächste Seite“ statt „Pfeil nach rechts“.
Bei Icons für soziale Netzwerke verletzen viele Websites diese Regel. Die kleinen Symbole im Footer haben oft gar keinen Text oder nur das Wort „Icon“. Dennoch muss der Leser hören, wohin der Link führt, etwa „Unser Instagram Profil“ oder „Unsere Unternehmensseite bei LinkedIn“.
Außerdem sollten Sie das kleine Symbol für Links in einem neuen Tab nicht vergessen. Das W3C empfiehlt, dass solche Icons die Bedeutung „öffnet in neuem Fenster“ vermitteln. So erlebt niemand einen überraschenden Tabwechsel.
- Warenkorbsymbol: „Mein Warenkorb“.
- Telefonsymbol als Link: „Rufen Sie uns an“.
- Menüsymbol: „Menü öffnen“.
- Symbol zum Schließen: „Dialog schließen“.
In der Praxis stellen Sie bei jedem klickbaren Bild eine Frage. Was stünde auf diesem Link, wenn er reiner Text wäre?
Woran erkennen Sie ein dekoratives Bild?
Ein dekoratives Bild ändert nichts an der Information der Seite, wenn Sie es entfernen. Hintergrundmuster, Trennlinien, Ornamente und Icons, die nahen Text wiederholen, gehören dazu. Das Erfolgskriterium 1.1.1 der WCAG verlangt, dass assistive Technologien solche Dekoration ignorieren können.
Laut MDN zeigt ein leeres alt an, dass das Bild kein wichtiger Teil des Inhalts ist. Allerdings bedeutet ein komplett fehlendes Attribut etwas anderes. MDN weist darauf hin, dass manche Screenreader dann stattdessen den Dateinamen vorlesen können. Damit niemand „IMG 4821 jpg“ hören muss, setzen Sie das Attribut also immer, notfalls leer.
Wir nutzen oft einen einfachen Test. Wir blenden das Bild aus und lesen die Seite erneut. Bleibt die Bedeutung erhalten, ist das Bild Dekoration. Verschwindet dagegen ein Gefühl oder ein Markeneindruck, wechselt das Bild in die informative Gruppe.
Zudem erreichen Hintergrundbilder per CSS den Screenreader gar nicht erst. Für ein rein dekoratives Muster ist ein Hintergrundbild per CSS somit eine saubere Lösung. Diese Entscheidung fällt im Design viel leichter, als später Hunderte Bilder einzeln zu korrigieren.
Wie gehen Sie mit Bildern um, die Text enthalten?
Werbebanner, Rabattstreifen und Grafiken aus sozialen Netzwerken haben den Text oft fest im Bild. Genau für diesen Fall gibt es die erste Frage des Entscheidungsbaums. Steht der Text nirgendwo sonst auf der Seite, übernehmen Sie ihn in den Alternativtext.
Ein Beispielszenario: Ein Möbelhaus setzt ein Banner mit „Saisonschlussverkauf auf alle Sofas“ auf die Startseite. Dieser Text existiert allerdings nur im Bild. Daher lautet auch der Alternativtext „Saisonschlussverkauf auf alle Sofas“. Verlinkt das Banner auf eine Kampagnenseite, ergänzen Sie das Ziel: „Saisonschlussverkauf Sofas, zur Aktion“.
Trotzdem ist die beste Lösung oft, den Text aus dem Bild zu holen. Echter HTML Text bleibt beim Zoomen scharf, funktioniert mit Übersetzungstools und erreicht Suchmaschinen direkt. Deshalb setzt unser Designteam Kampagnentexte lieber als Code über das Bild.
Screenshots von Zitaten oder Kundenbewertungen sind ein Sonderfall. Steht die vollständige Bewertung direkt unter dem Bild als echter Text, darf das Bild ein leeres alt erhalten. Folglich hört der Leser denselben Satz nicht zweimal.
Wie sieht ein guter Alternativtext für Produktfotos aus?
In einem Onlineshop tragen Produktfotos mehr Information als jedes andere Bild. Viele Käufer entscheiden allein anhand dieser Fotos. Da der Produktname bereits im Seitentitel steht, zeigt ein starker Text, was genau dieses Foto ergänzt. Typisch sind Blickwinkel, Farbe, Material oder ein Moment der Nutzung.
Google stellt in den Best Practices für Bilder gute und schlechte Beispiele nebeneinander. Ein fehlender Text ist schlecht, eine Kette gestopfter Keywords ebenso. „Welpe“ ist besser, „Dalmatinerwelpe beim Apportieren“ gilt als bestes Beispiel. Mehr nützliche Details machen den Text also stärker.
Hier Beispiele für eine erfundene Produktgalerie:
- Hauptfoto: „Marineblaues Leinenhemd, Vorderansicht“.
- Zweites Foto: „Perlmuttknöpfe und Nahtdetail“.
- Drittes Foto: „Model trägt das Hemd, Seitenansicht“.
- Farbvorschau: „Farbvariante Khaki“.
So versteht jeder Käufer, warum ein Bild in der Galerie steht. Für einheitliche Texte hilft unser Leitfaden zur Produktbeschreibung für SEO. Dateigröße und Formate behandeln wir im Beitrag Bilder für die Website optimieren.
Was schreiben Sie bei Team und Gründerfotos?
Teamfotos auf der Seite „Über uns“ schaffen vor allem Vertrauen. Deshalb möchten Leser wissen, wen sie sehen. Meist genügen daher Name und Rolle der Person.
Achten Sie auch hier auf Wiederholungen. Stehen Name und Titel bereits als echter Text unter dem Foto, bringt eine Wiederholung nichts. Dann kann der Text beschreiben, was die Person tut, oder er bleibt leer.
Ein Beispielszenario mit einer erfundenen Kanzlei:
- Foto ohne sichtbaren Namen: „Gründungspartnerin Elena Kaya in ihrem Büro“.
- Karte mit Name und Titel darunter: leeres alt oder „Elena Kaya im Gespräch mit einer Mandantin“.
- Gruppenfoto: „Unser Kanzleiteam im Besprechungsraum“.
Vermeiden Sie andererseits lange Angaben zu Aussehen, Alter oder Körpermerkmalen. Solche Details dienen selten dem Zweck der Seite. Kurz gesagt reichen bei Teamfotos meist die Fragen „wer“ und „was tut die Person“.
Wie behandeln Sie Leistungsicons und Featurekarten?
Firmenwebsites zeigen oft kleine Icons neben Überschriften wie „Schnelle Lieferung“ oder „Support rund um die Uhr“. Allerdings wiederholen die meisten dieser Icons nur die Überschrift als Bild. Laut Entscheidungsbaum erhält ein Bild, das nahen echten Text wiederholt, ein leeres alt.
Was aber, wenn das Icon allein steht? Ein grünes Häkchen in einer Preistabelle kann zum Beispiel „in diesem Paket enthalten“ bedeuten. Dann trägt das Icon Information. Sein Text sollte diese Bedeutung nennen, etwa „Enthalten“. Sonst verpasst eine Person mit Screenreader die halbe Tabelle.
Dasselbe Prinzip gilt für Icons im SVG Format. Dekorative SVG Grafiken verbergen Sie vor assistiven Technologien, informative erhalten einen zugänglichen Namen. Wenn Sie diese Trennung schon in der Designdatei markieren, sinkt die Fehlerzahl in der Entwicklung deutlich.
Konkret arbeitet unser Team mit einer kurzen Regel. Steht neben dem Icon ein Wort mit derselben Bedeutung, schweigt das Icon. Fehlt so ein Wort, spricht das Icon. Mit dieser Regel sortieren Sie Hunderte Kartenicons schnell.
Was schreiben Sie bei Diagrammen, Infografiken und Screenshots?
Bei komplexen Bildern kann ein kurzer Satz nicht die ganze Information tragen. Im Tutorial zu komplexen Bildern empfiehlt das W3C deshalb einen zweiteiligen Ansatz. Eine kurze Beschreibung benennt das Bild, eine lange Beschreibung liefert die wesentlichen Informationen als Text.
Ein Beispielszenario: Eine Energieberatung zeigt ein Balkendiagramm zum monatlichen Stromverbrauch. Der kurze Text könnte lauten: „Diagramm zum monatlichen Stromverbrauch, Details in der Tabelle darunter“. Direkt unter dem Diagramm stehen dann dieselben Daten als Tabelle oder kurze Zusammenfassung.
Außerdem rät das W3C, die lange Beschreibung für alle zugänglich zu machen, etwa im Hauptinhalt. Mit figure und figcaption verbinden Sie Bild und Erklärung zusätzlich. Wie Diagramme auf Websites verständlicher wirken, zeigen wir im Beitrag zur Datenvisualisierung.
Bei Screenshots gehen Sie ähnlich vor. Zeigt ein Screenshot in einer Softwareanleitung einen Schritt, beschreibt der Text diesen Schritt: „Einstellungsmenü mit geöffnetem Bereich Benachrichtigungen“. So folgen auch Leser, die den Screenshot nicht sehen.
Wie sehen Beispieltexte je nach Bildtyp aus?
Die folgende Tabelle fasst die Entscheidungen dieses Leitfadens auf einen Blick zusammen. Alle Beispiele beruhen auf erfundenen Marken und sind Beispielszenarien.
| Bildtyp | Ergebnis im Entscheidungsbaum | Schwaches Beispiel | Starkes Beispiel |
|---|---|---|---|
| Verlinktes Logo | Ziel nennen | logo | Nordwerk Bau Startseite |
| Suchsymbol | Aktion nennen | Lupe | Suchen |
| Hintergrundmuster | Leeres alt | Musterbild | alt="" |
| Banner mit Text | Text übernehmen | Rabattbanner | Saisonschlussverkauf auf alle Sofas |
| Produktfoto | Kurze Bedeutung | Hemd Hemd Leinenhemd | Marineblaues Leinenhemd, Vorderansicht |
| Teamfoto | Kurze Bedeutung | Teambild | Unser Kanzleiteam im Besprechungsraum |
| Balkendiagramm | Kurzer Text und lange Beschreibung | Diagramm | Monatlicher Verbrauch, Details in der Tabelle |
| Icon, das eine Überschrift wiederholt | Leeres alt | Liefericon | alt="" |
Sie können die Tabelle als Prüfwerkzeug nutzen. Ordnen Sie zuerst das Bild der richtigen Zeile zu. Dann bauen Sie den Satz nach dem Muster dieser Zeile.
Wie machen Sie aus einem schwachen einen starken Alternativtext?
Bei einer bestehenden Website geht das Umschreiben schneller als ein Neuanfang. Unser Team folgt dabei drei Schritten. Zunächst streichen wir Füllwörter. Danach ergänzen wir den Kontext. Schließlich entfernen wir Wiederholungen.
Einige Beispiele für solche Umformulierungen:
- Statt „bild1“ schreiben Sie „Blick auf den Bosporus von der Dachterrasse“.
- „Auf diesem Bild nutzt eine Frau einen Computer“ ersetzen Sie durch „Unsere Buchhalterin prüft eine Kundenakte“.
- Statt „webdesign webdesign agentur webdesign firma“ schreiben Sie „Firmenwebsite auf Smartphone und Desktop“.
- Statt „klicken“ schreiben Sie „Details zur Aktion ansehen“.
Die erste Änderung ersetzt einen sinnlosen Dateinamen. Mit der zweiten fällt das Muster „auf diesem Bild“ weg, vor dem MDN warnt, und der Zweck rückt nach vorn. Die dritte entfernt Keyword Stuffing, das Google als Spam einstufen kann. Zuletzt erhält ein klickbares Bild ein echtes Ziel.
Beim Umschreiben reicht pro Bild eine Frage. Würde dieser Satz dem Leser helfen, wenn er als normaler Text auf der Seite stünde? Wenn ja, sind Sie auf dem richtigen Weg.
Welche Wörter lassen Sie im Alternativtext besser weg?
Manche Wörter bringen nichts und verlängern somit nur die Hörzeit. Screenreader melden in der Regel ohnehin, dass es sich um ein Bild handelt. Daher brauchen Sie Wörter wie „Bild“, „Foto von“ oder „Grafik“ am Anfang nicht.
Auch MDN rät davon ab, im Text auf das Vorhandensein des Bildes oder den Dateinamen einzugehen. Statt „Bild“ beschreiben Sie also den Inhalt. Ist dagegen das Medium selbst wichtig, etwa bei einem Ölgemälde oder einer Karte, dürfen Sie es nennen.
Weitere Muster, die wir vermeiden:
- Keywordlisten und durch Kommas getrennte Suchbegriffe.
- Vage Linkformulierungen wie „hier klicken“ oder „mehr“.
- Eine exakte Kopie der Bildunterschrift oder der Überschrift direkt daneben.
- Urheberhinweise, Aufnahmedatum und Fotografenname ohne Nutzen für den Leser.
Kurz gesagt muss jedes Wort eine Aufgabe haben. Ein Keyword gehört nur dann hinein, wenn es das Bild natürlich beschreibt. Ebenso empfiehlt Google, Keywords passend einzusetzen und nicht zu stopfen.
Was passiert, wenn Bildunterschrift und alt sich überschneiden?
Eine Bildunterschrift (figcaption) ist sichtbarer Text, den alle Leser erhalten. Das Attribut alt ersetzt dagegen das Bild. Tragen beide denselben Satz, hört eine Person mit Screenreader dieselbe Information zweimal hintereinander.
Laut W3C kann ein Bild als überflüssig und somit dekorativ gelten, wenn der umgebende Text bereits erklärt, was es zeigt. Dann ist ein leeres alt sinnvoll. Liefert die Bildunterschrift dagegen nur Kontext, beschreibt alt weiterhin den Inhalt.
Ein Beispielszenario: In einem Reiseblog lautet die Bildunterschrift „Der Wanderweg, auf dem wir um 7 Uhr losgingen“. Der Alternativtext könnte dann „Schmaler Erdweg durch einen Kiefernwald“ lauten. Folglich ergänzen sich beide Texte, statt sich zu wiederholen.
Beim Attribut title lauert eine ähnliche Falle. MDN betont, dass title kein Ersatz für alt ist, und rät davon ab, beide gleich zu befüllen. Manche Screenreader lesen nämlich beide Werte vor. Zudem sehen Nutzer auf Touchscreens den Tooltip von title oft nie.
Wie gehen Sie bei Galerien, Karten und Formularen vor?
Galerien enthalten vor allem viele Fotos zum selben Thema. Allen denselben Text zu geben, ist der häufigste Fehler. Beschreiben Sie stattdessen, was jedes Foto unterscheidet: Blickwinkel, Raum, Detail oder Moment.
Ein Hotel hat zum Beispiel zehn Fotos mit dem Text „Zimmer mit Meerblick“. Teilen Sie diese besser auf: „Meerblick vom Balkon des Zimmers“, „Doppelbett und Schreibtisch“, „Bad mit bodengleicher Dusche“. So können Leser die Galerie wirklich erkunden.
Kartenbilder tragen dagegen meist eine Adresse. Nutzen Sie ein statisches Kartenbild, sollte der Text die Adresse oder den Ort nennen. Schreiben Sie außerdem die Adresse als echten Text auf die Seite. Eine Adresse, die nur im Bild steht, lässt sich nicht kopieren und hilft wenigen Lesern.
Für Bildschaltflächen in Formularen gilt die Linkregel. Zeigt eine Bildschaltfläche „Senden“, lautet ihr Text ebenfalls „Senden“. Zudem verlangt die WCAG bei CAPTCHA Bildern, den Zweck als Text zu beschreiben und Alternativen für andere Sinne anzubieten.
Wer sollte im Webdesign Projekt die Alternativtexte schreiben?
In vielen Projekten bleiben die Bildtexte bis zum Schluss liegen, und ein Entwickler füllt sie unter Zeitdruck aus. Den richtigen Satz kennt aber die Person, die weiß, warum ein Bild ausgewählt ist. Deshalb behandeln wir Bildtexte als Teil des Inhaltsplans.
Der Ablauf sieht so aus. Zunächst markiert die Designerin die Rolle jedes Bildes in der Designdatei: Information, Funktion oder Dekoration. Dann schreibt die Texterin die Sätze für informative und funktionale Bilder. Schließlich setzt der Entwickler dekorative Bilder mit leerem Wert oder als Hintergrundbild per CSS um. Somit sind die Texte am Tag des Starts fertig.
Möchten Sie diesen Ablauf von Anfang an auf Ihrer Website haben, planen wir im Rahmen unseres Webdesign Angebots Bildrollen und Texte bereits in der Designphase. Den allgemeinen Rahmen zur Barrierefreiheit erklären wir im Beitrag barrierefreie Website nach WCAG und BFSG.
Bildtexte in Beiträgen auf sozialen Netzwerken sind ein anderer Kontext. Dieses Thema behandeln wir separat im Beitrag zur Barrierefreiheit in sozialen Medien.
Wie prüfen Sie Alternativtexte vor der Veröffentlichung?
Eine kurze Prüfliste vor dem Start spart deshalb später viel Nacharbeit. Unser Team nutzt für jede Seite die folgende Checkliste:
- Hat jedes Bild ein Attribut alt, auch die dekorativen?
- Nennen verlinkte Bilder und Bildschaltflächen das Ziel oder die Aktion?
- Steht Text aus Bildern im Alternativtext oder als echter Text auf der Seite?
- Ist ein Text die exakte Kopie der Überschrift oder Bildunterschrift daneben?
- Sagt jedes Foto in einer Galerie etwas anderes?
- Stehen die Details von Diagrammen und Infografiken als Text oder Tabelle auf der Seite?
- Sind Füllwörter wie „Bild“ und gestopfte Keywords entfernt?
- Sind die Dateinamen sinnvoll, ohne automatische Namen wie „IMG 0023“?
Danach empfehlen wir, die Seite einmal mit einem Screenreader anzuhören. Die eingebauten Screenreader von Smartphones und Computern reichen dafür aus. Für einen schnellen Blick auf den technischen Zustand Ihrer Website können Sie zudem unseren SEO Check nutzen.
Wie übertragen Sie dieses System auf Ihre Website?
Bei einer neuen Website kosten diese Regeln von Anfang an kaum Mehraufwand. Bei einer bestehenden Website beginnen Sie am besten mit den meistbesuchten Seiten. Startseite, Produkt oder Leistungsseiten und die Kontaktseite stehen dabei vorn.
Wir empfehlen diese Reihenfolge. Zunächst korrigieren Sie verlinkte Bilder, weil sie die Navigation direkt betreffen. Danach folgen Banner mit Text. Schließlich kommen Produktfotos, Teamfotos und Galerien an die Reihe. So schließen Sie die größten Barrieren in kürzester Zeit.
Wenn Sie die Sichtbarkeit Ihrer Bilder in der Suche weiter stärken möchten, lohnt sich ein Blick auf IPTC Bildmetadaten. Sie ergänzen gute Alternativtexte, ersetzen sie aber nicht.
Möchten Sie Ihre Website nach diesem System neu aufbauen oder umgestalten, schildern Sie uns Ihr Projekt auf unserer Webdesign Seite und fordern Sie ein Angebot an. Dann gehören Bildplanung, Alternativtexte und Prüfungen zur Barrierefreiheit von Anfang an zum Projekt.



