SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Zeichencodierung/Fake Bold

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In vielen Social Media-Netzwerken kann man Text posten - diesen aber leider nicht formatieren. Vermeintlich schnelle Abhilfe schaffen Online-Generatoren, die die Buchstaben des Alphabets durch ähnlich aussehende Unicode-Glyphen ersetzen und sich mit Copy & Paste in Posts einsetzen lassen.

Allerdings ergibt sich hier ein Problem: Diese Glyphen sehen zwar fast wie unsere Buchstaben aus, sind als typografische Variationen aber in den Unicode-Blöcken wie Mathematical Alphanumeric Symbols, Enclosed Alphanumerics oder Gothic Letter Forms angesiedelt und habe dadurch eine andere Bedeutung.

Während ein Sehender diese Glyphen als ähnlich erkennt, sind sie für Screenreader ohne Bedeutung![1]

Ein Verwendung solcher Zeichen führt dazu, dass Nicht-Sehende, aber auch Sehende, die sich z.B. während des Autofahrens Webseiten vorlesen lassen, keine oder falsche Informationen erhalten.


Dekorative Unicodeschrift und Web Speech ansehen …
Achtung! Achtung!
𝔻𝕒𝕤 𝕚𝕤𝕥 𝕖𝕚𝕟 𝕊𝕚𝕔𝕙𝕖𝕣𝕙𝕖𝕚𝕥𝕤𝕙𝕚𝕟𝕨𝕖𝕚𝕤!
Bitte 𝐧𝐢𝐜𝐡𝐭 nachmachen!

Wie du im Beispiel hören kannst, werden die typografischen Variationen ausgelassen, was bei der Warnung zu einer Bedeutungsänderung führt! Auch bei VoiceOver werden die „dekorativen“ Glyphen nicht vorgelesen. TalkBack (für Chrome) und Android lesen einige dieser Glyphen als normalen Text vor.

Manche Screenreader lesen anstelle der Glyphen die Codepoints vor, was bei einem Braille-Terminal mit 40 Zeichen Breite schnell überwältigend wirkt.[2]


barrierefreie Alternativtexte

Die folgenden Lösungen funktionieren nur, wenn du das HTML der Webseite verändern kannst, was bei Social Media nicht der Fall ist.

Mit aria-hidden="true" kann man rein dekorativen Text vor Screenreadern verstecken:

<span aria-hidden="true">𝕯𝖊𝖐𝖔𝖗𝖆𝖙𝖎𝖛𝖊 𝕾𝖈𝖍𝖗𝖎𝖋𝖙</span>

Dies ist allerdings nur möglich, wenn der Text nur zur visuellen Gestaltung dient und keine Bedeutung hat.

Allerdings kann man zusätzlich eine lesbare Version zur Verfügung stellen:

<span aria-hidden="true">𝕯𝖊𝖐𝖔𝖗𝖆𝖙𝖎𝖛𝖊 𝕾𝖈𝖍𝖗𝖎𝖋𝖙</span>
<span class="visually-hidden">Dekorative Schrift</span>

Zusätzlich zum Dekorationstext wird ein weiterer span eingesetzt, der mit der Klasse .visually-hidden visuell versteckt wird. Screenreader lesen anstelle der Unicode-Stilisierungen diesen Text vorlesen.

Beachte: Eigentlich müsste doch ein aria-label-Attribut den gleichen Zweck erfüllen. Dies ist allerdings nur bei interaktiven Elementen wie Buttons und labels erlaubt und wird deshalb von VoiceOver und anderen Screenreadern verschluckt.
Das Hinzufügen einer role=img wäre hier auch nicht passend.
--Matthias Scharwies (Diskussion) 22:41, 23. Mär. 2025 (CET)


Auch bei ASCII-Art wären solche Alternativtexte nützlich.

Nicht unser Problem?

Dieser Artikel sollte das Bewusstsein dafür wecken, dass Autoren dafür verantwortlich sind, dass sie Inhalte so erstellen, die für alle zugänglich sind.

Wenn man Inhalte aus den obenen genannten Gründen nicht semantisch auszeichnen kann, sollte man auch auf diese falschen Glyphen verzichten.

Leider kommt es in den Kommentarspalten dann immer zu Diskussionen:

Sollten Screenreader nicht …

…erkennen, was viele Leute meinen?

Wenn viele Personen die Unicode-Zeichen aus speziellen Schriftbereichen nutzen um „normale“ Buchstaben darzustellen, sollten die Programme doch so aktualisiert werden, dass sie den „richtigen“ Text vorlesen?

Dies lässt außer Acht, dass viele der Zeichen und Emojis bereits vorher eine Bedeutung hattne, die im Netz dann anders verwendet wird. Adrian Roselli stellt dies am Twitter-Trend, problematische Sachverhalte mit einem Red Flag 🚩 als Warnung zu versehen, vor. Dieses Emoji hat bereits die Bedeutung triangular flag on post und stellt so eben keine Warnung dar.[3]

Sollte das Fediverse nicht …

…Posts in Markdown formatieren können?

Das Fediverse besteht eben nicht nur aus Mastodon. Es ist bereits heute möglich, mit einem Mastodon-Fork (z.B. Pleroma, Akkoma, etc), Posts in Markdown zu formatieren und dann in Mastodon korrekt anzuzeigen - es lässt sich dort nur keine Formatierung eingeben.

ToDo (weitere ToDos)

Artikel folgt! --Matthias Scharwies (Diskussion) 05:47, 24. Mär. 2025 (CET)

Weblinks

  1. Don’t Use Fake Bold or Italic in Social Media Adrian Roselli, 09.03.2025
  2. I just used my refreshable Braille display to view that Mastodon post and the result is absolutely horrendous. Basically, two scenarios:
    1. The “bold/italic” text gets replaced entirely with question marks or “Cannot render this character” placeholders – as if it was an unsupported font (which it sort of is – the braille table can’t handle them). Or
    2. With Liblouis, they turn into the unicode code points of the respective characters, like so: ‘\x173e’ (eight braille blocks per character). For context’s sake… The average braille display has 40 blocks…
    Tim Böttcher , 08.03.2025
  3. Blaming Screen Readers 🚩 Adrian Roselli