Don’t Use Fake Bold or Italic in Social Media

I posted something on Mastodon that uses Unicode math symbols to produce fake bold and fake italic text. I used YayText.com to generate it, but I am not linking it because you I don’t want you to use it.

I embedded the post, but you can go to it directly if you prefer.

Then I recorded the screen reader output.

NVDA 2024.4.2 / Firefox 135. Doesn’t announce the fake bold nor fake italic.
JAWS 2025 / Chrome 133. Announces each fake bold and fake italic letter individually, including its case and style.

Those two videos account for ~78% of primary screen reader use. You could stop there and you’d have a good sense of the divergent experience and how it doesn’t match up with the visible text as you might expect.

This is not new information. I was raising this as a concern back in 2018 when Twitter was not yet a Nazi bar.

I know it’s easy to want to blame screen readers. That reflex, however, is a mistake. Instead, as an author you have some responsibility here.

VoiceOver / macOS 15.3.1 / Safari 18.3. Doesn’t announce the fake bold nor fake italic.
Narrator / Windows 11 24H2 / Edge 133. Doesn’t announce the fake bold nor fake italic.

I’m using default settings. Some users will have different settings, but understand screen reader users have the same range of skill & experience with their kit as everyone else has with their own kit.

Try with your built-in screen reader. You have one built into whatever system you are using to read this post (unless you printed it to dead tree pulp, like a boss). If you are unfamiliar with the commands, such as starting it or navigating, I have some screen reader documentation and resources.

VoiceOver / iPadOS 18.3.1 / Safari. Doesn’t announce the fake bold nor fake italic.
TalkBack 15.2 / Chrome 133. Announces the fake bold and fake italic as if it is regular text. TalkBack started doing this in 2021.

I’ve shared six screen reader experiences.

The takeaway should be do not use sites like YayText to make fake bold or italic text (whether on Bluesky, LinkedIn, that Nazi bar, that other Nazi bar, or the yet other Nazi bar, etc.).

If you’re a tester, you may see the speech logs show the characters. These are lies because that doesn’t mean they are announced.

For comparison, this is what it would look like if it was marked up using HTML (and yes, some Masto instances support this) instead of math symbols:

Please do not eat the shrimp scampi in the fridge. It is tasty but will kill you.

All screen readers announce all those words, even if they don’t all expose the bold or italic styling by default.

Now…

Imagine your local government sends this:

Imagine the impact on screen reader users.

Actually, you don’t have to imagine. I recorded the behavior in 2021. It’s mot much different today and the examples above will help you guess even if you don’t read that post or try it yourself.

2 Comments

Reply

Perhaps an analogy for sighted people might be to ask “what if somebody sent you a message where the shapes of emoji symbols encoded the words and their meanings: how would you feel if your device’s emoji font rendered them differently, turning a J-shaped banana (🍌) into an I-shaped or L-shaped one?”.

Or maybe “what if somebody encoded their message as ASCII-art, but when you view it on the narrow screen of your phone it’s completely unreadable?”.

Neither of these are great analogies, but maybe there’s something in there somewhere…

Reply

OH GOD!

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…

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>