Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Unit tests

Plugin for Remark to make emoji accessible. This plugin wraps emoji in a <span> and sets the name of the emoji as aria-label. For example, the input inline 🎉 emoji becomes:

inline <span role="img" aria-label="party popper">🎉</span> emoji

remark-a11y-emoji also works with Gatsby.

Made by 👨‍💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.

Table of Contents

  1. Installation
  2. Configuration
  3. Configuration with Gatsby
  4. Code of Conduct
  5. Contributing
  6. License
  7. Change-log


You need to install @fec/remark-a11y-emoji with NPM or Yarn. Since this is a plugin for Remark, I assume you already have Remark installed and configured.

npm install -D @fec/remark-a11y-emoji
yarn add --dev @fec/remark-a11y-emoji


You can use @fec/remark-a11y-emoji like any other Remark plugin. The plugin produces an AST (hast, rehype), which you can serialize to HTML with rehype-stringify:

import remark from 'remark';
import a11yEmoji from '@fec/remark-a11y-emoji';
import rehypeStringify from 'rehype-stringify';
import remarkRehype from 'remark-rehype';

const processor = remark()

Configuration with Gatsby

module.exports = {
  // ...
  plugins: [
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // ...

Code of Conduct



To contribute to @fec/remark-a11y-emoji, follow these steps:

  1. Fork this repository.
  2. Create a branch: git checkout -b <branch_name>.
  3. Install dependencies: npm install
  4. Make your changes (and don’t forget to update the tests)
  5. Don’t forgot to run the tests: npm test
  6. Commit your changes: git commit -m '<commit_message>'
  7. Push to the original branch: git push origin <project_name>/<location>
  8. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.



Change log


© 2023 Gatsby, Inc.