ALt Text auf Bilder mit Cursor in Firefox lesbar machen.

bredow
(@bredow)

vor 1 Jahr

Hallo,

ich möchte auf meinen Bildern / Fotos „Alt Text“ (alt attributes) anzeigen lassen, wenn man mit dem Cursor auf ein Foto zeigt. (nicht nur für Blinde !). Mit der Funktion „aternativen Text auf Bilder“ funktioniert es bei mir nicht in WordPress. Kann mir jemand helfen? Yoast SEO empfielt mir diese Maßnahme.

Auf meiner alte Homepage mit NetObjects Fusion 2015 (NOF) unter der Domain „https://www.flugzeuglexikon.com/“ funktioniert das, wenn man auf ein Foto zeigt. Info: Ich muss alles in WP Elementor neu machen, weil NOF nicht für mobile phones kompatibel ist.

Meine neuen WP-Seiten sind unter der Domain „https://luftfahrtlexikon.com“ öffentlich. Ca. 300 Einzelseite von geplanten 3.000 Seiten sind mit Canvas gemacht fertig. Die Optimierung mit Yoast SEO funktioniert sehr gut. Aber der hinterlegte Text (Alt-Text) wird nicht angezeigt, wenn man im Browser des Internets (Firefox 64 bit) mit dem Cursor auf ein zeigt.

Geht das überhaupt mit WP Elementor Pro? Wie macht man sowas? Ich bitte ggf. um eine Schritt-für-Schritt Anleitung. Auch, was eventuell fehlende Grundeinstellungen betrifft. Danke.

Mit freundlichen Grüßen

Wolfgang Bredow
(Germany, Berlin)

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr
Das alt-Attribut enthält eine Textbeschreibung des Bildes, die zwar nicht zwingend erforderlich, aber für die Barrierefreiheit äußerst nützlich ist – Bildschirmlesegeräte lesen diese Beschreibung vor, damit die Benutzer wissen, was das Bild bedeutet. Der Alt-Text wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann, z. B. bei Netzwerkfehlern, Inhaltssperren oder Linkrot.
Quelle: MDN, übersetzt mit Deepl

Das Attribut alt ist also gar nicht dafür da, „Text […] anzeigen [zu] lassen, wenn man mit dem Cursor auf ein Foto zeigt.“

Was du vermutlich meinst, ist das Attribute title, das für eine Ausgabe eines Texts bei Mauszeigerkontakt verwendet werden kann:
```
<img 
  src="katze.jpg" 
  alt="Eine grau getigerte Katze" 
  title="Sieht sie nicht süß aus?"
>
```
Hier kannst du dir das kurz ansehen:
https://jsfiddle.net/pixolin/svot6zb0/2/

In Elementor Pro solltest du ein title-Attribut setzen können – ich kann das nicht beurteilen, weil mir das Plugin für kostenlosen Support nicht zur Verfügung steht.

Wenn du das Bild einfügst, solltest du unter den erweiterten Einstellungen (1) im Abschnitt (2) eine Möglichkeit haben. Ich sehen nur den Hinweis (3), dass es mit der kostenlosen Version nicht geht.

Zum Vergrößern bitte anklicken …
Thread-Starter bredow
(@bredow)

vor 1 Jahr

Nochmals hallo,

zunächst danke für die schnelle Antwort.

Allerdings fehlt bei mir die Option für die Html-Attribute. Warum ? Wie kriege ich das hin ? Fehlen event. Grundeinstellungen ?

Eine Grundeinstellung wird bei mir stets von WP moniert. Wenn ich in Elementor unter Website-Einstellungen / Typografie Einstellungen vornehmen möchte, erscheint folgender Hinweis:

„Damit sich der Theme Style auf alle relevanten Elementor-Elemente auswirkt, deaktivieren Sie bitte Default Colors und Fonts auf der Seite Settings.“

Wenn ich jedoch unter „Elementor / Einstellungen / Allgemein“ die Standardschriftarten deaktiviere, erscheinen die Beschriftungen unterhalb der Miniaturfotos kursiv statt normal als Arial. Wie kriege ich das hin, damit beides „normal“ funktioniert ? Ich habe es gerade wieder zurückgestellt (deaktiviert), weil einige Einzelseiten den Text „zerschossen“ haben. Er erscheint dann über die gesamte Monitorbreite.

Für Ihre antwort bedanke ich mich im Voraus.

Wolfgang Bredow
Thread-Starter bredow
(@bredow)

