1.4.13 Tooltips Elementor

In Elementor kannst du das "title"-Attribut in verschiedenen Widgets verwenden, um Tooltips hinzuzufügen.

Die genaue Position, an der du das "title"-Attribut in Elementor eingeben kannst, kann je nach Widget-Typ variieren. In der Regel findest du die entsprechende Option in den Widget-Einstellungen selbst oder unter «Erweitert» → «Attribute» → «eigene Attribute».

Bemerkung: Es ist wichtig zu beachten, dass das "title"-Attribut allein nicht ausreicht, um die Barrierefreiheitsanforderungen vollständig zu erfüllen. Es sollte in Kombination mit anderen Techniken und ARIA-Attributen verwendet werden, um eine umfassende Barrierefreiheit sicherzustellen.

Attribut definieren

Trenne den Attribut-Schlüssel von Werten durch das Zeichen | (Pipe).

«title» wird folgend definiert:

title|kurzer Text oder Beschreibungen

Verschiedene Widgets

Hier sind einige der gängigen Elementor-Widgets, bei denen du das "title"-Attribut anwenden kannst:

Soziale Netzwerk-Icons

• Füge das Soziale Netzwerk-Icons-Widget zu deinem Layout hinzu.
• Klicke auf das Widget, um die Einstellungen zu öffnen.
• Unter «Inhalt» das gewünschte Icon definieren bei «Link» fügst du deinen gewünschten Link ein.
• Klicke auf das Zahnrad, es öffnet sich die «Link-Optionen»
• Bei «Individuelle Attribute» trägst du deinen Text ein z.B.

title|Link zum Facebook-Profil

Bild-Widget

Warum ein "title"-Attribut bei einem Bild notwendig sein kann?

Der Alternative Text ist ein wichtiges barrierefreies Element für Bilder, da er eine alternative Beschreibung des Bildinhalts für Benutzer bereitstellt, die das Bild nicht sehen können.

Das "title"-Attribut bietet eine zusätzliche Möglichkeit, Informationen über das Bild bereitzustellen, die im Alt-Text möglicherweise nicht angemessen oder ausführlich genug dargestellt werden können. Hier sind einige Gründe, warum das "title"-Attribut trotz der Verwendung des Alt-Textes nützlich sein kann:

• Zusätzliche Informationen: Das "title"-Attribut ermöglicht es, weitere Details oder kontextbezogene Informationen bereitzustellen, die im Alt-Text möglicherweise nicht enthalten sind. Dies kann den Benutzern ein umfassenderes Verständnis des Bildes vermitteln.
• Ergänzende Beschreibung: Der Alt-Text sollte kurz und prägnant sein, um die Bildinformationen klar zu vermitteln. Das "title"-Attribut kann verwendet werden, um eine längere oder detailliertere Beschreibung des Bildes anzugeben, die für bestimmte Benutzer relevant sein kann.
• Funktionelle Bedeutung: In einigen Fällen kann das "title"-Attribut auch verwendet werden, um eine funktionelle Bedeutung des Bildes zu erklären, z.B. wenn das Bild als Schaltfläche oder Link fungiert. Diese zusätzliche Information kann für Benutzer hilfreich sein, insbesondere für diejenigen, die möglicherweise Schwierigkeiten haben, die Funktion des Bildes aufgrund von visuellen Einschränkungen zu erkennen.

Button

• Füge das Button-Widget zu deinem Layout hinzu.
• Klicke auf den Button, um die Einstellungen zu öffnen.
• Unter «Inhalt» bei «Link» fügst du deinen gewünschten Link ein.
• Klicke auf das Zahnrad es öffnet, sich die «Link-Optionen»
• Bei «Individuelle Attribute» trägst du deinen Text ein z.B.

title|noch mehr Informationen zum barrierefreier gut machen

Ich selbst finde es jedoch besser bei einem Button auf den Tooltip zu verzichten, dafür einen beschreibenden Text in den Linktext einzufügen.

Link im Texteditor

Hier wird das "title"-Attribut nicht wie bei den letzten Widgets gesetzt, sondern kann direkt beim «Link-Titel» eingetragen.

• Erstelle den Link wie gewohnt im Lauftext über das Ketten-Symbol
• Klicke danach auf den Zeichenstift –> Bearbeiten

• Dann auf das Zahnrad –> Link-Optionen

• Es öffnet sich ein Fenster und hier kannst du den Tooltip unter «Link-Titel» eingeben.

Ich selbst finde es jedoch besser bei einem Link im Lauftext auf den Tooltip zu verzichten, dafür einen beschreibenden Text in den Linktext einzufügen.