Define a way to declare alternative text for other things than images (such as emojis)

[AndersEkl]

Originally written by @josteinaj

For instance, something such as:

<p>Hurray! 😃</p>

<p>Hurray!
  <span class="sr-only">smiling face with open mouth</span>
  <span class="sr-none">😃</span>
</p>

<!-- based on martinpubs suggestion: -->
<p>Hurray! <span role="img" aria-label="smiling face with open mouth">😃</span></p>

…or something

See: nlbdev/nlbpub#13

EDIT: added martinpubs suggestion

Comment by @martinpub

One solution: https://tink.uk/accessible-emoji/

Comment by @josteinaj

For comparison, here is how Github does it if you insert an emoji:

Github markdown: :shrug:

Github turns it into this HTML:

<g-emoji class="g-emoji"
         alias="shrug"
         fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f937.png">
    <img class="emoji"
         alt="shrug"
         src="https://github.githubassets.com/images/icons/emoji/unicode/1f937.png"
         width="20"
         height="20"/>
</g-emoji>

Result: 🤷

The g-emoji tag is a non-standard Github tag, probably with some associated CSS and Javascript. I don't know what its purpose is.

The img tag has the alt text "shrug".

[martinpub]

See also #19. Check how well emojis are supported in screen readers.

If the scope is wider than emojis, what are some other examples @josteinaj?

[josteinaj]

I think this is pretty much the same issue, so maybe they can be merged.

I suppose there could be small images in the text that are not unicode emojis, and which would be useful to have an alternative text for. But I can't think of any concrete examples.