iPhone-Bedienungshilfen: So nutzen Sie die Bedienungshilfen optimal

Alternativtext (Alt-Text) beschreibt, was auf einem Bild zu sehen ist. Er dient dazu, Ihre Website für alle zugänglich zu machen – auch für blinde und sehbehinderte Menschen.

Bildschirmleseprogramme lesen Alternativtexte vor und ermöglichen es Nutzern so, die Bedeutung eines Bildes zu verstehen. Dadurch trägt der Alternativtext direkt zur digitalen Barrierefreiheit bei und hilft Ihrer Website, die WCAG-Richtlinien zu erfüllen.

Alt-Texte verbessern nicht nur die Barrierefreiheit, sondern stärken auch Ihre Suchmaschinenoptimierung (SEO). Klare Beschreibungen helfen Suchmaschinen, den Bildinhalt zu verstehen und verbessern so sowohl die Benutzerfreundlichkeit als auch die Website-Performance.

Zusamenfassend

• Alternativtexte machen Websites für alle zugänglich

• Klare Beschreibungen helfen Suchmaschinen, Ihre Inhalte besser zu verstehen.

• Alternativtexte sind unerlässlich, um die Richtlinien zur digitalen Barrierefreiheit einzuhalten.

Wie man einen guten Alternativtext (Alt-Text) schreibt

Alternativtexte erstellen Sie, indem Sie dem Element, das Sie erläutern möchten, eine kurze Beschreibung hinzufügen. Dies kann im Quellcode oder über Ihr Content-Management-System (CMS) erfolgen. Ein CMS ermöglicht Ihnen die Verwaltung von Website-Inhalten ohne fortgeschrittene technische Kenntnisse.

In HTML fügt man die Beschreibung mithilfe des alt-Attributs innerhalb des img-Tags hinzu. Dadurch erfahren Nutzer – und assistive Technologien –, was das Bild zeigt. Zum Beispiel:

<img src="flower.jpg" alt="gelbe Tulpe in einer Vase" title="gelbe Tulpe in einer Vase">

Zusätzlich zum alt-Attribut können Sie auch das Titelattribut Dies liefert zusätzliche Informationen, wenn Nutzer mit der Maus über ein Element fahren. Einige Bildschirmleseprogramme lesen den Titel anstelle des Alternativtextes vor. Durch die Verwendung derselben Beschreibung in beiden wird sichergestellt, dass keine Informationen verloren gehen.

Für Schaltflächen und Formulare verwenden Sie ARIA-Attribute wie zum Beispiel aria-label oder aria-labelledby Die Diese beschreiben die Funktion eines Elements, auch wenn keine visuellen Hinweise vorhanden sind.

Attribut

Zweck

Beispiel

alle

Bildbeschreibung

<img alt=" Eye-Able logo">

Titel

Zusätzliche Erläuterung

<img title="Eye-Able logo">

aria-label

Beschreibt Schaltflächen oder Formulare

<button aria-label="Formular senden">

Verschiedene Bildtypen

Informative Bilder

Informative Bilder enthalten wichtige Inhalte. Sie helfen Nutzern von Bildschirmleseprogrammen zu verstehen, was visuell dargestellt wird.

Ein gängiges Beispiel ist ein Logo. Der Alternativtext sollte kurz beschreiben, was das Logo darstellt und zu welcher Organisation es gehört.

<img src="logo.jpg" alt=" Das Eye-Able-Logo zeigt ein stilisiertes Auge. ." Titel=" Das Eye-Able-Logo zeigt ein stilisiertes Auge. .">

Vermeiden Sie vage Beschreibungen wie „schönes Bild“ oder „Foto“. Konzentrieren Sie sich ausschließlich auf relevante Informationen.

Ein Screenreader liest diesen Text vor, sodass auch Personen, die das Bild nicht sehen können, wissen, dass es sich um das Eye-Able-Logo handelt. Dadurch wird die Website barrierefrei und entspricht den WCAG-Richtlinien.

Beispiele:

Schlechtes Beispiel

Gutes Beispiel

„Abbildung eines Diagramms“

„Balkendiagramm mit den Umsatzzahlen für 2025“

"Logo"

„Eye-Able-Logo mit einem stilisierten Auge“

"Foto"

„Porträt eines Mitarbeiters, der an einem Laptop arbeitet“

Diagramme und Schaubilder

Diagramme visualisieren Daten und Zusammenhänge. Der Alternativtext sollte erklären, was das Diagramm darstellt und warum es relevant ist.

• Bei einfachen Diagrammen sollten die wichtigsten Daten direkt im Alternativtext angegeben werden.

• Bei komplexen Diagrammen sollte der Zweck erläutert und die Benutzer für weitere Details auf den angrenzenden Text verwiesen werden.

Ist das Diagramm komplex, beschreiben Sie einfach den Zweck und verweisen Sie für weitere Details auf den unten stehenden Text. Dadurch wird der Alternativtext nicht zu lang.

