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.

[sasha_feather]

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.

Right on!

[madgastronomer]

How unhelpful, and also dickish. There are also very good reasons why we are drifting back towards simple pictorial representations. Alphabetic systems are superior at conveying some kinds of spoken languages (although there are very good reasons for various Chinese languages to be written as they are, and for Japanese to use multiple forms of writing), but pictures are better at conveying ideas in as few symbols as possible.

But "don't do it" is not a useful answer to "I have decided to do this, can someone help me figure out how to do this?"

[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]

That should work, yes. I'm not sure if I like the idea, but in terms of making the fic look right, it should work. :)

ETA: I updated the post with the results of today's reading. It's still not that images with alt text won't work...

[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]

Definite pain in the ass. I updated the post, though: it's not that images won't work...

[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?

[alexseanchai]

copied the CSS for the tooltip from the embedded thing to my work skin, attempted to save work skin, got this:

Sorry! We couldn't save this skin because:

The content property in span[role=img][aria-label]:focus::after, span[role=img][aria-label]:hover::after cannot have the value attr(aria-label), sorry!
We don't currently allow the CSS property animation -- please notify support if you think this is an error.
The content property in span[role=img][aria-label]::after cannot have the value " (" attr(aria-label) ") ", sorry!
There don't seem to be any rules for span[role=img][aria-label]::after

I'm pretty sure I don't care about the animation line, but it sounds like the aria bit is not gonna work?

[silveradept]

Got me. Trying to parse the error, it sounds like AO3's work skin doesn't like the tooltip idea at all, because it produces an animation effect?

I'd like to believe the ARIA properties should work fine, though. I don't know the underlying platform of AO3 and its ARIA support, though.

[alexseanchai]

If I take "animation: TOOLTIP .1s ease-out 1;" out of the CSS, it still goes blooie in the other three ways. And I don't know where to begin figuring out whether this is supposed to be doable on AO3 or how to do it if it is.

[silveradept]

That sounds like the thing Support requests are made for. Or if AO3 has an accessibility guide to work with, so that you can phrase things the way they want them phrased.

Also, maybe start with just span, role, and aria-label in the text, without the CSS and see if AO3 does things wrong?

[alexseanchai]

Nothing useful, further details [] tl;dr surrounding text bits with tags that will look like <span>text</span> when AO3 is done with them is not getting me anywhere

[silveradept]

Okay, now I know what's going on, and we are definitely going to be talking to Support before all is said and done.

Tl:dr; Your material is being sanitized by AO3's parser gems, if the eight years-old tutorial is still true, and it works on a permitted list, so we may have to lobby for certain things to get on the permitted list before this will work.

[alexseanchai]

...peachy.

meanwhile I don't want to put off posting until Support comes through. images with alt text it probably is, then.

*goes draft support request*

[silveradept]

Regrettably, yes. Sorry.

[alexseanchai]

eh, not your fault. probably nobody's fault, it's just images consisting of nothing but text is bad practice and annoys me, and everything in Unicode is supposed to be or work like text!

[silveradept]

Yep, and also implementations, specifications, security risks, and the like. Since this is about accessibility, hopefully it's a technically simple fix that can happen after the proper debate and discussion happens about whether to allow it or not.

[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?

[alexseanchai]

Not all of my characters who read and write hanzi speak Mandarin. Pinyin conveys the Mandarin pronunciation, not the Wenzhounese.

...I mean I'm approximately fucked on Wenzhounese pronunciation anyway? There are apparently zero resources on the interwebs. Like, Wiktionary gives me the Wu pronunciation of 敏, which might be close enough to the same as Wenzhounese to work for me, but on 嵐 I don't even get that. And Wiktionary is possibly the most comprehensive such resource for this purpose out there!

So like. I'll happily use the pinyin in dialogue from a Mandarin speaker or narration from a Mandarin-speaking PoV. But even if I'm stuck with hacky workarounds for conveying the Wenzhounese, some of the things will be epistolary-type.

[hitokage]

Ok, vocab misstep on my part, sorry, I haven't worked in Chinese up to now. ^^

I mean, I could ask the c-novel server I'm on if any of them are familiar with the Wenzhou dialect or can point to resources that aren't in Chinese? I don't know that I'll have any success, they seem to be a more Mandarin/Cantonese/Shanghaiese group, but I can put it out there.....

I suppose the better way to phrase it is that I'm a bit confused why you're tearing your hair out to use hanzi in the first place when the conventions would say translate or transliterate (although since you're having trouble with dialect, transliteration is an issue, I get that), especially when hanzi are an optional language installation in some environments and so may not be universally viable in the first place?

and wow did this take me forever to words because ugh words and I'm still not sure I'm wordsing right, but I need to stop before I erase everything yet again
(And if your fandom is supportive of using the hanzi, I'll shut up now and go putter in the garden or something XD)

[alexseanchai]

I have no idea my fandom's idea on the matter.

(Or, well, I do, and it's pretty racist and I don't wanna pay attention to it. Marinette canonically doesn't speak Mandarin? Fine. Doesn't make any sense that the only language she has in common with her uncle on the Chinese side of her family is French*, or that she knows zero Asian people who she could ask about being a Mandarin translator while her uncle's in the city, but fine, she doesn't speak Mandarin. She speaks the most common language among the Chinese diasporic population in Paris, fight me.)

I know my brain says This Is How It Will Be and I don't want to fight it. :D

I appreciate the offer to ask around. Not sure it will help—apparently Wenzhounese is so distinct from everything else in the area that Wenzhou speakers have played the same wartime role as Navajo code-talkers—but I would be grateful were you to ask, and triply grateful if anyone finds anything.


* or English, or possibly both? localization is weird. he has a really shaky grasp on the language she uses daily, anyway.

[hitokage]

Still waiting for additional input from the diaspora Chinese on the server (especially from other time zones), but so far the input suggests she should be able to at least somewhat speak whichever dialect her parents/family use and if her family doesn't use Mandarin primarily, then she'd learn the Mandarin dialect around high school age, so that part could line up with canon? It would, I imagine, also depend on if she grew up in a diaspora community or not.

Well, once the brain weasels get that dug in.... XD

[alexseanchai]

Not a diaspora community, no. The people of Asian ancestry on this show are Marinette, her mother, her uncle, Kagami, her mother, Kim, and Fu. Possibly Mireille but I'm not confident in that assertion. That's lots, but that's also like. Not lots? Two relatives, one of whom is visiting from out of the country, plus two or three schoolmates and an attached parent, plus the wise old mentor she didn't even properly meet until S2. Not a diaspora community.

In canon she's in the last year of the French equivalent of middle school. I'm putting her a couple years older in this fic, because if the series started with her in the last year at that school, then the fact one character has canonically had two birthdays should put her in the next school up! But one presumes that to be a different building with different staff, and that has not canonically happened, and also Adrien wouldn't still be saying it's his first year not being home-schooled if he'd done a whole year in collège and was now in lycée. (This show's timeline makes my head hurt.) I can alter a line I've already got to have her beginning to learn Mandarin, rather than not wanting to make the attempt because she has too much else going on, and that ramps up her stress so it's a good change for plot reasons too.

This does not resolve my conundrum about Wenzhounese (though it does add emphasis to my decision that Marinette speaks it with her mother), but please convey my gratitude nonetheless :)

[alexseanchai]

fun fact: there's an app for that

it has a lot of friends, too

(not entirely sure what I was thinking at oh-dark-hundred when I went on the Play Store but clearly this was a good life choice)