Website-Bilder und Alt-Texte systematisch überarbeiten

Eine bestehende Website fasse ich nicht gern nur deshalb an, weil man irgendwo noch etwas verändern könnte. Wenn etwas ordentlich funktioniert, darf es auch einfach einmal funktionieren. Trotzdem lohnt es sich von Zeit zu Zeit, mit etwas Abstand auf die Bilder einer Website zu schauen.

Denn Bilder sind nicht nur Dekoration. Sie beeinflussen, wie schnell eine Seite lädt, wie verständlich Inhalte sind und auch, ob die Informationen einer Website für Menschen zugänglich bleiben, die Bilder nicht oder nur eingeschränkt wahrnehmen können.

Erst einmal schauen, was schon da ist

Bei einer bestehenden Website würde ich nicht anfangen, wahllos Bilder auszutauschen oder alles neu zu bearbeiten. Sinnvoller ist es, Bild für Bild zu prüfen: Ist die Datei vielleicht unnötig groß? Passt die tatsächliche Bildgröße zu der Stelle, an der sie verwendet wird? Wird ein geeignetes Dateiformat verwendet? Und könnte die Datei etwas besser komprimiert werden, ohne dass die sichtbare Qualität darunter leidet?

Gerade bei älteren Websites sammeln sich mit der Zeit Bilder an, die deutlich größer gespeichert wurden, als es für ihre Darstellung notwendig wäre. Eine behutsame Bildoptimierung kann dann Datenmenge reduzieren und Ladezeiten verbessern, ohne den Charakter der Website zu verändern.

Ein Alt-Text soll etwas vermitteln

Mindestens genauso interessant sind die Alternativtexte der Bilder. Dabei geht es nicht darum, jedes Bild zwanghaft mit irgendeiner Beschreibung zu versehen. Die entscheidende Frage ist vielmehr: Welche Information oder Funktion hat dieses Bild an genau dieser Stelle?

Wenn ein Bild eine wichtige Information vermittelt, sollte der Alt-Text diese Information kurz und verständlich wiedergeben. Er muss dabei nicht jedes sichtbare Detail aufzählen. Was sinnvoll ist, hängt immer ein wenig vom Zusammenhang ab, in dem das Bild auf der Seite steht.

Ein und dasselbe Foto kann deshalb an zwei verschiedenen Stellen sogar unterschiedliche Alternativtexte benötigen – oder an einer Stelle einen Alt-Text und an einer anderen gar keinen beschreibenden Text.

Website-Bilder und Alt-Texte überarbeiten

Manche Bilder dürfen einfach dekorativ sein

Anders sieht es bei rein dekorativen Bildern aus. Ein Hintergrundmotiv, eine Verzierung oder ein Bild, das keinerlei zusätzliche Information trägt, muss einem Screenreader nicht unnötig vorgelesen werden.

Solche Bilder sollten technisch als dekorativ behandelt werden. Bei einem normalen Bild bedeutet das in der Regel ein leeres Alt-Attribut. Das ist etwas anderes, als den Alt-Text einfach zu vergessen: Die leere Textalternative signalisiert bewusst, dass dieses Bild für das Verständnis des Inhalts keine zusätzliche Information liefert.

Text im Bild besser nicht verstecken

Enthält ein Bild wichtigen Text, lohnt sich ebenfalls ein genauer Blick. Informationen, die für das Verständnis einer Seite notwendig sind, sollten möglichst als normaler Text auf der Website vorhanden sein und nicht ausschließlich in einer Grafik stecken.

Lässt sich Text im Bild nicht vermeiden und ist diese Information an anderer Stelle nicht zugänglich, muss die Textalternative den wesentlichen Inhalt entsprechend vermitteln.

Auch hier gilt: Es geht nicht darum, möglichst viel zu beschreiben. Entscheidend ist, dass die Information erhalten bleibt.

Nicht für die Suchmaschine schreiben

Natürlich können sinnvolle Alt-Texte auch Suchmaschinen dabei helfen, den Inhalt eines Bildes besser einzuordnen. Trotzdem sollte daraus keine Sammlung von Suchbegriffen werden.

