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.

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 häufigste Art, Bilder zu einer Webseite hinzuzufügen, ist das HTML-Attribut img src. 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="add image description here" 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 nach dem Bild auf der Webseite oder im CMS-Datei-Repository. 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.