⚛️ building accessible emoji for this blog

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.

Usage:

<Emoji label="atom" symbol="⚛️" />

Which ouputs:

<span role="img" aria-label="atom">⚛️</span>