Alt-Text: Bildbeschreibungen… nicht ganz einfach

Bildbeschreibungen, also Alt-Text für Bilder sind eine wichtige Sache. Sie dienen z.B. dazu, Menschen mit Sehbeeinträchtigungen das Rezipieren von Postings mit Bildern zu erleichtern. Oftmals nutzen derart eingeschränkte Menschen Screenreader (Vorlese-Apps), welche den Text vorlesen. Gibt es dann einen Alt-Text zum Bild, wird dieser vorgelesen und der Nutzer bekommt eine Vorstellung davon, was auf dem Bild zu sehen wäre. Ein weiteres Beispiel wäre die Verwendung eines Alt-Text bei Bildern, die sich dem Betrachter inhaltlich, Bildlich oder sonst irgendwie nicht unbedingt auf den ersten Blick erschließen. Hier können Beschreibungen und/oder Erläuterungen zum Verständnis beitragen.

Nun stellt sich die Frage, wie man bei Hubzilla Bildbeschreibungen zu seinen Fotos zufügen kann.

Vorneweg: Beim Hochladen und Speichern in der eigenen Cloud von Hubzilla gibt es keine solche Möglichkeit. Man kann also ein Bild nicht schon am Speicherort mit einem Alt-Text versehen. Die Bildbeschreibung kommt erst beim Teilen dazu.

Hier ist Hubzilla derzeit wahrlich nicht besonders komfortabel. Es gibt nämlich keine Möglichkeit, eine Bildbeschreibung direkt bei der Auswahl aus dem Cloud-Speicher einzugeben.

Mit der App “Fotos” kann man Bilder zwar mit einem Titel versehen und auch einen Kommentar eingeben… diese Daten werden aber leider nicht für eine Bildbeschreibung vewendet.

Wählt man beim Verfassen eines Beitrags (Postings) das Icon zum Einfügen eines Bildes, so landet man in der Dateiverwaltung und nach einem Klick auf das gewünschte Bild, wird der Code in das Posting eingefügt.

bbCode

Die einfachste Methode, ein Bild einzufügen ist die Nutzung der bbCode-Tags [img][/img]. Zwischen die beiden Tags wird die URL zum Bild eingetragen. Ist das Bild zugriffsbeschränkt, empfiehlt sich die Verwendung der hubzilla-spezifischen bbCode-Tags [zmg][/zmg]. Generell ist die Verwendung von “zmg” zu empfehlen.

So haben wir aber keine Bildbeschreibung. Um diese einzubauen verwendet man eine andere Syntax der bbCode-Tags:

[img=<URL_des_Bilds>]<Bildbeschreibung>[/img]

bzw.

[zmg=<URL_des_Bilds>]<Bildbeschreibung>[/zmg]

Nun verfügt das Bild über einen Alt-Text, der im Browser z.B. beim Überfahren mit dem Mauszeiger angezeigt und von gängigen Screenreadern vorgelesen wird.

Hat man das Bild in einen Beitrag über den Einfüge-Button eingefügt, muss man das Ergebnis im Editor-Fenster entsprechend abändern:

