img mit alt= und tile=

[Stabi]

Ich habe hier eine Anwendung, die einmal für den IE gemacht wurde. Es sind dort viele Tags der Art <img src="..." alt="Das Bild zeigt ..."> Beim IE ist der Text hinter alt= immer als Tool-Tipp angezeigt worden. Beim Firefox müsste ich alle Tags ändern in <img srec="..." alt="Das Bild zeigt ..." title="Das Bild zeigt ..."> Da es einige tausend img-Tags in weit über 100 Dateien sind, frage ich, ob es auch auf eine andere Art geht, ev. ein CSS-Skript.

Schon mal Danke für Eure Hilfe.

[Auge]

Hallo

Ich habe hier eine Anwendung, die einmal für den IE gemacht wurde. Es sind dort viele Tags der Art <img src="..." alt="Das Bild zeigt ..."> Beim IE ist der Text hinter alt= immer als Tool-Tipp angezeigt worden. Beim Firefox müsste ich alle Tags ändern in <img srec="..." alt="Das Bild zeigt ..." title="Das Bild zeigt ...">

Der Inhalt des Alt-Attributs soll angezeigt werden, wenn das Bild nicht angezeigt werden kann. Also Text statt des Bildes. Dass der IE (bis Version 6?) und andere der menschlichen Erinnerung entrissene Browser diese Texte bei Mouseover auch als Tooltip angezeigt haben, war eine Implementierung, die den Zweck des Attributs nicht traf. Manche sehen das explizit als fehlerhafte Implementierung, die Meinungen gingen aber, als dies noch relevant war, auseinander.

Für den Inhalt von Tooltips ist aber das Title-Attribut zuständig.

Da es einige tausend img-Tags in weit über 100 Dateien sind, frage ich, ob es auch auf eine andere Art geht, ev. ein CSS-Skript.

Du kannst mit einem geeigneten Editor (in einer richtigen™ Suchen-Ersetzen-Funktion) die Alt-Attribute suchen, und ihre Inhalte in einem bei Bedarf zu erstellenden Title-Attribut doppeln. Mit HTML oder CSS kannst du das nicht erledigen. Die Title-Attribute müssen bei Anzeige im Browser existieren.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Manche sehen das explizit als fehlerhafte Implementierung, die Meinungen gingen aber, als dies noch relevant war, auseinander.

Es ist eine fehlerhafte Implementierung.

Oder: war. Wie du sagst: nicht mehr relevant.

LLAP 🖖

[Auge]

Hallo

Manche sehen das explizit als fehlerhafte Implementierung, die Meinungen gingen aber, als dies noch relevant war, auseinander.

Es ist eine fehlerhafte Implementierung.

Weil du es sagst? Die Implementierung ist in dem von dir beschriebenen Spezialfall fehlerhaft und sie müsste es nicht sein, wenn der title des äußeren, das Bild umschließenden Elements das alt-Attribut des Bildes überschriebe. Das sagt noch nichts darüber aus, ob die Anzeige des Alternativtextes an sich ein Fehler war.

Oder: war. Wie du sagst: nicht mehr relevant.

Sag' ich ja.

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Manche sehen das explizit als fehlerhafte Implementierung, die Meinungen gingen aber, als dies noch relevant war, auseinander.

Es ist eine fehlerhafte Implementierung.

Weil du es sagst?

hehe, stimmt ;) Gunnar "belegt" gerne und häufig seine Aussagen durch andere seiner Aussagen ;) (Ich weiß, das ist nicht unbedingt als Beleg zu verstehen, fühlt sich aber gelegentlich so an)

Grüße,

RIDER

[Auge]

Hallo

Manche sehen das explizit als fehlerhafte Implementierung, die Meinungen gingen aber, als dies noch relevant war, auseinander.

Es ist eine fehlerhafte Implementierung.

Weil du es sagst?

hehe, stimmt ;) Gunnar "belegt" gerne und häufig seine Aussagen durch andere seiner Aussagen ;) (Ich weiß, das ist nicht unbedingt als Beleg zu verstehen, fühlt sich aber gelegentlich so an)

Hier hat er ja auf einen objektiv zutreffenden Fall verlinkt, auch wenn dies ein Spezialfall ist. Aber ja, grundsätzlich zirkelt er gern oder bringt ein Postulat als Beweis eines Postulats.

Tschö, Auge

[Der Martin]

Hallo,

Ich habe hier eine Anwendung, die einmal für den IE gemacht wurde. Es sind dort viele Tags der Art <img src="..." alt="Das Bild zeigt ...">
Beim IE ist der Text hinter alt= immer als Tool-Tipp angezeigt worden.

ja, dieser alte Fehler des IE ist bekannt.

Beim Firefox ...

... und allen anderen korrekt arbeitenden Browsern ...

