Random Notes

Unicode contains a lot of great and useful things. And as things tend to go, people find creative uses for them. It's currently trendy to use some of Unicode's special characters for "font effects", 𝕝𝕚𝕜𝕖 𝕥𝕙𝕚𝕤 𝕖𝕩𝕒𝕞𝕡𝕝𝕖 (assuming you have good font support, you should see cool double struck letters reading "like this example"). There are easy converters available for finding out the best styles.

This poses an accessibility problem. What happens when a screen reader meets such content? Let's take as an example this text (those using a screen reader may want to skip the following part):

Moderator: ⒺⓛⓘⓧⓘⓡⓅⓡⓞ.

Here a moderator called ElixirPro has decided to stylize their nickname, making it very cool looking indeed. Below is what it sounds as read by VoiceOver (sorry for the bad audio quality, I had to record it with the laptop's own mic):

Not so great. Each character here is semantically a circled latin letter from the Enclosed Alphanumerics block, and to a screen reader they do not form a readable word. Thus the reader spits out each letter one by one. With some of these "styles" nothing is read at all, and with some others like "upside down text" the readout is nonsense. It's easy to imagine the detrimental effect this can have for a user's ability to understand the content. The addition of emojis to the mix surely doesn't help.

What to do about it? For images we have the alt attribute, that can be set to give a description of the image. Or we could use a figure and figcaption to the same effect (even though it's not totally the same).

I propose that services like social media should offer a kind of alternative text feature for content such as nicknames, where users may wish to use emoji and special characters to personalise it. This alternative text also filled by the user would disallow using special (non-readable or non-semantic) characters and would possibly show HTML like the following (note that I'm no ARIA expert so there may be better ways to do this):

<span aria-label="Nicd">
  <span aria-hidden="true">⒩⒤⒞⒟</span>
</span>

This would work similarly to the already existing alternative text systems for images. Using this we could have the best of both worlds. I intend to implement something like this eventually in Code::Stats.

As for now, I removed the upside down text from my Twitter nickname and use normal text. If there was an alt text feature, I'd use that and get my flipped text back because it's totally cool.