Access Fandom

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...)