414387 - Emoticon graphics don't have alt text

Status: RESOLVED FIXED

(Other Applications Graveyard :: ChatZilla, defect)

Description

[Marco Zehe (:MarcoZ)]

When converting an emoticon such as :-) to a graphic, the graphic does not get alt text, and thus it will be ignored by screen readers by default. Suggestion: Use the original characters that made up the emoticon as the alt text.

Comment 1

[:Gijs (he/him)]

So as I was busy telling you on IRC, the emoticons can't actually have alt text because they're content in a pseudo class. I don't remember the exact reasons why they're not just images, though I'm sure I've asked at some point (maybe more than once!) and there *was* a reasonable reason for it. But I doubt we can add alt text on the CSS pseudo-classes, and I doubt that adding an alt-attribute to the <span> which we use for the emoticon text will help anything, given it's display:hidden;

As a workaround, you can simply turn off emoticons in the preference window.

Comment 2

[James Ross]

Two spans are used:

<span class="chatzilla-emote-txt" type="face-smile"> :) </span><span class="chatzilla-emote" type="face-smile" title=" :) "/>

The first span is display: none, the second has generated content to show the correct image. The text inside the first span is still copied into selections - that is why it is done like that. I can quite see the screen readers not reading the hidden text, but why don't they read the title?

Comment 3

[Aaron Leventhal]

Does the second one use a background image then?

That would be why.

Comment 4

[James Ross]

It uses generated content, as I said; specifically:
  :after { content: url(...); }

Comment 5

[Aaron Leventhal]

Right, we wouldn't use the title in that case.

Can you try role="image" on it? I think that will fix it:

<span class="chatzilla-emote" role="image" type="face-smile" title=" :) "/>

Comment 6

[James Ross]

Unfortunately, FireVox doesn't want to read out emoticons even when they're just plain text, and I can't find an option to change that (sometimes it reads some of the characters, but never all).

Any ideas on an actual way I can test this at all?

P.S. Listening to FireVox read out JavaScript code is highly amusing. :)

Comment 7

[James Ross]

Actually, I just realised that if it's reading some, I can test it. FireVox still omits the majority of the punctuation involved, but it does read some of the title out with role="image", so I guess we have a fix.

Comment 8

[Aaron Leventhal]

And since Fire Vox uses the DOM it's really a different test from what normal users have.

You can have Marco test this fix with a screen reader like JAWS.

Comment 9

[James Ross]

OK, so forget that test I did; FireVox is reading out the title *anyway*. Sigh.

If anyone has a real way to test this, please try out the version below and let us know. It is the currently trunk code plus role="image".

  http://twpol.dyndns.org/temp/chatzilla-0.9.80-bug414387.xpi

Comment 10

[:Gijs (he/him)]

I verified in Accessible Explorer that the fix works. On trunk, it actually figures out it's an image, but even on branch (where it thinks it's a span) it does show the text in the "name" field, which I believe is the desired behaviour. On both trunk and branch, before this fix, it simply didn't think there was anything there :-).

James, if you could attach the patch you used for that build, that'd be excellent!

Comment 11

[James Ross]

Attachment: Add role=image to emoticons

Comment 12

[:Gijs (he/him)]

Comment on attachment 302665 [details] [diff] [review]
Add role=image to emoticons

r=me

Now if only the tree wasn't closed. :-)

Comment 13

[James Ross]

Checked in --> FIXED.