vor 1 Jahr
Elementor hat mir mitgeteilt, dass „Alt-Text“ dort nicht funktioniert. Mein Anfrage-Ticket wurde als Funktionsanfrage an deren Entwicklungsabteilung weitergeleitet. Mal sehen, was draus wird.

Was ich konkret wollte war folgendes:

Schauen Sie sich Wikipedia an. Wenn Sie den Mauszeiger über ein Bild oder einen speziellen Text bewegen, erscheint ein weiteres Fenster mit zusätzlichen Informationen. Ich wollte so etwas in WP Elementor machen.

Gleichwohl nochmals Dank für Ihr Engagement in den Foren. Sie sind dort offenbar sehr aktiv und kompetent.
- Diese Antwort wurde geändert vor 1 Jahr von Bego Mario Garde.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr

Allerdings fehlt bei mir die Option für die Html-Attribute. Warum ? Wie kriege ich das hin ? Fehlen event. Grundeinstellungen ?

Das kann ich nicht beurteilen, weil mir wie bereits erwähnt Elementor Pro für kostenlosen Support nicht zur Verfügung steht. Hast du das Bild ausgewählt, bevor du in die Ansicht der erweiterten Einstellungen gegangen bist?

Schauen Sie sich Wikipedia an. Wenn Sie den Mauszeiger über ein Bild oder einen speziellen Text bewegen, erscheint ein weiteres Fenster mit zusätzlichen Informationen.

Das hat mit dem alt-Attribut nichts zu tun. Fenster, die sich über den Text legen, werden als „Modal“ bezeichnet. Du* findest hier ein hübsches Beispiel: Modal Popup
(Bitte auf die Bilder unter „See all possibilities“ klicken).

*Wir verwenden hier, wie in OpenSource-Communities üblich, die unkompliziertere Anrede „du“, meinen das aber genauso respektvoll.
Anonymous User 20597857
(@anonymized-20597857)

vor 1 Jahr
Ähnliches, also eine Art Modal, Fensterchen, Insert, spezielle Tooltips, … welches sich beim Mausover zeigt, lässt sich auch mit einem Plugin namens „Vision“ machen.
Im Header dieser Site sieht man das, wenn man über die Markenlogos geht. Wenn der Header geladen ist, was merklich dauert.

Aber nur für Text-Infos beim überfahren von Bildern reicht auch title.
- Diese Antwort wurde geändert vor 1 Jahr von Anonymous User 20597857. Grund: Link vergessen
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr
@bredow

ich möchte auf meinen Bildern / Fotos „Alt Text“ (alt attributes) anzeigen lassen, wenn man mit dem Cursor auf ein Foto zeigt. (nicht nur für Blinde !). Mit der Funktion „aternativen Text auf Bilder“ funktioniert es bei mir nicht in WordPress.

Auf meiner alte Homepage mit NetObjects Fusion 2015 (NOF) unter der Domain „https://www.flugzeuglexikon.com/“ funktioniert das, wenn man auf ein Foto zeigt.

das dürfte ein Irrtum deinerseits sein. Meine Stichproben zeigen, dass alle Bilder exakt denselben Text unter alt= als auch unter title= haben. Vermutlich wurde das von NetObjects Fusion automatisch in Title hinzugefügt.

Zum Vergrößern auf das Bild klicken:

Wozu brauchst du in diesem Fall Funktionen von Elementor? Du kannst per Plugin alle ALT-Texte aller Bilder in TITLE übernehmen, z. B. mit diesem: https://de.wordpress.org/plugins/alt-manager/

Siehe Video dort, einfach in das Eingabe-/Auswahlfeld „Post Images Title“ auswählen: „Image ALT“.

Nachtrag: Das obige ist nur die halbe Lösung und auch nur, falls die Title-Attribute im Bild nicht ausgefüllt wurden. Ich habe gerade gesehen, dass Elementor das Title-Tag nicht ins HTML der Website einfügt.
- Diese Antwort wurde geändert vor 1 Jahr von Angelika Reisiger.
Anonymous User 20597857
(@anonymized-20597857)

vor 1 Jahr

alle ALT-Texte aller Bilder in TITLE übernehmen

wird nicht klappen, den die sind auch nicht da. Nirgends.

Das einzige was mir da noch einfällt ist, die Dateinamen der Bilder automatisch zu ALT und TITLE machen. Rank Math kann das, Yoast vllt. auch?
Klar zeigt das nicht alles was auf der alten Site war, aber wenigstens den Typ.