Beispiel:
<img src="election-chart.jpg" alt="Balkendiagramm mit den Wahlergebnissen. Weitere Erläuterungen folgen im Text."">

Stellen Sie stets sicher, dass die wichtigsten Kennzahlen auch in Textform verfügbar sind, damit jeder auf die Informationen zugreifen kann.

Funktionsbilder

Funktionale Bilder lösen Aktionen aus, z. B. Schaltflächen, Symbole oder verlinkte Logos. Der Alternativtext sollte beschreiben was das Bild bewirkt , nicht so, wie es aussieht.

Beispiel:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Zur Eye-Able-Homepage" title="Zur Eye-Able-Homepage"</a>

Der Alternativtext weist darauf hin, dass das Bild auf die Startseite verlinkt. Das Aussehen des Logos ist unwichtig, seine Funktion hingegen schon.

Gute Beispiele:

• „Suche starten“

• „Formular absenden“

• „Nächste Seite“

Vermeiden Sie visuelle Beschreibungen wie „Pfeil“ oder „Lupe“.

Gängige Funktionsbilder:

Bildtyp

Funktion

Beispiel-Alternativtext

Suchsymbol

Suche starten

"Suche starten"

Speichern-Symbol

Dokument speichern

"Speichern"

Pfeil nach rechts

Zur nächsten Seite

"Nächste Seite"

Home-Symbol

Zur Startseite

"Startseite"

Dieser Ansatz stellt sicher, dass jeder, einschließlich der Nutzer von Bildschirmleseprogrammen, versteht, was passiert, wenn er auf das Bild klickt.

Dekorative Bilder

Dekorative Bilder tragen keinen Inhalt bei. Sie dienen lediglich der Atmosphäre oder der Gestaltung. In diesem Fall sollte das alt-Attribut leer bleiben:

<img src="background-pattern.jpg" alt="">

Bildschirmleseprogramme überspringen diese Bilder und vermeiden so unnötige Unterbrechungen.

Dekorative Bilder sollten gezielt eingesetzt werden. Wenn ein Foto oder Symbol etwas über den Inhalt aussagt, sollte es nicht rein dekorativ sein. In diesem Fall ist eine Beschreibung erforderlich.

Checkliste für dekorative Bilder:

• Fügt das Bild eine Bedeutung hinzu? ?
  Ja → Alternativtext hinzufügen.
  Nein → lassen Sie das alt-Attribut leer.

• Ist es rein dekorativ?

  Ja → verwenden alt="" Die

• Ist es Teil eines Buttons oder Links?

  Nein → dann kann es dekorativ sein.

Eine klare Unterscheidung zwischen dekorativen und informativen Bildern trägt dazu bei, dass Ihre Website zugänglich bleibt.

Durch die Verwendung von Alternativtexten auf diese Weise machen Sie Ihre Website verständlicher und benutzerfreundlicher für alle.

Wie man effektiven Alternativtext schreibt

Gute Alternativtexte helfen Menschen, die Bilder nicht sehen können, den Inhalt zu verstehen. Ein guter Alternativtext beschreibt kurz und prägnant, was auf dem Bild zu sehen ist.

Bewährte Verfahren:

• Seien Sie prägnant und beschreibend.

• Vermeiden Sie Formulierungen wie „Bild von“ oder „Foto von“.

• Konzentriere dich auf das, was für den Kontext relevant ist.

• Halten Sie den Alternativtext zwischen 80–120 Zeichen

• Achten Sie auf korrekte Rechtschreibung und Grammatik.

Richtlinienübersicht

Aspekt

Richtlinie

Beispiel

Öffnung

Vermeiden Sie Formulierungen wie „Bild von“.

„Blaues Auto auf einer Landstraße“

Länge

80–120 Zeichen

„Zwei Studenten arbeiten in einer Bibliothek an Laptops“

Sprache

Klar und korrekt

Keine Abkürzungen oder Emojis

Fokus

Nur relevanter Kontext

Beschreiben Sie, was wichtig ist.

Auch der Alt-Text unterstützt die Suchmaschinenoptimierung. Suchmaschinen nutzen ihn, um Bilder zu verstehen und so die Sichtbarkeit in den Bildersuchergebnissen zu verbessern – ganz ohne Keyword-Stuffing.

Bitten Sie jemanden, der einen Screenreader verwendet oder das Bild nicht kennt, um Feedback. Anhand deren Antwort können Sie feststellen, ob Ihre Beschreibung verständlich ist. Wenn die Person versteht, was das Bild zeigt, wissen Sie, dass Ihr Alternativtext gut funktioniert. Dadurch wird Ihre Website für alle zugänglicher und benutzerfreundlicher.

Was passiert, wenn der Alternativtext fehlt?

Ohne Alternativtext Bildschirmleseprogramme geben Dateinamen wie img123.jpg vor. Dadurch entgehen Nutzern wichtige Informationen, und Ihre Website verstößt möglicherweise gegen WCAG und Gesetze zur Barrierefreiheit.

Folgen fehlenden Alternativtextes:

