Accessible Emojis with Gatsby

Everyone loves emoji 💯🎉🔥, but if you use eslint-plugin-jsx-a11y to check the accessibility of your JSX you probably know that emoji need special handling to become accessible. Instead of just writing the emoji, you need to wrap it in a span and add role="img" and aria-labelledby attributes.

<span role="img" aria-label="guitar">
  🎸
</span>

When writing blog posts in Markdown I don't want to wrap every emoji in a <span> and therefore I created a plugin for Gatsby to automatically wrap emoji with the correct label. The plugin is called gatsby-remark-a11y-emoji and uses gemoji to find the label for an emoji.

You can install the plugin now using NPM or Yarn:

npm install --save gatsby-remark-a11y-emoji

Then you need to add the plugin to gatsby-config.js as a plugin to gatsby-transformer-remark. I recommend adding it at the very end of the list, because the plugin transforms Remark text nodes into html nodes.

module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // ...
          'gatsby-remark-a11y-emoji',
        ],
      },
    },
  ],
};

You can also find the project on Github and NPM.