[zrl=<URL_DES_BILDS_MIT_BILD_HASH>][zmg=https://<BASEURL_DES_HUB>/photo/<BILD_HASH>-2.png]<DATEINAME_DES_BILDS>[/zmg][/zrl]

Was hier auffällt: Bei dem Einfügen über den Button wird eine skalierte Version unseres Bilds eingefügt, die automatisch erstellt wird. “Eingerahmt” wird die Bild-Referenz von den bbCode-Tags [zrl=][/zrl], was dafür sorgt, dass das nunmehr skalierte Bild bei Klick als Original angezeigt wird.

Variante 1

Wir markieren den eigentlichen Dateinamen des Bilds, der sich zwischen den Tags [zmg=][/zmg] und

ersetzen diesen Text durch unsere Bildbeschreibung.

Fertig!

Nun haben wir einen Alt-Text zum Bild…

…und können das Bild mittels Klick auch in der Original-Version betrachten.

Intern, also im Quelltext des Postings, werden bei dieser Methode im HTML-Code für eingebettete Bilder sowohl das alt-Attribut, als auch das title-Attribut mit der Bildbeschreibung belegt.

Variante 2

Alternativ dazu kann man auch die Angabe für die Bildbeschreibung einbauen, indem man das Attribut “alt” in das öffnende Tag einfügt:

[zmg=https://<BASEURL_DES_HUB>/photo/<BILD_HASH>-2.png alt=<BILDBESCHREIBUNG>]<DATEINAME_DES_BILDS>[/zmg]

Das führt dazu, dass der Bildbeschreibungstext im bei der Darstellung erzeugten HTML-Code als alt-Attribut eingefügt wird. Ein Screenreader schaut in der Regel immer zunächst, ob es ein alt-Attribut gibt und liest dieses vor, falls keins vorhanden ist, wird als Fallback nach einem title-Attribut geschaut, bei uns in diesem Fall der Inhalt zwischen den beiden Tags [zmg][/zmg]. Wenn wir den Inhalt bei dem automatisch eingefügten Dateinamen belassen, ändert das für Nutzer von Screenreadern nichts, denn mit dem alt-Attribut haben wir ja eine Bildbeschreibung eingegeben, die bevorzugt vorgelesen wird.

Nun fällt auf, dass man die Bildbeschreibung nicht als Popup zu sehen bekommt.

Schaut man sich aber den Quelltext des Postings an,

stellt man fest, dass das alt-Attribut im HTML-Quelltext korrekt gesetzt ist:

<img class=\"zrl\" style=\"max-width: 100%;\" src=\"https://klacker.org/photo/68c0863f-b61b-4903-a69b-e725a87acf90-2.png alt=Hubzilla-Symbol auf rotem Hintergrund\" alt=\"hzsymbol_r.png\" title=\"hzsymbol_r.png\" loading=\"eager\" />

Damit steht die Bildbeschreibung für Screenreader zur Verfügung.

Es kann aber sinnvoll sein, die Bildbeschreibung auch, wie bei Variante 1, zwischen die Tags zu schreiben, damit auch im Popup der Text erscheint.

Tool zur Vereinfachung

Um Bildbeschreibungen mit Variante 1 in Bilder einzufügen, benötigt man eigentlich kein extra “Tool”, denn man muss ja nur den Bildnamen im BBcode mit der Bildbeschreibung zu überschreiben.

Wer es aber noch “simpler” haben möchte, kann mein kleines Python-Script Alt-Text Insert nutzen, welches eine grafische Oberfläche mittels QtSide6 zur Verfügung stellt.

Zunächst markiert man der gerade eingefügten Bild-Block mit der Maus und kopiert diesen Text in die Zwischenablage (Rechtsklick/Kontextmenü oder Strg-C).

Dann ruft man das Skript auf.

Nun ist der gerade kopierte Text im Dialog im obersten Textfeld eingetragen.

In das Feld darunter gibt man nun die Bildbeschreibung ein

und klickt danach auf den Button “Einfügen”. Nun wird im untersten Textfeld der modifizierte Bild-Block angezeigt.

Ein Klick auf den Button “Kopieren” kopiert diesen neuen Block in die Zwischenablage. Und dieser kann nun im Beitragseditor von Hubzilla einfach eingefügt werden (Rechtsklick/Kontextmenü oder Strg-V).

Fazit

Es ist kein Problem, bei Hubzilla Bilder mit Bildbeschreibungen zu versehen. Es nur leider ein klein wenig umständlich. Vielleicht wird ja das Einfügen mit dem Button um ein entsprechendes Formular ergänzt (und bei der Gelegenheit auch gleich auch im Kommentar-Editor eingebaut).

Die einfachste Methode ist das Eingeben der Bildbeschreibung zwischen die Tags

[zmg][/zmg] bzw. [img][/img].

Alternativ kann man die Bildbeschreibung auch innerhalb des öffnenden Tags [zmg=] bzw. [img=] als alt-Attribut alt= eingeben. Damit wird die Bildbeschreibung aber nicht durch Überfahren des Bildes mit der Maus als Popup angezeigt (sinnvoll bei wirklich umfangreichen Bildbeschreibungen, die das Bild ansonsten teilweise massiv überdecken).

Wer es ganz “mundgerecht” haben möchte, kann mein Python-Skript zur weiteren Vereinfachung nutzen.