Alternativtext zu Bildern hinzufügen

Erhöhen Sie die Verständlichkeit, indem Sie Bilder und Grafiken ausführlich beschreiben.

Mit Bildern können Sie Ihre Besucher motivieren und komplexe Konzepte einfacher vermitteln.

Bildbeschreibungen werden oft als „Alternative Beschreibungen“, „Alternativtext“ und „Alt-Text“ bezeichnet. Bildbeschreibungen stellen eine beschreibende Alternative zur Abbildung in Textform bereit. Bei Teilnehmern mit Sehbehinderung sind Beschreibungen, aus denen der Inhalt einer Abbildung hervorgeht, entscheidend für den Lerneffekt. Von zusätzlichem Kontext aus den Textbeschreibungen profitieren alle Teilnehmer.

Ally prüft alle Abbildungen auf Bildbeschreibungen. Ally prüft Bilder auf einer Webseite oder in einer angehängten Datei.

Ally stuft Probleme in schwerwiegende, erhebliche und geringfügige Probleme ein.

  • Schwerwiegend. Die Datei ist im vorliegenden Zustand kaum zugänglich und bedarf umfangreicher Änderungen.
  • Erheblich. Die Datei ist nur in gewissem Maße barrierefrei. Die Probleme sind nicht schwerwiegend, sollten jedoch behoben werden.
  • Geringfügig. Für ein besseres Ergebnis sollten die vorhandenen Mängel behoben werden.

Bilder ohne Alternativtext stellen ein erhebliches Problem dar.

Mit Ally nach Bildern ohne Beschreibungen suchen

Nutzen Sie den Bericht zur Barrierefreiheit von Ally, um Probleme mit der Barrierefreiheit auf Ihrer Website zu erkennen und zu beheben. Verwenden Sie den für den Bericht bereitgestellten Link und melden Sie sich an. Öffnen Sie den Bericht und schauen Sie sich die Liste der Probleme in der Tabelle Probleme bei der Barrierefreiheit an.

Die Tabelle „Probleme bei der Barrierefreiheit“ befindet sowohl auf der Registerkarte „Übersicht“ als auch auf der Registerkarte „Domäne“. Beginnen Sie auf der Registerkarte „Domäne“, um Probleme für eine Domäne anzuzeigen. 

Bilder ohne Alternativtext oder Beschreibungen stellen ein erhebliches Problem dar. Verwenden Sie die Registerkarte Erheblich in der Tabelle Probleme bei der Barrierefreiheit, um die Liste der erheblichen Probleme anzuzeigen. Wählen Sie die Probleme aus, die sich auf Bilder ohne Beschreibungen beziehen.

Wenn Sie mit der Registerkarte Übersicht beginnen, wählen Sie das Problem und dann die Domäne mit dem Problem aus.

Probleme mit der Bildbeschreibung können mit Bild, Dokument oder HTML in der Liste beginnen.

Wählen Sie in der Liste der Probleme mit Bildbeschreibungen den Indikator für die Bewertung neben dem Element mit dem Problem aus. Das Feld für Inhaltseditor-Feedback wird geöffnet.

Vorschau der Bilder ohne Beschreibungen anzeigen

Das Feedback-Feld von Ally zeigt Ihnen eine Vorschau der Inhalte sowie detailliertes Feedback und Hilfestellung für die Behebung von Problemen mit der Barrierefreiheit an. Mit der Vorschau können Sie die Bilder ohne Beschreibungen anzeigen.

In der Vorschau wird hervorgehoben, wo im Dokument spezifische Probleme mit der Barrierefreiheit vorliegen. Hervorhebungen zeigen jedes Vorkommnis eines bestimmten Problems einzeln an. Wenn für Ihre Bilder beispielsweise keine alternativen Beschreibungen vorhanden sind, zeigen Ihnen die Hervorhebungen jede Stelle mit diesem spezifischen Problem.

Vorschau-Tools

Verwenden Sie die Vorschau-Tools, um die Probleme in Ihrem Dokument zu untersuchen.

  • Navigieren Sie von Seite zu Seite durch die Vorschau.
  • Erfahren Sie, wie oft ein bestimmtes Problem vorkommt.
  • Springen Sie zwischen den Hervorhebungen von Problemen hin und her.
  • Zeigen Sie die Hervorhebungen an oder blenden Sie sie aus.
  • Vergrößern oder verkleinern Sie die Vorschauinhalte.
  • Wenn das Problem ein angehängtes Dokument betrifft, laden Sie die Originaldatei herunter.

Anweisungen von Ally zum Hinzufügen von Bildbeschreibungen befolgen

Ally geht davon aus, dass Sie über Grundkenntnisse in HTML und der Verwendung Ihres Content Management Systems (CMS) verfügen. Um den Anweisungen zu folgen, müssen Sie wissen, wie eine Webseite im HTML- oder Quellcode in Ihrem CMS bearbeitet wird.

Neben der Vorschau stellt Ally eine Schritt-für-Schritt-Anleitung zum Beheben des Problems bereit.  Das Feedback wird in Ally in Form eines Entscheidungsbaums organisiert. Sie müssen also nur die Anweisungen lesen und die Fragen beantworten. Erfahren Sie, wo das Problem liegt, warum es wichtig ist und wie es angemessen korrigiert werden kann.

Wählen Sie So fügen Sie Beschreibungen hinzu und befolgen Sie die Anweisungen.

Alternativtext für Bilder

Verfassen guter Beschreibungen