Ein Alt-Text ist kein Platz für Keyword-Stuffing. Er sollte zuerst verständlich sein und zum Zusammenhang der Seite passen. Wenn dabei ein wichtiger Begriff ganz natürlich vorkommt, ist das völlig in Ordnung. Ihn mehrfach hineinzuzwingen, nur weil irgendein SEO-Werkzeug gern noch ein Keyword sehen möchte, hilft dagegen niemandem.

Wenn ein Bild eine Funktion übernimmt

Manche Bilder sind nicht nur Bilder. Sie können beispielsweise Bestandteil eines Links oder einer Schaltfläche sein. Dann ist häufig nicht entscheidend, wie das Bild aussieht, sondern was passiert, wenn man es benutzt.

In einem solchen Fall sollte die zugängliche Bezeichnung eher die Funktion oder das Ziel vermitteln. Statt beispielsweise nur ein Druckersymbol zu beschreiben, ist eine Information wie „Seite drucken“ für den Nutzer wesentlich hilfreicher.

Auch optisch kann man solche Elemente etwas angenehmer gestalten. Eine kleine Veränderung beim Darüberfahren mit der Maus oder beim Tastaturfokus kann zeigen, dass etwas anklickbar ist. Eine Animation ist dabei aber nur eine mögliche Gestaltungsidee und keine Voraussetzung für gute Bedienbarkeit.

Wenn Bewegung eingesetzt wird, sollte sie zurückhaltend bleiben und nicht die einzige Möglichkeit sein, eine Funktion erkennbar zu machen. Menschen reagieren sehr unterschiedlich auf bewegte Inhalte, deshalb ist weniger hier oft angenehmer als mehr.

Barrierefreiheit beginnt nicht erst bei großen Websites

Barrierefreiheit ist kein Thema, das erst dann interessant wird, wenn eine Website besonders groß geworden ist. Gesetzliche Verpflichtungen können je nach Betreiber, Angebot und Situation unterschiedlich sein. Der praktische Nutzen einer zugänglichen Website besteht aber unabhängig davon.

Nicht jeder Mensch nimmt eine Website auf dieselbe Weise wahr. Wenn ein Bild eine wichtige Information vermittelt, sollte diese Information deshalb möglichst auch auf einem anderen Weg zugänglich sein.

Ein sinnvoller Alt-Text kann dabei einen kleinen, aber wichtigen Beitrag leisten. Er ersetzt nicht das Bild selbst, sondern vermittelt die Information oder Funktion, die an dieser Stelle sonst verloren gehen würde.

Behutsam verbessern statt alles neu machen

Dafür braucht es nicht immer einen großen technischen Umbau. Manchmal reicht es schon, bestehende Bilder einmal in Ruhe durchzugehen, unnötige Dateigrößen zu reduzieren und sich bei jedem Bild kurz zu fragen, welche Aufgabe es eigentlich auf dieser Seite erfüllt.

Braucht es eine Textalternative? Ist das Bild rein dekorativ? Enthält es Informationen, die besser als normaler Text auf der Seite stehen sollten? Oder erfüllt es sogar eine Funktion?

Mit diesen wenigen Fragen lässt sich schon erstaunlich viel verbessern.

Und danach sollte man es auch selbst können

Solche Arbeiten können wir gemeinsam für eine bestehende Website durchführen. Mir ist dabei aber genauso wichtig, zu zeigen, wie man die grundlegenden Dinge anschließend selbst weiterführen kann.

Welches Bild braucht einen Alt-Text? Wie ausführlich sollte er sein? Wann ist ein Bild nur Dekoration? Und woran erkennt man eine Datei, die unnötig groß geworden ist?

Das sind keine geheimen Tricks. Wenn man einmal verstanden hat, worauf man achten kann, lässt sich vieles beim nächsten neuen Bild direkt sinnvoll erledigen. Dann wächst eine Website mit der Zeit ein wenig sauberer weiter, ohne dass irgendwann wieder alles auf einmal angefasst werden muss.

Das ist mir ohnehin lieber: hin und wieder aufmerksam hinschauen, das Nötige verbessern und ansonsten eine Website auch einfach einmal in Ruhe funktionieren lassen.

Ähnliche Beiträge