Alt-Texte einfach erklärt

Bilder und Icons verständlich beschreiben

Bilder machen eine Website lebendiger und helfen dabei, Inhalte zu erklären. Doch nicht alle Besucher können sie sehen. Menschen, die einen Screenreader nutzen, lassen sich die Inhalte einer Website vorlesen. Damit wichtige Bildinformationen dabei nicht verloren gehen, gibt es Alt-Texte.

Ein Alt-Text ist eine kurze Beschreibung, die ein Screenreader vorlesen kann. Er sollte nicht jedes Detail eines Bildes aufzählen. Entscheidend ist, welche Information das Bild vermittelt.

Wann ist ein Alt-Text sinnvoll?

Ein Alt-Text ist hilfreich, wenn das Bild etwas zeigt, das für den Inhalt wichtig ist.

Bei einem Produktfoto könnte das zum Beispiel sein: „Rote Ledertasche mit verstellbarem Schulterriemen.“ Bei einem Diagramm kann eine kurze Zusammenfassung der wichtigsten Aussage genügen: „Der Umsatz steigt von Januar bis Juni kontinuierlich an.“

Die Beschreibung richtet sich also danach, warum das Bild auf der Seite zu sehen ist.

Wann kann man auf eine Beschreibung verzichten?

Manche Bilder dienen nur der Gestaltung. Sie lockern eine Seite auf, vermitteln aber keine eigene Information. Auch wenn der Text direkt neben dem Bild bereits alles erklärt, braucht es oft keine zusätzliche Beschreibung.

So müssen Screenreader-Nutzerinnen und -Nutzer keine Informationen hören, die sie bereits kennen oder die für den Inhalt nicht wichtig sind.

Und was ist mit Icons?

Icons sind kleine Symbole, zum Beispiel eine Lupe für die Suche oder ein Einkaufswagen im Online-Shop. Wenn ein Icon eine Funktion auslöst, sollte klar sein, was passiert, wenn man es auswählt.

Statt nur das Symbol zu sehen, sollten Nutzerinnen und Nutzer auch die Information erhalten: „Suche öffnen“, „Menü öffnen“ oder „Produkt in den Warenkorb legen“. Ein X zum Schließen eines Fensters sollte entsprechend als „Schließen“ verständlich sein.

Drei einfache Fragen für den Alltag

Bevor Sie ein Bild oder Icon auf Ihrer Website einfügen, fragen Sie sich:

• Vermittelt das Bild eine wichtige Information?
• Steht dieselbe Information schon im Text daneben?
• Ist bei einem Icon klar, welche Funktion es hat?

So fällt es leichter, passende Beschreibungen zu finden und unnötige zu vermeiden.

Fazit

Ein guter Alt-Text erklärt, was an einem Bild wichtig ist. Dekorative Bilder brauchen oft keine Beschreibung. Bei Icons sollte verständlich sein, welche Funktion sie erfüllen.

Es geht nicht darum, jedes Bild ausführlich zu beschreiben. Wichtig ist, dass die entscheidende Information auch dann ankommt, wenn jemand die Website nicht sehen kann.

Sie möchten Ihre Website barriereärmer gestalten?

Redheadmedia-Dresden entwickelt individuelle WordPress- und Gambio-Lösungen für Unternehmen.

Wir unterstützen Sie dabei, Bilder und Icons verständlich einzubinden und Ihre Website für möglichst viele Menschen zugänglich zu machen.