WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: emojis and screen readers

for

From: L Snider
Date: Jun 2, 2017 10:36AM

Hi Birkir,

Thanks, good to know!

Cheers

Lisa

On Fri, Jun 2, 2017 at 11:14 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

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