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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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.