• 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)
  • Hallo,
    der Screenreader liest den Alt-Text und nicht die description.
    Also insofern solltest du den Alt-Text eingeben.

    Viele Grüße
    Hans-Gerd

    Thread-Starter priga

    (@priga)

    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 8 Monaten von priga geändert.

    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

    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.

    Thread-Starter priga

    (@priga)

    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.

    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 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.