Befolgen Sie diese bewährten Methoden, um gute Textalternativen-Beschreibungen für Ihre Bilder zu schreiben:

  • Beschreiben Sie das Bild anhand des Seitenkontextes. Vermitteln Sie die gesamte Bedeutung des Bildes.
  • Vermeiden Sie Beschreibungen wie „Bild von“ oder „Abbildung von“. Bildschirmleser kündigen Bilder automatisch als Bilder an.
  • Fassen Sie sich präzise.
  • Schreiben Sie Schilderungen für komplexe Bilder wie Infografiken. Platzieren Sie diese Schilderung unmittelbar nach der Infografik auf der Seite. Beziehen Sie einen Anker-Link oben auf der Seite ein, um die Textalternative anzuzeigen. Hier sehen Sie ein Beispiel einer Infografik mit einer Textalternative.
  • Vermeiden Sie Bilder von Texten. Wenn Sie es nicht vermeiden können, kopieren Sie den Text in die alternative Beschreibung.
  • Sagen Sie etwas Neues. Wiederholen Sie die alternativen Beschreibungen nicht auf derselben Seite. Wiederholen Sie nicht, was auf der Seite bereits gesagt wurde.
  • Identifizieren Sie Bilder, die relevante Inhalte nicht als dekorativ darstellen.

Was ist ein dekoratives Bild?

Ein Bild ist dekorativ, wenn es nicht zu den Informationen auf der Seite beiträgt. Dazu gehören beispielsweise künstlerische Arbeiten, die als Trenner zwischen den Themen verwendet werden, oder ein Foto mit einer Person, die am Telefon spricht, wenn über Kommunikationsfähigkeiten diskutiert wird.

Sie sind aufgrund ihrer visuellen Anziehungskraft wertvoll, müssen aber möglicherweise nicht von Bildschirmlesern gelesen werden.

Weitere Informationen über dekorative Bilder finden Sie auf der Website zur Barrierefreiheit im Web

Warum sind alternative Bildbeschreibungen wichtig?

Es gibt viele Gründe, alternative Beschreibungen für Ihre Bilder zu verwenden.

  • Alternative Beschreibungen bzw. Textalternativen sind Teil der WCAG 2.2-Richtlinien.
  • Teilnehmer können nach einem Bild suchen.
  • Teilnehmer mit Sehbehinderungen haben Schwierigkeiten, Bilder wahrzunehmen.
  • Teilnehmer mit einer schlechten Netzwerkverbindung können Schwierigkeiten haben, Bilder wahrzunehmen.
  • Bildschirmleser können keine Bilder lesen.
  • Manche Teilnehmer lernen besser mit Beschreibungen als mit Bildern.
  • Text kann besser skaliert werden als die meisten Bilder, wenn der Bildschirm oder die Seite vergrößert wird.

Möglichkeiten zum Hinzufügen von Bildbeschreibungen auf Webseiten

Es gibt mehrere Möglichkeiten zum Hinzufügen oder Bearbeiten von Bildbeschreibungen auf Webseiten.

  • HTML: Die von Ally bereitgestellten Anweisungen führen Sie Schritt für Schritt durch die Suche und Bearbeitung von Bildbeschreibungen in HTML. Im Grunde genommen müssen Sie die Webseite mit dem Bild finden. Bearbeiten Sie die Seite. Aktualisieren Sie den HTML-Code des Bilds, um ein Alt-Text-Attribut einzubeziehen. Speichern Sie die Seite.
  • Bildeinstellungen: Die meisten CMS-Systeme bieten eine Möglichkeit zum Bearbeiten des Alternativtexts in den Bildeinstellungen. Suchen Sie nach dem Bild auf der Webseite oder im CMS-Datei-Repository. Verwenden Sie die CMS-Tools, um das Bild zu bearbeiten. Fügen Sie die Bildbeschreibung in das Feld „Alternativtext“ oder „Alt-Text“ ein. Speichern Sie das Bild.

Weitere Informationen über HTML oder CSS finden Sie unter w3schools .

Warum ist „img src“ in meinem HTML-Code nicht sichtbar?

Die gängigste Möglichkeit, Bilder zu einer Webseite hinzuzufügen, ist das img src HTML-Attribut. Img src ist ein HTML-Attribut, das die URL der Bilddatei verwendet, um das Bild auf der Webseite zu platzieren. Jedes CMS-System ist jedoch anders. Für Ihre Website werden möglicherweise andere Codes oder Attribute verwendet. 

Beispielsweise sehen Sie in Drupal möglicherweise Folgendes:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Fügen Sie den Alternativtext am Anfang des Attributs hinzu. Zum Beispiel:

<drupal-entity alt="Hier Bildbeschreibung einfügen" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Falls img src nicht im HTML-Code sichtbar ist, verwenden Sie die CMS-Tools, um die Bildeinstellungen zu bearbeiten. Suchen Sie auf der Webseite oder im CMS-Datei-Repository nach dem Bild. Verwenden Sie die CMS-Tools, um die Bildeinstellungen zu öffnen. Fügen Sie die Bildbeschreibung in das Feld „Alternativtext“ oder „Alt-Text“ ein. Speichern Sie das Bild.

Wenn Sie nicht wissen, wie Sie fortfahren sollen, wenden Sie sich an Ihren Websiteadministrator oder Entwickler. Bitten Sie diesen darum, Ihnen zu zeigen, wie Bilder zu Webseiten und wie Alternativtext hinzugefügt werden.