User Documentation Mit Joomla 6.1 wurde eine kleine, aber wirkungsvolle Verbesserung im TinyMCE-Editor hinzugefügt: eigene Schaltflächen zum Einfügen, Bearbeiten und Entfernen des HTML-Elements <abbr>.
Diese neue Funktion macht es Autoren leicht, Abkürzungen und Akronyme korrekt auszuzeichnen, ohne HTML-Code zu berühren. Es ist eine kleine Änderung, die einen großen Unterschied für Klarheit, Barrierefreiheit und Professionalität machen kann.
Was ist das Element <abbr>?
Das HTML-Element <abbr> wird verwendet, um eine Abkürzung oder ein Akronym darzustellen. Es ermöglicht die Angabe der vollständigen Bedeutung eines verkürzten Begriffs über das Attribut title.
Zum Beispiel:
<abbr title="World Wide Web">WWW</abbr>
In den meisten Browsern können Nutzer mit der Maus über die Abkürzung fahren und die vollständige Bedeutung in einem Tooltip sehen. Noch wichtiger ist, dass assistive Technologien wie Bildschirmlesegeräte auf diese ausgeschriebene Form zugreifen können, was den Nutzern hilft, den Inhalt besser zu verstehen.
Dies ist semantisches HTML – es fügt Bedeutung hinzu, nicht nur Gestaltung.
Warum die Verwendung von <abbr> die Barrierefreiheit verbessert
Bei Barrierefreiheit geht es darum, Inhalte für alle verständlich zu machen. Abkürzungen können unnötige Hürden schaffen, wenn ihre Bedeutung unklar ist.
Klarheit für alle Leser
Nicht jeder weiß, wofür „WCAG“, „HTML“ oder „CSS“ stehen. Die Angabe der ausgeschriebenen Form stellt sicher, dass niemand rätseln muss.
Bessere Unterstützung für Bildschirmlesegeräte
Bei korrekter Auszeichnung können assistive Technologien die vollständige Bedeutung ansagen, anstatt einzelne Buchstaben vorzulesen.
Verbesserte semantische Struktur
Die Verwendung korrekter HTML-Elemente vermittelt Bedeutung an Browser, Suchmaschinen und Barrierefreiheits-Tools.
Kurz gesagt: Diese kleine Schaltfläche trägt dazu bei, Ihre Inhalte inklusiver zu gestalten.
Verwendung der neuen Abbr-Schaltflächen in TinyMCE
Bei einer sauberen Neuinstallation von Joomla 6.1 befinden sich die neuen abbr-Schaltflächen bereits in der TinyMCE-Werkzeugleiste. Wer auf Joomla 6.1 aktualisiert hat, muss sie im TinyMCE-Plugin-Editor hinzufügen, entweder durch Ziehen der beiden neuen Symbole in die Werkzeugleiste oder durch Verwendung der erweiterten Voreinstellung.
Schritt 1: Abkürzung auswählen
Den Beitrag im Joomla-Editor öffnen und die Abkürzung markieren, die ausgezeichnet werden soll.
Schritt 2: Auf die Schaltfläche „Abkürzung einfügen/bearbeiten“ klicken
Auf das neue Abkürzungssymbol in der TinyMCE-Werkzeugleiste klicken.
Schritt 3: Vollständige Bedeutung eingeben
Ein Dialogfenster öffnet sich. Die vollständige Bedeutung der Abkürzung in das vorgesehene Feld eingeben.
Schritt 4: Generiertes Markup überprüfen (optional)
Beim Wechsel in die Code-Ansicht zeigt sich, dass TinyMCE sauberes, semantisches Markup erzeugt hat:
<abbr title="World Wide Web">WWW</abbr>
Und wenn Sie den Beitrag auf Ihrer Website prüfen, sehen Sie eine grundlegende Formatierung, der Cursor ändert sich zu einem Hilfe-Zeiger und die vollständige Bedeutung der Abkürzung erscheint in einem title-Popup.
Entfernen einer Abkürzung
Um das Markup zu entfernen, die Abkürzung auswählen und auf die Schaltfläche „Abkürzung entfernen“ klicken. Der Text bleibt erhalten, aber das semantische Markup wird entfernt.
Beispiele aus der Praxis
Technische Dokumentation
Das DOM ermöglicht JavaScript die Interaktion mit Webseiten.
Barrierefreiheitserklärungen
Unsere Website entspricht den WCAG 2.2.
Servertechnologien
Joomla läuft auf PHP.
Allgemeine Webbegriffe
Das W3C entwickelt Webstandards.
In jedem Fall bleibt die Abkürzung übersichtlich und lesbar, während sie dennoch zusätzlichen Kontext liefert.
Bewährte Verfahren
<abbr>beim ersten Auftreten einer Abkürzung im Inhalt verwenden.- Immer eine aussagekräftige Erklärung im
title-Attribut angeben. - Nicht nur als Tooltip verwenden — es sollte sich um eine echte Abkürzung handeln.
- Den Text natürlich halten. Das Markup verbessert die Klarheit, ohne zu überladen.
Abschließende Gedanken
Die neuen Abkürzungs-Schaltflächen in Joomla 6.1 sind ein perfektes Beispiel dafür, wie kleine redaktionelle Werkzeuge eine bedeutende Wirkung haben können.
Sie fördern besseres semantisches HTML, verbessern die Barrierefreiheit und tragen dazu bei, dass Inhalte für ein möglichst breites Publikum verständlich sind.
Manchmal sind Verbesserungen der Barrierefreiheit komplex. Diese hier ist nur einen Klick entfernt.
Beginnen Sie damit im nächsten Beitrag und helfen Sie mit, das Web für alle verständlicher zu machen.