I, like a lot of folks these days make heavy use of emoji's in text communication throughout the day. I was about to add an emoji within a new post on this site and remembered that there are some limitations of how emojis work on the web, requiring a bit more work.
Since my blog is built on top of MDX, I built a small React component that takes a
label and a
symbol as props and returns markup to be used by screen readers.
<Emoji label="bacon" symbol="🥓" />
<span role="img" aria-label="bacon">🥓</span>