WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: emojis and screen readers

for

From: Birkir R. Gunnarsson
Date: Jun 2, 2017 10:14AM

I like this post (and the post it links to) for HtML techniques to
make emojis accessible:

http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html

When you use emojis within Voiceover, and certain iOS and Windows
apps, they've been assigned alternative text (just turn on Voiceover
and bring up texting on your iPhone and select the emoji keyboard, you
will see a lot of symbols with creative text alternatives "smiling
pile of poo" is my favorite).
On the web I guess it is up to the website authors whether they bother
implementing emojis with text alternatives . I don't think the
standard libraries come with them (Font Awesome even recommends hiding
the icons altogether from screen readers using aria-hidden).



On 6/2/17, L Snider < <EMAIL REMOVED> > wrote:
> Hi Nick,
>
> That was great, thanks. I did wonder if they worked well in some places and
> not others, good to know! I am just updating my computer, so I can't check,
> but what have you experienced with Instagram? I know people use them a lot
> there...
>
> Cheers
>
> Lisa
>
> On Fri, Jun 2, 2017 at 10:54 AM, Beranek, Nicholas <
> <EMAIL REMOVED> > wrote:
>
>> Hi Lisa,
>>
>> In my experience, they are handled well on a few sites, and abysmally on
>> others. iOS emojis in texts, etc, are done pretty well and have alt text
>> for each. Take the following example from Twitter:
>>
>> <img class="Emoji Emoji--forText" src="https://abs.twimg.com/
>> emoji/v2/72x72/1f602.png" draggable="false" alt="😂" title="Face with
>> tears of joy" aria-label="Emoji: Face with tears of joy">
>>
>> What I found most interesting was they repeated the emoji itself within
>> the alt attribute, but they provided an aria-label that overrides it in
>> VoiceOver. Therefore, it reads 'Emoji: Face with tears of joy, image-.
>>
>> Facebook, however, is not doing anything for them, including the reaction
>> emojis. Take their example:
>>
>> <span class="_47e3 _5mfr"><img aria-hidden="true" height="16" src="
>> https://www.facebook.com/images/emoji.php/v9/fe9/2/16/1f640.png"
>> width="16" alt="" class="img"><span class="_7oe">ðŸ™</span></span>
>>
>> Their alternative, the <span> with the emoji, is relying on itself to
>> convey meaning instead of providing the text alternative. That isn't
>> supported with at least macOS VoiceOver.
>>
>> Hope this helps,
>>
>> Nick
>>
>> --
>> Nick Beranek
>> Digital Accessibility Team
>> Capital One
>>
>> On 6/2/17, 11:45 AM, "WebAIM-Forum on behalf of L Snider" <
>> <EMAIL REMOVED> on behalf of <EMAIL REMOVED> >
>> wrote:
>>
>> Hi Everyone,
>>
>> I have been doing some reading on emojis and found that some people
>> say
>> they could usually read them with screen readers.
>>
>> Today, people use emojis a lot on Twitter, Facebook and in emails. Do
>> they
>> come with alts already with them? or are they problematic?
>>
>> Cheers
>>
>> Lisa
>> >> >> >> >>
>>
>> >>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The information
>> transmitted herewith is intended only for use by the individual or entity
>> to which it is addressed. If the reader of this message is not the
>> intended
>> recipient, you are hereby notified that any review, retransmission,
>> dissemination, distribution, copying or other use of, or taking of any
>> action in reliance upon this information is strictly prohibited. If you
>> have received this communication in error, please contact the sender and
>> delete the material from your computer.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.