• Die Nutzer verstehen die Inhalte nicht.

• Ihre Website erfüllt die Anforderungen von WCAG 2.2 nicht.

• Organisationen riskieren Bußgelder wegen Verstößen gegen die Zugänglichkeitsgesetze.

Alternativtexte gewährleisten gleichberechtigten Zugang und die Einhaltung des Europäischen Gesetzes zur Barrierefreiheit (EAA).

Gesetzgebung zur digitalen Barrierefreiheit

Gesetze zur digitalen Barrierefreiheit verpflichten Organisationen dazu, Websites und Apps für alle nutzbar zu machen, einschließlich Menschen mit Behinderungen.

• Die WCAG-Richtlinien definieren Zugänglichkeitsstandards

• Aus 28. Juni 2025 , Die Europäisches Zugänglichkeitsgesetz (EAA) gilt für viele digitale Produkte und Dienstleistungen

• Die Durchsetzung wird von einer vielfältigen Gruppe von (staatlichen) Behörden und Institutionen überwacht.

Wichtigste Verpflichtungen:

• Entspricht EN 301 549

• Veröffentlichen Sie eine Erklärung zur Barrierefreiheit

• Bieten Sie Alternativtexte für Bilder und Medien an.

• Kontinuierliche Überwachung und Aufrechterhaltung der Zugänglichkeit

WCAG-Richtlinien und Alternativtext

WCAG 2.2 präzisiert die Verwendung von Alternativtexten:

• Jedes aussagekräftige Bild benötigt einen beschreibenden Alternativtext.

• Dekorative Bilder verwenden alt="

• Der Kontext bestimmt, was relevant ist.

• Testen Sie regelmäßig mit Barrierefreiheitstools

Wichtigste Punkte aus WCAG 2.2:

Richtlinie

Erläuterung

Alternativtexte erforderlich

Jedes aussagekräftige Bild erhält einen beschreibenden Alternativtext.

Dekorative Bilder

Verwenden Sie leeren Alternativtext ( alt="" ) wenn das Bild keine zusätzlichen Informationen liefert.

Der Kontext ist wichtig

Beschreiben Sie, was für den Inhalt der Seite relevant ist.

Testen Sie Ihre Inhalte

Verwenden Sie einen WCAG-Checker, um zu überprüfen, ob Ihre Alternativtexte die Anforderungen erfüllen.

Häufig gestellte Fragen

1. Wie füge ich Bildern Alternativtext hinzu?

Fügen Sie das alt-Attribut in HTML oder über Ihr CMS mit einer kurzen, klaren Beschreibung hinzu.

2. Wie kann ich den Alternativtext für alle verständlich gestalten? ?

Verwenden Sie eine einfache Sprache, vermeiden Sie unnötige Details und beschreiben Sie, was den Nutzern sonst entgehen würde.

Guter Alternativtext:

• Beschreibt, was jemandem entgeht, wenn das Bild nicht sichtbar ist.

• Berücksichtigt die WCAG-Richtlinien für digitale Barrierefreiheit.

• Passt zum Sinn der Seite.

3. Welche Fehler sollte ich vermeiden?

Viele lassen den Alternativtext leer oder schreiben zu lange Sätze. Dadurch wird die Website weniger barrierefrei.

Vermeiden Sie diese Fehler:

1. Alternativtext leer lassen

2. Allgemeine Beschreibungen schreiben

3. Keyword-Stuffing

4. Hinzufügen von Alternativtext zu rein dekorativen Bildern

4. Wie kann Alt-Text die SEO meiner Website verbessern?

Alternativtexte helfen Suchmaschinen, den Bildinhalt zu verstehen. Dies kann das Ranking Ihres Bildes in der Google-Bildersuche verbessern.

Gut geschriebener Alternativtext:

• Verbessert die Auffindbarkeit Ihrer Website.

• Liefert Suchmaschinen Kontext.

• Erhöht die Wahrscheinlichkeit, dass Nutzer Ihre Website besuchen.

5. Beeinträchtigt fehlender Alternativtext die Barrierefreiheit?

Ja, ohne Alternativtext können Bildschirmleseprogramme den Bildinhalt nicht beschreiben. Menschen mit Sehbehinderungen verpassen dadurch wichtige Informationen.

Alternativtexte stellen sicher, dass jeder den gleichen Inhalt versteht, unabhängig davon, ob er sehen kann oder nicht. Dadurch wird Ihre Website barrierefreier und benutzerfreundlicher.

6. Wie kann ich meinen Alternativtext testen?

Verwenden Sie Bildschirmleseprogramme wie NVDA oder VoiceOver oder überprüfen Sie Ihre Website mit der Barrierefreiheitsplattform Eye-Able, um fehlende oder unklare Alternativtexte sofort zu identifizieren.

Sie können auch Tools zur Überprüfung der Barrierefreiheit nutzen, wie beispielsweise unsere Eye-Able-Plattform. Wir zeigen Ihnen schnell und einfach, ob Ihre Alternativtexte fehlen oder unklar sind.