In terms of actual emoji, I *believe* screen readers will read off an actual description of the emoji, based upon the unicode description. i.e., 💗would be described as 'growing heart.'

In terms of a string of characters as an emoticon, aria-label would be my first thought:

<span aria-label="smiling person with flower in their hair">(✿◠‿◠)</span>

But as ellvix said, aria-labels on spans may not be reliable, so consider adding the text description into the page, but visually hiding it. BUT, we can't use the CSS visibility or display properties, as they'll also prevent screen readers from picking up on the content, so we'll have to rely upon some old-hat techniques of positioning the content off the page. *Do not do this* if the element is interactable (button, link) *without* also positioning it appropriately when focused.

<span aria-hidden="true">(✿◠‿◠)</span>
<span class="visually-hidden">emoticon: "smiling person with flower in their hair"</span>

.visually-hidden {
position: absolute;
left: -999rem;
height: 1px;
width: 1px;
overflow: hidden;
}

If someone else wants to chime in, I'm curious how screen readers would handle elements with visibility and aria-hidden, such as:

<span aria-hidden="false" style="visibility: hidden;">emoticon: "smiling person with flower in their hair"</span>

If this approach is valid, I'd prefer it over the positioning off of the page.

(I am not blind, but I am a web developer who cares about accessibility.)

The aria-label, aria-labelledby, and aria-describedby attributes won't work with <div> and <span> elements unless they have a suitable role attribute. See the $1 for more on this.

I guess you could mark up the emoticon with a role="img" attribute and then use an aria-label attribute to give it an accessible name. That's a lot less hassle than dealing with extra visually-hidden text content. So:

<p>Today I saw a <span aria-label="smiling person with flower in their hair" role="img">(✿◠‿◠)</span></p>

Use an extra invisible span that can be read by a screen reader. Look up the .sr-only class in Bootstrap, for example.

[deleted]

you could add an aria-label, that overrides the content of the span with the new value for screenreaders only. Only way I can think of to do this for a span.