AO3 emoji accessibility

[alexseanchai]

So one of my AO3 readers is a screenreader user, and she tells me her laptop does not play nice with emoji. (Her phone does, but that's not the point.) One of my Dreamwidth readers tells me that of these six emoji, 😸🥐🥗🚰🤒🦗, on her Windows 7 computer she sees two; the other four show up as the "Windows cannot identify this character" box. And at the size the emoji are displaying for me, I can't visually identify any of them. I know what five of them are without pasting them into Google, but that's because I know what I was doing last night when I was working on this fic; before googling, I cannot remember which cat face I used.

[Left to right: grinning cat with smiling eyes, croissant, green salad, potable water, face with thermometer, cricket. If I did not already know that was a cricket, I would wonder why there is an emoji of a queasy chicken.]

AO3 Work Skins/Tutorials series has, under the iOS text mockups one, a workaround for AO3 being uncooperative with emojis. Vintage 2016. As of November 2018, AO3 and emojis get along fine. HTML and I also get along fine, provided I can get to w3schools; CSS and I do not, and what we're relying on in those tutorials (and also in Repository) to get the visual effect of the iOS text messaging or whatever, without sacrificing accessibility for readers of downloaded fic copies et cetera, is AO3 work skins with CSS. Now, this workaround has image descriptions in for emoji (using the title attribute), so presumably there is a way to make the emoji accessible for all concerned, though the workaround is no longer necessary in order to make the emoji appear at all without eating everything later in the fic.

(I absolutely did not notice in October 2018 that only the first scene of the last part of something I posted that August was up on AO3. Nope. Certainly not.)

...So how do I do this?

(I'm linking this post in this comment thread, so anything we work out here is also there for the benefit of any other people turning to that AO3 tutorial for emoji help. So you know.)

ETA: Having been reminded by an article on image alt text best practices that the title attribute is approximately useless to users of either screenreaders or touchscreens, it follows that the above-mentioned workaround for emoji on pre–November 2018 AO3 was never useful for screenreader users at all—or touchscreen users, whom it hadn't occurred to me to worry about. (They type wryly, on their tablet's touchscreen keyboard.) So I'm suddenly a lot less sure my question has an answer. Also, using a span tag with a title attribute to handle transliteration and translation of hanzi, like I'm doing here with 敏嵐, clearly isn't going to work either! Which expands the scope of my original question somewhat... (I'm copying that HTML into a comment below.)

With the emoji, the workaround stellar_dust and sylvaine suggest of images with alt text should indeed work. I'm still looking for a way to treat emoji as, essentially, text, because they're Unicode and that makes them essentially text, right? The hanzi, though, those are text, there is no question of it. I seriously do not want to screenshot the hanzi in order to embed an image with alt text if there is any way to avoid that while keeping the transliteration and translation attached to these bits of text!

(...the Mandarin transliteration, anyway, as found on Wiktionary. But this isn't where to ask about where to find the Wenzhounese transliterations my fic is more in need of...)

Comments

[claudeb]

Same issue on Mageia Linux 4: I can only see the smiling cat face and the... potable water symbol? How am I supposed to even parse that tiny mess, never mind know what it means?

My suggestion is to remember why alphabetic writing systems left ideograms and hieroglyphs in the dust, and just stick to plain old text, with simple smilies at most.

[jazzyjj]

At first glance I'd have to agree with the previous comment. I'm up a bit early to buzz in my cleaning lady, and to pick up where I left off last night in a book about psychology and psychiatry. But I will have some free time later today so will try and have a look. I have an AO3 account but haven't done much on there at all, only due to time constraints. But what I can tell you is that VoiceOver on my mid-2013 MacBook Air running the latest build of Mojave plays nicely with at least most emoji. I have the latest build of Chromevox Classic on here too, but sadly I cannot get it to read any emoji properly. I only got my iPhone last year and haven't had as much time with it as I perhaps should, but I think there's a command/gesture for describing these things. There's one for doing so on the Mac though. If anyone here is in need of that command, just ask and I'm happy to help. Also I saw a website about this in a recent issue of a technology newsletter to which I'm subscribed.

[mdlbear]

I can see all six (Firefox on Ubuntu 18.04), but they look like cat, banana, grey blob, water faucet (which I can only identify as such because you said that's what it is), face with indeciferable expression, some kind of animal.

[stellar_dust]

Another possible workaround: instead of directly using emojis, do a screen grab and post it as an embedded image. It requires external hosting (and alt text (etc) to make it accessible), but at least that way when people can see the image, it will look the same to everyone, with none of that "is it a glass or is it a faucet?" nonsense. I can imagine that in a fic, platform-specific renderings of emoji might be important to the plot, too.

(I'm on Chrome on a PC and also only see the cat and glass of water.)

[alexseanchai]

Elsewebs I was recommended this 2016 article, which has an updated-2019 follow-up. Experiment time?

[sylvaine]

... pain in the ass, but - images with alt text?

[alexseanchai]

Here's the HTML on the hanzi in the above post, in hopeful illustration of what I'm trying to accomplish:

<span title="pinyin: Mǐnlán; the characters mean 'clever' and 'mountain mist'">敏嵐</span>

[silveradept]

There's a slightly different hack you might be able to use to get screenreaders to sit up and pay attention, by using ARIA properties to ensure that emoji are seen as images and they get alt attributes, and this of us who don't see the emoji can still get useful context: Accessible Emoji, Tweaked. It'll be some extra code to implement, but it might be the solution you're looking for for both emoji and hanzi?

[hitokage]

Ok, I have to ask what might be the obvious question here, but do you have to have the hanzi? Is there a fandom-based precedent or significant reason for not just using pinyin?