WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: emojis and screen readers

for

Number of posts in this thread: 7 (In chronological order)

From: L Snider
Date: Fri, Jun 02 2017 9:45AM
Subject: emojis and screen readers
No previous message | Next message →

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

From: Beranek, Nicholas
Date: Fri, Jun 02 2017 9:54AM
Subject: Re: emojis and screen readers
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.

From: L Snider
Date: Fri, Jun 02 2017 10:05AM
Subject: Re: emojis and screen readers
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.
> > > > >

From: Birkir R. Gunnarsson
Date: Fri, Jun 02 2017 10:14AM
Subject: Re: emojis and screen readers
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.

From: Beranek, Nicholas
Date: Fri, Jun 02 2017 10:19AM
Subject: Re: emojis and screen readers
← Previous message | Next message →

It's a <span> with the emoji: <span>💪</span>

Depending on your browser and screen reader, this may or may not read for you. In VoiceOver, it reads 'flexed bicep- as you would expect. In NVDA and Firefox, it doesn't read anything. In JAWS and Chrome, the same: nothing.

--
Nick Beranek
Digital Accessibility Team

On 6/2/17, 12:05 PM, "WebAIM-Forum on behalf of L Snider" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.
> > > > >



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.

From: L Snider
Date: Fri, Jun 02 2017 10:36AM
Subject: Re: emojis and screen readers
← Previous message | Next message →

Hi Birkir,

Thanks, good to know!

Cheers

Lisa

On Fri, Jun 2, 2017 at 11:14 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.
> > > > >

From: L Snider
Date: Fri, Jun 02 2017 10:38AM
Subject: Re: emojis and screen readers
← Previous message | No next message

Hi Nick,

Thanks, I wondered if the span was causing issues.

Cheers

Lisa

On Fri, Jun 2, 2017 at 11:19 AM, Beranek, Nicholas <
= EMAIL ADDRESS REMOVED = > wrote:

> It's a <span> with the emoji: <span>💪</span>
>
> Depending on your browser and screen reader, this may or may not read for
> you. In VoiceOver, it reads 'flexed bicep- as you would expect. In NVDA and
> Firefox, it doesn't read anything. In JAWS and Chrome, the same: nothing.
>
> --
> Nick Beranek
> Digital Accessibility Team
>
> On 6/2/17, 12:05 PM, "WebAIM-Forum on behalf of L Snider" <
> = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
>
> em 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
>
>