... müsste ich alle Tags ändern in <img srec="..." alt="Das Bild zeigt ..." title="Das Bild zeigt ...">
Da es einige tausend img-Tags in weit über 100 Dateien sind, frage ich, ob es auch auf eine andere Art geht, ev. ein CSS-Skript.

Es gibt kein "CSS-Script". Aber du könntest Javascript einsetzen. Mit einer for-Schleife iterierst du über document.images, liest den Wert der alt-Eigenschaft und setzt ihn als title-Eigenschaft. Das wäre ein Einzeiler. Okay, drei Zeilen, wenn's übersichtlich aussehen soll:

for (var l=document.images.length, var i=0; i<l; i++)
 { var image = document.images[i];
   image.title = image.alt;
 }

Allerdings ist das keine wirkliche Lösung, sondern nur ein Workaround. Da das von dir beschriebene Verhalten des IE ein Fehler ist und schon seit über zehn Jahren bekannt ist, wäre es mittelfristig vernünftiger, wenn du direkt die HTML-Quellcodes anpassen würdest. Das ist einmal etwas Fleißarbeit, aber vielleicht kann dich dein Editor da mit einem Macro unterstützen.

So long,
 Martin

[Gunnar Bittersmann]

@@Stabi

Beim Firefox müsste ich alle Tags ändern in <img srec="..." alt="Das Bild zeigt ..." title="Das Bild zeigt ...">

Was soll der Sinn dahinter sein? Viel (die meisten‽) Nutzer verwenden Geräte, auf denen keine Tootips angezeigt werden.

Wenn der Text wichtig ist, sollte er angezeigt als Bildunterschrift (meinetwegen auch -überschrift) angezeigt werden:

<figure>
  <img src="..." alt=""/>
  <figcaption>...</figcaption>
</figure>

Das alt-Attribut sollte in dem Fall den Leerstring als Wert haben (sonst lesen Screenreader die Bildunterschrift ja doppelt vor), darf aber nicht weggelassen werden (sonst lesen Screenreader den Dateinamen vor).

Wenn das Änderen der HTML-Dateien nicht infrage kommt, ließe sich der Umbau des DOMs auch mit JavaScript erledigen.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

just to mention...

Wenn der Text wichtig ist, sollte er angezeigt als Bildunterschrift (meinetwegen auch -überschrift) angezeigt werden:

<figure>
  <img src="..." alt=""/>
  <figcaption>...</figcaption>
</figure>

Das alt-Attribut sollte in dem Fall den Leerstring als Wert haben (sonst lesen Screenreader die Bildunterschrift ja doppelt vor), darf aber nicht weggelassen werden (sonst lesen Screenreader den Dateinamen vor).

Andere Alternative, die dem TO hier vielleicht entgegenkommen dürfte, ist die Nutzung von

img.whateverclass::after {
    content:attr(alt);
    /* entsprechende Formatierung der Bildunterschrift */
}

um Bildunterschriften automatisch aus dem alt-Attribut zu erzeugen. In meinen Augen auch eine Art saubere Lösung - sowohl die Darstellung der Bildunterschrift direkt im Markup über die figure/figcaption-Elemente als auch die Lösung auf Darstellungsebene im CSS haben mMn durchaus ihre Daseinsberechtigung.

Z.B. halte ich leere alt-Tags zwar für aus von Gunnar genannten Gründen bei Bildunterschriften erforderlich (sofern man nicht in der figcaption eine längere Beschreibung und im alt nur die headline liefert), aber nicht für unbedingt sinnvoll.

Grüße,

RIDER

[Matthias Apsel]

Hallo Camping_RIDER,

Andere Alternative, die dem TO hier vielleicht entgegenkommen dürfte, ist die Nutzung von

img.whateverclass::after {
    content:attr(alt);
    /* entsprechende Formatierung der Bildunterschrift */
}

SO geht es aber nicht. img-Elemente können keine Inhalte haben, auch keine generierten.

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

Andere Alternative, die dem TO hier vielleicht entgegenkommen dürfte, ist die Nutzung von

img.whateverclass::after {
    content:attr(alt);
    /* entsprechende Formatierung der Bildunterschrift */
}

SO geht es aber nicht. img-Elemente können keine Inhalte haben, auch keine generierten.

Bin ich jetzt vollkommen falsch gewickelt? ::after fügt doch keinen Inhalt ein sondern einen hinterher? Insofern müsste das schon funktionieren?!? hmm... testen wir doch mal...

@edit: Hm, okay... scheinbar war ich das. Ich nehm alles zurück und behaupte das Gegenteil; ::after wird als descendent angefügt - das war mir in dem Moment nicht (mehr) bewusst...

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

SO geht es aber nicht. img-Elemente können keine Inhalte haben, auch keine generierten.

Übrigens lustig: Opera konnte das früher mal ;) (wenn das auch kein Argument ist und die Spec leider auch ganz klar sagt, dass die Pseudoelemente vor und nach dem Inhalt des Elements kommen...)

Grüße,

RIDER