Title: Image description für screenreader lesbar machen
Last modified: 6. März 2025

---

# Image description für screenreader lesbar machen

 *  [priga](https://de.wordpress.org/support/users/priga/)
 * (@priga)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/)
 * Hallo an alle,
 * ich gestalte häufig Websites für Menschen mit Behinderungen. In WordPress gibt
   es ja die Möglichkeit, für jedes Bild den Alt-Text, den Title, eine capiton und
   eine description anzulegen. Die description würde ich gern nutzen, um Menschen
   mit schlechtem oder keinem Sehvermögen durch eine Beschreibung des Bildinhaltes
   eine Teilnahme zu ermöglichen. Dieser soll dann vom Screenreader vorgelesen werden
   können. Leider wird die description überhaupt nicht im Quelltext ausgegeben. 
   Wie kann ich auf die description zugreifen, bzw. sie für den Screenreader sichtbar
   machen?

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)

 *  Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
 * (@hage)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167911)
 * Hallo,
    der Screenreader liest den Alt-Text und nicht die description. Also insofern
   solltest du den Alt-Text eingeben.
 * Viele Grüße
    Hans-Gerd
 *  Themenersteller [priga](https://de.wordpress.org/support/users/priga/)
 * (@priga)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167917)
 * Selbstverständlich gebe ich die Alt-Texte und Title ein. Diese sind jedoch nur
   kurz und geben keine Beschreibung des Bildes wieder. Für ein besseres Verständnis
   wäre es gut, wenn umfangreiche Bild-Beschreibungen (descriptions) eingefügt werden
   könnten. Die Software der Screenreader könnte dann ja entsprechend angepasst 
   werden. Wie früher mit den longdesc Attributen.
 * Und es gibt ja das Feld „Beschreibung“ in WordPress. Wie kann ich dieses im Quelltext
   sichtbar machen?
    -  Diese Antwort wurde vor 1 Jahr, 7 Monaten von [priga](https://de.wordpress.org/support/users/priga/)
      geändert.
 *  Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
 * (@hage)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167924)
 * Das `alt`-Attribut ist die primäre Quelle für Screenreader, um den Inhalt eines
   Bildes zu beschreiben. Es sollte immer verwendet werden, da Screenreader standardmäßig
   darauf zugreifen. Es gibt zwar noch ein `longdesc`-Attribut, das aber eher nicht
   mehr verwendet werden sollte.
 * Alternativ kann man auch eine separate Seite mit einer Beschreibung zum Bild 
   erstellen. Ein Link zu dieser Beschreibung sollte dann natürlich unmittelbar 
   z. B. unter das Bild gesetzt werden.
 * BTW: Wir gestalten ebenfalls Websites für Menschen mit unterschiedlichen Behinderungen
   und testen natürlich auch Screenreader in dem Zusammenhang. Wir halten uns dabei
   an die Empfehlung, eine Obergrenze von 12-15 Wörtern einzuhalten, mit der das
   Bild kurz und prägnant beschrieben wird.
 * [Dazu hier auch ein Beitrag](https://gehirngerecht.digital/alt-text/)
    -  Diese Antwort wurde vor 1 Jahr, 7 Monaten von [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
      geändert. Grund: Tippfehler
 *  Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
 * (@hage)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167943)
 * **Nachtrag**: Du kannst auch ein Plugin mit einem Shortcode erstellen, der auf
   die description des Bildes zugreift und unter dem Bild angezeigt wird.
 * Über KI habe ich ein Plugin erstellen lassen, das ich auf einer lokalen Website
   getestet habe:
 *     ```
       <?php
       /*
       Plugin Name: Image Description Shortcode
       Description: Adds a shortcode to display image description
       Version: 1.0
       Author: Your Name
       */
   
       function image_description_shortcode($atts) {
           $atts = shortcode_atts(array(
               'id' => 0,
           ), $atts, 'image_description');
   
           $image_id = intval($atts['id']);
           if ($image_id > 0) {
               $image = get_post($image_id);
               if ($image && $image->post_type === 'attachment') {
                   return '<div class="image-description">' . esc_html($image->post_content) . '</div>';
               }
           }
           return '';
       }
       add_shortcode('image_description', 'image_description_shortcode');
       ```
   
 * Das Snippet kannst du entweder in der functions.php deines Child-Themes verwenden
   oder als eigenes Plugin (daher auch die Angabe im oberen Bereich, die vervollständigt
   werden muss) speichern, z. Bsp. im Ordner `\wp-content\plugins\image-description`.
 * Wichtig dabei ist die Angabe der ID des Bildes und natürlich sollte das Bild 
   eine description enthalten.
 *  Themenersteller [priga](https://de.wordpress.org/support/users/priga/)
 * (@priga)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167947)
 * Ganz herzlichen Dank für deine Mühe. Und ich stimme dir absolut zu, dass der 
   Alt-Text kurz und prägnant sein sollte. Wie gesagt, selbstverständlich nutze 
   ich dieses Mittel. Es macht allerdings einen großen Unterschied, ob der vorgelesene
   Text „2 Personen bei der Zubereitung des Abendessens“ lautet oder ob folgendes
   vorgelesen wird: „Zwei Personen sitzen an einem Tisch und bereiten ihr Abendessen
   zu. Die linke Person schneidet mit einem scharfen Messer gerade eine Gurke während
   die rechte Person Wasser in eine Kanne mit Teebeuteln gießt. Beide Personen lächeln
   und unterhalten sich.“ Das, was jemand mit gutem Sehvermögen mit einem Blick 
   erfasst, bleibt für Menschen mit eingeschränktem Sehvermögen gänzlich verborgen.
   Eine ausführliche Bildbeschreibung für jedes einzelne Bild ist daher Inklusion,
   die über das Minimum hinausgeht (und theoretisch einfach zu realisieren).
 * Daher dachte ich, dass man das vorhandene Description-Feld in WordPress auch 
   nutzen kann. Leider scheint es so, dass dieses Feld zwar vorhanden, aber vollkommen
   nutzlos ist. Sehr schade und vielleicht für Zukunfts-WordPress eine Überlegung
   wert, dieses Feld per default auszublenden und bei Bedarf im Source-Code einzublenden
   und damit Screenreadern eine Möglichkeit zu geben, die Beschreibungen vorlesen
   zu können.
 * Wäre vielleicht ja auch etwas für Programmierer, die dies bestimmt leicht umsetzen
   können. Die Informationen liegen ja bei ausgefülltem Feld schon auslesbar in 
   der Datenbank.
 * Vielen Dank nochmal. Ich schaue jetzt mal, ob ich mit einer ausgeblendeten Caption
   mehr erreiche.
 *  Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
 * (@hage)
 * [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167949)
 * > Wäre vielleicht ja auch etwas für Programmierer, die dies bestimmt leicht umsetzen
   > können.
 * Daher hatte ich dir ja auch das [Snippet in meiner Antwort](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167943)
   gepostet.
 * Wenn du dir damit z. B. ein eigenes Plugin erstellst, sollte das funktionieren.
 * Einziges Problem besteht darin, dass du dir jeweils die Bild-ID holen musst. 
   Die findest du in der Mediathek, wenn du in der Listenansicht bei dem gewünschten
   Bild mit der Maus über den Link „Bearbeiten“ hoverst. Dann siehst du unten so
   etwas wie z. B.
    `https://example.com/wp-admin/post.php?post=88396&action=edit`
   Die ID ist in dem Fall 88396.

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)

 Das Thema „Image description für screenreader lesbar machen“ ist für neue Antworten
geschlossen.

## Schlagwörter

 * [Barrierefreiheit](https://de.wordpress.org/support/topic-tag/barrierefreiheit/)
 * [description](https://de.wordpress.org/support/topic-tag/description/)
 * [image](https://de.wordpress.org/support/topic-tag/image/)
 * [Inklusion](https://de.wordpress.org/support/topic-tag/inklusion/)

 * In: [Allgemeine Fragen](https://de.wordpress.org/support/forum/allgemeine-fragen/)
 * 6 Antworten
 * 2 Teilnehmer
 * Letzte Antwort von: [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/)
 * Letzte Aktivität: [vor 1 Jahr, 7 Monaten](https://de.wordpress.org/support/topic/image-description-fuer-screenreader-lesbar-machen/#post-167949)
 * Status: nicht gelöst

## Themen

### Beliebteste Themen

### Unbeantwortete Themen

### Nicht-Support-Themen

### Gelöste Themen

### Ungelöste Themen

### Alle Themen
