1.4.13 Tooltips Gutenberg

Um das "title"-Attribut in den Gutenberg-Blöcken einzugeben, gibt es normalerweise eine entsprechende Option in den Block-Einstellungen oder im Block-Editor selbst. Je nach Block-Typ kann dies in einem separaten Feld für den Tooltip oder als Teil der allgemeinen Link- oder Bildoptionen erfolgen.

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

Etwas versteckt ist meist das title-Attribut im Gutenberg. Es befindet sich in der Regel unter «Erweitert». Da dieses Attribut nicht zwingend erforderlich ist, haben die Entwickler von WordPress es weniger sichtbar platziert.

«title»-Attribut in HTML

Einen Link im Lauftext

<a href="http://www.a11y.umbruchbox.ch" title="Ich bin ein Tooltip">mehr dazu</a>

Ich selbst finde es jedoch besser bei einem Link im Lauftext wie «mehr dazu» auf den Tooltip zu verzichten, dafür einen beschreibenden Text in den Linktext einzufügen. Wie zum Beispiel «Erfahre mehr zum Thema xy»

Verschiedene Gutenberg-Blöcke

Hier sind einige der gängigen Gutenberg-Blöcke, bei denen du das "title"-Attribut anwenden kannst:

Bild-Block oder Galerie-Block

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.

Social Icon

Trage zu jedem Icon einen beschreibenden Text zum Link hinzu. Hier ist es das «Link-Label» nicht das "title"-Attribut und trotzdem wollte ich es hier auch auflisten.

Button

Im Gutenberg-Block Button gibt es keine Option das "title"-Attribut einzutragen. Ich denke dies ist weil es besser ist einen beschreibenden Text im Button zu schreiben. Möchtest du es trotzdem brauchen kannst du dies wie folgt anwenden: